!231 增加ukui相关设计分享与设计指南介绍文档

Merge pull request !231 from delong/master

社区产品/UKUI/UKUI组件/关于麒麟录音,你知道多少.md

@@ -0,0 +1,54 @@
+# 关于麒麟录音，你知道多少？
+录音软件，是一个以个人电脑为背景下运行的以录音为目的的电脑软件。可将电脑内部或外部声音进行录制，将录音文件保存为数码音频格式，永久保存到硬盘上。
+那么，问题来咯~
+## 麒麟系统怎么录音？麒麟系统录音功能在哪？
+随着工作和生活环境的不断变化，工作压力越来越大，工作会议越来越多，越来越多用户会使用到录音。但很用户并不了解麒麟系统录音功能，而去下载使用第三方应用。其实，麒麟系统是自带录音应用的，页面整洁，关键还操作简单。接下来教你如何正确打开&使用这款录音应用！
+
+![image1.png](./assets/麒麟录音/image1.png)
+ 
+### 【录音】应用的正确打开方式
+首先我们要有一台装有麒麟系统的电脑，点击右下角开始菜单，找到我们的录音应用:
+ 
+ ![image2.png](./assets/麒麟录音/image2.png)
+ 
+打开录音应用后，只需在操作界面点击录音的按钮，即可开始录音。
+
+![image3.png](./assets/麒麟录音/image3.png)
+ 
+录音过程中，点击[完成（蓝色）]按钮即可完成录音，也可点击[暂停]按钮暂停当前录音，点击[标记]按钮可对录音关键点就行标记，标记后的录音在播放时均有标记点展示，方便用户快速记录关键时刻。
+
+![image4.png](./assets/麒麟录音/image4.png)
+ 
+如果您不想被页面打扰，还可以开启mini模式进行录音。
+
+![image5.png](./assets/麒麟录音/image5.png)
+ 
+录制完成的录音会自动生在在录音列表里面，录制完成的音频还可以进行编辑，裁剪或重命名，非常方便实用。
+
+![image6.png](./assets/麒麟录音/image6.png)
+ 
+右击录音文件话可以查看录音文件路径哦~，方便快速拷贝或发送文件！
+
+### 【录音】——裁剪音频
+
+如果您要删除部分无用的音频，请使用“裁剪”功能。
+1. 打开录音应用，在列表中选择要裁剪的录音音频；
+2. 点击“裁剪”按钮，然后拖移蓝色裁剪控制柄以设定要裁剪的范围；
+3. 点按“播放”按钮 以检查您的编辑，然后根据需要调整裁剪控制柄；
+4. 点击“完成”按钮存为新录音或者覆盖当前录音。
+
+![image7.png](./assets/麒麟录音/image7.png)
+ 
+### 快速打开【录音】应用
+如果系统软件太多，不能及时打开【录音】应用，可以尝试用下述 2 种方法来查找操作：
+1. 打开【全局搜索】进行搜索【录音】应用；
+
+ ![image8.png](./assets/麒麟录音/image8.png)
+ 
+2. 打开【开始菜单】，在顶部搜索框进行搜索【录音】应用。
+ 
+ ![image9.png](./assets/麒麟录音/image9.png)
+
+麒麟录音是麒麟系统自研的一款应用，旨在为用户提供操作便捷、实用的轻量级应用。
+以上，关于麒麟系统自带录音应用打开&使用的正确操作，你学会了吗？
+操作简单，关键还不用下载，你不试试？

社区产品/UKUI/UKUI组件/实用技巧之触控手势.md

