在看视觉时，我们通常可以立即说它是否有吸引力或有害。（因为他们经常在唐诺曼的内脏水平上发挥出来model of emotional design。）然而，很少有可能用言语言语，为什么布局视觉上有吸引力。利用良好的视觉设计原理的图形可以推动参与和增加可用性。

视觉设计原则inform us howdesign elementssuch as line, shape, color, grid, or space go together to create well-rounded and thoughtful visuals.

This article defines 5 visual-design principles that impact UX:

  1. 规模
  2. 视觉层次结构
  3. Balance
  4. Contrast
  5. 格式塔

5设计原则：规模，视觉层次结构，平衡，对比度，格式塔

Following these 5 visual-design principles can drive engagement and increase usability.

1. Scale

这个原理通常使用：几乎每个良好的视觉设计都利用了它。

定义：原则scale指使用相对大小来发出信号的重要性和排名。

In other words, when this principle is used properly, the most important elements in a design are bigger than the ones that are less important. The reason behind this principle is simple: when something is big, it’s more likely to be noticed.

视觉上令人愉悦的设计通常使用不超过3种不同的尺寸。具有一系列不同大小的元素不仅会在布局内创建繁文，但它还将在页面上建立可视化层次结构（请参阅下一个原则）。一定要强调您的设计最重要的方面，使其最大。

When the principle of scale is used properly and the right elements are emphasized, users will easily parse the visual and know how to use it.

Medium for iPhone: Popular articles are visually larger than other articles. The scale directs users to potentially more-interesting article.
在克拉科夫的这个停车库中，最重要的信息（Zone H-为您当前正在停车车库中的位置），是最大的规模。（图像来源：www.behance.com.）

2.视觉层次结构

您的用户将轻松理解具有良好视觉层次结构的布局。

Definition：原则visual hierarchyrefers to guiding the eye on the page so that it attends to different design elements in the order of their importance.

可通过规模，值，颜色，间距，放置和各种其他信号的变化来实现视觉层次结构。

视觉层次结构控制提供体验的交付。如果您有很难讨论在页面上的位置，那么它的布局很可能缺少清晰的视觉层次结构。

要创建清晰的视觉层次结构，请使用2-3字体大小向用户指示用户最重要或最高级别的内容迷你信息架构。或者，考虑使用明亮的颜色来实现重要的物品和柔和的颜色，以便不太重要的物品。

Scale也可以帮助定义视觉层次结构，因此为不同的设计元素提供各种尺度。一般的拇指规则是在设计中包括小型，中等和大型组件。

媒体移动应用程序：标题，字幕和正文文本有一个清晰的视觉层次结构。文章的每个组件都是等于其重要性的类型大小。
UBER移动应用程序：优步的移动应用程序中的视觉层次结构清除。屏幕在地图和输入表单（屏幕下半部分）之间分为一半，这强制了这些组件对用户同样重要的思想。眼睛立即被吸引到哪里？领域由于其灰色背景，然后到它下面的最近位置，其字体大小略小。
Dropbox mobile app: The visual hierarchy is less clear in Dropbox’s mobile app. Even though the explanatory text is lower in size than the file name, it’s hard to distinguish among the different files. Thumbnails provide an additional layer to the hierarchy, but their presence depends on the available file types. Users ultimately have to do a lot of parsing and reading to find the folder or file they are looking for.

3.平衡

Balance is like a seesaw: instead of weight, you are balancing design elements.

Definition：原则巴兰ce指的是一种满足的布置或设计元素的比例。当在虚构轴的两侧都有一个同样分布的（但不一定对称的）量的视觉信号，在虚轴的两侧穿过屏幕的中间时，发生平衡。该轴通常是垂直的，但也可以是水平的。

Just like when balancing weight, if you were to have one small design element and one large design element on the two sides of the axis, the design would feel a bit unbalanced. The area taken by the design element matters when creating balance, not just the number of elements.

您在Visual上建立的虚构轴将是如何组织布局的参考点，并将帮助您了解视觉上的当前余额状态。在平衡的设计中，没有一个区域吸引你的眼睛，你看不到其他地区（尽管一些元素可能携带更多的视觉重量和焦点）。平衡可以是：

您在视觉中使用的平衡类型取决于您想要传达的内容。不对称是动态和接合。它创造了能量和运动感。对称性是安静和静态的。径向平衡将始终引导眼睛到组合物的中心。

