Antd 设计语言

1.全局样式

1. 色彩

   色彩体系主要分为两个层面：系统色彩体系以及产品色彩体系；系统色彩体系是系统的一些基础颜色，产品级色彩体系更多的是根据产品诉求不同而使用的颜色（像品牌色，功能色之类的）

   色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的

2. 布局

   UI界面的空间布局要基于「动态、体系化」的角度出发展开，建议从以下5个方面出发

   1. 统一的画板尺寸：统一设计板尺寸
   2. 适配方案：判断系统是否需要适配，哪些区域是需要动态布局的(1920,1440,1366,1280等)
   3. 网格单位：antd的网格基数是8（个人理解：元素之间的边距都按照8的倍数来定义）
   4. 栅格：采用的是24栅格体系，1列=1Col + 1 gutter，在设计过程中尽量清晰的定义动态布局范围，保持偶数思维，定义好关键数据交付(column和gutter等)，对区块的情谊要从column开始到column结束
   5. 常用模度：一组默认的UI布局数组，这样可以快速的实现布局设计决策(预设的一些值，比如样式的大中小号之类的就能直接参考这个了)

3. 字体

   字体主要从字体家族，主字体，字阶与行高，字重以及字体颜色几个方面进行设计。

   antd主字体是14px，对应的默认行高是22px，字阶的选择尽量控制在3-5种之间；

   字重一般只出现400(regular)，500(medium)以及在英文字体加粗情况下600(semibold)（但是有些浏览器400和500看不出来什么差别，所以还是会设置400和600）；

   正文文本、标题和背景色之间保持7:1以上的AAA级对比度

   字体系统构建的三点建议：

   1. 建立体系化的设计思路：做系统之前对主、次、辅助、标题、展示等类别的文字有一个统一的规划，再根据实际情况微调，这样系统整体性会强一些
   2. 少即是多：视觉上尽可能少的样式去实现设计目的
   3. 尝试让字体像音符一样跳跃：尝试在字阶表中跳跃的选择字体大小

4. 图标

   图标设计四个原则：准确，简单，节奏，愉悦，在调用图标时，考虑具体业务对于图形化寄予的期望，以及用户操作时的心智模型

5. 阴影

   在界面中，阴影通常会被用来告诉用户，元素之间的高度距离与层次关系，一共包括四层

   1. 第0层：紧贴地面，不设置阴影值，像输入框这种
   2. 第1层：位于低层级，一般是悬停，点击状态的反馈，当状态消失，阴影反馈也跟着消失
   3. 第2层：位于中层级，物体与基准面的关系是展开并跟随，物体是由基准面产生的，并且会跟着基准面移动，比如下拉选择
   4. 第3层：位于高层级，物体一直都在顶层，其运动也与其他层级无关，如对话框

2.设计模式

设计模式给出的是一般性的解决方案，实现跨应用交互一致性的有效融合，这样能统一认知成本，提升交互确定性和设计效率。为了适应不同的场景，模式的规则还具有一定的灵活性，设计模式包括以下原则：亲密性，对齐，对比，重复，直截了当，足不出户，简化交互，提供邀请，巧用过渡，即时反应，同时还规范了常见互动行为，如数据录入，数据展示，数据格式，文案，按钮

2.1 原则

1. 亲密性：信息之间关联性越高，它们之间的距离就应该越接近，亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然，通常8为基础间距

2. 对齐：如果页面的字段或者段落较短，较散，需要确定一个统一的视觉起点（标题和内容可以统一左对齐）；表单类对齐一般使用冒号对齐（label右对齐），用户可以顺着冒号的视觉流，找到所有填写项，提高填写效率；数字类建议所有数值取相同有效位数，并且右对齐

3. 对比：

   1. 主次关系：为了让用户在操作上快速做出判断，可以突出其中一项相对重要或者更加高频的操作(或者弱化其他项)；在需要用户慎重决策的场景，界面应尽量保持中立，不能替用户或者诱导用户做出决策(比如需要用户进行同意/驳回审批的场景)
   2. 总分关系：可以通过设置不同元素的大小，排版的布局来突出层次感，体现总分关系
   3. 状态关系对比：通过改变颜色，形状等实现状态对比(成功用绿色，失败用红色这种称为静态对比，鼠标悬停色和其他状态显示不一样视觉效果，这种称为动态对比)

4. 重复：相同元素在整个界面中的不断重复，可以有效降低用户学习成本，也能帮助用户识别元素之间的关联性，重复的元素可以是一条粗线，一种线框，某种相同颜色，设计要素，设计风格，某种格式等等

5. 直截了当：需要在哪里输出，就要允许在哪里输入

   当易读性远比易编辑性重要时，可以使用单击编辑(没有任何提示，鼠标悬停的时候显示点击编辑，点击将展示文本变为可编辑表单，可以加上确定，取消等按钮)

   当易读性为主，也要突出操作行的易编辑性时，可以使用图标/文字链接编辑(在展示文本后面加个编辑文本按钮或者图标，点击图标触发编辑效果)