@@ -0,0 +1,63 @@
+# 【建议收藏】麒麟系统实用技巧之触控手势
+不少使用麒麟系统的小伙伴一定会羡慕隔壁 Mac 笔记本的触控板功能，很好的实现了滑动操
+作，切换虚拟桌面，切换多任务视图等功能，其手势操作反馈准确又操作丝滑，用后只想说，
+真香！现在，Windows11 及其配套设备也可以很好的实现触控板手势，并且还增加了 Mac 没
+有的触摸屏设备体验。今天优麒麟也解锁了触控交互，学会这些触控板手势，没有鼠标也可以
+轻松办公～
+
+今天我们主要介绍触控板操作的基础手势和进阶手势。
+## 1、 基础操作手势
+- 单指点击触控板，触发功能，例如：选择对象、打开菜单栏、执行按钮操作等。
+
+![image1](./assets/实用技巧之触控手势/image1.png)
+
+- 双指点击触控板，执行右键操作。
+
+![image2](./assets/实用技巧之触控手势/image2.png)
+例如：
+![image3](./assets/实用技巧之触控手势/image3.png)
+
+- 双指滑动，双指轻触后，上下左右滑动均可，双指向上或向下滑动执行滚动列表、滑动选择器，滑动条等组件，以及滑动查看页面。
+
+![image4](./assets/实用技巧之触控手势/image4.png)
+例如：
+![image5](./assets/实用技巧之触控手势/image5.png)
+
+## 2、 进阶操作手势（小伙伴们密切关注版本更新哟～）
+目前我们定义了高效易用的多指手势，基于用户对触摸板手势的认知，这些手势操作更加容易
+上手，也容易被发现并使用。
+
+- 三指轻点呼出全局搜索页面
+快捷打开全局搜索页面，只需三指轻轻点击。
+
+![image6](./assets/实用技巧之触控手势/image6.png)
+
+- 三指向上滑动唤醒多任务视图
+只要将手指放在触控板上向上滑动即可唤醒多任务视图。
+
+![image7](./assets/实用技巧之触控手势/image7.png)
+
+- 三指下滑最小化应用窗口
+手指下滑，就可以缩小当前打开的所有应用，回到桌面。
+
+![image8](./assets/实用技巧之触控手势/image8.png)
+
+- 三指左右滑动切换应用窗口
+三指左右任意滑动，即显示改桌面所有打开应用，再次滑动随意切换，
+
+![image9](./assets/实用技巧之触控手势/image9.png)
+
+- 四指轻点呼出侧边栏
+四指轻点，快速查看侧边栏通知好帮手。
+
+![image10](./assets/实用技巧之触控手势/image10.png)
+ 
+- 四指左右滑动切换虚拟桌面
+想要一个桌面办公，一个桌面摸鱼游戏？四指滑动即刻切换工作桌面。
+
+![image11](./assets/实用技巧之触控手势/image11.png)
+
+相信大多数小伙伴已经将集便携与生产力为一体的笔记本电脑用作主要工作和学习机器，建议
+大家将触控板手势利用起来～一个简单的操作，不仅提高了效率，并且可以体会到即时反馈带
+来的流畅体验～
+另外，请小伙伴们密切关注版本更新哦，触控交互功能将陆续上线～

社区产品/UKUI/UKUI组件/麒麟便签贴实用技巧.md

