当我们观看一幅视觉作品时，通常可以马上判断它是否吸引人。然而，很少有人能说出为什么这样的布局在视觉上是有吸引力的。利用良好视觉设计原则的图形可以提升参与度并提高可用性。
视觉设计原则告诉我们如何将线条、形状、颜色、网格或空间等设计元素组合在一起，以创造出极具表现力的视觉效果。
本文主要讲述影响用户体验的5条视觉设计原则：
- 比例 Scale
- 视觉层次 Visual hierarchy
- 平衡 Balance
- 对比 Contrast
- 格式塔 Gestalt
1. 比例 Scale
几乎所有好的视觉设计都会用到该原则。
定义：「比例原则」是指使用相对大小来表示构图中的重要性和等级。
换句话说，设计中最重要的元素总是会比不重要的元素大。遵循此原则的道理很简单：对象物体越大越容易被注意到。
视觉上赏心悦目的设计通常使用不超过3种尺寸。拥有一系列大小不同的元素，不仅会在布局中创造出多样性，而且还将在页面上建立视觉层次结构（请参阅下一个原则）。确保最大程度地强调设计中最重要的方面。
当比例原则被正确使用并突出强调正确的元素时，用户会很容易理解该视觉对象并清楚地知道该如何使用它。
2. 视觉层次 Visual Hierarchy
具有良好视觉层次的布局可以很轻松地被用户理解。
定义：「视觉层次结构原则」是指通过页面上的视觉引导将不同设计元素按照其重要性按序排列。
视觉层次结构可以通过比例、值、颜色、间距、位置和各种其他信号的变化来实现。
视觉层次结构控制体验的交付。如果你很难定位页面上应该往哪儿看，则很可能是其布局缺少清晰的视觉层次结构。
要创建清晰的视觉层次结构，请使用2-3种字体大小向用户指示页面中迷你信息体系结构中最重要的内容或处于最高级别的内容。或者，考虑对重要项目使用明亮的颜色，对不太重要的项目使用娇弱颜色。
比例原则也可以帮助定义视觉层次结构，因此可以针对不同的设计元素使用不同的比例。一般的经验法则是在设计中包括小、中、大三种形式的组件。
3. 平衡 Balance
平衡就像跷跷板：不是平衡重量，而是平衡设计元素。
定义：「平衡原则」是指创建具有令人满意布局或比例的设计元素。当屏幕假想轴的两侧均存在相等分布（但不一定对称）的视觉信号时，就会发生平衡。该轴通常是垂直的，但也可以是水平的。
与平衡重量一样，如果在假象轴的两侧分别放置一个较小的设计元素和一个较大的设计元素，设计则会失衡。设计元素所占的面积在创建平衡时很重要，而不仅仅是元素的数量。
在你的视觉上创建的虚轴将作为你如何进行布局的参考点，并且帮助你理解当前视觉平衡的状态。在一个平衡的设计中，没有一个区域可以带偏你的视线，以至于忽略另外那个区域（即使一些元素可能具有更多的视觉权重及视觉焦点）。平衡可以是：
- 对称的：元素相对于中心虚轴对称分布
- 不对称的：元素相对于中心轴非对称分布
- 放射状的：元素从圆形中心的公共点向外辐射
在视觉中使用的平衡类型取决于你要传达的内容。不对称平衡是动态的且引人入胜的，它创造了一种能量和运动感。对称平衡是静态的。径向平衡始终将眼睛引向构图的中心位置。
4. 对比 Contrast
这是另一个常用的原则，使你设计的某些部分可以脱颖而出。
定义：「对比原则」是指视觉上将不同的元素并列排放，以传达这些元素不同的事实（例如，属于不同类别、具有不同功能或行为不同等）。
换句话说，对比为眼睛提供了两个物体之间（或两组物体之间）的明显差异（例如，大小或颜色），以便强调它们是不同的。
对比原则通常通过颜色来实现。例如，红色常在UI设计中使用（尤其是在iOS中）以表示删除。明亮的颜色，比如红色，表明与其他颜色不同。
通常，在用户体验中，「对比」一词会让人联想到文本与其背景之间的对比。有时设计人员会故意降低文本的对比度，以便弱化不太重要的文本。但是这种方法很危险，降低文本对比度的同时还会降低可读性，并可能使你的内容无法访问。请确保使用颜色对比度检查器来确保所有目标用户均可阅读你的内容。
5. 格式塔原则 Gestalt
格式塔原则是心理学家在20世纪初确立的一组捕捉人类如何理解图像的原则。
定义：「格式塔原则」是指人类通过下意识地将各个部分安排到有组织的系统中来创建一个整体，而不是将它们理解为一系列不同的元素，来解释如何简化和组织由许多元素组成的复杂图像。换句话说，格式塔原则捕捉了我们感知整体而不是个体元素的倾向。
有几种格式塔原则，包括相似性、连续性、闭合性、邻近性、图形/背景以及对称性和顺序。邻近性原则对于用户体验尤为重要，它是指视觉上更接近于在一起的项目被视为同一组的一部分。
为什么视觉设计原则很重要
我们为什么要重视和理解视觉设计原则？除了使某些东西「看起来美观」之外，理解和利用这些原则还有助于：
- 提高可用性。遵循这些视觉设计原则通常会使布局易于使用。例如，经常用于创作精美艺术品的黄金比例也可应用于设计排版，以在字体大小、行高和行宽之间创建视觉上令人愉悦的关系。这样做通常会导致行宽缩短，从而在网页上通过空白区域产生平衡，并使文本更易于阅读。与强大的交互设计配合使用时，视觉设计将提高任务成功率和用户参与度。
- 激发情感和喜悦。美丽的事物总会引起积极的情绪。实际上，「审美－可用性效应 Aesthetic–usability effect」表示，当人们发现设计具有视觉吸引力时，他们可能对轻微的可用性错误会更宽容。通过遵循良好的视觉设计原则，设计人员可以创建外观良好的UI，从而使用户感觉良好。
- 加强品牌认知度。强大的视觉系统可建立用户对产品的信任和兴趣，并恰当地表现和强化品牌。
参考资料
- Lupton, E. (2008). Graphic Design: The New Basics. New York: Princeton Architectural Press.
- Poulin, R. (2018). The Language of Graphic Design. Beverly: Quarto Publishing Group USA, Inc.
英文原文：https://www.nngroup.com/articles/principles-visual-design/
原文作者：Kelley Gordon
编译作者：@设计吐司
以上译文仅代表原作者观点。如需转载请遵循CC版权协议正确标明出处。