4个技巧教你如何创建视觉一致性

2020-07-03 本文已影响0人 DY产品人

我们常挂在嘴边的“一致性”原则究竟是什么？真的有那么重要吗？

一致性原则也就我们口中常说的统一性，在尼尔森十大可用性原则中，阐述了什么是一致性及一致性涵盖的范围。一致性是指：在同一个产品中，产品内部的导航方式、相同功能的命名方式、类似元素的视觉呈现、操作行为的交互准则等方面要保持一致性。

可以极大的缩短功能迭代的周期，因为设计师与开发可以重复套用已有的模板；

减少用户学习成本，提高了用户使用产品的愉悦感和流畅感；

产品设计中一致性原则主要在交互一致性、视觉一致性、感知一致性3个方面呈现。

本文主要分享如何创建视觉一致性。视觉一致性是设计师接触最多的一部分，它通常体现在产品的的整体布局、色彩、风格、元素（如icon、字体、间距、圆角等等）。

根据产品的不同属性通常会采用不同的布局方式，常见的移动布局方式有，列表式布局、宫格式布局、仪表布局、卡片布局、瀑布流布局、Gallery布局、手风琴布局、多面板布局等等。如在闲鱼APP，大多采用了瀑布流布局。

色彩一致性是指产品中的主色调、辅助色、点缀色、字体颜色等是否保存一致，可以让用户更好的识别产品。例如知乎的主色调为蓝色，那么它的产品logo，产品主色调、线下运营活动大多以蓝色为主。如图：

我们常常会根据产品定位、用户人群去设计产品的不同风格，如轻拟物化、简约风、扁平化等等。而不是在一个应用同时使用多个风格，这很容易让用户在使用过程中容易跳戏，疑惑这是否还是同一个应用中。通常我们在设计时，先确定首页的风格，再根据首页的风格去设计各子页面

在相同层级的不同功能的字体字号大小、不同图标、不同尺寸的图片在属性的表现应该是一致的，或者有某种关系让他们达到一致。属性的一致通常体现在字体、标签、图片、IOCN、圆角上。

例如在资讯类的APP中，你在不同的页面中一眼就可以分出标题、内容、标签等这些内容，是因为在不同的页面中标题、标签、内容给用户的感知是一致的，他们的属性相同。在应用中的所有图片的圆角、阴影保持一致。如下图所示：

最后

所以，在我们设计生涯的不同阶段，一致性对我们设计来说很重要，但是有时需根据产品的情况来考虑，不要为一致性而一致性。要懂得合理平运用一致性，学会思辨和推翻自己，才能进步和有所突破。