一致性设计原则：你应该知道的事情

作者：MADS SOEGAARD；翻译：Myles

Interaction Design Foundation

Interaction Design Foundation是一个国际大型用户体验设计社区，旨在为设计从业者提供丰富的学习内容和设计知识。

这篇文章是转载Interaction Design Foundation社区：文章已在原社区获得作者的授权。

Consistency: MORE than what you think

让我们来研究一个比视觉更重要的主题。对你的设计应用更深入的一致性会产生很好的结果，以达到用户满意。

一致性能够使用户能够熟悉你的网站、你的品牌等，并保证你的公司与他们保持互动。

确保一致性意味着在整个站点的概念化和设计阶段都要仔细和面面俱到。定义、规划、设计和测试任何一个环节都需要具有一致性，则在设计过程的最后可以省去许多令人头痛的问题。

如果你正在做一个真实世界的设计项目（砖和砂浆），一致性就不仅体现在您的网站上；像线上的品牌信息，配色方案等，都必须与线下的具体实体保持一致性。虚拟现实必须以类似的方式连接到现实中去。

一致性的核心是创建信任。它创造了一种用户可以依赖的体验，并且不仅仅是站点的外观和感觉，它还触及到交互和行为模式，甚至触及更深层次的体验。作为一名设计师，你需要确保公司核心的一致性。一致性源于企业和用户目标的一致性。考虑如下问题：人们如何使用你的品牌？作为一个公司，你想知道什么？你的用户可能有什么问题？在你的站点上完成某个特定任务或过程的最简单的方法是什么？通过将一致性概念化是非常重要的，因为它能够提供一致的体验，以及一致的设计。

品牌一致性的演化

在20世纪50年代，一种新的心态在战后乐观的环境中发展起来。标准化（制定和实施技术标准的进程）正在成为一个繁荣新时代的中心力量。

标准化的愿景是存在的，然而技术上的限制使得公司不得不依赖于能够让我们今天看来能够接受的公众参与方式。在当时非常基础的广播广告的背景下，存在处于初期的电视广告（在很少电视频道上才有），和不那么成熟的印刷技术，公司几乎无法接触消费者。尽管如此，企业设计师们还是充分利用了他们能够使用的沟通手段，力求以简洁的方式让他们的设计“始终如一”，这样顾客便不会对不用的设计存在新问题。品牌设计那时就是用了简单且吸引人的设计，比如说，司机可以在看到广告牌的情况下瞬间消化广告内容。

如今，昔日品牌一致性设计的精神很难以继续；甚至公司建设品牌的方式已经从根本上改变。几十年前的那些“漂亮”的广告语和规整的平面设计在现在看来广告语过于陈旧，色彩枯燥乏味。如果这些设计不是你所欣赏的，那么它们对你来说看起来经典得让你有些乏味。技术在许多方面为用户重新定义了看待现实的方法。以前，公司受到技术的限制，后来技术提升后，公司也同样被限制。从用户直接接触的用户界面上去除品牌设计后，设计人员也不需要面对现代同行们的挑战。

后现代社会对品牌非常挑剔。曾经，品牌推广依靠的是广播、电视和平面广告，但现在已经“爆炸”到另一个维度。互联网首先与社交媒体结合在一起，现在迫使企业纷纷推出品牌活动。现在的消费者在许多方面和地点与品牌互动。品牌、形象和对公司一致性的需求问题变得越来越复杂。许多用户根据其他标准对品牌分析、审查和得出结论。他们通过不同的渠道和各种各样的设备观察品牌的出现。考虑到所有这些因素，企业如何才能达到一致性？在不断变化的期望中，设计师能做什么来迎合品牌呢？

好吧，作为设计师，当前时代的复杂性意味着你应该力求完全一致。随着公司和用户在不同时刻接触到的渠道、设备和环境，一致性现在变得越来越困难。我们必须保持对现实世界中用户的关注，以最大限度地提升他们的体验。好消息是，我们有办法跟上用户的期望，用户期望是并不是总在变化的。

一致性不仅仅是关于营销

