视觉设计师跟平面设计

本综合指南将涵盖视觉设计原理的基础知识，并通过大量插图进行演示，以加深您的理解。 无论您是经验丰富的专业人员，还是Web设计领域的新手，学习扎实的基础知识都将极大地帮助您提高设计工作的质量。

这篇非常全面的文章将充当“视觉设计原理一站式服务”，并为您提供入门所需的一切。

主题

我们将在本指南中涵盖很多内容，包括以下原则：

• 统一
• 对准
• 延续性
• 重点
• 图地面关系
• 层次结构
• 一致性
• 相似
• 空格
• 平衡
• 接近
• 关闭

什么是视觉设计？

视觉设计可以帮助您传达针对受众的信息。 设计就是沟通； 通过视觉设计，您可以与观众交流。 您的“单词”或您的曲目包括形状，文本，符号，图像，空白，纹理，颜色甚至运动（动画或隐含运动）。 您的目标是成为一个指导用户，指导用户进行设计，将他们引向您希望他们去的地方（以及最适合他们的地方！）。 良好的UI（用户界面）将认真考虑此问题并提供适当的解决方案。

在下面，您将找到七个设计原则和一本应注意的有用的格式塔原则。 应该将它们作为指导方针，而不是一成不变，并帮助您做出能够提高凝聚力和质量的决策。

人际关系

一个共同的主题将引导我们完成我们今天谈论的所有原则：关系。 良好的视觉设计源于在工作中成功创建独特的关系。 但是请记住，以下内容相对容易学习和理解，但是需要反复练习才能将各个部分放在一起并获得成功创建这些关系的结果。

格式塔

我们列出的许多原则（例如“邻近性”和“图基关系”）可以归类为“ 格式塔原则 ”。 这些法律着重于我们作为旁观者如何感知整体上较小部分的总和。 我们如何寻找模式以及我们已经提到过的关系。 与其他视觉设计概念类似，它们可以应用于印刷，网络，视频和摄影。

就是说，让我们从我们的第一个视觉设计原理开始！

统一

设计作为一个有凝聚力的整体最有效，旨在将所有元素放在一起时实现统一。 尝试建立统一的结构。 接近，对齐，连续和重复可以帮助实现元素之间的感知结合。 这也可以帮助您将难题分开，而无需使用其他边框或其他设计元素。 作为观众，我们在看新事物时首先要了解整体结构。

Dropbox很好地利用了本书中的每种设计原理，可以正确地完成许多事情。 “关于”页面是团结的一个很好的例子。 请注意，仅使用页面上的几个元素即可轻松实现视觉上的统一。 他们甚至可能会失去边界，而且仍然有效。

Unity需要稳步建立，这不会立即发生。 将其视为宏观和微观统一的结合； 当您建立整体统一印象时，较小的元素也需要传达凝聚力。

GitHub在建立统一性方面也做得很好。 像这样的内容丰富的页面中的所有小注意事项加起来是一个一致的整体，其中所有部分都组合在一起，并且没有任何负面影响。

团结和凝聚力使观众更加舒适。 免费的副产品是建立信任并了解用户应如何遵循内容。 如果没有阻碍用户注意力的障碍，那么用户体验将更加顺畅。

上面的插图是出色运用统一原则的另一个示例。 显示集成列表的块无需其他即可建立统一性。

对准

对齐可减少视觉混乱。 想一想凌乱的办公桌与有条理的办公桌。 即使您喜欢看起来富于创意的凌乱办公桌，听众或不熟悉办公桌的客户也会喜欢混乱的外观。 如果可以通过对齐方式建立某种流程，则导航和查找相关信息会更容易。 副作用是，层次结构（稍后将要介绍的内容）更容易建立，而元素不会在各处浮动。

Dropbox帮助中心的屏幕截图显示了使用清晰的网格来正确对齐元素的喜好。

