UI设计用户体验的设计规范新手值得收藏

当我们观看一幅视觉作品时，通常可以马上判断它是否吸引人。然而，很少有人能说出为什么这样的布局在视觉上是有吸引力的。利用良好视觉设计原则的图形可以提升参与度并提高可用性。

视觉设计原则告诉我们如何将线条、形状、颜色、网格或空间等设计元素组合在一起，以创造出极具表现力的视觉效果。

本文主要讲述影响用户体验的5条视觉设计原则：

比例 Scale

视觉层次 Visual hierarchy

平衡 Balance

对比 Contrast

格式塔 Gestalt

5条视觉设计原则：比例、视觉层次、平衡、对比、格式塔。遵循这5条视觉设计原则可以提升参与度并提高可用性。

1. 比例 Scale

几乎所有好的视觉设计都会用到该原则。

定义：「比例原则」是指使用相对大小来表示构图中的重要性和等级。

换句话说，设计中最重要的元素总是会比不重要的元素大。遵循此原则的道理很简单：对象物体越大越容易被注意到。

视觉上赏心悦目的设计通常使用不超过3种尺寸。拥有一系列大小不同的元素，不仅会在布局中创造出多样性，而且还将在页面上建立视觉层次结构（请参阅下一个原则）。确保最大程度地强调设计中最重要的方面。

当比例原则被正确使用并突出强调正确的元素时，用户会很容易理解该视觉对象并清楚地知道该如何使用它。

iPhone版本的Medium：热门文章在视觉上比其他文章都大。该视觉比例引导用户访问可能更有趣的文章。

在Cracow的这个停车场中，最重要的信息，也就是你当前所在的H区，视觉比例最大。图片来源网络

2. 视觉层次 Visual Hierarchy

具有良好视觉层次的布局可以很轻松地被用户理解。

定义：「视觉层次结构原则」是指通过页面上的视觉引导将不同设计元素按照其重要性按序排列。

视觉层次结构可以通过比例、值、颜色、间距、位置和各种其他信号的变化来实现。

视觉层次结构控制体验的交付。如果你很难定位页面上应该往哪儿看，则很可能是其布局缺少清晰的视觉层次结构。

要创建清晰的视觉层次结构，请使用2-3种字体大小向用户指示页面中迷你信息体系结构中最重要的内容或处于最高级别的内容。或者，考虑对重要项目使用明亮的颜色，对不太重要的项目使用娇弱颜色。

比例原则也可以帮助定义视觉层次结构，因此可以针对不同的设计元素使用不同的比例。一般的经验法则是在设计中包括小、中、大三种形式的组件。

Medium 移动应用程序：标题、副标题和正文文本都具有清晰的视觉层次结构。文章的每个组成部分的大小都与其重要性相匹配。

Uber移动应用程序：Uber移动应用程序中的视觉层次结构清晰明了。地图和输入表单（屏幕的下半部分）将屏幕一分为二，告诉用户这两部分内容是同等重要的。那么眼睛会被吸引到哪里？当然是字段，因为其背景为灰色，紧接着便是离它最近的下方，字体略小。

Dropbox移动应用程序：Dropbox移动应用程序的视觉层次结构不太清晰。即使说明文字的大小小于文件名，也很难区分不同的文件。缩略图为层次结构提供了附加图层，但它们的存在取决于可用的文件类型。用户最终必须进行大量的分析和读取才能找到他们要查找的文件夹或文件。

3. 平衡 Balance

平衡就像跷跷板：不是平衡重量，而是平衡设计元素。

定义：「平衡原则」是指创建具有令人满意布局或比例的设计元素。当屏幕假想轴的两侧均存在相等分布（但不一定对称）的视觉信号时，就会发生平衡。该轴通常是垂直的，但也可以是水平的。

与平衡重量一样，如果在假象轴的两侧分别放置一个较小的设计元素和一个较大的设计元素，设计则会失衡。设计元素所占的面积在创建平衡时很重要，而不仅仅是元素的数量。

在你的视觉上创建的虚轴将作为你如何进行布局的参考点，并且帮助你理解当前视觉平衡的状态。在一个平衡的设计中，没有一个区域可以带偏你的视线，以至于忽略另外那个区域（即使一些元素可能具有更多的视觉权重及视觉焦点）。平衡可以是：

• 对称的：元素相对于中心虚轴对称分布

• 不对称的：元素相对于中心轴非对称分布

• 放射状的：元素从圆形中心的公共点向外辐射

在视觉中使用的平衡类型取决于你要传达的内容。不对称平衡是动态的且引人入胜的，它创造了一种能量和运动感。对称平衡是静态的。径向平衡始终将眼睛引向构图的中心位置。

