我们常常被美的视觉作品所吸引，
但你知道为什么这些视觉作品能吸引你吗？
你能说出好的视觉作品应该具备哪些要素吗？
今天我们就从Kelley Gordon的文章中
探寻视觉设计的真谛
利用良好的视觉设计原则的图形
可以提高用户的参与度和可用性。
同时视觉设计原则也启发我们，
如何设计元素，
如线，形状，颜色，网格，或空间进行组合
一起去创造全面和周到的视觉效果。
5大视觉设计原则
- 比例 Scale
- 视觉层次 Visual hierarchy
- 平衡 Balance
- 对比 Contrast
- 格式塔 Gestalt
1 比例
这个原则是常用的:几乎每一个好的视觉设计都利用了它。
定义：The principle of scale refers to using relative size to signal importance and rank in a composition.（比例尺原理是指在构图中使用相对大小来表示重要性和等级。）
换句话说，当这个原则正确使用时，一个设计中最重要的元素比那些不那么重要的元素要大。这一原则背后的原因很简单:当某物很大时，它更容易被注意到
一个视觉上令人愉悦的设计通常使用不超过3种不同的尺寸。拥有一系列不同大小的元素不仅可以在布局中创建多样性，还可以在页面上建立一个可视层次结构(参见下一个原则)。一定要强调你的设计中最重要的方面，使这些方面能将设计所表达的效果最大发挥。
当适当地使用比例原则并强调正确的元素时，用户将很容易地解析可视化的内容并知道如何使用它。
2 . 视觉层次结构
具有良好的可视层次结构的布局将很容易被用户理解。
定义：The principle of visual hierarchy refers to guiding the eye on the page so that it attends to different design elements in the order of their importance.（视觉层次原则是指在页面上吸引眼球引导视线，使其按照重要性的顺序，关注不同的设计元素）
可视层次结构可以通过比例、值、颜色、间距、位置和各种其他信号的变化来实现。
视觉层次控制着体验的传递。如果你很难弄清楚在页面的什么地方可以看到，很有可能它的布局缺少一个清晰的视觉层次
为了创建一个清晰的视觉层次结构，使用2-3种字体大小向用户表明什么内容是最重要的。或者在页面的迷你信息架构中处于最高层次。又或者，在重要的物品上使用明亮的颜色，在不太重要的物品上使用柔和的颜色。
中型移动应用:标题、副标题和正文文本有清晰的视觉层次。文章的每个组件的类型大小与其重要性相等。
优步移动应用:优步移动应用的视觉层次非常清晰。地图和输入表单(屏幕的下半部分)将屏幕一分为二，这强化了用户认为这些组件同等重要的想法。眼睛立即被吸引到哪里去?因为它的灰色背景，然后到最近的位置下面它，这是稍微小的字体大小。
Dropbox mobile app:在Dropbox的mobile app中，视觉层次不是很清晰。虽然说明性的文字比文件名要小，但是很难区分不同的文件。缩略图为层次结构提供了一个额外的层，但是它们的存在依赖于可用的文件类型。用户最终不得不做大量的解析和读取来找到他们要找的文件夹或文件。
Scale还可以帮助定义可视化层次结构，因此可以为不同的设计元素合并不同的Scale。一般的经验法则是在设计中包含小型、中型和大型组件。
3 平衡
平衡就像跷跷板:但你不是在平衡重量，而是在平衡设计元素。
定义：The principle of balance refers to a satisfying arrangement or proportion of design elements. Balance occurs when there is an equally distributed (but not necessarily symmetrical) amount of visual signal on both sides of an imaginary axis going through the middle of the screen. This axis is often vertical but can also be horizontal.（平衡原则是指设计元素令人满意的排列或比例。当通过屏幕中间的假想轴的两边有相等的(但不一定是对称的)视觉信号量时，就会出现平衡。这个轴通常是垂直的，但也可以是水平的。）
就像配重一样，如果在轴的两边各有一个小的设计元素和一个大的设计元素，会让人觉得有点不平衡。在创建平衡时，设计元素占用的区域很重要，而不仅仅是元素的数量。
你在你的视觉上建立的虚拟轴将是如何组织你的布局的参考点，并将帮助你理解你的视觉上的平衡的当前状态。在一个平衡的设计中，没有一个区域能吸引你的眼球，以至于你看不到其他区域(即使一些元素可能承载更多的视觉重量，成为焦点)。
平衡可以是：
- 对称:元素相对于中心虚轴对称分布
- 不对称:元素相对于中心轴是不对称分布的
- 放射状:元素从中心向外辐射，共点呈圆形
你在视觉上使用的那种平衡取决于你想要传达什么。不对称是动态和迷人的。它创造了一种能量和运动的感觉。对称是安静和静态的。径向平衡将始终引导眼睛到构图的中心。
中心风格探索:构图感觉稳定，尤其适合你正在寻找一份你喜欢的工作的时候。这里的平衡是对称的。如果你要在网站的中心画一个假想的垂直轴，元素会均匀地分布在轴的两边。(来源:dribbble.com)
耐克:这一页是不对称的平衡，给人一种活力和运动的感觉，是适合耐克的品牌。如果你要在这个图像的中心画一个垂直轴，元素的数量在轴的两边是相同的。然而，不同之处在于它们并不完全相同，而且在相同的位置上。尽管从技术上来说，鞋子的左边有更多的文字，但它与右边较大的文字形成了平衡，占据了更多的空间和visua重量，因此使它们看起来非常相似
布拉斯维特腕表:这款经典腕表呈放射状平衡。眼睛会立即被吸引到表盘的中心，所有的视觉重量都是平均分配的，不管虚拟轴画在哪里。
这篇社论文章的传播是不平衡的。如果沿着页面向下画一个垂直轴，则元素并不均匀地分布在轴的两边。(图片来源:www.behance.net)
4 对比
这是另一个常用的原则，它使您的设计的某些部分脱颖而出。
定义：The principle of contrast refers to the juxtaposition of visually dissimilar elements in order to convey the fact that these elements are different (e.g., belong in different categories, have different functions, behave differently).
（对比原则是指将视觉上不同的元素并置，以传达这些元素是不同的(例如，属于不同的类别，具有不同的功能，表现不同)。
换句话说，对比度使眼睛在两个物体(或两组物体)之间产生明显的差异(如大小或颜色)，以强调它们是不同的。
对比的原则经常通过颜色来运用。例如，红色经常用于UI设计，特别是在iOS上，表示删除。明亮的颜色表明红色元素与其他元素不同。
IOS提醒app:红色为删除保留，红色与周围环境对比强烈。
在用户体验中，“对比”这个词常常会让人联想到文本与其背景之间的对比。有时，设计师故意降低文本的对比度，以弱化不太重要的文本。但是这种方法是危险的，减少文本对比度也会降低可读性，并可能使您的内容无法访问。使用颜色对比检查器，以确保您的内容仍然可以被所有目标用户阅读。
Greenhouse Juice Co（果汁品牌）：瓶子上文字的易读性取决于果汁的颜色。虽然这种对比对于一些果汁来说效果很好，但是带有浅色果汁的瓶子的标签几乎是不可能读懂的。
(图片来源:www.instagram.com)
5 格式塔原则
这是20世纪早期格式塔心理学家建立的一套原则。它们捕捉到人类如何理解图像。
定义：Gestalt principles explain how humans simplify and organize complex images that consist of many elements, by subconsciously arranging the parts into an organized system that creates a whole, rather than interpreting them as a series of disparate elements. In other words, Gestalt principles capture our tendency to perceive the whole as opposed to the individual elements.
（格式塔原理解释了人类如何简化和组织由许多元素组成的复杂图像，通过潜意识地将这些部分安排成一个有组织的系统，从而创造出一个整体，而不是将它们解释为一系列不相干的元素。换句话说，格式塔原则抓住了我们感知整体而不是个体元素的倾向）
格式塔原则有几种，包括相似、连续、闭合、接近、图形/背景、对称和顺序。邻近性对于用户来说尤其重要——它指的是那些在视觉上距离较近的项目被认为是同一组的一部分。
正是格式塔闭合原理，让我们看到两个人物接吻，而不是毕加索画作中随意的形状。我们的大脑填补了缺失的部分，创造了两个形象。
我们也经常看到格式塔理论在道中的应用。在NBC的标识中，白色区域里没有孔雀，但我们的大脑却认为有孔雀。
Uber的注册表单使用格式塔接近原则:字段标签靠近相应的文本框，这样就很容易理解在哪个字段中输入什么信息。如果字段与随后的标签(用于下一个字段)之间的空间更小，用户就会搞不清什么属于什么。
2017年美国纳税申报表:填写表格时，由于字段之间没有空格，填写起来很麻烦。您很容易忽略第二个姓，字段指的是什么。使用格式塔邻近原则来区分引用自我的字段和引用配偶的字段对用户体验是有益的。
重要性
为什么我们要关心和理解视觉设计原则?除了让某些东西“看起来很漂亮”之外，理解并利用它们还有助于:
提高可用性
遵循这些视觉设计原则通常会得到易于使用的布局。例如，黄金比例，经常用于创造美丽的艺术作品，也被用于排版，以创建一个视觉上令人愉快的关系，字体大小，行高，行宽。结果通常会导致行长度缩短，从而在网页上创建平衡(通过留白)，使文本更容易阅读。当与强大的交互设计相结合时，视觉设计将提高任务成功率和用户参与度
激起情感和快乐
激起情感和快乐。美丽的事物能激发积极的情绪。(事实上，“美学-可用性效应”说的是，当人们发现一个设计在视觉上很有吸引力时，他们可能会更宽容地对待小的可用性失误。)通过遵循良好的视觉设计原则，设计师可以创建外观良好的用户界面，从而让用户感觉良好
加强品牌认知
一个强大的视觉系统建立用户对产品的信任和兴趣，并适当地代表和加强品牌。
作者： Kelley Gordon
原文：Visual Design；Design Partterns
参考文献：
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.
英文原文请戳「阅读原文」
为尊重版权和译者成果
转载请附上原链接，谢谢~
我们
服务.体验.交互设计传道者
「一只朝菌设计学园」由毕业于清华大学人机交互专业的学长创办，致力于创造卓越的设计知识学习课堂，专注交互设计、用户体验设计、服务设计领域的专业知识教育。
教师团队来自于清华大学、同济大学、上海交大、北京理工大学、北京邮电大学、中山大学、华南理工、江南大学、香港大学、香港理工、台湾科技大学、Imperial、POLIMI、Delft、Oslo、Goldsmiths、Edin、Glas、Manc、Lancaster、Loughborough、Leeds、Arts London、BCU等国内外高校，以及Microsoft、阿里巴巴、腾讯、网易、华为、央视、百度、美团点评等企业集团。
清华大学有训曰：行胜于言。「一只朝菌」谨承母校百年教诲，时刻铭记师者之责，为好学者传道授业，为有志者掌灯引行。