Ant Design 前端页面设计汇总

Ant Design 设计

设计元素规范

1. 视觉要素应充分涉取自然界规律，降低用户认知成本
2. 主要字体为 14，与之对应的行高为 22
3. 多数情况下，只出现 regular 以及 medium 的两种字体重量，分别对应代码中的 400 和 500。在英文字体加粗的情况下会采用 semibold 的字体重量，对应代码中的 600。
4. 参考了 WCAG 的标准，将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度。

5. 建立体系化的设计思路：在同一个系统的 UI 设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。
6. 少即是多：在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系
7. 尝试让字体像音符一样跳跃：在需要拉开差距的时候可以尝试在字阶表中跳跃地选择字体大小，会令字阶之间产生一种微妙的韵律感。
8. 我们对于点的尺寸选择上会保持 16 的倍数这一原则，新版的图标最常用的是四种尺寸的点，分别为 80、96、112、128
9. 新版图标在线条之间的关系采用 8 倍数原则，从小到大以 8 的规律递增。常用的规格也是 4 种，分别为 56、64、72、80。
10. 圆角的规格采取的也是 8 倍数原则，最常用的是 3 种，分别是 8，16、32，它们之间是两倍数的关系。而图标内部空间的圆角则保持直角的处理方式。
11. 新版图标的角度受到美式战斗机 F-14 tomcat 的启发，将常用的角度定在约 76 度。在日常设计中，多数系统图标的角度都可以从 76 度这个数值出发，根据实际情况进行灵活的应用。
12. Ant Design 为了更符合真实阴影，在 4.0 中采用了三层阴影的表达方式，让阴影更柔和，更符合真实状态
13. 根据费茨法则（Fitts’s Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
14. 费茨法则 ：到达目标的时间是到达目标的距离与目标大小的函数，具体：

1.设备当前位置和目标位置的距离（D）
2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。

16. 阴影由光照而产生。主要影响其值的是物体高度与光源位置：

在不同高度上时，投射出的阴影颜色、模糊度、面积都有所区分。离地面越远的物体，产生的阴影颜色越淡、模糊度越高、面积越大；反之则颜色更深、模糊度越低、面积越小；
而投影的方向主要由光源与物体的相对位置决定。

   在 Ant Design 中不同的阴影方向使用在不同的地方：
   
   阴影向下：主要应用于组件内部或组件本身，是比较常规场景的用法
   
   阴影向上：主要应用于底部导航或工具栏等
   
   阴影向左：主要应用于右边导航栏、抽屉组件或固定表格栏
   
   阴影向右：主要应用于左边导航栏、抽屉组件或固定表格栏 

17. Ant Design 的图标设计原则源自"确定"和"自然"，落实到图标设计领域，一共有四个，他们分别为：

准确： 设计造型准确的图标（保持偶数原则，去小数点）；选择表意准确的图标，不对用户的认知造成困扰。
简单： 在表意清晰准确的基础上，尽量保持图形的简洁，不做多余的修饰。
节奏： 挖掘构图中的秩序之美。
愉悦： 赋予适度的情感。

页面异常设计

18. 异常页面

1.配图：为沉重的异常增添一点乐趣，缓解用户烦躁心理；
2.异常代码/问题：当异常有具体的 HTTP 错误代码时，可予以展示；
3.异常描述：简明扼要地描述异常原因，方便用户作对问题作反馈；
4.建议操作：协助用户处理异常，或把用户引导回正确的路径上。

19. 404页面

当用户请求访问的页面、项目、资源未找到时使用

20. 403页面

无权限，可能包括无应用权限或无数据权限，根据实际情况向用户反馈。

21. 500页面

当服务器出错，无法向用户提供服务时。

22. 浏览器不兼容

当浏览器不兼容导致用户无法打开网页的时候使用。

设计模式

23. 标题构成建议为「对象+动作+结果/状态」或「动作+结果/状态」。
24. 文案

1，表述内容时，关注点应该是用户和他们能用你的产品做什么，文案应该以用户为主体
2，省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节， 尽量提供简短、易于快速获取的内容。
3，使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。
4，重要的信息放在显著位置
5，报错是 UI 中常见的功能，它同样是用户体验中不可小视的组成部分。当用户填写的内容出错的时候，你的报错信息应当符合用户的认知，用易于理解的方式表述出来。
6，通用基本用词要规范，不要写错字，词语表达要完整。专业用语要精准，并是所属行业认可通用用词；时间的表述必须明确。
7，直接使用「你」、「我」来和用户对话，与用户建立亲密感。避免使用「您」，让用户感觉太过疏远。不要在同一个句式中混用「你」和「我」，交互中指代混乱会让用户相当纠结
8，多给用户支持与鼓励，不要命令和强迫用户。
9，不要使用过于绝对的表述，这样会让用户觉得不适。
10，产品名称全称，首字母大写。产品名称缩写需要全部大写，如：ESC、SLB 等；
11，全英文的标题，标签，菜单项等等都要遵循英文句式中首字母大写的规范。
12，统计数据使用阿拉伯数字

25. 标点

为了帮助用户更加高效得扫视文本内容，可以省略不必要的断句点。
1、以下元素单独出现时可以省略标点：
标签
标题
输入框下的提示
悬停文本中的提示
表格中的句子
2、以下元素单独出现时需要加上标点：
多句或多段的文案和列表内容。
任何文字链前的句子。

26. 按钮

1，强调一个主要操作
2，操作无主次，次按钮是最安全的选择
3，按照主次展示全部操作
4，将次要操作收纳至右侧下拉按钮中
5，虚线按钮：用于引导用户在一个区域中添加内容
6，危险按钮：警示用户该操作存在风险是的

27. 数据可视化

1，在对数据进行高度概括时，展示指示卡+数值，比图表更直接。
2，尽量在一屏中突出核心指示，将总模块数量控制在 5-9 个，避免信息过载。
3，善于使用筛选、过滤功能，可以让用户在观察全局的同时，还可以查看数据细节，用户在有疑问时能够快速得到方向。
4，将数据分析类型页面拆解为多个部分，通常为“总 - 分”的结构，多维度地展示数据的全貌，帮助使用者发现当前问题。