一致性对营销来说，是不断的重复。它确保用户总是一次又一次地找到相同的信息，从而达到他们接收了一个品牌。想想你最喜欢的连锁餐馆。现在，假设你饿了（也许现在你饿了！），刚刚转过街角，期待看到餐厅上方那令人欣慰的标志。不管你是否意识到，当你看到与自己期望的品牌的logo和颜色时，你会感到开心。你要相信，当你看到这个标准，你的大脑会告诉你的胃，这就是你需要的。这个过程中国年，设计的一致性就完成了它的工作。
然而，现在还有更多的东西需要考虑，公司和他们的品牌名称必须在新领域中不断探索。他们的身份定义也在不断调整。过去，logo标志着一切。而现在，品牌在虚拟世界中与用户互动从而建立认识和关注，与在现实世界中的logo同等重要。

品牌已经从旧的，被动的方式（在电视银幕，广告牌，或杂志广告上打广告）转化到一个高度互动的用户环节。如果你猜测这种交互发生在计算机上，你那么猜对了。根据谷歌的一项主要研究，你知道有90%的媒体在屏幕上被消费吗？其中大约五分之二发生在智能手机上——用户在手持设备上使用品牌。正因为如此，品牌不得不重新考虑他们的策略。现代设计师不得不通过制造流畅的品牌标识来参与竞争。

提供一致性的体验，不仅仅是品牌

一致性是可用性和用户体验的关键。一致性设计在跨设备和跨格式过程中，减少了用户的学习，促进了熟悉度和黏性，确保用户不必重复接收品牌。一致的设计是用户的情感和认知方面的必要条件，从组织的角度来看，维护也更容易。用户会记住品牌设计中的细节，如果用户发觉品牌的设计不相同时，是会怀疑此品牌是否是冒牌者。所以设计中的变化可能会造成信心的损失，即便有时需要不同的设计。

AOL（美国在线）是一个很好关于品牌转型的例子。具有讽刺意味的是，它是互联网先驱，在美国很大，在英国比较大。当它复出时， “AOL”变成了现在的“Aol”，将金鱼的图形变为了“投掷号角”的手形。这意味着它被很好地移植到一个动态的多维场景中。1991年的时候，用户可以比原来更好的认知这个设计。在英国，AOL依靠一个名为“康妮”的标志性特色，在1998年到2002年间，将用户从没有互联网体验带入到了舒适用户体验中。身材高挑，仪态平静，连衣裙不断变化，像电脑化设计序列，这个设计的功能是为了舒缓和引导用户。一旦英国的用户变得更有经验，Connie（以及演绎她的女演员）就从AOL的品牌形象中消失了。

AOL, UK’s Connie tells the public about AOL and the Internet, 2001.（AOL, 英国的Connie告诉大众AOL和互联网, 2001.）

超级杯是相当于美式橄榄球的世界杯。在一月份在电视上看过超级杯的人，知道观众的画面是广告。这些尖端，有趣和酷炫的设计使品牌面向越来越苛刻的观众。在美国，这是吸引用户在电视上的最终方式。品牌如百威和CBS都知道，铸造更加令人印象深刻的品牌标识至关重要。即使与前几代人一样都坐在家里看大屏幕的电视，2015年的美国用户可以享受到一个优势。在游戏过程中和结束之后，用户将在手机上继续查看品牌信息;他们可以谈论最酷的广告品牌。其他人接触到品牌后，也会寻找这些品牌来获得相关的信息。

用户面临的品牌范围比以往任何时候都多。通常，他们将努力适应同一家公司的一组相关产品，因为这些产品的外观和工作方式彼此不同。这使得用户遭遇破坏的用户体验。

破坏用户体验是个大问题。品牌可以通过五种方式解决此问题。作为设计师，您应该熟悉补救用户体验的方法：

视觉一致性&简化：在规划阶段设计那些更加基础的元素，使用更均匀的字体和颜色等。
行为一致性：重用已经得到证明的设计模式。
行为优化：设计使用户能够减少工作量，更加高效，消除冗余或者不必要的工作。
统一经验的策略 - 理想工作流程值得被复用在其他模块上。
UX文化：在设计之前确定UX将成为优先考虑的核心事项。

视觉设计上的一致性

一旦您定义了一致的用户体验（UX），这种一致性也需要被转换成界面和平面设计。我们来仔细看看我们如何实现视觉一致性。我们只需要考虑我们设计的元素，例如：

