设计的一致性

在设计、产品和系统中构建和维护一致的体验可能会对您的客户及其体验产生重大影响。

客户逐渐习惯特定的界面对象，甚至这些对象在屏幕上的位置。这使得体验变得熟悉，并且您的产品变得更加易于使用。

这包括建立可在多种类型的布局和界面中使用的产品的颜色、字体和色调。

figma-7d7l42" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; font-weight: 500; font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">凝聚力

产品的体验应该具有凝聚力，从一个元素延续到下一个元素，就像一本书的结构一样。每个视觉元素都会向观众提示您仍然处于同一个故事中，从一个章节移动到另一个章节。保持颜色、字体和对齐方式一致可以帮助观众专注于情节。

这可以追溯到我们在简单性课程中对设计模式的讨论。维护对象的位置（例如顶部两个角之一的菜单按钮）是许多产品中建立的一种设计模式，您也可以在您的产品中构建这种模式。如果您的客户已经知道您的产品是如何工作的，因为它的工作原理与他们熟悉的其他产品类似，那么他们就不必花时间学习您的界面。

人们逐渐习惯了现有的模式，并且我们的大脑针对回忆和重复模式进行了优化。我们对特定产品的工作原理达成共识，然后对类似产品的工作原理抱有期望。这种直观性基于整个设计行业的设计模式，也是不断关注其他产品和设计以了解它们如何解决问题的原因之一。

这些模式也出现在常见的设计系统中，并且是 Google 的Material Design和 Apple 的人机界面指南的优点。建立许多应用程序设计人员使用的元素可以在数千个应用程序之间创建一致性。

当您为设计建立基调和基调时，您也会希望它们感觉一致。从一个屏幕或产品到下一个屏幕或产品的延续，就好像一个声音正在与您的客户交谈。如果我点击您网站上的链接，而下一页感觉完全不同，我可能会认为超链接将我带到了另一个网站，而不是同一网站的另一个页面。如果您的主页通风良好，有大量空白，那么您的产品页面不应该密集且内容繁重，呼吸空间很小。当您的受众发现新元素时，他们应该立即知道他们仍在使用您的产品。

这也扩展到你的界面文案的基调。您的写作应与您的产品保持一致。如果您的产品面向企业受众，并且您的主页或登陆屏幕以正式、专业的方式描述该产品，那么您产品中的其他页面或屏幕不应语气随意且充满双关语。一个很好的指南示例是 Shopify 的Polaris 设计系统的语音和音调部分。

在分享产品时，体验的一致性也很重要。客户使用您的应用订购杂货或购买产品可能会获得良好的体验。如此之多以至于他们会宣传你的产品，告诉他们的朋友它有多么伟大或者它能解决他们的问题有多么美妙。如果这些朋友后来使用你的产品但没有这种体验，这也是不一致的。

figma-7d7l42" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; font-weight: 500; font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">颜色和字体

经验法则是在整个产品（例如网站或应用程序）中使用两种或三种类型的字体。使用超过这个数量可能会让产品感觉无组织或忙碌，并且可能会分散注意力。对于颜色，一个很好的起点是一种原色、一种次要颜色和这些颜色的几种色调，再加上黑色和白色。在复杂的系统中使用更多的颜色可以成功地工作，但每次添加都会变得更加困难。

如上所述，一致性有很多好处，因此使用额外的字体或颜色可以用于区分，但应该感觉它适合体验。

figma-7d7l42" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; font-weight: 500; font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">结盟

使文档或界面看起来和感觉良好设计的最简单方法之一是对象在空间中的位置保持一致。

假设您的应用程序屏幕有一个标题，并且距框架或屏幕顶部 100 像素。您希望所有其他具有相似标题的应用程序屏幕都将这些标题放在同一位置。

参考线和测量是您的朋友 - 只需单击 Figma 中的标尺并拖动即可创建参考线，并在选择对象时按住 Alt 键以查看与其周围对象的距离。

考虑网站、海报、应用程序屏幕、信息图等的左侧或左侧垂直边距，其中包含徽标、图像、标题和一些正文文本。将这些元素相互对齐将使眼睛更容易在页面上向下移动，同时也使该内容的布局看起来经过深思熟虑和有意为之。

figma-7d7l42" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; font-weight: 500; font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">不一致

您还可以利用打破一致性来发挥自己的优势。我们避免分心，这样我们的界面就不会妨碍客户使用我们的产品。缺乏一致性可以用来强调并吸引注意力。当您眼前发生的事情偏离预期模式时，我们的大脑会检测模式并发出您的注意信号。

一个例子是缩进引用块以进一步强调它。在考虑强调类型时要记住的一件事是限制强调的数量。如果您还缩进，则粗体、红色、斜体、较大的文本块并不是真正必要的。请记住：如果一切都是大胆的，那么就没有什么是大胆的——你强调的内容的数量也很重要。

正如我们将在即将到来的层次结构课程中讨论的那样，这种强调的创建是一种工具，用于吸引客户的注意力，并通过引导他们的眼睛移动的位置以及他们可能记住的细节来帮助您的客户流。

一致性经常被打破，而且这种情况会经常发生。没关系！了解客户的需求并解决他们的问题比保持产品的一致性更重要。如果您只关注僵化的系统，您可能无法解决这些问题。这是一种平衡。