@@ -0,0 +1,70 @@
+# 如何做到不忘事、不误事？麒麟便签贴真的太实用了！
+在工作中，我们不可避免地会面对大大小小不同的事情。这些事情有些是当下必须要做的，有的是被临时塞进来的，有的是未来某个时间段要完成的......如果不能妥善处理好这些事情，可能会造成不必要的损失。
+
+我们自身工作能力并不差，却记性不好，事情一多就容易忘。有时候较重要的事项会采用纸质记录规避这类低级错误，虽然短时间内有一定效果，但随着待办的增加，纸质记录就会存在零散，找寻困难的问题。而真正的职场老手都知道工作上的事需要留有痕迹，以便未来复盘自己工作时有迹可循。但是怎样才能把控住事件记录的时效性与价值呢？
+
+最近使用麒麟系统时无意打开了一款超轻量的便签软件——便签贴，它是麒麟系统中自带的一款免费的软件，无需下载安装。
+
+![image1.jpg](./assets/麒麟便签/image1.jpg)
+ 
+## 弥补同类软件的短板
+当尝试记录几天的工作事项后，真的直接被它圈粉！
+它与其他同类软件的区别，大致可以概括为轻简、高效和安全。这三点可以说是直接弥补了市场的大部分的同类软件的短板，为什么这么自信和肯定呢？下面听小编娓娓道来！
+
+![image2.jpg](./assets/麒麟便签/image2.jpg)
+ 
+### 1.相比较word软件
+无论是微软的Office Word还是金山的WPS Office，作为基础办公软件，其基础工易上手，强排版，强扩展性等优点使得其坐拥庞大的用户群体。而功能的庞大，虽是加分项，但也让用户烦闷，也因此成就了很多简洁的文本编辑软件。
+而作为事项记录软件，其弊端也十分的明显。窗体太大，只能作为主操作区或辅助操作区，记录时干扰大，内容多时查询困难。
+
+### 2.相较于备忘录
+各个系统中的备忘录，简洁的操作，随时记录储存自己所学所想所悟，再加上其多端协同，也备受用户的青睐。但是记录个人事项的场景多于工作，多少还是会担心隐私问题。而且其窗体也较大，使用时干扰性也较大。
+
+### 3.相较于纯文本类编辑器，如记事本、notepad
+纯文本类软件有着共同的超强优势：信息可读性强，交换性强，读取速度快，设备兼容性强。但这些优点也使得其视觉感官、排版布局及图文信息成为其他软件分羹的短板。
+
+### 4.相较于市面上其他的便签软件
+任何一个软件的兴起，都满足了用户当下的新需求，弥补了主流软件的不足。而繁多软件他们都有一个共同特点：超强的协同性、易管理性。但是这些软件大多是第三方软件，会存在隐私顾虑、频繁更新、广告投放或收费服务等问题。
+
+综上对比，我们可看出这款便签贴软件，在灵感记录、事项记录方面有相当高的垂直度。且属于系统自带软件，有着很好的隐私性，不需频繁下载更新，无广告，不会引诱开通vip等等
+
+但超高的垂直度也使得它的缺点一览无余，那便是不适合庞大的文字编辑工作。总结概括就是：好用+简洁+免费+无广告=真香
+ 
+![image3.jpg](./assets/麒麟便签/image3.jpg)
+
+## 悄悄分享几个便签的使用小技巧
+### 1.桌面固定
+逐条记录待办事项，然后让它固定在自己电脑桌面某个显眼的位置，每天上班一打开电脑随时能瞄到，对待办事项一清二楚，办一件打一个勾。
+
+ ![image4.png](./assets/麒麟便签/image4.png)
+
+### 2.桌面置顶
+日常多窗口办公在所难免，加上设备屏幕尺寸的限制，不得不存在软件间或多页面之间的切换烦恼。这时只需将便签贴设置为桌面置顶，便签将始终置于桌面所有窗口之上。因便签本身比较小巧，放置在不易操作的位置，查看与记录都非常方便。
+ 
+ ![image5.png](./assets/麒麟便签/image5.png)
+
+### 3.便签列表太多，找不着往期便签怎么办？
+
+记得便签个别内容，搜索一下搜索关键词，简直不要太方便。
+- 即时结果。例如在输入「会议」等部分信息后，搜索框下方会即时反馈搜索结果。
+- 关键词联想。通过关键词的修正、推荐来帮助用户快速的缩小搜索结果。
+
+ ![image6.png](./assets/麒麟便签/image6.png)
+ 
+### 4.工作琐碎？试试分类法提升事件把控能力！
+面对急需处理小事情或临时增加的工作，我们可以借助了“四象限”时间管理法。把待办的事项分成了“重要紧急”“重要不紧急”“紧急不重要”“不重要不紧急”四个分类，设置便签的颜色用以区分。再根据自己的工作内容进行填充。一开始比较麻烦，但是归好类之后就可以高效的管理待办事项了。 
+
+另外，分享一下从职场大佬那学到的工作处理法则：
+记当天的主要工作；记领导随时交办的事情；记自己参与的活动......特别要紧的事项详细记录，先急后缓，办完为止，大事小事，急事缓事，难事易事都可能遇到。把事办好，是职责；忘事误事，则有可能影响大局。 
+
+ ![image7.png](./assets/麒麟便签/image7.png)
+ 
+最后分享一个用户体验超赞的小彩蛋，当我们鼠标焦点移出窗口时，所有可操作项直接隐藏，避免我们工作时误操作。这里真心为便签贴的细心点个赞！
+
+ ![image8.png](./assets/麒麟便签/image8.png)
+ 
+
+
+
+
+

社区产品/UKUI/UKUI组件/麒麟天气-您出行在外的贴心管家.md