The Hub Style Exploration：构图稳定，这在你寻找自己喜欢的工作时尤其合适。这里的平衡是对称的。如果要沿着网站的中心绘制一个假想的垂直轴，则元素在轴的两侧均等分布。图片来源网络

耐克：此页面属于不对称平衡，同耐克品牌的活力和运动感相呼应。如果要在此视觉效果的中心向下绘制一条垂直轴，则该轴两侧的元素数量大致相同。但是，区别在于它们在相同的位置上内容不尽相同。从技术上讲，鞋子的左侧有更多的文本，但它与右侧的较大文本相平衡，后者占用更多空间和视觉权重，因此使它们看起来非常相似。

Brathwait腕表：这款经典手表在径向上保持平衡。眼睛立即被吸引到表盘的中心，并且无论在何处画出虚轴，所有视权重均等分配。

这种社论文章属于不平衡。如果要沿页面向下绘制垂直轴，则元素在轴的两侧明显分布不均。图片来源网络

4. 对比 Contrast

这是另一个常用的原则，使你设计的某些部分可以脱颖而出。

定义：「对比原则」是指视觉上将不同的元素并列排放，以传达这些元素不同的事实（例如，属于不同类别、具有不同功能或行为不同等）。

换句话说，对比为眼睛提供了两个物体之间（或两组物体之间）的明显差异（例如，大小或颜色），以便强调它们是不同的。

对比原则通常通过颜色来实现。例如，红色常在UI设计中使用（尤其是在iOS中）以表示删除。明亮的颜色，比如红色，表明与其他颜色不同。

iOS的提醒事项应用程序：红色与周围的情境形成强烈对比，用于删除。

通常，在用户体验中，「对比」一词会让人联想到文本与其背景之间的对比。有时设计人员会故意降低文本的对比度，以便弱化不太重要的文本。但是这种方法很危险，降低文本对比度的同时还会降低可读性，并可能使你的内容无法访问。请确保使用颜色对比度检查器来确保所有目标用户均可阅读你的内容。

Greenhouse Juice Co：瓶子上文字的可读性取决于果汁的颜色。尽管这种对比度在某些果汁中效果很好，但在浅色果汁的瓶身上几乎无法读取。图片来源网络

5. 格式塔原则 Gestalt

格式塔原则是心理学家在20世纪初确立的一组捕捉人类如何理解图像的原则。

定义：「格式塔原则」是指人类通过下意识地将各个部分安排到有组织的系统中来创建一个整体，而不是将它们理解为一系列不同的元素，来解释如何简化和组织由许多元素组成的复杂图像。换句话说，格式塔原则捕捉了我们感知整体而不是个体元素的倾向。

有几种格式塔原则，包括相似性、连续性、闭合性、邻近性、图形/背景以及对称性和顺序。邻近性原则对于用户体验尤为重要，它是指视觉上更接近于在一起的项目被视为同一组的一部分。

格式塔闭合原理使我们能够看到两个人物在接吻，而不是毕加索绘画中的任意形状。我们的大脑填补了缺失的部分，创造出两个人物。

我们还经常看到格式塔原则在徽标中的应用。在NBC徽标中，空白处没有孔雀，但我们的大脑视这里有孔雀。

Uber注册表单使用了格式塔邻近性原则：字段标签靠近其相应的文本框，以便轻松了解在该字段输入框中应该键入哪些信息。如果一个字段输入框和后续标签（用于下一个字段）之间的空间较小，则会让用户难以理解。

2017年美国税单：字段之间的空间不足使得填写该表很麻烦。你很容易错过第二个「姓氏 Last name」字段所应填写的内容。使用格式塔邻近性原则来区分涉及自己和配偶的字段，会使用户体验受益。

为什么视觉设计原则很重要

我们为什么要重视和理解视觉设计原则？除了使某些东西「看起来美观」之外，理解和利用这些原则还有助于：

• 提高可用性。遵循这些视觉设计原则通常会使布局易于使用。例如，经常用于创作精美艺术品的黄金比例也可应用于设计排版，以在字体大小、行高和行宽之间创建视觉上令人愉悦的关系。这样做通常会导致行宽缩短，从而在网页上通过空白区域产生平衡，并使文本更易于阅读。与强大的交互设计配合使用时，视觉设计将提高任务成功率和用户参与度。

  
  

• 激发情感和喜悦。美丽的事物总会引起积极的情绪。实际上，「审美－可用性效应 Aesthetic–usability effect」表示，当人们发现设计具有视觉吸引力时，他们可能对轻微的可用性错误会更宽容。通过遵循良好的视觉设计原则，设计人员可以创建外观良好的UI，从而使用户感觉良好。

  
  

• 加强品牌认知度。强大的视觉系统可建立用户对产品的信任和兴趣，并恰当地表现和强化品牌。