UI设计的风格管理——情绪板

有一阵子没更新系列性文章的，最近来更新一波和项目分析有关的内容。其实发展到今天吧，大家对于UI设计要做哪些事情应该也咂摸出个一二三来了，光靠给设计图 JPG 压缩包的过程，显得太寒碜，不体面。

所以，我们得给为自己的设计添加一些 “道理”，赋予它们关于逻辑和理性的 BUFF，这样才能保证我们的作品是严谨的、有内涵的、解决问题的……

今天，我要讲的东西，就是项目分析中的 —— 情绪板。

在网上，许多大厂设计团队在自己的项目复盘里，都有放情绪板这个模块，以及添加一些 “高大上“ 的名词，例如下面携程、阿里、360 的 UED 设计团队上传的情绪版应用案例。

对于没有系统学习过品牌视觉的同学来讲，往往会一脸懵逼，即为什么我们的 UI 设计构思过程里，要加入一些奇怪的图片、词汇，有它没它不都没影响我们把界面给设计出来嘛？

这就要从平面有关的知识点说起了。

维基百科中对情绪板（Mood Board）的解释是：情绪板是由拼贴元素组成的视觉展示，由图像、文本、对象小样等元素组成。可以是有目标主题的，也可以是随机选择的任何素材。

( 原文：A mood board is a type of visual presentation or a collage consisting of images, text, and samples of objects in a composition. It can be based upon a set topic or can be any material chosen at random.)

在平面品牌设计中，对VI系统的设计是一个非常抽象的过过程，包括 LOGO、字体、辅助图形、色彩选用等等。往往我们需要参考大量的素材、图片、文字，从多个角度切入去”打磨“设计的思路。

于是，在电脑没有这么发达的年代里，平面设计师们就会将一些能作为参考的纸质图片、文字剪下来，然后贴到一个专门的白板上去，类似下面这些例子。

当然，在电脑和互联网普及的今天，出现了很多用来替代这个白板的工具，包括 Pinterest、花瓣、Eagle、Behance等等，我们可以把想要的图片和素材上传到这些工具内快速进行浏览。

虽然这些工具很方便，但是多数设计师其实只是把它们当成素材、参考图的收集工具，而不是作为情绪板来使用，大家一定要明白其中的区别。

而在电脑中完成的情绪板，通常长成下面这样。

情绪板是一个帮助设计师构建设计氛围、风格的视觉工具，通过收集相关的素材，然后在这些素材中寻找隐藏的 ”线索“，让自己的设计思路可以更明确，更具体。

为了方便大家理解，可以再看看下面的两个案例。

案例1，是一个针对潮人应用的 LOGO 设计，设计师希望表现高冷、前卫、又与众不同的情绪，于是有了斯芬克斯猫的图片。

当然，展示出来的图片不是设计师在设计过程中真实应用的情绪板，相信还有很多目标用户的日常照片和商品照片素材，然后从中获得了耳钉造型的灵感，为 LOGO 的猫耳上添加了耳钉元素。

案例2，是一个法国的烘焙品牌，设计师通过麦穗、面包、滤网等关联性物体中进行提炼，完成 LOGO 的图形设计，让 LOGO 本身能和原材料进行关联，更符合产品本身特征和便于用户联想。

在上一节中，我们已经对情绪板的内容做了扫盲，我们知道，情绪面板是一个用来提炼设计思路的工具，包含各种图片、设计素材。

但光知道它是什么，必然是不够的，扫盲不能只扫一半，我们还要再来说说它要怎么用。

学会怎么应用情绪板，就要先了解情绪板的创建方法和流程。网上流传的流程大多来自几年前淘宝UED团队的分享，大致如下图：

具体流程怎么样我就不多做解释了，因为这个流程对于一般团队或者设计师来说，都太复杂了，完全不利于我们实际产出的落地和执行。

并且，情绪板的执行流程是没有一个固定的方式的，完全可以根据自己的需要进行调整和变更，可以简单也可以复杂，下面是我自己总结和应用的情绪板执行流程。

1.关键词提取

在项目设计前，我们要获取3-5个必要的关键字词组，这些关键字就是我们本次设计所要实现的产品、交互或视觉目标，通常由一些比较抽象的形容词组成。

常见的比如：高端、大气、上档次……

以及高效、简洁、实用、精致、质感、格调等等。

2.映射衍生词