@@ -0,0 +1,45 @@
+# 麒麟天气-您出行在外的贴心管家
+
+我们出行不管是出门旅游还是出差第一件事情就是查看外当天气如何，现在麒麟操作系统的桌面天气应用就可以帮助你快速查看天气了，直接在电脑桌面上就能够查看天气是不是很方便呢？不必打开网页进行繁琐的操作，麒麟天气让您的出行不再因阴晴不定的气候而烦恼。那么接下来就让小编带大家一起了解熟悉麒麟天气吧。
+
+![image1.png](./assets/麒麟天气/image1.png)
+
+## 一、麒麟天气的优势
+首先小编会先通过对比当下主流的web端和PC端第三方天气查看渠道来列举出麒麟天气的三大优势
+
+### 1.方便快捷
+
+与当下主流的web端天气相比麒麟天气无需繁琐搜索流程，只需要打开开始菜单中的应用图标就能立即获取您想要的天气信息，而且比起web端过于复杂细致的内容，麒麟天气的界面内容显然更加简洁清晰。
+麒麟天气同时兼具功能强大的搜索弹窗，无论您是想要查看其他城市的天气概要还是搜索添加多个收藏城市都可以在弹窗内完成相关操作。
+
+### 2.安全绿色
+
+用户在使用安装第三方软件时最大的顾虑便是安全问题，数据隐私保护及用户的安全一直是麒麟操作系统的行业主要优势及主打特色，作为附带应用的麒麟天气自然也遵循着这一原则：无广告、无收费、无需安装、不擅自修改主页、不频繁要求更新，更没有恼人且高危的捆绑软件。绝对安全绝对绿色绝对可靠的软件才是用户真正需要的好应用，同时为了针对不同用户的隐私需求麒麟天气还贴心的添加了开关定位功能，随时随地为您的位置隐私提供保护。
+
+### 3.界面美观，功能贴心
+作为一款天气应用就必定要考虑照顾用户的使用心情，而美观的界面则无疑会让这一体验大大提升，为此我们的设计师用心绘制了种类齐全的矢量插画作为背景图，让每位用户一打开应用就能在获得直观信息的同时也能收获一个好心情是我们的设计初衷。在功能层面麒麟天气新添加了24小时实时天气的功能，让您能够更清晰的了解当天的天气及温度变化，在此之外麒麟天气也提供了紫外线指数、空气指数、运动指数、穿衣指数推荐等人性化功能，让您的出行更具保障。
+
+# 二、版本改进
+1. UI界面优化调整
+2. 100张全套背景图更新
+3. 新增当日24小时天气查看功能
+4. 新增开关定位功能
+5. 搜索弹窗改版升级
+6. 服务器优化，加载速度提升
+
+# 三、如何使用麒麟天气
+## 1.设置天气
+首次打开天气应用请先按需求选择是否开启定位服务，开启定位天气会通过自动获取您的位置信息显示您所在位置的天气情况，如果选择不开启定位天气则会显示默认城市的天气情况，开关定位在首次设置过后也可在功能栏中随时更改设置。
+
+![image2.png](./assets/麒麟天气/image2.png)
+
+![image3.png](./assets/麒麟天气/image3.png)
+
+## 2.收藏城市
+收藏城市是个便捷的功能，将自己经常浏览的城市添加进收藏栏可以在今后更为便捷的查看当地的天气情况，那么想要将添加新的收藏城市我们首先需要点击【城市】按钮调出搜索弹窗，在弹窗上方搜索栏输入城市名称，随后点击搜索或敲动回车键进行搜索，将鼠标放置在搜索结果右侧的“➕”按钮上点击即可将城市添加至收藏栏（注：点击城市按钮其他区域仅会切换到搜索城市的天气主页并不会添加至收藏栏。）
+
+![image4.png](./assets/麒麟天气/image4.png)
+
+![image5.png](./assets/麒麟天气/image5.png)
+
+今天的内容就到此为止，感谢您的观看，希望这篇文章能对您在应用使用上起到帮助。

社区产品/UKUI/设计分享/人机界面指南之鼠标指针交互.md

