西安作品集｜EA｜UX中视觉设计的五条原则

2021-09-15 11:36

比例、视觉层次结构，平衡

对比度和格式塔的原理不仅可以创建精美的设计

而且在正确应用时还可以提高可用性

在观看视觉效果时，我们通常可以立即说出它是吸引人的还是有问题的。（因为在Don Norman的情感设计模型中，它们常常表现在内心层面上。）然而，很少有人能用语言描述为什么一个布局在视觉上是有吸引力的。利用好的视觉设计原理的图形可以提高参与度和可用性。

视觉设计原则告诉我们，线条，形状，颜色，网格或空间等设计元素如何共同创造出全面而周到的视觉效果。

本文定义了影响UX的5条视觉设计原则：

比例
视觉层次
平衡
对比
格式塔

遵循以下5条视觉设计原则可以推动参与度并提高可用性。

1.比例

这个原则是常用的：几乎每一个好的视觉设计都利用它。

定义：比例原则是指用相对大小来表示作文的重要性和排名。

换句话说，当这个原则被恰当地运用时，设计中最重要的元素比那些不那么重要的元素要大。这一原则背后的原因很简单：当某个事物很大时，它更容易被注意到。

视觉上令人愉悦的设计通常使用不超过3种不同的尺寸。拥有一系列大小不同的元素不仅可以在布局中创造多样性，还可以在页面上建立视觉层次结构（见下一个原则）。一定要强调你的设计最重要的方面，使他们最大。

当比例的原理被恰当地运用，并且强调了正确的元素时，用户将很容易地解析视觉并知道如何使用它。

适用于iPhone的媒体：热门文章在视觉上比其他文章大。量表将用户定向到可能更有趣的文章。

在克拉科夫的这个停车场中，最重要的信息（H区，即您当前所在的停车场）的信息量最大。（图片来源：www.behance.com）

2.视觉层次

具有良好视觉层次结构的布局将很容易被用户理解。

定义：视觉层次的原则是指引导眼睛在页面上，使它注意到不同的设计元素的重要性顺序。

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

视觉层次控制着体验的传递。如果你很难找到一个页面的位置，那么它的布局很可能缺少一个清晰的视觉层次结构。

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

比例也可以帮助定义视觉层次结构，因此为不同的设计元素合并不同的比例。一般的经验法则是在设计中包括小型、中型和大型组件。

中型移动应用程序：标题，字幕和正文文本清晰可见。文章的每个组成部分的字号都与其重要性相同。

Uber移动应用程序：Uber移动应用程序中的视觉层次结构清晰。屏幕在地图和输入表单之间分为两半（屏幕的下半部分），这使人们认为这些组件对用户同样重要。眼神立刻被吸引到了哪里？字段，因为其背景为灰色，然后是其下方的最近位置，这些位置的字体尺寸略小。

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

3.平衡

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

定义：平衡原则是指设计元素的一种令人满意的安排或比例。当在穿过屏幕中间的假想轴的两侧有相等分布（但不一定对称）数量的视觉信号时，就会出现平衡。这个轴通常是垂直的，但也可以是水平的。

就像平衡重量一样，如果在轴的两侧有一个小的设计元素和一个大的设计元素，设计会感觉有点不平衡。当创造平衡时，设计元素占据的面积很重要，而不仅仅是元素的数量。

你在视觉上建立的假想轴将是如何组织布局的参考点，并将帮助你了解视觉上的当前平衡状态。在一个平衡的设计中，没有一个区域吸引了你的眼球，以至于你看不到其他区域（即使有些元素可能承载更多的视觉重量，成为焦点）。余额可以是：

对称：元素相对于中心假想轴对称分布

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

放射状的：元素从一个中心的公共点以圆形方向向外辐射。

你在视觉上使用的平衡取决于你想要传达什么。不对称是动态的和引人入胜的。它创造了一种能量和运动的感觉。对称是安静和静止的。径向平衡总是将眼睛引向构图的中心。

集线器风格探索：构图感觉稳定，在寻找自己喜欢的工作时尤其合适。这里的平衡是对称的。如果要沿着网站的中心绘制一个假想的垂直轴，则元素在轴的两侧均等分布。（图片来源：dribbble.com）

耐克：此页面不对称平衡，给人以与耐克品牌相称的活力和运动感。如果要在此视觉效果的中心向下绘制一条垂直轴，则该轴两侧的元素数量大约相同。但是，不同之处在于它们并不相同且位于相同的精确位置。即使从技术上讲，鞋子的左侧会有更多的文字，但它与右侧的较大文字是平衡的，后者占用更多空间和视觉。

Brathwait手表：这款经典手表在径向上保持平衡。眼睛立即被吸引到表盘的中心，并且所有视觉重量均等地分配，而不管虚轴在何处绘制。

这种社论传播不平衡。如果要沿页面向下绘制垂直轴，则元素在轴的两侧分布不均。（图片来源：www.behance.net）

4.对比

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

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

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

对比度的原理通常通过颜色来应用。例如，在UI设计中，尤其是在iOS上，红色经常被用来表示删除。明亮的颜色表示红色元素与其他元素不同。

iOS上的提醒应用程序：红色与周围的环境形成鲜明对比，保留用于删除。

通常，在用户体验中，“对比”一词会让人想起文本与其背景之间的对比。有时设计师故意降低文本对比度，以减少不太重要的文本。但这种方法是危险的-减少文本对比度也会降低易读性，并可能使您的内容无法访问。使用颜色对比度检查器以确保所有目标用户仍然可以阅读您的内容。

Greenhouse Juice Co：瓶子上文字的可读性取决于果汁的颜色。尽管这种对比度在某些果汁中效果很好，但几乎无法读取带有浅色果汁的瓶子的标签。（图片来源：www.instagram.com）

5.格式塔原理

这些是格式塔心理学家在二十世纪初建立的一套原则。它们捕捉人类如何理解图像。

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

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

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

我们还经常看到格式塔理论在徽标中的应用。在NBC徽标中，空白处没有孔雀，但我们的大脑知道有孔雀。

Uber注册表单使用格式塔邻近性原则：字段标签靠近其相应的文本框，使您很容易理解在哪些字段中键入哪些信息。如果字段和后续标签（用于下一个字段）之间的空间较小，则用户将难以理解到底是什么。

2017年美国报税表：字段之间缺乏空间，使得填写该表很麻烦。您很容易错过第二个“姓氏”字段所指的内容。使用格式塔邻近性原理来区分涉及自己和配偶的字段，会使UX受益。

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

为什么我们要关心和理解视觉设计原则？除了让某些东西看起来“漂亮”之外，理解和利用它们还有助于：

提高可用性。遵循这些视觉设计原则通常会产生易于使用的布局。例如，黄金比例，这是经常用于创造美丽的艺术作品也被用于排版，以创造一个令人愉快的关系，字体大小，行高，行宽。这一结果通常会缩短行长，从而在网页上产生平衡（通过空白），并使文本更易于阅读。当与强大的交互设计相结合时，视觉设计将提高任务成功率和用户参与度。
激起情感和喜悦。美好的事物能激发积极的情绪。（事实上，美学-可用性效应表明，当人们发现一个设计在视觉上有吸引力时，他们可能会更宽容一些小的可用性失误。）通过遵循好的视觉设计原则，设计师可以创造出看起来不错的UI，从而让用户感觉良好。
强化品牌认知。强大的视觉系统可以建立用户对产品的信任和兴趣，并适当地代表和加强品牌。