第二步，就是在原有这些词汇的基础上，来衍生出一些新的词语。而这种衍生词汇，不是简单脑暴一下就能产生出来的，而是要有目的性的进行提取。

而我将这种衍生词汇的方式划分成了视觉、心境、物化三个类型。

在大厂专业的用研中，这些映射是通过对用户进行访谈，咨询他们对这些关键字的联想统计出来的，比如下面这样的表格。

如果还要通过用研的方式去获取这些内容，不仅操作起来非常麻烦，而且访谈样本数不够的话获得的词汇准确性也会有非常大的误差（访谈一直是我认为最没用的用研流程）。

所以，这个操作是我们可以通过自己的联想发散来完成，如果觉得思路枯竭，也可以自己找同事、朋友来进行“看词填空”活动，获取相应的衍生词，衍生词汇的数量适中即可，千万不要认为越多越好。

3.图片检索

之所以我们有一个映射衍生词的流程，是因为初始获得的关键字通常都是一些“假大空”的套话，例如耳熟的高端、大气、上档次，直接使用些词汇去获得指定的图片素材内容是不现实的，需要缩小范围。

所以，我们要在衍生词的基础上，分别对几个关键字增加不同的图片检索关键字和方向，然后就可以去不同的图库中进行查找了。

4.情绪板制作

搜索了大量的图片，我们要从中挑选出符合我们需要的素材内容，然后进行下载和整理。而整理的工具重点推荐使用 Eagle，如果没有购买 Eagle 的情况下，花瓣或本地文件夹管理也可以做为替代品。

首先，为本次项目创建一个文件夹，然后在下级创建不同关键字的文件夹，再根据每个关键字相关的衍生词创建子文件夹，将我们挑选到的图片置入其中，如果习惯使用标签的同学也可以使用衍生词标签进行替代。

这样操作完成以后，我们就可以在项目根目录中，选中文件夹，并开启 “显示子文件夹内容”，就可以看到下级有关的所有图片内容了。

5.风格分析

有了上面这些相关联的大量图片素材以后，就到了我们进行风格分析的环节了，在这个环节不是直接就能定义好我们后续设计的风格，而是要先对下面两个目标做一个粗略的制定 —— 色彩和目标风格参考。

对于色彩的分析上，就是根据我们整体收集的素材中，哪一个色系的观感和产品的关键字以及整体的需求相近，那么我们就重点挑选这个色系的图片出来，并通过手动吸色或相关工具来获得它的配色信息，如下图所示。

然后，我们要再去搜索一和情绪板呈现的感受近似的设计案例，作为设计参考。这是一个将抽象的感受在UI中具象化的过程，而最好的方式并不是我们直接对着图去想设计的细节，而是用已经完成的案例来做参考总结，比如下面收集的这些相关案例。

从这些设计的实际案例中，我们就可以得到一些设计细节上的指示，比如使用直角按钮、横线分割、纯色填充、留白较大等等，和大量使用渐变、投影、毛玻璃的设计明显不是一种类型。所以总结了这些参考，那么我们脑子里也就有画面了，可以展开具体的设计了。

到这一步，我们对于情绪板的创建和使用，也就完成了。而剩下的，就是通过在具体的设计过程中对前面的内容进行尝试，设计出一套符合目标和让我们满意的结果出来。

我们在网上看到的很多UI展示案例中，都是直接在情绪板的模块里放了几个关键字和图片，然后直接给出细节制定的结果。

除了一些牵强附会的引用以外，项目展示的部分都是经过大量精简后的结果，并没有把使用的过程展示出来。

情绪板对于我们完成项目视觉风格的制定是有非常好的帮助，但情绪板的应用不像做应用题一样通过公式求解，获取一个固定的值。而是通过流程去获得一个风格的范围，并在这个范围内进行风格化的尝试建立最终的项目视觉风格。

刚开始应用情绪板，肯定会觉得流程特别繁琐，执行起来特别麻烦，但随着我们对它理解的深入，以及使用经验的提升，应用起来就会越来越顺手。

并且，熟练掌握情绪板的设计师，就可以跳出流程的条条框框，根据自己的需要灵活的创建和应用情绪板。

关于情绪板的介绍也就讲到这里，之后有机会的话，我还会展示一个更具体的设计案例从创建情绪板到具体完成设计的全过程记录。

感谢大家的收看，我们下次再贱~