@@ -0,0 +1,31 @@
+# 人机界面指南之鼠标指针交互
+
+![image1.png](./assets/人机界面指南之鼠标指针交互/image1.png)
+
+最近收到多名小伙伴反馈：系统中的鼠标指针交互反馈不清晰。麒麟整理了系统提供的标准指针样式，并对使用场景进行优化，应用可以使用这些样式来传达界面元素的交互状态或拖动操作的结果。下文除了给大家介绍目前系统提供的鼠标指针与反馈状态，还有鼠标指针设计的热知识哟～
+
+## 1.鼠标指针与交互状态
+
+![image2.png](./assets/人机界面指南之鼠标指针交互/image2.png)
+		
+![image3.png](./assets/人机界面指南之鼠标指针交互/image3.png)
+
+随着应用功能、使用场景的丰富和完善，更多鼠标指针样式可以被用来传达用户的交互操作，指针渐渐包涵了更多的信息。精细化交互场景，提供更准确明了的交互指示，我们仍在前进！
+
+## 2.麒麟鼠标指针样式
+
+在如今的系统中，用户可选择和替换鼠标指针样式已经成为“基操”，麒麟系统现提供多种鼠标指针样式，大家可以按照喜好或是配合主题颜色来选择～
+
+![image4.png](./assets/人机界面指南之鼠标指针交互/image4.png)
+
+
+## 3.鼠标指针设计“热知识”
+ 
+最后给大家来一波小科普，标准箭头光标居然是不对称的，大家有注意过吗？把箭头垂直放直很容易看出，箭头的尾巴向右倾斜。
+
+![image5.png](./assets/人机界面指南之鼠标指针交互/image5.png)
+
+
+引用网络上英特尔官方的解释是：光标右边箭头的小短线是水平的，这样可以保证给用户的视觉感受不会太过倾斜，虽然箭头视觉设计不是完全对称的，但是基本保证了视觉上的舒适性；此外，从设计的角度来看，如果中心对称的话，箭头的柄部像素很难对准，以早期的鼠标指针无反锯齿实现为标准，可能会造成边缘带有锯齿，影响美观～
+
+写在最后：如果小伙伴们对系统的鼠标交互有任何疑问和需求，欢迎留言提出建议，麒麟重视大家的每一条反馈～

社区产品/UKUI/设计分享/邮件客户端改版.md

@@ -0,0 +1,57 @@
+# 麒麟邮件客户端改版之道
+## 前言
+在麒麟桌面操作系统的生态中，我们所要服务的人群除了体量较大的企业用户，还有很多的个人用户，因此好用易用的邮箱，可以为企业和个人用户提升工作效率和使用体验，而为用户提供更好的体验是我们要持续去做的事情。
+
+![image1.jpg](./assets/麒麟邮件/image1.jpg)
+
+## 01. 背景
+邮箱作为重要的沟通工具和生产力软件，几乎每天都要使用，是用户在日常生活中与系统交互的极高频的触点。在产品不断迭代的同时，我们拓展了很多的方向，赋予了产品非常多的功能，希望能通过软件帮助用户更好的工作、生活。但随着不断的使用体验，产品的旧有布局和UI设计风格已无法承载如此负重，不能提供给用户更好更高效的体验，同时也也不适用最新的系统设计规范。在以往收集的反馈中也透漏着类似“不好用”“不知道这些东西有什么用”的声音。由此，产品和设计同学希望能够对邮箱做一次改版，提高用户满意度。
+
+
+## 02. 产品调研和问题分析
+### ·用户调研 - 明确使用场景
+深入了解我们的用户群体，和其真实的使用场景，得出用户使用的4大核心场景为「邮件收发」「日程/会议预定」「待办事项记录」「便签记录」。跟多的还是作为一个效率工具，快速解决问题。
+
+![image2.jpg](./assets/麒麟邮件/image2.jpg)
+ 
+### ·架构梳理
+将邮箱页面的架构梳理出来后，结合前面调研总结出的核心场景，就会发现整体功能偏多且无逻辑摆放在页面上，功能入口小、分散，且有些不在一个层级上，对使用会有一定损耗，没有根据使用功能进行合理放置，使新用户对邮箱的使用产生难度。
+
+### ·视觉交互梳理
+1. 结构混乱，各种功能零散的摆放，没有根据功能的类别进行合理放置，需要对功能进行重新定义。
+2. 整个UI视觉风格老旧，图标、输入框等控件老旧，严重跟不上时代，也不符合最新的V10设计规范要求
+
+### 03. 回归本质设计
+在做完大量的前期资料收集后，我们最终确定以调研中洞察到的用户最关注的两个点「效率」和「视觉」出发，做本次改版。
+
+·回归工具产品的本质——使用效率
+
+1. 简化顶部功能菜单列表，仅保留写信功能（最高频）。在正文部分的顶部，梳理所有邮件编辑的功能后，决定在这个位置只放置存档、移动邮件、删除、标记、待办功能，注重问题的解决，不做无谓的功能堆砌，分散用户精力。
+2. 重新调整邮件列表的结构，增加邮件正文内容的露出及会议日程、旗标等功能的直接显示，方便用户直接查找重要邮件及会议等安排，而不用进入到正文部分去一一查找，提升用户使用效率
+3. 重新调整邮件正文的结构，增加邮件标题、收发人等功能，将回复、回复全部、转发等常用功能从顶部导航栏移至邮件正文右上角，方便用户快速操作。
+4. 重新调整右栏简版日程的结构，有两点变化:
+一、将右栏由固定改变为可折叠，节省正文空间，优化小屏阅读效率。
+二、内容全部展开，一目了然，减少用户展开操作。
+
+
+![image3.jpg](./assets/麒麟邮件/image3.jpg)
+典型界面
+
+·回归更好的设计——视觉展现
+
+根据产品改版“五步改版法”辅助邮箱进行质的输出，从视觉层面来说，我们从用户、设计风格角度出发，对产品重新设计梳理，进行改版升级（UI、功能重新定义），到最后的规范输出，直至软件上线，达到验收和最佳使用标准。
+
+1. 调整整体布局，重构功能，增加毛玻璃效果，优化使用体验，提升效率重新绘制图标
+![image4.jpg](./assets/麒麟邮件/image4.jpg)
+首页
+![image5.jpg](./assets/麒麟邮件/image5.jpg)
+日程
+
+2. 邮件列表重新绘制，增加头像图标、部分内容的露出及会议日程、旗标等功能，根据最新V10设计规范跟新了基础控件，保证了系统内置应用的视觉一致性
+![image6.jpg](./assets/麒麟邮件/image6.jpg)
+邮件列表控件
+![image7.jpg](./assets/麒麟邮件/image7.jpg)
+日程控件
+
+### 04. 写在最后
+随着用户需求不断增多，功能不断叠加，但邮件产品的设计始终需要基于场景，我们需要不断去磨合产品形态和功能迭代。邮箱要保持易用性、高效性，必须要能快速解决用户的日常生活、办公的邮件需求。邮箱会不断地迭代升级，也希望在今后大家能多反馈意见给我们，让我们能够更好的打磨产品，关注用户体验设计，打造出属于麒麟的设计风格。

