简介：
比例尺，视觉层次结构，平衡，对比度和格式塔的原理不仅可以创建精美的设计，而且在正确应用时还可以提高可用性。
在观看视觉效果时，我们通常可以立即说出它是吸引人的还是错的。（因为它们经常在Don Norman的情感设计模型中在内脏层次上发挥作用。）但是，很少有人能够说明为什么布局在视觉上很吸引人。利用良好视觉设计原理的图形可以促进互动并增加可用性。
视觉设计原则告诉我们，线条，形状，颜色，网格或空间等设计元素如何共同创造出全面而周到的视觉效果。
本文定义了影响UX的5条视觉设计重要原则：
遵循以下5条视觉设计原则可以推动参与度并提高可用性。
通常使用此原理：几乎所有好的视觉设计都可以利用它。定义：比例尺原理是指使用相对大小来表示构图的重要性和等级。换句话说，正确使用此原理时，设计中最重要的元素要比不重要的元素大。这项原则背后的原因很简单：当一件大事变大时，它更有可能被注意到。视觉上令人满意的设计通常使用不超过3种不同的尺寸。拥有一系列大小不同的元素不仅会在您的布局中创造出多样性，而且还将在页面上建立视觉层次结构（请参阅下一个原理）。确保通过使设计最大化来强调设计中最重要的方面。如果正确使用比例尺原理并强调正确的元素，则用户将轻松解析视觉并知道如何使用它。
适用于iPhone的媒体：热门文章在视觉上比其他文章大。量表将用户定向到可能更有趣的文章。
在克拉科夫的这个停车场中，最重要的信息（H区，即您当前所在的停车场）的信息量最大
定义：视觉层次结构的原理是指引导页面上的眼睛，以便其按照重要性的顺序排列在不同的设计元素上。视觉层次可以通过比例，值，颜色，间距，位置和其他各种信号的变化来实现。视觉层次控制体验的交付。如果您很难找出页面的显示位置，则很可能是其布局缺少清晰的视觉层次。要创建清晰的视觉层次结构，请使用2–3个字体大小来向用户指示页面的迷你信息体系结构中最重要或最高级别的内容。或者，考虑对重要项目使用明亮的颜色，对次要项目使用柔和的颜色。比例尺还可以帮助定义视觉层次，因此可以针对您的不同设计元素合并各种比例尺。一般的经验法则是在设计中包括小型，中型和大型组件。
中型移动应用程序：标题，字幕和正文文本清晰可见。文章的每个组成部分的字号都与其重要性相同。
Uber移动应用程序：Uber移动应用程序中的视觉层次结构清晰。屏幕在地图和输入表单之间分为两半（屏幕的下半部分），这使人们认为这些组件对用户同样重要。眼神立刻被吸引到了哪里？字段，因为其背景为灰色，然后是其下方的最近位置，这些位置的字体尺寸略小。
Dropbox移动应用程序：Dropbox移动应用程序中的视觉层次结构不太清晰。即使说明文字的大小小于文件名，也很难区分不同的文件。缩略图为层次结构提供了额外的一层，但是缩略图的存在取决于可用的文件类型。用户最终必须进行大量的分析和读取才能找到他们要查找的文件夹或文件。平衡就像跷跷板一样：平衡重量而不是重量，而是平衡设计元素。定义：平衡原理是指令人满意的布置或比例的设计元素。当通过屏幕中间的虚轴的两侧均存在相等分布（但不一定对称）的视觉信号时，就会发生平衡。该轴通常是垂直的，但也可以是水平的。就像在平衡重量时一样，如果在轴的两侧具有一个小设计元素和一个大设计元素，则设计会感觉有些不平衡。设计元素占用的面积在创建平衡时很重要，而不仅仅是元素数量。您在视觉上建立的虚轴将成为如何组织布局的参考点，并有助于您了解视觉上当前的平衡状态。在平衡的设计中，没有一个区域能吸引您的视线，以致您看不到其他区域（即使某些元素可能会带来更大的视觉重量并成为焦点）。余额可以是：
您在视觉中使用的平衡类型取决于您要传达的内容。不对称是动态的且引人入胜。它创造了一种活力和运动感。对称是安静且静态的。径向平衡始终将眼睛引向构图的中心。
集线器风格探索：构图感觉稳定，在寻找自己喜欢的工作时尤其合适。这里的平衡是对称的。如果要沿着网站的中心绘制一个假想的垂直轴，则元素在轴的两侧均等分布。
耐克：此页面不对称平衡，给人以与耐克品牌相称的活力和运动感。如果要在此视觉效果的中心向下绘制一条垂直轴，则该轴两侧的元素数量大约相同。但是，不同之处在于它们并不相同且位于相同的精确位置。即使从技术上讲，鞋子的左侧会有更多的文字，但它与右侧的较大文字是平衡的，后者占用更多空间和视觉重量，因此使它们看起来非常相似。
Brathwait手表：这款经典手表在径向上保持平衡。眼睛立即被吸引到表盘的中心，并且所有视觉重量均等地分配，而不管虚轴在何处绘制。
这种社论传播不平衡。如果沿页面向下绘制垂直轴，则元素在轴的两侧分布不均。
这是另一种常用的原理，它使设计的某些部分对用户脱颖而出。定义：对比原理是指视觉上不同的元素并置，以传达这些元素不同的事实（例如，属于不同类别，具有不同功能，表现不同）。换句话说，对比度为眼睛提供了两个对象之间（或两组对象之间）的明显差异（例如，大小或颜色），以强调它们是不同的。对比原理通常通过颜色来应用。例如，红色常用于UI设计（尤其是在iOS中）以表示删除。明亮的颜色表示红色元素与其余元素不同。
iOS上的提醒应用程序：红色与周围的环境形成鲜明对比，保留用于删除。通常，在UX中，“对比”一词使我想到了文本与其背景之间的对比。有时设计人员会故意降低文本的对比度，以便不强调不太重要的文本。但是这种方法很危险-降低文本对比度也会降低可读性，并可能使您的内容无法访问。使用颜色对比检查器来确保所有目标用户仍可以阅读您的内容。
Greenhouse Juice Co：瓶子上文字的可读性取决于果汁的颜色。尽管这种对比度在某些果汁中效果很好，但几乎无法读取带有浅色果汁的瓶子的标签。这些是格式塔心理学家在20世纪初确立的一组原则。他们捕捉人类如何理解图像。定义：格式塔原理解释了人类是如何通过下意识地将各个部分安排到一个创建整体的有组织系统中，而不是将它们解释为一系列不同的元素，来简化和组织由许多元素组成的复杂图像的。换句话说，格式塔原则抓住了我们倾向于感知整体而不是个体元素的趋势。有几种格式塔原理，包括相似性，连续性，闭合性，邻近性，公共区域，图形/背景以及对称性和顺序。接近度对于UX尤其重要-它指的是以下事实：视觉上更靠近的项目被视为同一组的一部分。
格式塔闭合原理使我们能够看到两个人物接吻，而不是毕加索的绘画中的任意形状。我们的大脑填补了缺失的部分，创造出两个数字。
我们还经常看到格式塔理论在徽标中的应用。在NBC徽标中，空白处没有孔雀，但我们的大脑知道有孔雀。
Uber注册表单使用格式塔邻近性原则：字段标签靠近其相应的文本框，使您很容易理解在哪些字段中键入哪些信息。如果字段和后续标签（用于下一个字段）之间的空间较小，则用户将难以理解到底是什么。
2017年美国报税表：字段之间缺乏空间，使得填写该表很麻烦。您很容易错过第二个“姓氏”字段所指的内容。使用格式塔邻近性原理来区分涉及自己和配偶的字段，会使UX受益。
为什么视觉设计原则很重要
我们为什么要关心和理解视觉设计原理？除了使某些东西“看起来很漂亮”之外，理解和利用它们还有助于：增加可用性。遵循这些视觉设计原则通常会导致易于使用的布局。例如，经常用于创作精美艺术品的黄金比例也用于排版，以在字体大小，线条高度和线条宽度之间创建视觉上令人愉悦的关系。结果通常会缩短行长，从而在网页上产生平衡（通过空白），并使文本更易于阅读。与强大的交互设计配合使用时，视觉设计将提高任务成功率和用户参与度。激发情感和喜悦。美丽的事物引起积极的情绪。（实际上，美学－可用性效应表明，当人们发现外观设计具有视觉吸引力时，他们可能会更愿意忍受轻微的可用性事故。）通过遵循良好的视觉设计原则，设计师可以创建外观良好的UI，从而使用户感觉不错。加强品牌认知度。强大的视觉系统可以建立用户对产品的信任和兴趣，并适当地代表和加强品牌。参考文献
Lupton，E.（2008年）。平面设计：新基础。纽约：普林斯顿建筑出版社。Poulin，R.（2018年）。平面设计语言。贝弗利：美国Quarto出版集团-------------------------------------------
精选推荐
2020双十一/京东/天猫/淘宝/规范与LOGO源文件
-------------------------------------------