浅谈设计一致性

一致性就是我们经常说的统一，不管你是做平面，网页，还是ui，我们都会遇到这个问题。可是往往一些设计师为了体现自己的设计能力，故意把某些页面做的很绚丽，导致整个系统看起来风格差异很大，操作起来也很费力。所以不管从操作上还是页面美观上都要遵循设计一致性。

| 为什么要保持一致性 |

每个新的系统对用户来说都是一次新的学习过程，如果界面风格经常变化，不保持统一，无疑更增加了用户的学习难度，也许会导致用户的厌烦。比如：某一处的多选功能使用方形控件，另一处使用标签按钮控件，用户会为了捉摸不清设计师的意图而恼火；再比如，有些设计师在某些页面把取消按钮放在左边，确定按钮放在右边，而其他页面正好反过来放置，用户误操作的频率会大大增加。

保持一致性可以使用户建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神，还可以降低培训、减少成本，并使用户统不觉得混乱，心情愉快，支持度增加。

 1. 复用使用设计资源，降低开发成本 

很多页面会用到同一个控件，如果每个地方都做设计会很大程度浪费设计的人力资源；同时，有些页面和控件，开发无需找设计出资源，可直接开发。

2、交互和视觉设计上不容易出错

因为资源复用，能基本保证整个产品的风格不跑偏。在用户体验上，熟悉过主要页面和功能后，在其他页面和功能中能基本自由操作，在用户体验上，不会增加用户的使用成本。比如某一列表点击后打开、向右箭头点击页面跳转...

3. 新的同事更容易上手

比较大型的项目中如果人员流动率较高，一致性就相当有必要了。新人先阅读规范后更容易展开工作，根据一致性也能更快了解当前产品。

4. 加强对产品（品牌）辨识度 

容易辨识出产品。

| 如何保持产品一致性 |

一致性原则在设计中通常包含视觉一致性、操作一致性、文字一致性和各终端一致性，接下来将从这四方面详细描述如何在设计中使用一致性。

1.视觉一致性

视觉主要是指人的感官，通常可以从图标、色彩、布局、字体等来体现。

上图所有图标大小一致，而且都是通过填充面，可体现出一致性。

以上两张图主题色都保持同一，只是辅助色改变（这个在设计上是允许的）。

2.操作一致性

交互上的操作也就是指交互动作，就是指用户在操作相同的功能时，他们的操作方式应该一致，如点击打开、左滑删除、长按显示更多操作、截图出现自动分享、拖动、释放和手势、错误处理和恢复过程等在各个页面表现一致。

例如在弹窗中，你的取消icon是放在上面的，你就不要突然在某个页面把取消icon放在下面。

你的展开icon是放在右面的，你就不要突然在某个页面把展开icon放在左面。

3.文案一致性

这一点很好理解，就是别用同义词，但文案风格也要统一。选了一个词后就一直重复使用，用了“添加”后，再使用“新建”就会出问题；如果在某些地方用“确认删除？”在一些地方又用“真的想要抛弃吗”就会让用户觉得很别扭。

4.各终端一致性

很多产品会同时有移动端和PC端产品以及pad端，虽然是以不同的硬件设备为载体，但也要在不同的终端上保持交互和视觉一致。

| 一致性是否一定要坚持 |

在开发一个项目的过程中 ，我们会发现设计组拿到新的需求在产出的时候，会倾向于使用规范中既定好的控件或者规则来设计。但实际情况是规范并不能适用于所有的需求，有时候遵循规范而做出来的设计，对某个需求来说，并不是一个很好的解决方式。

有时候用户并不是很在意一致性的问题，而是我们自以为开发更容易就直接按照一致性开发了。

例如上图，左图是标题和输入框左右结构，但是左右结构在右图并不合适。

图上是两个样式一致列表，但是在开发过程中程序可能直接把红色箭头的距离按照四个字来做，可是用户并不会知道这个道理，用户会觉得为什么左边那么空，所以还是要和右图标题距边距一致的。

根据实际情况，一致性对所有页面并不都合适，我们应当以用户使用时的体验为先。