Ant Design 的十大设计原则
2017-03-18 本文已影响117人
woodccc
参考链接：
ant design 设计原则
《写给大家看的设计书》
《Web界面设计》
不翻船的设计和前端
初次看到 antd 设计原则就被深深的触动了。十大原则前面四条是出自《写给大家看的设计书》。看书名就知道这是一本适用于大多数设计场景的书，不仅仅是用于 web 设计。而后面六条原则则是来自于《Web界面设计》。
首先，讲一个小故事。故事来自于《写给大家看的设计书》，作者有一年圣诞节收到一份礼物——一本关于植物的百科全书。作者翻阅之后，发现其中有一颗叫约书亚树的树，造型奇特，自己从未见过。于是决定出门转转，然而发现外面到处都是这种树。故事到这里就完了。
可能大家会想，这个故事要讲一个什么道理呢？简单来说就是，当你手中有个锤子，满世界都是钉子。当你了解到下面要讲的十个设计原则后，你会发现它们处处都适用。
十大原则如下：
- 亲密性（Proximity）
- 对齐(Alignment)
- 对比(Contrast)
- 重复(Repetition)
- 直截了当(Make it Direct)
- 简化交互(Keep it Lightweight)
- 足不出户(Stay on the Page)
- 提供邀请(Provide Invitation)
- 即时反应 (React Immediately)
- 巧用过渡-使用变换(Use Transition)
1. 亲密性（Proximity）
将相关的项组织在一起。
他们彼此认识吗？
1-6.png
他们认识！
1-7.png
糟糕的名片，各个元素之间没有联系。
1-1.png
好的的名片，有联系的元素之间间距更近。
1-2.png
纵向间距关系，用间距来区分各个元素之间关系的紧密程度。Antd 设计原则，间距使用8+8n px。
1-3.png
横向间距关系。就像之前谈到的代码可读性，代码里面只能用空格、空行来提高可读性。在 web 设计里面距离就丰富多了。
1-4.png
1-5.png
2. 对齐(Alignment)
任何东西都不能在页面中随意安放。
还是那张名片，亲密性虽然已经调整了。但是居中对齐方式效果并不是很好。
1-2.png
右对齐-外观更清晰，效果更分明。
2-6.png
文案类对齐 - 推荐使用一个视觉起点。
2-1.png
文案类对齐 - 多个视觉起点，一般不推荐，除非是刻意强调两者区别。
2-2.png
表单类对齐，冒号对齐。
2-3.png
邮件策略对齐，建议左边文本使用右对齐。这样，和右边输入框左对齐形成两条紧挨着的平行线。
2-4.png
3. 对比(Contrast)
避免页面中的元素太过相似。
如果要表达有一定区别，那就大胆运用对比。不要让用户花心思去找那细微的差别。
4-5.png
没有主次关系对比，不推荐。
4-1.png
强烈的主次关系对比，推荐。
4-2.png
无主次之分的按钮。
4-6.png
用颜色表示状态的区别。
4-3.png
GitHub 的 star 功能，用文本的对比表达力很弱，图标稍好，颜色对比最强烈。
6-4.png
6-3.png
4. 重复(Repetition)
统一，增强视觉效果。
利用颜色重复，突出这些人属于一个组织。
3-4.png
线框重复示例。
3-1.png
设计要素重复示例。
3-2.png
文案格式重复示例。
3-3.png
5. 直截了当(Make it Direct)
需要在哪里输出，就要允许在哪里输入
直接了当的行内编辑，便于用户操作，提供上下文。这种模式适用于易读性远大于易编辑性。
5-1.png
这种模式适用于，易读性为主，突出易编辑性。
5-2.png
直接了当，利用拖放。
5-4.png
6. 简化交互(Keep it Lightweight)
用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作
实时可见工具，适用于操作非常重要。
6-1.png
悬停即现工具，适用于操作不那么重要。
6-2.png
7. 足不出户(Stay on the Page)
能在这个页面解决的问题，就不要去其它页面解决
二次确认，就在当前位置。提供上下文。
7-1.png
8. 提供邀请(Provide Invitation)
缺少易发现性
静态邀请，文本邀请。
8-1.png
动态邀请，悬停邀请。
8-2.png
9. 即时反应 (React Immediately)
交互之后立即给出反馈
查询模式
10-1.png
反馈模式
10-2.png
10-3.png
10. 巧用过渡-使用变换(Use Transition)
保持生动，增强用户和界面的沟通
