大厂都在用的情绪板，到底是什么？（二）

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

往期回顾：

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

情绪板创建使用流程

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

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

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

1. 关键词提取

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

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

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

2. 映射衍生词

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

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

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

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

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

3. 图片检索

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

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

4. 情绪板制作

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

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

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

5. 风格分析

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

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

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

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

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

总结

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

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

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

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

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

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

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

欢迎关注作者的微信公众号：「超人的电话亭」