颜色：你的焦点是什么？你的辅色是什么？记住不同颜色的意义。您的品牌的性质是什么？
图形：您将如何使用图像或照片？图标和按钮怎样设计？想想你的品牌的调性。在整个过程中，是否能够精确的和商业化的？或者，您的品牌更有趣吗？这都需要反映在图形中。
排版：你将使用什么层次结构（标题，子标题等）？什么字体大小？您将在哪里显示与设计中其他元素相关的文字？或者你能提供轻松愉快的设计方案么？
大小：您将使用怎样大小的内容块？什么尺寸的图像？您将在设计元素与尺寸之间建立什么关系？

虽然所有页面之间的一致性都很重要，但是在视觉和界面中，元素的设计方法保持一致性是尤其重要的。人们会注意到你的标志是否在页面之间保持一致。他们会注意到菜单是否突然从顶部切换到侧面。他们很有可能注意到页面上最熟悉内容的不一致。

最近，设计师不得不变得更无畏，而不是愚蠢。眼下是品牌适应性和趣味性的时代。想想Google及其标志。他们不怕调整它并使它适应不同场景！消费者将会喜欢这个设计，而不是设计出来的日期。现在，设计师必须根据他们的反馈来迎合消费者。这是一个冒险的游戏，但它很管用。遵循创造和保持品牌历史一致的核心原则，并将其与目标用户的需求和特征相匹配;这要求你必须灵活。

在你的设计中保持一致

令人高兴的是，有很多方法可以确保您的设计是一致的，包括：

风格框架指南

风格框架指南是指定如何使用设计元素的书面文档。它类似于客户给设计师的品牌指南，但它更深入，并且涉及到预期的网页设计的关键风格和元素。许多网页设计师将在设计过程的早期阶段为客户创建样式指南。

模式库

模式库就像一个风格指南，但是是更极端的方式;这些是在设计中触及每一个元素的详细文档。模式库通常有三种风格：

设计模式
标记模式
内容模式

这些详细介绍了设计元素以及如何使用它们。它们包括标题，文本，图标等的样式。

CSS和HTML模式库：提供了HTML和CSS类，以便将来可以轻松扩展网站。

模式库也定义了您将在网站上使用的任何内容的语气和风格。这些可能是相当有挑战性的;很难预见将来可能会使用的所有类型的内容。然而，为客户提供内容模式可以帮助确保您的设计符合他们所使用的内容。

CSS 框架

您可以使用CSS框架来帮助提供设计的一致性。这是WordPress设计中非常常见的事情。 Twitter的Bootstrap通常用于管理CSS框架。

总结

一致性让用户对您的网站，品牌等感到熟悉。我们的设计人员使用设计中的一致性来建立和促进与用户的信任。很久以前，这是一件容易的事情;然而，在多平台互动时代，我们拥有丰富的格式，渠道和设备来考虑和选择的时候，就不那么容易。

在概念化阶段，思考用户可能会与您的品牌产生的关联，以及他们的感受。你是为玩具制造商设计的吗？然后你可以在你的图像和字体中注入乐趣。如果你正在设计一个花店，是需要谨慎使用适当语气的，因为花在不同的场合有不同的使用含义。这种一致性是从业务和目标用户目标的一致性定义的，然后在公司的所有地方“流转”：从品牌和营销到用户体验（在这里我们谈论产品和服务行为的一致性，以及各种不同的设备），再到界面和平面设计。

你希望用户如何感受？将一致性反映在你的设计中，你的设计可以引导你的用户与品牌进行互动。即使是最小的东西也要保持一致，例如区块之间的空隙，因为用户会注意到。请记住，设计的一致性是能够让一个品牌值得信赖。用户将对保持一致性的设计产生良好的信心。这就是标志性设计的诞生。

资料

Shillcock, R. (2013) Building Consistency and Relationships into Your Designs. Web Design Tuts Plus. Retrieved from: http://webdesign.tutsplus.com/articles/building-consistency-and-relationships-into-your-designs--webdesign-14849. [2015, May]

Salmeron, J. M. (2013). “If You Love Your Brand, Set It Free”. Smashing Magazine. Retrieved from:

http://www.smashingmagazine.com/2013/02/if-you-love-your-brand-set-it-free/

Klocek, S. (2012). “Fixing A Broken User Experience”. Smashing Magazine. Retrieved from:

https://www.smashingmagazine.com/2012/09/fixing-broken-user-experience/

Smith, T. (2010). “Consistency: Key to a Better User Experience”. Interaction Design. Retrieved from:

http://www.uxbooth.com/articles/consistency-key-to-a-better-user-experience/