The Hub Style Exploration: The composition feels stable, which is especially appropriate when you’re looking for a job you love. The balance here is symmetrical. If you were to draw an imaginary vertical axis down the center of the website, elements are distributed equally on both sides of the axis. (Image source:dribbble.com）
耐克：这个页面是不对称的平衡，给予耐克品牌的能量和运动感。如果您要在该视觉上绘制垂直轴，则轴两侧的元素数大致相同。然而，差异是它们不相同并且在相同的确切位置。即使在鞋子的左侧有一点文字，它也与右侧的较大文本均衡，占用更多空间和视觉重量，从而使它们看起来很相似。
Brathwait手表：这种经典手表径向平衡。无论绘制假想轴的位置如何，眼睛立即被拉伸到手表面的中心，并且所有视觉重量都分布。
这一编辑部蔓延不平衡。如果您要将垂直轴绘制下页，则元素不同样在轴的两侧分布。（图像来源：www.behance.net.）

对比

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

Definition：原则contrast指视觉异常不同元件的并置，以传达这些元素不同的事实（例如，属于不同类别，具有不同的功能，表现不同）。

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

原则contrast is often applied through color. For example, red is frequently used in UI designs, especially on iOS, to signify deleting. The bright color signals that a red element is different from the rest.

提醒IOS上的应用程序：与其周围上下文具有高对比度的颜色红色，保留用于删除。

通常，在UX中，“对比度”这个词带来了文本和背景之间的对比。有时设计人员故意减少文本对比，以便不太重要的文本。但这种方法很危险 -减少文本对比也减少易读性并且可能会使您的内容无法进入。使用颜色对比度检查器以确保所有目标用户仍然可以读取您的内容。

温室果汁CO：瓶子上的文本的易读性依赖于果汁的颜色。虽然对比度适用于一些果汁，但具有浅色果汁的瓶子标签几乎不可能阅读。（图像来源：www.instagram.com）

5.格式塔原则

这些是由格式塔心理学家二十世纪初成立的一系列原则。他们捕获了人类如何理解图像。

Definition：格式塔原则解释人文如何简化和组织复杂的图像，通过将零件安排到创建一个整体的有组织的系统中，而不是将它们作为一系列不同元素解释它们，而不是将零件组成了许多元素的复杂图像。换句话说，格式塔原则捕捉我们的倾向，而不是各个元素。

There are several Gestalt principles, including相似，继续，关闭，接近那公共区域，图/地和对称性和命令。对UX尤其重要 - 它是指物品的原因在一起视觉上更近are perceived as part of the same group.

它是盖泰尔封闭原理，让我们看到两个数字接吻而不是毕加索绘画中的随机形状。我们的大脑填补了缺失的碎片来创造两个数字。
我们还经常在徽标中看到GESTALT理论的应用。在NBC标志中，空白处没有孔雀，但我们的大脑在那里理解一个。
优步注册表单使用Gestalt接近原理：field labels are close to their corresponding text boxes那making it easy to understand what information to type in which fields. If there was less space between a field and the subsequent label (for the next field), it would get confusing for users to know what belongs with what.
2017年美国税收形式：田间之间缺乏空间使其填补了繁琐的体验。您可以轻松地错过第二个姓氏字段所指的内容。使用格式塔接近原理来区分指代自我和配偶的领域会让UX受益。

Why Visual-Design Principles are Important

Why should we care about and understand visual-design principles? Beyond making something “look pretty,” understanding and taking advantage of them serves to:

  • Increase usability.以下这些视觉设计原则通常会导致布局易于使用。例如，通常用于创造美丽艺术品的金色比率也用于排版，以在字体大小，线路高度和线宽之间创建视觉上令人愉悦的关系。结果通常导致缩短的线路长度，它在网页上创建了平衡（通过空白空间），并更容易读取文本。当与强大的交互设计配对时，视觉设计将增加任务成功率和用户参与。
  • Provokeemotionand delight.美好的东西引起积极情绪。（实际上，aesthetic–usability效果说，当人们在视觉上吸引设计时，他们可能会更加宽容微小的可用性意外。）通过遵循良好的视觉设计的原则，设计人员可以创建一个看起来很好的UI，因此让用户感觉良好。
  • Strengthen brand perception.强大的视觉系统构建了用户信任和对产品的兴趣，并适当地代表并增强了牌。

参考资料

Lupton，E。（2008）。图形设计：新基础知识。纽约：普林斯顿建筑出版社。

Poulin, R. (2018). The Language of Graphic Design. Beverly: Quarto Publishing Group USA, Inc.