6. 足不出户：能在当前页面解决的问题，就不要去其他页面解决，因为任何页面刷新和跳转都会引起变化盲视(场景中的某些变化未被观察者注意到的心理现象)

   避免滥用modal进行二次确认，可以通过Message在提示操作成功的同时给予撤销按钮；或者使用popConfirm进行二次提示，而不是弹框跳出来

   展示详情可以使用悬停的详情覆盖，输入覆盖等；列表中的详情可以通过嵌入层实现(列表中展开更多详情)

   对于流程处理，可使用渐进式展示(基于用户的操作/某种特定规则，渐进式展现不同的操作选项)的方式，也可通过提供一系列配置项帮助用户完成任务或者产品组装；或者在弹出框中使用步骤条来管理复杂流程

7. 简化交互：用户鼠标移动距离越少，对象相对目标越大，用户越容易操作

   如果某个操作非常重要，就把它放到界面中，实时可见

   如果操作不那么重要，或者实时可见会影响用户阅读时，可以使用悬停可见的形式

   如果某些操作只在特定场景显示，可以通过开关来实现(之前说的展示文本和编辑就是一个例子)

   可以适当的增加热区范围，方便用户操作，增强响应性又不失美感

8. 提供邀请：引导用户进入下一层次操作的提醒和暗示，增强功能的易发现性，使人机交互的过程更加自然、顺畅

   静态邀请：以静态说明形式出现在页面上，在视觉上可以表现为文本邀请，白板式邀请以及未完成邀请等

   漫游探索邀请：比如用户第一次进入系统时那些新手操作指引

   动态邀请：鼠标悬停时进行邀请

   ​ 推论邀请：用于交互期间，合理推断用户可能产生的请求

   ​ 更多内容邀请：邀请用户查看更多内容

9. 巧用过渡：在界面中添加一些过渡效果，保持界面生动，增强用户和界面的沟通

   视图变化时保持上下文的方法：构建虚拟空间时可以用滑入与滑出；使用传送带扩展虚拟空间；使用折叠窗口做视图的切换能有助于保持上下文的同时扩展虚拟空间；

   解释前序操作：新增对象时可以对新增的对象做几秒的高亮；删除对象时可以用移出的动画操作；更改对象时也可以用几秒的高亮；呼出新对象可以用放大的特效

   当无法有效提升实际性能时，可以考虑适当转移用户的注意力，来缩短某项操作的感知时间，改善感知性能

10. 即时反应：交互之后系统需要立即有个对应的反馈

    查询模式：输入时的自动完成提示，实时搜索(模糊搜索)

    反馈模式：用户提交输入前，让他先行了解系统如何处理输入(输入密码时即时显示密码强度)；有必要时提供渐进式提示；提供一个进度提示(提交表单时使用loading，骨架屏的使用，上传进度显示等)；有新内容时告知用户，并提供类似点击刷新等按钮工具帮助用户触发刷新；系统实现定时刷新(websocket或者轮询等方式，但这个形式可能会耗性能)

2.2 全局规则

1. 数据录入

   1. 为初级用户/偶尔访问的用户提供简单易懂的标签，为领域专家提供专业术语作为标签，当用户需要提供敏感信息时，通过暗提示告知用户
   2. 让用户能在上下文中获取信息帮助他完成输入，使用良好的默认值，结构化的格式，暗提示，输入提醒等形式，避免让用户在空白中猜测输入

2. 数据展示

   1. 依据信息的重要程度，操作频率和关联程度来编排展示的顺序
   2. 注意极端情况下的引导，如数据信息过长，内容为空的初始化状态等

3. 数据格式

   在表格中数值分布排列通常采用右对齐，方便用户读取数据，又方便数据的纵向对比

   在表格中，计量单位默认放在表头，并且默认右对齐

4. 文案

   文案的设计有以下几个注意点：

   1. 从用户的角度出发

      文案语言应明确表述立足点，既然以用户为中心，文案就应该尽量以用户为主体进行设计；尽量提供简短、易于快速获取的内容；使用简单，直接，易于理解的词汇，让内容和指示更容易被用户接受和理解

   2. 表述一致

      描述同一个事物的词汇要保持统一，上下文的语法，语种和语序要保持统一，操作的名称和目标页面标题的名称保持统一

   3. 重要的信息放在显著位置

      让用户第一页看到最重要的内容，为了隐私安全，隐私信息也可改为点击可见的方式

   4. 专业，精准，完整

      在操作之前引导告知用户操作目的，能使用户更愿意去执行；在展示报错信息时，应更符合用户的认知，以易于理解的方式表述出来；用词需要规范，没有错别字，专业术语用词准确且在对应专业内通用；时间表述需准确(尽量不要有昨天，前天这种相对时间)

   5. 精简，友好，正面

      直接使用你，我来和用户对话，您有时候会显得疏远，但你和我不要在同一句式中混用

      在文案中多给用户支持与鼓励，不要命令和强迫用户(使用“请输入”而不是“不能输入”)

      避免使用太过绝对的表述，这样会让用户觉得不适

   文案中大小写与标点符号使用

   1. 英文名词的大小写规范，专有名词大小写(iOS)，英文标题，标签中的首字母大写规范
   2. 统计数据尽量使用阿拉伯数字，比较简单明了
   3. 标签，标题，提示以及表格中的句子可以省略标点(很长的句子除外，但这些尽量句子别太长)
   4. 多行文字需要加标点；文字链之前需要加标签用作区分
   5. 谨慎使用感叹号，因为感叹号容易让语境显得过于激动，造成紧张的气氛