社区产品/UKUI/设计指南/color色彩.md

@@ -0,0 +1,29 @@
+## 系统主题色板
+色彩在界面设计中的使用应同时具备品牌识别性以及界面设计功能性。色彩是相当感性的东西，设计中对色彩的运用首要应考虑到品牌层面的表达，另外很重要的一点是色彩的运用应达到信息传递，动作指引，交互反馈，或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。
+
+目前系统常用到的主题颜色（如下图为系统浅色主题色板）：
+
+![image.png](./assets/color色彩/image.png)
+
+## 色彩识别
+合适的色彩对比为信息传达加分，同时也应放考虑到有颜色识别障碍人群的需求。我们将每种主色衍生出来的颜色进行了打标，在考虑对比颜色的选择时建议两种颜色对应标签数值的差要大于等于 5。（系统默认控件色对应为数字6列）
+
+![image1.png](./assets/color色彩/image1.png)
+
+## 中性色板
+中性色包含了黑、白、灰。合理地选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。
+
+![image2.png](./assets/color色彩/image2.png)
+
+## 功能色
+![image3.png](./assets/color色彩/image3.png)
+
+
+## 色彩和交互
+设计元素本身由于交互行为会引发一系列细微的视觉变化，而元素本身的颜色变化有时也能很好的实现这一目的。在进行这类设计的同时，建议采取在颜色上添加黑色或者白色并按照 n+5% 的规律递增的方式来实现。以下图为例，当鼠标 hover 某个特定元素，就视为浮起，对应颜色就相应增加白色叠加，相反点击的行为可以理解为按下去，在颜色上就相应的增加黑色的叠加。
+
+![image4.png](./assets/color色彩/image4.png)
+
+![image5.png](./assets/color色彩/image5.png)
+
+

社区产品/UKUI/设计指南/layout布局.md