themanyfacesof.com上有一个小型的Burt Reynolds主题网站，其中有很多实例可以很好地说明实际情况。 对齐方式非常微妙，主要是通过声音排版和清晰的网格实现的，并且偶尔会巧妙地打破对齐方式。

Dropbox功能列表是另一个值得研究的示例。 简单，简单，有效的设计工作，可使用对齐方式来最大程度地组织内容。

延续性

视觉对齐与格式塔延续的原则紧密结合。 当我们覆盖本系列的网格时，我们将研究更多如何在工作中使用它。 遵循共同方向的对象（例如，通过相互对齐）会给人留下比缺少该准则的元素彼此更相关的印象。 遵循这些有组织的内容行会在布局中创建顺序和流程。

LOL Colors是对齐和延续的一个很好的例子。 甚至不使用分隔边框，您就可以清楚地看到工作中的网格，并且颜色滴的形式意味着方向继续沿页面向下延伸。

在宏观级别，您应该努力使彼此相关的事物对齐并沿着共同的边缘放置它们。 这样，元素在整体构图中更容易流动，并让用户轻松导航。 这种视觉联系可以帮助在大小元素之间形成整体统一。 这就像一个看不见的边距，将设计中的主要部分结合在一起，使眼睛几乎没有理由停止视觉上的打ic。

可以沿着边缘对齐对象，但是可以沿着通常不太清晰定义的中心轴对齐对象。 设计网页时，通过边缘对齐内容绝对是您的头等大事。 中心对齐可用于强调特定要素或行动号召。

重点

重点在于联络点。 您拥有的越少，他们的强调就越强。 这里的关键是不要使所有内容都显得重要-如果强调所有内容，那么什么都不会伸出来，最终您会得到噪音。 我敢肯定，您看到过忽略该原理的网站，到处都是石膏色的时髦彩色纽扣。 留下令人讨厌的味道，不是吗？ 这就是缺乏重点可以留下的结果。 更重要的是，滥用强调会混淆层次结构。

您通常选择的工具是可疑的，但是大小和颜色可能是最有效的强调方法。

Dropbox通过强调使用在突出显示用户应该执行的操作方面做得很好。 在视觉上，没有任何障碍阻碍用户专注于注册。 最强调的是蓝色按钮，这些按钮在视口中的其余部分清晰可见。 这种设计具有良好的视觉平衡-如果只用一个蓝色按钮，效果会更好。

特定视口中的一个或两个强调元素应足以引导用户注意页面上最重要的元素。 确定哪些元素可能比听起来困难。 问问自己，什么是至关重要的，它首先需要吸引用户的注意力。 做出明智的选择！

在这种设计中，对产品的重视非常出色。 描述和背景都没有以任何方式阻碍Orée木制键盘的强调。 美丽！ 对称在这里也很好地工作。

关于HTC如何展示VIVE，没有太多要说的了。 尽力而为。 像这样的好设计肯定可以卖。

Invision的Craft有一个引人注目的登录页面，其中电子邮件地址的输入字段特别强调。 在此页面上很难迷路。 产品名称也很有效。 背景和前景之间的区别特别熟练且有趣。

图地面关系

该原理非常强大且非常基础，因此您应该尽早掌握它。 在进行设计时，您应该经常问自己一个简单的问题：哪些元素在后台，哪些元素在前台？

在此示例中，您可以看到内容和要采取操作的按钮从背景中清晰地突出出来。 明确区分对于发挥用户的注意力非常重要。 在这里，线条有些模糊和有趣，但仍然具有非常明显的图形背景区别。

当我们的早期祖先忙于狩猎和采集时，辨别眼前的威胁或优势通常是至关重要的。 快速将事物与背景“噪声”相区别似乎仍然是我们“生存”过程的一部分。 想象一下丛林中灌木丛后面的老虎，而不是地平线上的雨。 从神经学上讲，这种视觉生存策略已经留下了深刻的烙印，以至于我们不太可能改变这种简单的感知机制。 对于数字用户来说，这听起来可能很有趣，而且大多已经过时了，但是知道这一点后，就可以更轻松地决定如何为用户强调重要信息，以及如何在后台“隐藏”无关紧要的细节。