5. 按钮

   1. 次按钮：常规按钮，最安全的选择，不知道用啥按钮就用这个

   2. 主按钮：突出完成，强调的操作，一个按钮区最多使用一个

   3. 文字按钮：弱化的按钮，可用于需要大面积展示按钮的场景，像表格列操作

   4. 图标按钮：需要在较小空间尽可能展示多的按钮时使用；每个按钮都需要有提示

   5. 在按钮中添加图标：对按钮含义补充解释，提高按钮识别效率

   按钮区应放置在用户浏览路径中，便于被用户发现，如F浏览模式和Z浏览模式

   主题描述通常分为header，body以及footer三部分，body区是显示主题具体内容的区域，header区按钮一般作用是发起变更body区操作，body区按钮一般是对其跟随内容有效的动作；footer区一般是完成类动作，存在的目的就是为了和body区分开来

   按钮的顺序通常是优先询问用户可能需要执行的操作，或者开发者希望用户执行的操作，最后向用户提供存在风险的操作，具有返回意义的按钮，应该放在左侧，暗示回到之前

   按钮文案必须使用动词(下拉按钮除外)，文案与语境紧密关联，用语简练

3.模板文档

这里筛选了常用的数据可视化页，详情页，表单页以及列表页简单阐述

1. 数据可视化页

   数据可视化类的页面通过一系列图表展现以及辅助解读，帮助用户通过浏览和操作数据图表，实现特定的数据分析目的，制定数据驱动型决策

   设计原则在于组织性(从上到下，从左到右，或者递进的交互形式，概览第一，聚焦过滤)，突出重点以及信息准确(使用正确的图表类型，在必要时对数据定义做出解释)

   尽量在一屏突出核心指标，将总模块数量控制在5-9个，避免信息过载；善用筛选，过滤等功能，让用户在观察全局同时能够查看数据细节

   建议：

   1. 划分用户：决策者可以选用描述型的指标结果页面，执行者可以选择有更多分析功能的分析、详情界面
   2. 确定核心指标间的联系和优先级，合理进行页面布局，把结论和最重要的指标放在最醒目的位置

   信息粒度从大到小：指标卡和排行榜，图表，文本明细

2. 详情页

   设计原则：直截了当(信息尽量平铺展示，尽量不要做大量隐藏，折叠等动作)，层次分明(按照接近原则，对信息进行分层分组展示)，化繁为简(减少复杂结构的使用，尽量使用相似的结构和模块)

   根据各个信息之间的相关性，判断各个信息模块之间的亲密度：不通栏分割线将相关内容分开；通栏分割线将内容分成多个部分；卡片用于放置一个主题；页签是对象描述信息最顶层组织方式，如按版本组织，按意图组织，按阶段组织

3. 表单页

   设计原则：高效(使用户能快速完成表单页任务)，明确(能快速定位重要信息和目标选项，标题，选项，提示等内容准确表达含义，用户能感知不同大小操作的前因后果，并及时响应相关反馈)，安全感(复杂表单的即时保存，后悔药机制)

   一个表单页中针对同一种内容类型的表单项不要使用不同组件或表现形式，会增加用户理解成本；表单项的标题，提示尽量使用易理解的词汇，避免过长造成理解成本，预填提示避免废话(名字一栏的输入框就可以不用写请输入名字了)

   表单布局方式

   1. 简单的从上到下布局，引导用户纵向阅读
   2. 空间有限时可以通过较短宽度且具有相关性表单项组合在同一行的形式形成分组暗示，尽量避免一个区域内多列表单
   3. 当一个区域中内容较多且可被分类归纳时，通过区分标题来进行区域内分组
   4. 当一个页面中内容众多（通常大于两屏）且可被分类归纳时，可通过卡片分组来承载，每个卡片需要包含一个大标题

4. 列表页

   设计原则：易扫读(格式一致外观，突出有利于对象识别的关键信息，利用富交互分层展示信息以减少认知负荷)，可寻性(列表以易于浏览的逻辑排序，提供合适的搜寻组件帮助用户快速查找信息)

这只是对antd设计语言的简单走读摘录，同时按自己的理解之后写下的笔记，具体内容可查看Ant Design设计