响应式网站建设之视觉设计原则

如何建立和维护视觉语言

设计就是沟通。作家使用正确的词来传达信息。设计师使用正确的视觉元素来做同样的事情。在为设计选择正确的视觉元素时，很难低估拥有视觉语言的重要性。

视觉交流是一件复杂的事情。许多设计师倾向于将视觉语言的角色简化为纯粹出于审美目的。但是，视觉语言的功能要强大得多。在本文中，我想讨论什么是视觉语言以及如何为您的下一个设计项目创建视觉语言。

要获得更多启发，请查看我们对构成强大Web设计产品组合的概述。

模板图标

项目管理：规划您的Web设计工作流程

将免费的项目管理副本：规划Web设计工作流发送到收件箱。

电子邮件

输入您的电子邮件地址

输入您的电子邮件-我们还将向您发送与Shopify相关的营销电子邮件。您可以随时取消订阅。注意：该指南不会发送到基于角色的电子邮件，例如info @，developer @等。

我们的虚拟齿轮正在转动。

请注意，

我们的电子邮件最多可能需要15分钟

才能到达您的收件箱。

什么是视觉语言？

视觉语言是一种使用视觉元素进行交流的系统。视觉语言可帮助用户感知和理解可见的标志。 

视觉语言不仅适用于数字产品。它们也适用于任何可视化的东西。地图是视觉交流的一个示例，因为它会传递可见的标志（形状，颜色，文本），观察者会使用视觉对其进行解码。

视觉语言：地图

Pietro Coppo地图，威尼斯，1520年。图片来源：Wikipedia。

视觉语言与设计系统有何不同

许多设计师面临的问题是，视觉语言和设计系统是否相同。答案是否定的，尽管它们是相关的概念。

设计系统通常包含样式指南和/或组件和样式库，以及一组说明，这些说明使团队可以清晰地了解如何将组件组合在一起。设计系统使产品团队可以管理混乱并以可扩展的方式创建产品。 

视觉语言：设计系统

设计语言和设计系统。图片：SAP。

视觉语言是整体设计语言的一部分，而整体设计语言是设计系统的组成部分。视觉语言专注于信息的视觉理解。这不仅涉及如何一起使用组件/样式来创建一致的UI，而且还涉及为什么我们首先选择使用组件/样式。换句话说，视觉语言是一种提供背景或解释的哲学。为什么事情以某种方式组合在一起。

“换句话说，视觉语言是一种哲学，它为为什么事物以某种方式组合在一起提供了背景或解释。”

视觉语言的要素

视觉语言由视觉单元组成。视觉单位有两种基本类型：原子和分子。颜色，字体，形状，形式，空间和比例都是原子。原子可以组合成更复杂，更大的物体，称为分子。例如，标签，输入字段和按钮原子连接在一起以创建搜索表单分子。成分可以是原子和分子的组合。搜索表单可以是网站顶部标题的一部分，而网站本身就是一个组成部分。

关于视觉单元，有两个重要的事情值得一提：

视觉语言中没有随机的视觉单位。视觉语言的每个元素都有其含义和意图。特别重要的是，以赋予语义含义的方式定义原子设计元素，因为所有其他视觉单元都将基于它们。

视觉语言中不应有孤立的单元。视觉语言中的每个单元都应该是更大整体的一部分。 

您可能还会喜欢： 融合设计：为所有人设计的12种方法。。

为什么要投资视觉语言

构建强大的视觉语言的全球目标是改善用户体验。视觉语言是视觉设计的基础，视觉设计是关于使用产品的视觉方面来改善用户对该产品的体验。视觉语言可以通过三种主要方式创建更好的UX。

1.共同的愿景

数字产品很少由一个人制造。在大多数情况下，由几个不同的团队来创建产品。团队越大，创建一致的体验就越具有挑战性。团队成员倾向于产生新的解决方案和样式，并且没有共享的视觉语言，这会导致脱节的用户体验。视觉语言可以定义一种更系统的方法来指导和利用团队的努力。

2.共享规则

就像任何一种口头语言都有允许一个人与另一个人交流的规则一样，一种视觉语言也具有使设计师和开发人员可以相互交流并允许您的品牌与用户进行交流的规则。

规则还为设计人员创建了约束。“约束”听起来像是对创造力的限制，但实际上，它们使设计师可以更有效地工作。与许多其他设计领域（例如工业设计）相比，数字产品设计几乎没有物理约束。尽管缺乏约束本身并不是一件坏事，但它通常会导致设计人员提出可能导致脱节的用户体验的解决方案。通过建立明确的规则，我们创建了阻止团队成员创建不良UX的约束。

“'约束'听起来可能是对创造力的限制，但实际上，它们使设计师能够更有效地工作。”

3.更好的品牌形象

品牌是客户如何看待您的。没有品牌就不可能存在成功的产品。视觉语言是设计师可以用来进行有效品牌宣传的最牢固的纽带之一。具体来说，它有助于创造更好的第一印象和更好的品牌召回率。

更好的第一印象

研究证明，产品创建者在用户对产品做出初步判断之前有50毫秒的时间。您的视觉设计是您的产品对用户的第一印象，甚至在他们开始使用您的产品之前。这对他们是否成为您的客户有重大影响。 

更好的品牌召回

