深度｜建立在符号化设计思维下的UI设计

最近基于两个问题的思考和自己产品设计的梳理，意识到视觉设计需要强化差异，深化状态识别和记忆，通过构建符号化设计让用户在与图形交互的时候产生本能的、直觉化的效果。这一点，是我最近在UI设计上感触最深的一点。

首先来看这两个问题。

1.为什么Master卡这次VI系统升级，只保留了两个相交叉的红色和黄色圆？

2.为什么Mac系统上的软件左上角的关闭、最小化和最大化可以直接显示为红、橙、绿三个小圆点？

先说第一个问题。前段时间报道出来的MasterCard视觉系统升级方案，以及高达800万的设计费用，一时间大家议论的沸沸扬扬。给大家最直观的感受是这么简单的设计，居然值800万。

图1-MasterCard新视觉形象

这里面大概有两条逻辑：

1.这设计太简单了，不好。

2.这么简单的设计，居然要800万？

我在这里回答一下。设计简单了就真的不好吗？MasterCard的新形象为什么敢于这么设计，就是因为经过长时间的使用（如图2），用户已经对品牌形成了极强的视觉识别和品牌印记——就是两个交叉在一起的圆，左边为红色右边为橙色。这就是品牌作用于消费者的符号，而符号一旦从用户心目中构建，其他都可以忽略。设计师正是在大量的研究基础上，把品牌最合理、最本质的东西抽取了出来，形成了这样一个最终的设计方案。

可以说这个最本真的方案就是用户对于MasterCard的认识，所以这个所谓“简单”的设计方案一点都不简单。

图2-MasterCard形象演化

当然说到是否值800万，其实做设计工作的人最明白。设计工作不仅仅只是画个最终的效果图，他的前序工作有很多，包括原有设计研究，品牌形象研究，竞品以及设计趋势研究等案头工作，还包括用户调研，分析报告，元素提取，色彩方案等工作，最后才是设计草图，最终的设计效果图以及视觉场景应用。是这么多的工作投入加起来总共800万，可以理解。

再说一下第二个问题：

图3-Mac系统软件截图

为什么Mac系统软件的三个操作敢设计如此简洁？（如图3）我想原因一方面是因为红、橙、绿已经在用户脑海中形成视觉识别记忆，红色就是代表负面、消极、错误、关闭，橙色代表警示，暂停等，绿色代表：正向、积极、正确、成功等；另一方面这三个颜色是他们直接最大的区别，而他们默认就把最大的区别保留了，当然用户鼠标移上能够看到更具体的icon细节。进而，这三个色彩圆就成为符号，用户使用起来会不假思索。

这两个案例都说明了一点，设计师通过带有一定语义的色彩设计来强化视觉识别，进而建立用户使用习惯，通过系统化设计形成记忆和本能化识别。

这种能够带来强烈识别和深刻记忆的带有指示性语义符号设计，我自己定义为视觉状态识别符号化设计。而这种设计思维就是符号化设计思维。

如图4所示，是当前世界上三个最著名品牌的logo形象。我们可以不假思索地说出logo对应品牌的名称。那这是为什么呢？

图4-符号化的品牌logo

之所以如此，一方面是因为大品牌曝光度高，大家都熟知，另一方面就是因为视觉造型极为符号化了，极易识别和记忆，几乎可以过目不忘。

符号化的视觉设计主要有以下几个特点和作用：

1.追求造型简洁化且有视觉冲击力。

2.追求形式差异化和个性化。

3.符号化的设计降低识别和记忆成本，易于形成本能化反应。

4.符号有一定语义内涵，代表了品牌形象和特征。

如图4左侧的Nike logo就是一个对勾的形象，造型简洁流畅，红色亮丽闪耀，机具跳跃性、速度感和冲击力。每个品牌logo通过形式的差异化来塑造与众不同，建立属于自己独一无二的形象，而这种个性化的东西是形成本能化识记的根本，也是品牌形象存在的基础。

同样道理，如果我们的UI设计能够达到符号化识别，那么用户对于一些icon或者操作的理解成本不仅会大大降低，而且可以形成本能的条件反应，增强用户和产品的默契，提高使用效率。

具体从设计层面上来讲包括以下三点：

1.选取元素——选最具代表性／最简洁的元素，如最基本的图形或色彩进行设计，注入语义。

2.强化差异——剔除繁杂，靠强化不同来深化印记，呈现个性化、直觉化图形识别设计。

3.构建符号——在整个产品的UI系统中要使用统一的视觉形象，在视觉设计迭代中，要沿袭和继承语义内核，沉淀并构建出符号。

图5 符号化设计三步骤

实例一：

举个实际工作中UI设计的例子：如图6是英语学习产品读句子的两个界面，主要有三个icon从左至右代表的依次是：播放原音，用户录音和播放用户录音icon。从我们和竞品的两个界面对比你就能看出来区别来（我们英文正文字号太小就不说了，也是个问题）：

图6 icon设计的符号化对比

1.我们采用了三个形式不同的icon来表达三种行为，而竞品只用了两种icon分别表示播和录。

2.我们用喇叭造型代表播原音，三角造型代表播用户录音，而竞品都用三角代表播音，只是播用户录音的icon下面加了用户的头像；

3.竞品对于icon设计采用了色块的表达方式，而我们采用的是线稿处理，形式弱；

4.并且我们的三个icon里虽然放大了录音icon的圆底的大小，但内部图形基本一样大，没有做主次区分。竞品不仅放大了用户录音icon，而且在录音过程中录音icon的底色变为绿色。

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!