@@ -0,0 +1,102 @@
+# Layout 常用布局
+## 常用布局
+布局和导航是产品的骨架，是界面的重要构成模式之一，是作为后续展开页面设计的基础，可以为产品奠定交互和视觉风格。
+### 尺寸规则
+1、上下结构：顶部 title 区高度为 40px 。
+
+![image.png](./assets/layout常用布局/image.png)
+
+顶部从左自右依次为：logo、应用标题、窗口多联（自定义、更多、最小化、最大化、关闭/退出）。
+
+<font color="red">适用于不需要导航的应用结构。（如看图工具、便签本等）</font>
+
+通常将内容放在一定尺寸（主界面建议少于1000px）内，整个界面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯。
+
+2、左右结构：侧边导航宽度的范围计算公式：200+8n 。
+
+
+![image1.png](./assets/layout常用布局/image1.png)
+
+侧边导航在界面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。
+
+<font color="red">适用于需要导航的应用结构。（如文件管理器、控制面板等）</font>
+
+侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。
+
+3、过渡结构：上左右——顶部 title 区高度为 40px，侧边导航宽度的范围计算公式：200+8n 。
+
+![image2.png](./assets/layout常用布局/image2.png)
+
+作为过渡方案的上左右结构：
+1.顶部从左自右依次为：logo、应用标题、窗口多联（自定义、更多、最小化、最大化、关闭/退出）。
+2.除去顶部的部分采用的是左右的结构，一般主导航放置于页面的左侧固定位置，内容区放置在右侧。
+
+适用于部分未从3.0升级到3.1的应用结构。（如sp2中文管，但侧边栏规则独立于其他应用）
+
+### 透明度+毛玻璃策略
+1、上下结构：
+	顶部title不透明，内容区可选择不透明或半透明，半透明区的透明度需要符合系统级透明度+毛玻璃效果的标准，并跟随控制面板中特效属性调整。
+       
+![image3.png](./assets/layout常用布局/image3.png)
+
+2、左右结构：
+       左侧侧边栏区半透明，右侧内容区不透明，半透明区的透明度需要符合系统级透明度+毛玻璃效果的标准，并跟随控制面板中特效属性调整。
+       
+![image4.png](./assets/layout常用布局/image4.png)       
+
+3、过渡结构：
+       左侧侧边栏区半透明，顶部title及右侧内容区均不透明，半透明区的透明度需要符合系统级透明度+毛玻璃效果的标准，并跟随控制面板中特效属性调整。
+       
+![image5.png](./assets/layout常用布局/image5.png)
+
+### 描边+阴影策略
+
+![image6.png](./assets/layout常用布局/image6.png)
+
+![image7.png](./assets/layout常用布局/image7.png)
+
+### 圆角策略
+
+![image8.png](./assets/layout常用布局/image8.png)
+
+![image9.png](./assets/layout常用布局/image9.png)
+
+### 分割线策略
+
+![image10.png](./assets/layout常用布局/image10.png)
+
+![image11.png](./assets/layout常用布局/image11.png)
+
+
+### 交互原则
+1、导航部分需要在可视化的层面被强调出来；
+2、当前项应该在呈现上优先级最高；
+3、当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
+4、左侧导航栏的收放交互可分为手风琴和全展开的样式，根据需求进行适当的选择。
+### 字体放大
+1、系统中支持字体和屏幕两种缩放方式，因此设计时需要考虑控件和界面留白；
+2、控制面板中字体尺寸标准为默认正文字体的尺寸，标题等可以用em表示，即相对长度单位。
+
+![image12.png](./assets/layout常用布局/image12.png)
+
+![image13.png](./assets/layout常用布局/image13.png)
+
+
+
+## 系统其他策略
+### 界面用色策略
+需要遵循主题框架色板标准，采用色板固定函数值的形式（如高亮色采用highlight值），若色板中用色无法满足需求，则采用以色板函数值为基础的颜色代码转换法（lighter&darker），不能自己写死颜色。
+1、设计师可增加色板函数值备注或者将图层名称对应的函数值，方便研发和测试查看。
+2、尽量采用主题框架标准控件，确保三态一致性，如要定制，需在主题控件的基础上用同样的写法研发。
+### 文字相关策略
+1、默认字号调整跟随控制面板设置（任务栏、计算器、日历可考虑跟随尺寸放大的策略）；
+2、文字省略方案统一为未显示部分省略成“...”；
+### 拖拽相关策略
+1、调整位置：存在补位动画的组件，需要去掉原位置上的图标，并进行补位（如任务栏、多任务视图）
+2、移动：不需要去掉原有图标
+3、复制：鼠标处图标上出现“+”（增加）图示
+### 全屏策略
+在应用非全屏状态下，调整桌面为较小的分辨率时，若应用此时的尺寸小于调整后的分辨率，则应用需自动调整为全屏模式（界面不要超出桌面尺寸范围）
+### 贴靠相关策略
+1、在应用非全屏状态下，调整桌面为较小的分辨率时，若应用此时的尺寸小于调整后的分辨率，则应用需自动调整为全屏模式（界面不要超出桌面尺寸范围）
+2、贴靠策略为圆角显示（即将窗口普通状态放在屏幕区域内显示，系统默认支持1/2和1/4贴靠显示）