在这里，我们有一个非常突出的背景图像，吸引了很多注意力-它很有用，因为它以人际关系的形式传达了情感。 尽管如此，采取行动的按钮还是巧妙地放置了下来，它的颜色将其带到了前台。

另一个问题可能是我们的眼睛和大脑不能同时快速处理大量信息，因此导致我们需要首先关注的重点。 了解这一点将帮助您更有效地放置设计难题。

此示例运行良好，透视图提供了背景和前景之间的区别。 就我个人而言，我希望看到桌子末端的红色按钮-线条自然吸引了人们的眼球。

新型Samsung Gear 360的示例很好。 背景和前景可以很好地协同工作。 有一个明显的区别，背景使相机优雅地突出在前景中。 相当聪明和好玩。

以下是有关道路的良好重点和图基关系的更多示例：

层次结构

层次结构就是分配视觉上的重要性。 表兄强调减少视觉混乱。 这是一个宏观指南，用于首先关注什么以及如何遵循视觉上的，潜意识的面包屑，例如讲述用户在浏览网站内容时可以坚持的视觉故事。 将设计元素视为“重要层次”，需要对其进行有效安排。 仅强调几个部分，您就可以用手轻轻地抓住观众，并按预期在整个站点中移动观众。

Reddit索引页面的此屏幕截图可能不是精心设计的最佳示例-特别是在建立清晰而牢固的层次结构方面。 我认为，Reddit是网站与设计成功与否并不紧密相关的情况之一。 我的意思是说，它杂乱无章，但并不需要很多东西来建立更清晰的视觉层次。

如前所述，您不希望所有事物都显得同样重要。 如果是这种情况，您的观众将很难消化您的内容。 相反，请创建各种重要性级别，以强调作品的整体结构。 一般而言，一种策略是：规模越大，重要性越大。 一旦通过大小和间距实现了基本层次结构，就可以为混合添加色彩，从而有助于进一步强调某些元素。 通过从颜色开始进行反向工作，您将使工作不必要地困难，或者至少效率降低。

我喜欢GitHub上的“ 浏览”页面如何处理排版以创建微妙而清晰的层次结构。 眼睛扫描并向下跟踪内容非常容易。 颜色也可以很好地用于创建视觉锚点，它们的搜索结果也是如此：

清晰的层次结构可以Swift将优秀设计与中等设计解决方案区分开。

上面的屏幕截图是Dropbox熟练的设计师如何执行工作的另一个很好的例子。 有更多的内容可以使用，但是在引导文本的过程中仍然是成功的。

一致性

如果您遵循到目前为止讨论的原则，但是缺乏一致性，则将削弱应用其他设计原则时所取得的任何进步。 一致性有助于创建您想要的设计，网站或外观的思维模型。 相似的项目在外观上应相似。 同样，一旦您开始对设计进行编码，就可以使设计更加干燥（不要重复自己）。

上面的示例显示了各个级别的一致性。 插图的样式和大小一致。 按钮看起来一样。 所有三列的视觉重量均一且对齐。 每列共享相同的内部结构。 总的来说，这是简单，考虑和有效的。

一致性设定了一个期望，即接下来遇到的任何事情都会看起来相似，从而减少了认知处理。

避免使用大量不同的字体和字体大小是保持一致性的最重要途径之一。 在一个环境中，用户习惯于阅读一种特定的样式或字体，因此您不应打扰。

您最近是否看到过使用大量不同按钮的站点，而不是一些会产生更好一致性的按钮？ 我打赌你有，我打赌你不喜欢它。 下面的按钮属于一个站点的界面清单。 如下所示，您可以朝错误的方向走多远，这令人惊讶。

当类似的元素具有相同的美感时，系统的可用性可以大大提高。 为什么要让用户学习多种视觉语言来浏览页面？ 没有任何意义！

相似