用户很少考虑产品使用的视觉语言，但是当他们与具有强大视觉语言的产品进行交互时，用户往往会更好地记住它。强大的视觉语言为数字产品创造了个性。个性赋予产品自己的身份，并使其在人满为患的市场中得到认可。

“强大的视觉语言为数字产品创造了个性。个性赋予产品自己的身份，并使其在人满为患的市场中得到认可。”

颜色，字体，照片和插图都是品牌的一部分。这些视觉元素以人们理解的结构化和常规方式结合在一起。

您可能还会喜欢： 2019年的移动设计趋势。

如何创建和使用视觉语言

像所有伟大的事物一样，伟大的视觉语言很少会偶然发生。通常，这是长时间和大量工作的结果。遵循以下七个规则将有助于使创建可视语言的过程更加高效。

1.了解产品的结构

甚至在开始使用视觉语言之前，您还需要对客户产品进行UI审核，以清楚地了解当前正在使用的颜色，字体和形状。从利益相关者那里获得任何品牌指南也值得。这些将帮助您了解公司品牌的一般外观。

视觉语言：品牌颜色

品牌颜色。图片来源：Venngage。

如果没有所有这些信息和理解，您将完全处于黑暗中，可能会浪费您的时间来构建可能无法撤消的内容。花时间获取所需的信息并进行分析。在开始使用该语言时，请确保您的设计决策遵循您所学到的发现。

2.了解用户如何看待您的品牌

如上所述，视觉语言是品牌标识不可或缺的一部分。视觉语言必须代表您和谁。在使用视觉语言时，必须清楚地了解要为谁设计的内容。

在用户研究上投入足够的时间，因此在研究阶段结束时，您可以清楚地了解目标受众以及他们对品牌的看法。这种了解将为您提供视觉指导的理由。设计的每一点都应该反映出您的视觉识别。

视觉语言：品牌认知度

品牌认知度。图片提供：瓶装水行业博客。

3.为您的视觉语言创建字典

就像口语是从单词和含义开始，视觉语言是从定义视觉单元及其含义的字典开始。模式库（可以分类和分组的可重用构建块）和样式指南是构成您的视觉语言字典的部分。 

视觉语言：样式指南示例

样式指南的示例。图片：Dribbble。

该词典应定义具有清晰含义的可重用视觉单元。用清晰的目的和意义来映射设计元素可能是一个挑战，但是可以通过沟通的角度来评估元素的含义。以下模板可以帮助您识别和传达每个单元的含义：

[模式/库]中使用的[设计元素]有助于传达[目的和意义]。

每当您评估特定的视觉单位时，请使用此技术。例如，如果您要为登录页面上的主要号召性用语按钮选择一种颜色，则可以说：“注册表单中使用的鲜艳的橙色有助于向用户传达此操作的重要性。”

4.明确设计原则

定义字典后的下一步是建立语言的清晰语法和语义。设计原则是语言的语法，它们定义了创建设计时如何使用特定元素的规则。设计原则是在设计产品时始终牢记的动手规则。

设计原则应为：

货真价实。它们应反映您的团队遵循的产品设计理念。

可行的。设计原则不应成为有关如何设计产品的一般建议。例如，他们不应该说“让事物变得美丽”。对于设计产品的人来说，这实际上并没有任何意义，因为没有人愿意故意制造难看的产品。 

清除。参与产品开发的每个人都应该理解设计原则。

鼓舞人心。设计原则不应限制创造力。他们应该以统一的方向指导团队的工作，并为探索创造性的设计解决方案提供足够的空间。

例如，流行的博客平台Medium的设计原则之一就是选择的方向。中型团队为此提供以下说明： 

“在设计中型编辑器时，经常会提到此原则。我们有目的地交换版式，类型和颜色选择，以提供指导和指导。方向更适合产品，因为我们希望人们专注于写作，而不要因选择而分心。”

对于中型设计人员而言，构建真实可靠的产品是一项明确的指令。

我强烈建议阅读Alla Kholmatova撰写的《Design Systems》一书，以了解有关设计原理的更多信息。

5.记录过程

无论创建可视语言的最后期限多么紧迫，您都不应忽视文档编制过程。关于视觉传达系统的全面文档对于产品设计过程可能非常重要。

在设计的实施阶段，缺乏详尽的文档记录是造成混乱的常见原因。在整个创建过程中创建文档可以使决策更加顺畅，因为您将在每个决策背后都有更好的依据。

6.遵守已建立的规则

Once a product team has developed a set of guidelines for a visual language and reached an agreement on them, it’s vital to stick to them. The biggest misstep when building a visual language is inconsistency. Inconsistency happens when team members don’t follow guidelines. Remember, there is no use for a language if nobody wants to speak it.

"Remember, there is no use for a language if nobody wants to speak it."

7. Think of the visual language as a living organism

Spoken languages tend to change over time, as cultural influences shape and impact them. Visual languages are absolutely the same. This is why a visual language should not be a set of static rules set in stone, but instead should be an evolving ecosystem that grows together with a product. And this ecosystem should be easily adaptable to changes. 

您可能还会喜欢： 微交互：微矩设计的重要性。

视觉语言的好处

创造美丽且易于使用的视觉语言需要花费时间。从第一次迭代开始，您可能就不会拥有强大的视觉语言，这很好。必须花时间为该语言建立坚实的基础，以确保它与您的团队一起成长和成熟。

您在视觉语言