社区产品/UKUI/设计指南/主题控件库.md

@@ -0,0 +1,114 @@
+# 主题控件库
+## Button 按钮
+按钮用于开始一个即时操作。
+
+### 使用场景
+标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的功能。
+● 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
+● 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
+● 禁用：行动点不可用的时候，一般需要文案解释。
+● 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。
+
+### 按钮类型
+● 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
+● 默认按钮：用于没有主次之分的一组行动点，样式同次按钮。
+● 虚线按钮：常用于添加操作。
+● 线条按钮：比默认按钮次级的按钮。
+● 文本按钮：用于最次级的行动点。
+● 链接按钮：用于作为外链的行动点。
+
+![image.png](./assets/主题控件库/image.png)
+
+### 普通按钮
+按重要性分为主按钮和次按钮。主次按钮可独立使用，不同的样式用来区别其重要程度。需要强引导用主按钮，切记主按钮在同一操作区域最多出现一次。
+
+![image1.png](./assets/主题控件库/image1.png)
+
+按功能分为普通按钮（pushbutton）和工具按钮（toolbutton）。工具按钮多用于工具栏，提供命令或选项。
+
+![image2.png](./assets/主题控件库/image2.png)
+
+### 图标按钮
+当需要在「Button」内嵌入「Icon」时，可以设置「Icon」属性，或者在「Button」内使用「Icon」组件。
+
+![image3.png](./assets/主题控件库/image3.png)
+
+### 按钮状态
+
+![image4.png](./assets/主题控件库/image4.png)
+
+![image5.png](./assets/主题控件库/image5.png)
+
+## Tabs 标签页
+选项卡切换组件。
+### 使用场景
+提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
+### 标签页类型
+● 卡片式页签， 提供可关闭的样式，常用于容器顶部。 
+● 分段式页签，由两个或多个分段的线性集合组成，每个分段都充当一个互斥按钮。既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。
+● Radio Button（单选按钮），可作为更次级的页签来使用。
+
+![image6.png](./assets/主题控件库/image6.png)
+
+
+## Input 输入框
+通过鼠标或键盘输入内容，是最基础的表单域的包装。
+### 使用场景
+● 单一输入框：需要用户输入表单域内容时。
+● 组合型输入框：提供组合型输入框，带搜索的输入框，还可以进行大小选择。
+
+![image7.png](./assets/主题控件库/image7.png)
+
+### 输入框类型
+单一输入框
+
+![image8.png](./assets/主题控件库/image8.png)
+
+### textedit 文本域
+
+![image9.png](./assets/主题控件库/image9.png)
+
+## Select 选择器
+### 使用场景
+
+● 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
+● 当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。
+
+### 选择器状态
+
+![image10.png](./assets/主题控件库/image10.png)
+
+## Slider  滑动输入条
+
+滑动型输入器，展示当前值和可选范围。
+
+### 使用场景
+当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。可为滑动条添加刻度属性。
+
+### 滑动条类型
+● 标准滑动条
+● 带输入框的滑动条：和数字输入框组件保持数据同步。
+● 带icon的滑动条：滑块左右可以用图标来表达对应的含义。
+● 分段式滑动条：不同标记间为包含或并列关系。（SDK扩展）
+● 滑动圈：圆形的滑动条。（SDK扩展）
+
+### 带输入框的滚动条
+和数字输入框组件保持同步。
+
+![image11.png](./assets/主题控件库/image11.png)
+
+### 带icon的滚动条
+滑块左右可以设置图标来表达业务含义。
+
+![image12.png](./assets/主题控件库/image12.png)
+
+### 分段式滚动条（需搭配有节点的滚动条样式）
+按节点关系，分为包含关系和并列关系两种形式。
+
+![image13.png](./assets/主题控件库/image13.png)
+
+按鼠标响应区，分为非步数、步数、节点三种形式。
+
+![image14.png](./assets/主题控件库/image14.png)
+
+