您猜对了，“一致性”源自此格式塔原则，该原则指出外观相似的事物会创建一种可在设计中使用的统一形式。 具有相似特征的元素似乎彼此之间的关联性更高-比不相似的事物关联性更高。

相似的元素暗示着一种关系，在它们与周围的其他元素之间形成强烈的对比。

这是Dribbble上的用户列表，显示设计师及其作品。 这是一个很好的例子，说明相似性如何支持一系列不同的设计元素来创建关系，从而显得更加统一。 通过缩略图的水平接近程度和每个重复行的相似性，建议在页面上进行移动。

Reddit不能很好地应用相似性，从而无法实现很高的一致性。 该帖子列表包含长标题和短标题，有些标题缩进，有些则没有。 看起来很令人困惑，但是并不需要太多工作来通过相似性产生更多的凝聚力。

您可以使用common来实现元素之间的相似性：

• 颜色
• 形成
• 尺寸
• 形状
• 质地
• 方向
• 尺寸
• 大小一致性

所有这些都可以暗示关系。 颜色和形状是强调这些关系的非常有力的例子。 尽管相似性是一种强大的武器，但它却是增强层次结构的一种工具，而不是一个可以轻易自行创建的工具。

GitHub上流行的开源回购清单确实很强大。 非常简单，易于阅读和消化，并且通过重复相似性具有内聚性。 我成功地创建了不需要内容的离散内容块：

我们作为用户可以创建的微妙的心理图不可低估。 它有助于建立组织内容的模式。 混沌处于频谱的另一端，而不是我们作为设计师所追求的目标。 想象一下一个文本页面，其中的字母不是逐行显示的，而是随机地围绕页面浮动的。 不是很吸引人，是吗？

这是GitHub上“ 浏览”部分的登录页面。 在这里，更一致地使用尺寸和外观会更有效。 实际上，增加某些元素的大小并不是“有意识地”突出某些类别的“主旨”决定。 它是随机的。 缺乏充分发挥尺寸的理由，依靠一致性会增强团结。 另外，您有两种卡片，一种仅带有类别的标题，另一种带有附加的描述性文字。 最重要的是，所有三个变体的悬停效果都不同。 所有这些都引起视觉上的兴趣，但是页面不如下面同一部分的展示列表那么强大：

在功能方面，外观相似的元素应为用户完成相似的任务。 当用户不必要地为外观相似的界面元素重新学习不同的行为时，就会感到沮丧。 相似性有助于管理期望，这本身就是您军火库中非常强大的工具。

空白空间

什么才算是“空白”？ 合成中元素之间的空白是未标记的，负的或空白的空间。 它有效地构成内容。 宏空白用于设计中的主要部分，从而产生更明显的效果。 另一方面，微空白空间用于显示细节，例如印刷元素的所有间距。

在这里，对空白空间的充分利用使对新产品的强调更加优雅。 有两个原则可以成功发挥作用，但是空白在使此设计如此出色地发挥着最重要的作用。

看一下上面的例子。 当我们调查用于在Foundersuite上建立空白区域的大小时，我们会看到所使用的度量值相互影响。 这些常见的度量会创建“活动的”空白空间，故意引起注意。 让我们看下面：

“活动”空白是一个模糊的描述，但是当空白显示与其周围元素的关系时，我们会使用它。 活动空格有助于强调内容的组成或结构，因此对层次结构产生积极影响。 “被动”空格不是那么令人困惑，但同等重要，因为它可以创建少量的呼吸空间。 但是，过多的非活动空白空间，与周围元素缺乏联系，会使您的工作显得沉思不堪，甚至混乱。

白色空间在ionic.io上的出色应用。 在这里，大小以及宏和微空白之间的关系很好。

每天，当您阅读文本时，都无需过多考虑即可看到空白的有用应用。 单词，句子和段落之间的空间都是空白，可以帮助我们直观地理解所写字母的含义。 它通过内容引导眼睛，并为我们提供有效移动文本的提示。 宏观和微观空白都使眼睛有机会休息并支持整体平衡。

