想创造一套自己的视觉语言,要从哪几个方面入手? - 优设-UISDC

想创造一套自己的视觉语言,要从哪几个方面入手?

2018/11/08 8968评论区

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

所以,视觉语言也是规范化的,标准化的,它足够自由,也保有约束。视觉语言本身也可以具备足够明显清晰的特色,就像每个人的表达方式和口音一样,这使得视觉语言本身可以强化和凸显品牌特色。那么想要创建一套属于自己的视觉语言,可以从下面的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. 落实到具体标准文档当中

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/building-a-visual-language

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 配色 设计流程 web前端开发 AI教程 用户体验设计 设计理论 海报设计 神器下载 字体下载 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里