视觉语言本身可以具备足够明显清晰的特色，就像每个人的表达方式和口音一样，这使得视觉语言本身可以强化和凸显品牌特色。那么想要创建一套属于自己的视觉语言，可以从9个方面入手。

我们使用语言与人进行沟通，传达信息，记录内容，而视觉语言也发挥着类似的作用。从色彩到排版样式，从插画到品牌构建，视觉语言同样承担着类似的功能，它和传统的语言有着类似的特征包括结构化和沟通功能。

所以，视觉语言也是规范化的，标准化的，它足够自由，也保有约束。视觉语言本身也可以具备足够明显清晰的特色，就像每个人的表达方式和口音一样，这使得视觉语言本身可以强化和凸显品牌特色。那么想要创建一套属于自己的视觉语言，可以从下面的9个方面入手。

1. 构建品牌独有的配色方案

我们总是说，色彩和形体是用户第一眼最快注意到的东西。配色方案的视觉表现力最强，这使得配色方案成为视觉语言中辨识度最高的组成部分。配色方案本身需要具备一定的独特性，确保它整体上能够让人记住，区别于其他，品牌不至于在繁杂的互联网世界中迷失，也不会让用户无法记住。

另一方面，配色方案应该具备良好的兼容性，能够调和品牌不同模块，比如：网站、APP、社交媒体、包装、名片等。

配色也应该体现品牌的价值。想想麦当劳的配色吧，黄色和红色为主。这两种色彩本身能够触发幸福（黄色）和饥饿（红色）的感觉，两者搭配加上经典的金拱门的LOGO，麦当劳的视觉识别度可以说是相当高的。此外，麦当劳旗下的许多其他的设计，也是在这个配色的基础上构建的。

2. 构建排版的层次结构

排版层次结构的构建，和选择字体同样重要。不同的排版层次，能够给人截然不同的感受，清晰还是粗糙，雅致还是有趣。在排版的层次结构上，并不存在对错，更多需要考虑的是合适不合适，风格和感受上的一致性。

当然，不同层级的信息，在排版层级上还是要有比较清晰的体现的，大小疏密对比度不足，会难以让用户感知到内容之间的重要性的差异。

以 Airbnb 为例，网站的排版有着清晰的层次结构，字体的大小、字重、间距和配色都已经标准化了。相应的，给人的体验也始终保持着应有的一贯性。

3. 建立栅格来规范内容之间的空间关系

视觉元素之间的位置关系，和它们本身的设计是同等重要的。如果你希望整个设计在细节上是清晰明确的，那么栅格会给你想要的。

FreeCodeCamp 对此有很明确的描述：

栅格赋予了UI界面元素以模块化的清晰结构，这使得整个设计团队能在此基础上更好地合作。这使得产品能够快速清晰地输出到不同的平台上。如果你是基于某个想法来构建概念设计，那么这种方法更加实用有效。

简而言之，栅格让视觉呈现的复杂度降低了。

4. 创建组件库

从按钮、图标再到卡片，你应当创建出一整套可用的、风格一致的UI组件库。

同样功能的控件，在页面不同的地方、或者不同的页面上有着截然不同的风格，是让人迷惑而糟心的。一个好的组件库，应当包含全部常用的UI组件，以及针对 iOS 和 Android 平台所适配之后的UI组件。虽然构建组件库本身的工作量并不小，但是在完成之后，能让后续的工作事半功倍。

5. 强调图片的风格和特征

在诸多图形化的元素当中，图片和插画是视觉性最突出的元素，这也是整个视觉语言当中最重要的因素之一，因为它从某种意义上是和品牌关系最紧密的素材。

构成视觉语言涉及到图片素材的方方面面，构图、色彩、滤镜，甚至相关动效的细节。

下面是 Smashmallow 中的网页设计，即使它们并不是同期设计也不是服务于相同的功能，但是很明显插画所采用的视觉风格是一致的，并且每幅插画当中都使用了共同的元素：热气球。

这一元素和品牌本身是有着紧密关联的，而用户也可以从这些插画图片的内容，迅速意识到品牌本身的一些概念。

6. 为动效设定规则

动画效果同样是要遵循一些规则的。是快速移动还是慢速移动，是悬停触发还是自动运行？

这些动效的运动规则其实是有着明显的视觉识别度的，就像日漫和美漫在视觉和运动规则上存在差别一样。

就像下面这个来自Dribbble 的动效，它大体上做着匀速的圆周运动，速度适中，其中有些元素并没有完全按照圆周运动。那么想想看，是否所有的做圆周运动的物体都和它一样呢？它们是否会带来不一样的视觉观感呢？

7. 让视觉和文本内容匹配起来

视觉语言并不是只涉及到视觉元素，文本并不是与之割裂的，在设计的时候，两者需要合理地配合，在体验上达成一致，传达一致的信息。

在下面的 Steffany 这个网站当中，整体设计呈现出非常明显的女性化的特征，文本内容在表达方式和调性上和整体的视觉语言保持着一致，并没有出现两者冲突或者竞争的状况。

8. 可信且可靠

视觉语言只有在用户接纳的情况下，才会最大程度地发挥作用，它要给人可靠的感觉。所以，整个视觉语言需要和你的品牌定位、气质表里合一，而不能让设计和产品、企业的气质割裂开来。

你能想象没有主角的芝麻街会是怎样的一种气场么？

整个品牌和视觉形象都是围绕着 Big Bird 和 Elmo 等角色建立起来的，每一个细节的设计都是围绕着这些角色来创建的。注意网站中角色和其他视觉元素之间的映射关系，它们让用户清晰地感知到角色和整体设计之间的关系是表里如一的，这使得整个网站的设计更容易为用户所接受，视觉语言在此发挥了作用。

9. 落实到具体标准文档当中

整个视觉语言在构建起来之后，需要保持各方面的一致性，在具体设计的时候，则得有一份详实具体的设计文档供整个设计团队和利益相关人员，作为参考。所以，完成整个设计之后，将整个视觉语言相关的内容和素材制作成设计风格指南，和整个品牌的设计规范统一到一起。

作者： CARRIE COUSINS

译者：陈子木

来源：https://www.uisdc.com/building-a-visual-language

本文由 @陈子木 授权发布于人人都是产品经理，未经作者许可，禁止转载

题图来自Unsplash，基于CC0协议