请记住，我们旨在通过空间实现差异化。 这使我们可以减少其他元素来创造差异。 如果您喜欢自己喜欢的网页设计的“干净”外观，那么有意识地使用空白很有可能是其主要组成部分。 没有什么能比适当使用空白空间更好地表达优雅和精致了。

平衡

平衡就是保持视觉重量，视觉平衡。 我们本能地喜欢看围绕垂直轴平衡的事物，这是具有双目视觉的一部分。 在垂直轴上保持平衡是一个安全的模式-非常正式和有条理。 如果您可以熟练地打破这种平衡，则可能会造成一些紧张或意外，也许是为了突出显示构图的某些方面，那么您的设计可能会显得更加动态和有趣。

Blockhead适配器的站点上有一些很好的示例，说明了它们如何巧妙地将平衡应用于其设计。 上方的右图及其所附文字可实现良好的光学平衡。 下图也是如此。 平衡，层次结构，空白和强调都得到很好的应用。

对称平衡并不难实现，并且是制作视觉上吸引人的合成物的安全方法。 非对称方法的刚性或静态性较小，但希望能够成功完成更多的Craft.io。 对于非对称平衡，我们需要努力使各个非镜像部分保持可感知的平衡。

Dropbox登陆页面充分利用了整个地方的视觉平衡。 您可以看到图像和文本达到了很好的不对称平衡，尤其是参考了周围的其他部分。 而且不要让我开始了解他们如何使用锦鲤来暗示响应能力和多设备可操作性。 天才！

当您在视觉上平衡时，所有设计工具都可以使用：大小，颜色，位置，形状，重复，纹理，它们都可以单独影响感知的重量并相互抵消。

不对称的平衡可以被认为更友好，并传达出看起来更加有趣和动态的设计。 并不是说我是Dropbox的忠实粉丝，而是在设计方面，Dropbox网站巧妙地利用了我们今天讨论的每种设计原则，获得了令人赞叹的整体质量。

接近

彼此相对接近放置的设计元素自然会形成隐含关系。 良好地处理邻近性会对您的设计产生积极影响，使您可以省去实现视觉统一所需的其他元素，例如边界。 再次，团结是此的核心，到目前为止我们讨论的所有工具都可以在不同程度上用于实现这一目标。

在YoGrow的网站上，您可以了解如何使用接近度。 我建议他们本来可以使用较少的背景颜色和边框，而是让接近度发挥作用。

在下面的示例中（我们之前已经看到过），隐含性就是暗示这些调色板之间的关系所需要的全部。 可以省略边框或背景色，从而产生优雅的外观。

关闭

闭合是一种合成技术，用户可以将设计的空白（您故意植入的空白）填满。 这是一种建议，一种错觉，使设计师想要看到的图像更加完整。 封闭是允许读者解释漫画的基础，并建议框架之间的装订线发生了什么。 例如，闭包也是使我们能够解释徽标中负空格的原因。

寻求模式的人脑通过将缺失的部分填充为熟悉的形式来进行操作。

以GitHub为例。 他们在页面上使用的徽标是一个黑色圆圈，在其中充满了对Octocat的印象。 即使尺寸很小，您也可以轻松识别它们的吉祥物，并将其放置在导航栏中，可以充当看起来朴实无华且不受约束的视觉锚点。

那么，所有这些如何与Web设计界面联系在一起？ 好吧，坦率地说，它很少这样做。 如果您设计图标和徽标，则更有可能遇到这个概念。

最后的想法

我们在这里介绍了很多内容！ 从现在开始，每当您查看任何设计或艺术品时，都应尝试考虑这些原则。 尝试了解创作者是否考虑了视觉关系，并积极地和建设性地应用它们。 请记住，为了有效利用这些想法，您需要练习！ 在这样做的同时，这些原则肯定会帮助您享受更多的设计乐趣。

翻译自: https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-visual-design--cms-26224

视觉设计师跟平面设计