设计一致性原则
一致性是产品设计最为基础且重要的原则之一,一般主要指品的设计理念、品牌形象、逻辑结构、操作交互以及视觉形象等设计“基因”能够在设计中较好的保持一致和统一。如下图所示为网易云音乐的排行榜和歌单页面,虽然是2个不同的功能页面,但页面在布局结构(如标题,背景插图,歌曲列表)和交互操作(播放歌曲,搜索,分享)等方面都是一致统一的。
设计保持一致性的好处是显而易见的,对产品,可以使产品、品牌形象的统一规范性,降低产品迭代优化的成本;对于用户,能够在产品不同模块中有一致性的体验,同时降低用户对功能的理解和使用成本。
设计的一致性无论对用产品还是对用户都有着巨大的作用和意义,其主要体现在以下几个方面。
(1)为产品优化迭代提供指导和评估准则
在需求讨论阶段,一致性原则可以保证产品需求不会偏离产品既定的目标和理念;在设计过程中,一致性原则可以让设计师确保设计方案不偏离需求目标,以及在视觉,交互等细节方面保持一致统一。在设计方案评审过程中,一致性原则可以作为评估准则来评估具体设计方案。
(2)保持产品和品牌形象的一致
在产品不同的功能模块中或者不同发展时期中,一致性原则可以保证产品在设计理念,品牌形象,功能逻辑结构,操作交互,视觉形象等方面保持一致,从而确保用户对产品形成的形象认知是一致和统一的。如下图所示为网易云音乐“我的”页面和播客分类页面,不仅在图标设计、Tab组件等视觉形象方面都保持了一致,而且在元素结构布局以及操作交互上都保持一致,这样确保了用户在使用产品后形成的产品和品牌形象认知是一致的。
(3)保证用户认知和使用体验的一致,降低用户使用产品的成本
产品迭代优化带来的差异总会对用户的使用造成一定的“阻碍”,而在设计中遵循一致性原则,就可以较大程度的降低这种“阻碍”,以“润物细无声”的方式去改变用户认知,保证用户认知和使用体验的一致,从而降低用户使用产品的成本。例如iOS系统中,列表左滑删除操作可以认为是一种较为普遍的认知,因此在合适的场景中使用列表左滑删除逻辑,用户就可以很好理解,甚至不需要提示引导就可以完成删除操作。
(4)提升产品设计效率,降低产品迭代优化的成本
产品是一个复杂功能的集合体,其中总有或多或少的功能模块、交互逻辑是比较类似或者相同的,如按钮,页面资源加载逻辑等,基于一致性原则,这些功能逻辑应该使用统一规范的设计方案,这样不仅能够保证用户在不同功能模块中体验趋于一致,而且由于功能逻辑的复用会降低产品,设计,研发和测试等流程的周期和投入成本,从提升产品迭代优化的效率。
一致性原则的内涵是非常广的,不是使用一样的颜色或者一样的形式就能代表设计的一致性,而是需要从多个方面和角度进行思考和衡量,在设计中,可以从以下方面来进行思考。
(1)设计理念的一致
成熟产品在一定的发展历程内,必须保证产品设计理念是一致的,即针对不同的需求,要以统一的理念去指导和评估设计,从而形成统一规范的产品形象,用户认知和使用体验。假设产品理念包含“年轻人”的关键词,那么所有的设计方案都应该能够表现出“年轻人”的特点,只是具体的表现形式不一样而已。
值得注意的是,此外设计理念还应该包括设计目标、设计策略、设计原则以及设计语言风格等设计基本“基因”因素。
(2)用户认知的一致
用户对任何事物的看法和判断都是建立在自己以往经验的基础上,即看待新事物都会用以往的记忆和经验来判断和理解,因此必须保证设计方案是符合用户认知的,即符合用户的过往经验,否则用户就会产生认知歧义。例如常见的垃圾桶图标就是代表删除的含义,设计中就不能用垃圾桶图标来表达其他含义。一般来说,用户对产品的认知可以简单归纳为两大类,一是普遍用户认知,一是产品用户认知。
普遍用户认知
普遍用户认知指的是在整个社会群体中大家对于某事物有比较统一的认识。一般来说,能被绝大部分社会群体认可的观点,日常生活或和行业领域中较为普遍且一致的行为、经验以及科学规律等都可以成为普遍用户认知。例如上文所讲述的垃圾桶图标代表删除含义和物理移动规律就属于普遍用户认知。
产品用户认知
产品用户认知指的是用户在使用产品过程中形成的认知,这些认知局限于产品内和使用用户群体,超出这个范围其他的用户可能就难以理解。产品用户认知一般都是一些复用的功能逻辑或者设计,例如JD中使用了动态的JD狗作为加载等待状态的提示,那么在用户在JD中看见动态的JD狗,那么就能理解页面当前处于加载或者等待状态,需要等待一会。
如果产品做得足够好,用户群体足够大,那么产品用户认知也可以演变为普遍用户认知,例如微信中长按按钮进行语音的操作方式,现在基本上已经成为语音交互的通用交互方式之一(之前很多产品都是单击进行语音交互)。
(3)功能结构的一致
功能结构是产品的骨架,决定了用户在产品中的主要体验路径,功能结构的一致性可以帮助用户快速理解整个产品的功能和保证不同模块中用户体验的一致。常见的功能结构一致性包括两方面,一是相似的功能使用相同的结构,例如在设置模块,同一个层级的不同的设置模块使用的列表结构应该是一致的,都使用双行列表或者都使用单行列表;二是不同功能模块中相同的功能应该使用一样的功能结构,产品中所有的页面标题栏的逻辑和结构都应该是一致的。
(4)交互操作的一致
交互操作的一致能够降低产品逻辑结构的复杂程度,能统一用户的认知和使用体验以及降低用户的使用成本。在实际设计中关于交互操作的一致性可以从以下几个方面进行考虑。
交互逻辑的一致
在产品内有很多交互操作的逻辑本质是相同的,不能为这些相同的交互操作设计多种逻辑或方案,因为这样不仅会造成用户体验的不一致,还会造成产品架构的混乱。如下图所示为常见的2种溢出菜单按钮的操作列表,左图中点击蒙版区域会关闭菜单列表,而右图是利用取消按钮关闭菜单列表,这2种设计方案的设计都是合理的,但在产品中不应该同时混用这两种设计方案,根据产品自身需要选择其中一种方案就可以了。
操作方式的一致
常见的交互操作方式有点击,长按,滑动,拖动等,每一种操作方式都有着其独有的特点和使用场景,在设计中需要保证这些交互操作方式的使用是一致的。例如产品中的本地数据在大部分情况下都支持长按进入编辑管理状态后者出现操作菜单列表,再比如常见Tabs组件中都支持左右滑动切换不同的Tab选项卡,在产品设计中就需要保持这些交互操作方式的一致,不能为同一种交互操作设计多的操作方式(不包括主操作方式和快捷操作方式)。
状态逻辑的一致
产品页面中的元素状态应该能够很好地表现出交互操作的逻辑,相同状态的元素其代表的交互逻辑也应该是相同的,例如产品中按钮的可点击状态、按下状态、拖拽状态、禁用状态、选中状态以及加载等待状态、操作反馈等在产品中都需要保持一致。如下图所示为为不同类型按钮的禁用状态示意图,其状态逻辑的设计是一致的。
(5)视觉形象的一致
视觉形象对产品一致性的影响是最为直观的,因为用户形成产品认知和体验感受的基础就是视觉形象。设计中视觉形象的一致性可以从以下几个方面进行考虑。
设计风格/语言
设计风格/语言指的是整个产品的视觉形象基调,是视觉设计的基本理念和重要的指导评估原则之一。本质上讲设计风格/语言就是产品设计理念的一部分,只不过设计风格/语言更多的体现在视觉设计方面。例如微信和QQ,两者的视觉设计风格是完全不同的,再细节一点,图标的设计是使用线形风格还是面形风格。一致的设计风格可以保证产品整体形象的一致,能在产品设计过程中提供明确的设计指导、设计要求、设计准则以及方案评估准则。
品牌形象(VI)
严格意义上讲,品牌VI是自成体系的,不会与普通的产品视觉设计归为一类。但在具体的设计中,我们还是会使用品牌VI中的一些元素,包括吉祥物,产品logo,品牌色等,如JD的吉祥物狗joy和天猫的超级符号等在其应用中都有非常多的使用场景和使用形式。在产品设计中与品牌形象保持一致性也是非常重要的,可以加强用户对品牌的认知以及利用品牌来为产品功能背书。
色彩
任何视觉形象都是由色彩组成的,因此在设计中我们需要形成一个完整且一致的的产品色彩体系,包括品牌色(主色调),主要色系以及衍生的辅助色色彩。保证色彩的一致性,既可以保证用户对产品认知的一致性以及形成独有的品牌认知,还有利于页面信息层次和优先级的表达。如下图所示为网易云音乐和QQ音乐中我的页面的设计方案,其中图标和Tab组件等设计都统一使用了其品牌色(红色和绿色)。
文本
与色彩类似,文本也是视觉形象的重要组成部分。在绝大数的产品中,文本是用户获取产品信息的基本途径,这也意味着文本对产品的使用体验有非常大影响。一般来说,文本的一致性就是指文本样式的一致性,常见的文本样式包括字体,字号,字重,颜色,字间距,行间距,段落,文本区域宽度高度,对齐方式和透明度等,通过这些具体的文本样式可以为产品设定统一规范的文本样式,如标题,副标题,正文,说明文本,出错/警示文本等。如下图所示为网易云音乐中不同模块中2个卡片,其中卡片标题,正文以及其他文本标签的文本样式都是一致的。
布局
页面的布局是视觉设计方案的基础框架,是一个非常复杂的问题,涉及到交互和逻辑,以及众多的视觉因素。常见的影响页面布局的视觉因素有元素间距,排序,对齐方式,字体以及大小,位置约束,元素缩放,输出单位,设备适配等,在这里也无法一一说明解释。在设计过程中,需要对这些因素进行统一合理的的规划和设计。
标准控件/组件
视觉形象的一致性在产品中最为直接的体现就是产品中标准控件和组件的使用,如按钮,弹窗,Tabs等。控件和组件的一致性,不仅包括视觉样式,还包括其使用规范以及交互逻辑等。如下图所示的为淘宝的首页和逛逛页面,其页面中的标题栏就属于组件,2个页面的标题栏在布局结构,视觉样式和交互操作等方面都是是一致的,仅仅在细节视觉样式上有所差异。
任何事物都需要把握一个度,设计的一致性亦是如此。如果一味的追求设计的一致,就会让设计陷入固定的模式,设计出来的方案就会缺少“生机”和“灵动”,随着时间的增长,会导致产品缺少吸引力和竞争力下降。所以在遵循设计一致性的基础上,探索设计的可变性也是不可缺少的。同设计的一致性原则类似,设计的可变性也是有一定的要求和限制的,不能一味的追求设计的多变,否则只会起到负面作用,如让设计变得毫无特色,让产品变得杂乱无章,让产品体验变差。实际的设计过程中,可以从以下几个方面考虑设计的可变性。
满足产品和用户需求
任何设计都需要满足产品和用户的需求,设计的一致性和多变性也需如此,如果不能满足产品和用户需求,那么任何形式的设计都是没有意义的。
设计的拓展
成熟的产品中(不包括运营活动),任何设计都需考虑设计拓展性,需要考虑这种“变化”在产品内的拓展,即能否将新方案应用到其他地方或后续的设计方案中。如果设计方案能拓展,那么这种“可变性”最终能够演变成设计的“一致性”。
设计“基因”延续
对于产品而言,设计的风格和设计理念等设计“基因”是不会经常或者在较短时间内改变的,在任何背景下的设计方案都需要遵循和体现这些设计“基因”,因此在探索设计多变性的过程中,同样需要保证这些设计“基因”的延续和表达。这样做的好处不仅能在设计方案中体现出灵活多变,还能在一定程度上保持设计的一致性,这样不会因为多变的设计而导致迭代前后使用体验和用户认知的差异较大。
紧跟社会/行业发展的脚步
社会和行业领域都在不断进步发展,设计也是如此,不可能能一直停留在“原地”。因此需要不断的关注社会和行业的进步发展,不断思考这些“改变”对计的影响,并适时的调整设计,让设计能够跟随社会和行业的发展。例如行业内的色彩,布局,图标设计等流行趋势是在不断变化的,合理适时的将这些设计趋势运用到新的设计方案中去,对产品和用户都是有好处的。
设计一致性原则的好处和重要性是显而易见的,但在实际设计中,决不能为了一致性而一致性,不能让一致性原则成为设计的桎梏,一致性与可变性都是为了更好的服务用户,为产品和用户带来更多的价值,需要在设计过程中把握好一致性和可变性之间平衡性,这样设计出来的方案才更有生命力。
最著名并且最脆弱的设计原则
一致性是生活中和设计中最重要的原则。没有它我们根本更好的进行工作。即使是最困难的问题,如果你坚持每天攻克它,那么这么问题也将被解决。
一致性是我们总是喜欢违反的一条设计原则。我也非常惭愧那样做了并且不以此为骄傲。在我们跟随创意和艺术的时候,我们常常很轻易地就违反了这个设计原则。
在设计领域,关于一致性的话题是巨大的。我会尽我所能在重要的要点将它总结一下。这样我们就能学习到如何运用一致性,并且如何把它运用到我们的设计中而不违反它。
一致性是设计DNA的一个分子。一致性设计是直观的设计。它非常的有作用并且能让世界变得更美好。
长话短说,当相似的元素有一致性的外表和相似的功能时,它的可用性和易学性会增强。当一致性运用到你的设计中时,人们将会将知识运用到新的环境并且能够快速轻易地学习新知识。这样他们能够聚焦在执行任务,并且不用每次变换环境的时候都要学习产品UI是怎么工作的。
我们人类在潜意识里就喜欢一致性了!我们的身体一直在渴求着一致性平衡,所以我们才会变的健康。我们需要感受那些一致的事物让我们感觉到安全可靠。
用户能够更快学习怎么使用你的设计。 想象,一些你设计中一致的元素是字母表中的字母。一旦,用户学会了字母表,他就能在你的产品中去任何地方,并且可以在无阻的和你的界面进行交流。
有一个不一致的表面就像是用不同的语言和用户进行交流。只有那些高级用户才能够完成它们的任务。要让它变得简单并且具有一致性。
一致性能够消除迷惑! 当用户觉得迷惑时,下一步将会受阻。我们不想让我们亲爱的用户那样觉得,不是吗?
一致性能够解决时间和金钱! 一致性设计能够被预先定义的组件频繁的使用。这让设计师和利益相关者能够不用花时间争论,快速的进行决策。这将会节省我们将用在构建产品的时间并且会有显著的进步效果。
让我们看一看一致性的四种表现形式,它们在设计的过程中都需要被格外注意。
相似的元素是以相同的方式被理解的元素,它会构成视觉一致性。它增加了产品的易学性。字体,大小,按钮,标签,和相似的元素将会使产品保持视觉一致性。
相似的控制方式使以相同方式进行操作的控制,它会构成功能的一致性。 它增加了产品的可预测性。 可预测性将会让用户感觉到安全可靠。例如,在任务流中返回的操作应该在整个产品中保持一致。
这是你的产品设计中视觉和功能一致性的集合。它增加了产品的可用性和易学性。甚至只要你保持内部一致性,即使你介绍新功能/页面,用户都能很容易的使用它们。
这种类型的一致性当在几个系统/产品时有设计一致性才会体现。这样,用户对一个产品的了解就能够重复使用在另一个产品上。是的,这将会帮助减少很多阻力,并且能够呈现出优秀的用户体验。
外部一致性的优秀案例有Adobe产品的用户界面。一旦你知道Photoshop时如何使用的,那么在使用Illustrator和其它产品时就会重复使用相同的知识。
完成这四种类型的一致性能够帮助你的产品拥有更强的可用性和更多满意的用户。
变得一致的本质是能够很多次重复使用相同的交互模式或者元素,在这基础上 还能够帮助用户完成任务。
排版,颜色,留白,栅格,大小和位置。这些元素都需要在一个主要地方被定义然后在你设计的过程中运用到系统中去。
定义完善的视觉体系,最重要的视觉元素要比次重要的视觉元素更着重强调。在整个产品中要使用相同的颜色板。内边距和外边距需要在相似的元素中保持一致,比如按钮,卡片等等。所有元素都要在一定栅格中变得有序,你需要让所有组件都以一种友好优雅的方式呈现。
拥有一个一致的视觉能够让用户更快的了解系统并且有一个流畅的体验。你的设计在使用一致性视觉时也能收获很好的风水。:)
这里有一些很好的设计风格指南资源:
styleguides.io/examples.html
你在用户流中使用的语言和语调将会影响你的用户理解你的产品。保持声音语调具有一致性,那么就好像只有一个声音在对用户说话。我们不想让他们听到各种声音,不是吗?
如果你想在你的产品设计中保持一种有趣友好的声音,那么在所有的错误和失败提示时也用保持这种风格。 MailChimp 就是使用同一种声音语调的优秀案例。
那些用我们产品的人可能在以前曾经用过类似的产品了。这意味着他们可能已经体验和学习过其他的设计,并且知道使用它们的模式了。
我们应该利用这个优势,并且把与这相似的模式运用到我们的设计中去。这样用户过程能够变得更顺利,用户将不用停下来思考“额,我该如何使用它?”,他们将能够直接使用它。
下面是两个很好的资源,它们总结了很多模式:
移动模式网站 - 给设计师和开发者提供的iOS和安卓屏幕截图库
设计模式网站 - 它在软件设计中有很强的实用性,能提供常遇问题的解决方法库
你可能辩解一致性可能会让用户觉得厌烦。如果我们总是希望事物变得一致,那么将不会有创新。
我们首先需要学习它的规则,然后才能改变它们。 是的,是改变而不是打破! 打破一致性意味着打破设计和用户体验。
这对于用户和机构都是一个痛点。设计的进展将变得迟钝下来。当人们花费很多时间在会议室讨论什么颜色最适合那个按钮时,大量的钱在消耗掉。每个人都失去了宝贵的时间来做一些早就应该做出的决定。
设计者应该尽可能的保护和构建一致性。
保持事物一致意味着改变将会变得迟钝。然而,我们需要我们的产品变得可好玩更令人喜悦。我们需要它进化成一个更好的版本。
所以,当我们保持一致性时,该去什么地方创新,运用变化呢?
这个秘密就藏在你对用户的理解中。你所有的设计都应该来自于那个理解。只有你在应对用户需求时,你才能对已有的一致性设计做调整。做那些微小的改变将使你的产品进化成更好的版本并且保持一致性。
使你的设计和你的用户期望一致。要像了解你的伙伴一样了解你的用户。你需要看穿他们的眼睛,读懂他们的心。成为他们当中的一员。
将一致性和设计的基础结合起来,比如视觉体系,排版,可用性模式等等。 记住,小改变是好的,但是大改变不一定更好!
通过减少不必要的惊喜来创造一致性,这样可以增强可用性和带来更多喜悦。
说起为什么要保持一致性,人们可能会说出“一致性可以让用户感到舒适,可以降低用户的学习成本等”大路货,事实上,为设计一致性提供理论支持的是人类认知中的图式理论。图式,是人脑中已有的知识经验的网络,同时,它也表征特定概念、事物或事件的认知结构,并影响对相关信息的加工过程。图式建构好后,会通过告诉人们应该期望什么,来指导和分配人们的注意。例如用户在APP上填了好几个表单,均是填完表单后,在表单的下方点击“确定”按钮提交,那么用户将会构建出填写表单的图式,以后此图式就会指导用户填完表单后,在下方寻找“确定”按钮,若此时页面中的”确定”按钮被移至右上角,则用户可能需要更长时间才能发现,甚至可能一直在下方寻找,而难以预期按钮在右上角。因此,保持一致性有利于帮助用户构建图式,并在后期减少用户的学习成本,提高操作效率。
但图式并非毫无缺点,图式对注意的另一种影响表现为人们可能更容易忽视与图式不一致的信息。就如上例,如果在表单左下方增加一条提示或者注意事项,那么用户很可能不会注意到,因为在之前关于表单的图式里,并没有注意事项这一内容。此时,为了引起用户的注意,则需要对注意事项进行强化处理,例如增大字体,改变字体颜色等,使其与图式明显不一致,才能更容易地获得注意,或者采用一个完全不同的表单设计形式,帮助用户脱离图式的“束缚”,使用户不会因为图式的错误指导而忽略页面中的信息。然而某些时候,新内容仅获得用户注意是不足够的,尤其是当希望用户形成新的行为模式时,则必须采用强烈的不一致,来防止用户启动原有图式。例如一个原本仅售卖低风险,甚至是保本的理财产品平台,如果要引入高风险产品,则需要用户在进行购买行为时,保持高度的警觉和谨慎,此时即使高风险产品的种类、信息、购买流程和原有产品都相似,却也应该采用另一设计风格(其中一种可能是低风险产品的购买按钮是蓝色的,而高风险产品是红色的)。此时如果我们在评价设计时,不去猜度设计师的意图,而盲目搬出一致性原则,则容易做出错误的判断。
最后,关于图式理论,其内容还有更多精彩部分,此处不详述,欢迎自行查阅学习。