写在前面

因为在团队中一直负责设计规范的修订工作，所以对设计中的一致性比较重视，有一些自己的体会。

所以，今天我们就来聊一聊设计中的一致性原则！

一致性的重要性

对内：

1、保证平台统一性

2、提升团队效率

3、打磨细节体验

对外：

1、塑造品牌调性

2、减轻用户的学习成本

3、保持产品的体验一致性

一致性的关键要素

1、颜色

2、间距

3、字体

4、图标控件

5、交互操作

这五个关键要素要注意的地方：

1、颜色

使用一致的配色方案，严格定义主题色、错误提示色、主标题色、副标题色等。

在一个长期迭代多人合作的项目中，不同的设计师会负责不同的模块，每个人都有各自的思路，就有可能会对相同的元素做出了不同的方案，有设计规范来定义基本的元素，一起做出有统一性的产品。

2、间距

间距无处不在，统一间距规则，不仅让设计师之间的合作更为清晰，同时可以减轻开发在编写代码时的工作量，不用重复编写不同的间距。

另外，在视觉上，不会导致产品界面给人混乱的感受。

这里我们可以看一下Google Material Design的做法：

可以看到在他的布局中，所有间距都是在4的倍数上进行递增: 4，8，16，20，24，48，32，36…

所以，首先根据业务场景来进行定义一个最小的间距规则，可以是3的倍数、5的倍数，根据这个间距原则，你可以保持你页面的统一性。


3、字体

不要超过3种字体，那样你的界面看起来会很不统一。

建立对比强烈的视觉层次感：突出重要的、内容，让页面信息层级清晰明确。

4、图标控件

图标：

保证功能相同的图标元素一致：大小、粗细、圆角、风格；保证视觉一致性（大小）

控件：保证正常样式、选中样式（单选、复选）、按钮样式的一致性；在不同的情况下复用相同的设计元素，比如同一个通知元件，在不同的情况中使用颜色来区分它们。

5、交互操作

交互模式、反馈机制，要符合用户心理预期，常用功能要与普遍用户认知相匹配。这样用户在使用产品的过程会变得更顺利。

如果让用户停下来思考 “ 额，我该如何使用它？”，这就是失败的设计。

比如：图中3个图标传达的意义每个人都清楚，所以，不要改变这种既定事实的规则。

总结

保持的视觉一致性：

不仅能够让品牌拥有统一的视觉语言，产生竞品区分，强化品牌调性；还能保够减轻用户的学习成本，让用户更快的了解你的产品并保持产品的体验一致性。

希望对你有帮助～