一、UI 规范 - 色彩
理论上，我们只要使用 RGB 模式，随便你怎么选色，只要记录 16 进制码进行复用，你就可以在任何文件、设备中获得相同的色彩。
但在实际显示效果上，不同的系统、设备、浏览器都有自己的调色板，“解释” RGB 代码后给出的色彩就有偏差。比如一样的中文不同方言、语系、背景的人可能听出不同的意思，比如牛子，我以为它是类似“晴子”这样的姓名，至于你们的理解嘛……
相关行业为了避免这样的问题，提出了 WEB 安全色的概念，即这些色彩在不同的显示环境下，能实现最接近的色彩效果。
那么安全色都有哪些呢？网上有很多地方都有对应的色卡或者工具帮助我们选色。建议使用 Google 的 MD 色卡，这套色彩最全，使用范围也最广的颜色。
我们可以通过下面这个链接中的网页工具，帮助我们快速实现选色和复制色彩代码的操作。
网站链接：www.materialpalette.com/colors
当然，设计 B 端界面并不是只能使用安全配色，这只是一种建议，可以尽量确保主色，尤其是辅助色使用安全色，而中性色可以自由定义（下面会提）。
第 2 件事，自然就是讲讲该怎么配色了。和 C 端设计类似，我们主要的目标就是在项目设计过程中定义出 核心（品牌）色、辅助色、中性色 三种色彩类型，并把它们应用到合理的位置中去。
1.品牌色
即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象，品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤，品牌色的应用场景包括操作状态、按钮色、可操作图标等
如果上面的色板不能满足你的需求，你可以选择一个主色，Ant Design 的色彩生成算法会为你生成完整的色板。
色板工具：2x.ant.design/docs/spec/c…
2.辅助色【用Ant默认的】
用于提示其他场景，比如：成功、失败、警告、无效等
3.中性色【用Ant默认的】
常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构
4.视觉层次
将品牌色赋予在重要信息或关键主动点上，并衬以大面积的中性色，可以让用户更聚焦到任务本身，从而提高任务的执行效率。注：界面用色建议不超过三种（数据图表和图形类插画除外），操作界面使用的色彩应尽量避免面积过大或种类过多而造成用户视觉疲劳。
二、UI 规范 - 字体
字体是界面设计中最重要的基本构成之一，用户通过文本来消化内容和完成工作，优雅的字体将大大提升用户的阅读体验及工作效率。Ant Design 的字体方案，在满足不同终端始终保持良好的阅读体验的同时，使页面的视觉层次更加清晰。使用时有以下三点需要注意：
A. 合理的使用不同的字重、字号和颜色来强调界面中最重要的信息；
B. 尽可能的使用单种字体，混合使用多种字体会让界面看起来零散和草率；
C. 遵循 WCAG 2.0 标准，字体在使用时与背景颜色的对比值满足无障碍阅读的最低标准。
1. 家族字体
优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下字体始终保持良好的易读性和可读性，体现了友好，稳定和专业的特性。
字体的大小、色彩区分体现界面信息的层级关系。
●中文字体建议选择：苹方体、微软雅黑
●英文字体建议选择：Helvetica Neue、微软雅黑
2. 字号
使用不同的字号和字重来传递视觉的信息层次。默认字体为 12pt，展示型页面可以设置为 14pt，其他字体字号相应升级。
3. 行高
行高会影响阅读的体验，西文的基本行高通常是字号的 1.2em 上下，而中文因为字符密实且高度一致，所以一般行高需要更大，1.5em 至 1.8em 之间是一个比较好的视觉阅读效果，Ant Design 规定默认文案字体行高为 1.5em，展示型页面可根据实际情况调整行高。
行高公式 = 字体行高绝对值为『字号 x 1.5倍』。例如：12 号字体的行高为 18px，14 号字体的行高为 21px。
4. 字体颜色
考虑到无障碍设计的需求，帮助那些弱视和色盲的用户也能轻松识别和阅读屏幕上的文字，我们参考了 WACG 2.0 的标准，文本和背景色之间至少保持最小 4.5:1 的对比度（AA 级），正文内容都保持了 7:1 以上的 AAA 级对比度。
在线计算文字背景色工具：gonglue.qinggl.com/app/color/w…
三、UI 规范 - 布局
布局是页面构成的前提，是后续展开交互和视觉设计的基础。Ant Design 提供了常用的布局模板来保证同类产品间的一致性，设计者在选择布局之前，需要注意以下几点原则：
A. 明确用户在此场景中完成的主要任务和需获取的决策信息。
B. 明确决策信息和操作的优先级及内容特点，选择合理布局。
1. 网站展示页
网站展示页（即官网页）通常是用户了解网站或产品的第一步。这类页面通常会包含产品展示图，简短的产品介绍信息，以及用户登录入口等。在设计时我们建议：
1）明确你要传达的内容，保持简短而清晰的文案。
2）搭配清晰、直观的产品图片，有助于加深用户对产品的理解和记忆。
2. 控制台页 Dashboard
集合了大量多样化的信息（如数字，图形，文案等），需要一目了然地将关键信息展示给用户。因此，如何将庞大复杂的信息精简清晰地展示出来，是设计此类页面的关键。在设计时要注意以下几点：
1）按照信息的重要程度来组织页面排版，突出展示关键信息。
2）将数据可视化，让用户可以直观地了解关键信息及整体情况。
3）合理地使用颜色及栅格排版，减轻用户的视觉负担。
3. 列表页
列表设计是并列式展现信息，方便用户能快速查看基本信息及操作。因此，信息的「可阅读性」及「可操作性」是设计的关键。在设计时要注意以下几点：
1）根据用户需求来定义信息展示的等级，仅展示关键信息及操作。
2）当信息内容较为复杂时，可将次要的信息折叠或放到详情页面中，以递进的方式让用户获得更多的信息。
4. 表格页
表格作为多维信息展示的载体，使复杂的信息更易于阅读与理解。它的易读性，便捷性，易操作性对产品的体验起着举足轻重的作用。因此，我们在设计时要注意以下几点：
1）构造清晰的表格布局，有利于提升读者对信息的接收速度和理解程度。
2）更多地展示用户所必须的信息，通过视觉上的调优突出展示重点信息。
3）当界面需要在一个很大的多纵行表格中展示数据，或每一横列数据有多行信息时，可以巧妙地运用横向或纵向斑马条，使得信息条目之间更为分明，视觉上更易区分。
5. 详情页
详情页面一般会承载大量的基本信息，扩展信息，或者状态信息。对于信息效率和优先级判定的要求会比较高。清晰的布局能帮助快速看到关键信息，提高决策效率。这设计时有以下几点需要注意：
1）清晰的排版格式，易于阅读的文本大小及间距，都是影响用户获取信息效率的关键因素。
2）图文搭配比单文本展示信息能更好地提高用户的理解。
6. 表单页
表单页通常用来执行登录、注册、预定、下单、评论等任务，是产品中数据录入必不可少的页面模式。因此，舒适的表单设计，可以引导用户高效地完成表单背后的工作流程：
1）考虑用户的浏览方式，提供清晰的用户视线浏览路径；
2）内容是表单的核心，保证表单的内容精简（尽量避免多余的输入项）；
3）标签的命名要易于用户阅读和理解，避免模糊的描述给用户造成困扰；
4）醒目的提交或完成按钮，放在用户的浏览线的终点更有利于用户的完成操作。
7. 栅格
通过定义网格、间距来呈现产品布局的最佳效果，设计师在设计时可按『页面总宽 1440px，内容区 1208px』来设定，并在此基础上以 24 等分的栅格来划分整个设计建议区域。建议横向排列的区块数量最多四个，最少一个，以保证视觉层面的舒适感。
栅格公式
我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。
Ant Design 定义了两种 Gutter：
1）网站展示页和 Dashboard 的 Gutter 宽度为 24px。
2）列表、表格、详情和表单页面的 Gutter 宽度为 16px。
四、UI 规范 - 设计原则
1. 平面四要素 - 亲密性
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
1.1. 纵向间距关系
通过8px『小号间距』、16px『中号间距』、24px『大号间距』这三种规格来划分信息层次；在 Ant Design 中，y=8+8*n。其中，n>=0，y 是纵向间距，8 是『基础间距』。
1.2. 横向间距关系
为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
在一个组件内部，元素的横向间距也应该有所不同。
2. 平面四要素 - 对齐
正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
1）文案类：页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。推荐示例 - 标题和正文左对齐，使用了一个视觉起点。
2）表单类：冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
3）数字类：为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。
3. 平面四要素 - 对比
对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。
1）主次关系：突出其中一项相对更重要或者更高频的操作。突出的方法，不局限于强化重点项，也可以是弱化其他项；
在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。
2）总分关系：通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。
3）状态关系：通过改变颜色、增加辅助形状等方法来实现状态关系的对比。
常见类型有『静态对比』、『动态对比』。
4. 平面四要素 - 重复
相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。重复元素，可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。
5. 直截了当
Alan Cooper ：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
5.1. 页内编辑
a. 单字段行内编辑：当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』
当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』
b. 多字段行内编辑：
在『多字段行内编辑』的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要『巧用过渡』原则中的『解释刚刚发生了什么』来消除这种视觉影响。编辑模式在不破坏整体性的前提下，可扩大空间，以便放下『输入框』等表单元素。
5.2. 利用拖放
拖放列表：移动位置
拖放图片、文件：上传
6. 足不出户
能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。
6.1. 覆盖层
a. 二次确认覆盖层：用 Modal 进行二次确认。
b. 详情覆盖层：一般在列表中，通过用户『悬停』/『点击』某个区块，在当前页加载该条列表项的更多详情信息。注：使用『悬停』激活时，当鼠标移入时，需要设置 0.5 秒左右的延迟触发；当鼠标移出时，立刻关闭覆盖层。
c. 输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。
6.2. 嵌入层
a. 列表嵌入：列表中各项详情展开不中断*（看实际需要展开或折叠）
b. 标签嵌入：多个平级内容进行分类整理后，一次只显示一组内容（可灵活切换）
6.3. 虚拟页面
在交互过程中，『覆盖层』可以在当前页面上方显示附加内容和交互链接；『嵌入层』可以在页面内部实现同样效果；而『虚拟页面』不局限机械时代的『页面』，可以利用信息时代的特点构建一种新型『页面』。
无限加载和分页器，详见『模式／列表／显示长列表』
走马灯，详见『模式／列表／显示图片』
6.4. 流程处理
Web流程处理与其将每一步骤分到不同的单独页面，更需要用户留在同一个页面进行处理。
a. 渐进式展现：基于用户操作和特定规则，渐进展现不同操作步骤
b. 配置程序：通过一系列配置项，帮助用户完成任务或产品组装
c. 弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。
7. 简化交互
费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
a. 实时可见工具：如果某个操作非常重要，就应该把它放在界面中，并实时可见，每一个动作都有变化反馈。
b. 悬停即现工具：如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。
c. 开关显示工具：如果某些操作只需要在特定模式时显示，可以通过开关（点击）来实现某功能。
d. 交互中的工具
如果操作不重要或者可以通过其他途径完成时，可以将工具放置在用户的操作流程中，减少界面元素，降低认知负担，给用户小惊喜。
譬如，当鼠标悬停某区域后才出现下一步的操作提示，取代一开始就在界面区域内放置操作按钮或提示。
7.1. 可视区域 ≠ 可点击区域
在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。注：在移动端尤其适用。
8. 提供邀请
很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。
邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。
意符（Signifiers） ：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》
可供性（Affordance） ：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》
8.1. 静态邀请
指通过可视化技术在页面上提供引导交互的邀请。
a. 引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。 常见类型：『文本邀请』
b. 漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是『创口贴』，仅通过它不能解决界面交互的真正问题。注：保持漫游过程简单，让用户容易退出和重新启动；保持内容简明扼要，与功能密切相关。
8.2. 动态邀请
指以响应用户在特定位置执行特定操作的方式，提供特定的邀请。
a. 悬停邀请：在鼠标悬停期间提供邀请。
b. 推论邀请：用于交互期间，合理推断用户可能产生的需求。
c. 更多内容邀请：用于邀请用户查看更多内容。
9. 即时反应
『提供邀请』的强大体现在交互之前给出反馈，解决易发现性问题；『即时反应』的重要性体现在交互之后立即给出反馈。
虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。
9.1. 查询模式
a. 自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。 根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。
b. 实时搜索：随着用户输入，实时显示搜索结果。
c. 微调搜索：随着用户调整搜索条件，实时调整搜索结构。
9.2. 反馈模式
a. 实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。注：解决错误最好的办法，就是不让错误发生。而『实时预览』就是有效避免错误的好设计。如：根据用户的输入，提供关于密码强度和有效性的实时反馈。
b. 渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。
c. 进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。 常见的进度指示：『按钮加载』、『表格加载』、『富列表加载』、『页面加载』。可根据操作的量级和重要性，展示不同类型的进度指示。
d. 点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看新内容。
e. 定时刷新：无需用户介入，定时展示新内容。如:新增的列表项『高亮』，持续几秒后恢复正常。
