情绪板经常被吐槽？简单4步帮你做出用得上的情绪板！

几乎大部分 UI 设计师在作品集里都会放入“情绪板”这个模块，但是这个模块的利弊其实都很明显，大家都想通过展示情绪板来告诉面试官我是如何定义色彩和产品的视觉风格调性的，但是大部分设计其实在做界面之前都没有做过情绪板，而是反套的。也就是做完界面后，看用到了什么舒服的颜色，然后再去找一些图片和关键词，做成“情绪板”。

所以大家看到的情绪板几乎都特别的鸡肋，一是关键词太普遍宽泛，几乎所有产品都能够用。二是图片和关键词关联性并不大，只是好看或者带有需要的颜色而已。

例如上方我在设计平台截取的一些例子，关键词包括：品质、自然、舒服、简约等等，几乎可以用到每一种产品，图片和关键词也并没有太强的关联，为什么自由是一座雪山？为什么活跃是一些电子产品？为什么简约是一幢高楼？为什么专业是一台黄色的电脑？这样的案例比比皆是。

所以很多设计师对情绪板的理解出现了问题，风格定义这件“事”，其实是很难的，需要沉淀非常多的经验，从初学、临摹、原创、大量风格探索尝试后才能逐渐形成风格定义的能力。风格定义也绝对不是找一些图片吸取一些色彩，就搞定了，所以市面上 UI 作品同质化的原因就是大家还没有掌握定义风格的方法。

什么是情绪板

用白话来说，情绪板反馈的就是产品的相关利益者对产品的感受和期望，并将其具像化的方法和过程。每一个产品利益者对产品的期望都不同，一千个人心里都有一千个哈姆雷特，那么产品呈现出什么样子，我们需要能够将这些感受和想法进行视觉具像化。这些感受和想法包括了产品的定位、用户的需求、管理者的战略规划等等。

为什么要做情绪板

情绪板的结果并不会直接告诉设计师具体设计的参数，不会告诉设计师应该用什么颜色，应该用什么字体。而是一种视觉导向与感知指引，用来给设计师进行参考，并且设计师要始终如一的贯彻这些引导，这是原因之一。另一个很重要的原因就是在做情绪板的过程中，能够让设计团队、产品管理者对该产品呈现的感知和理念能够达成一致。和情绪板类似的方法还有例如品牌冲刺、人格化块等一系列用于探索产品在视觉感知和产品品牌定位上的方法。

情绪板的步骤

其实很多人对一些方法比较排斥，我个人也是如此。大家一听到方法、方法论头都炸了，你不如直接讲案例来的更直接一点。好，我们今天会将方法和步骤都给大家讲解一下，保证大家能够看懂。

先来将具体的执行步骤，方法流程的简单和复杂还是来自于当下的条件和资源，以及我们的期望。同时情绪板运用的时机也有讲究，它并不适合运用在比较成熟的产品设计中，而适合用在 0-1 或者 1-2 版本的阶段。在这个阶段里产品品牌初具雏形，用户数据和特征也逐渐成型，所以我们有更多的数据来对这些反馈进行准确的描述。

如果我们的条件和资源丰富，那么需要邀请用户一起来参与，如果条件不允许，那么至少也要将公司其他部门以及高层管理一起来参与，当然如果这些条件都不具备，那么设计团队和设计个人也可以进行，但是对个人经验要求比较高。

那么我们先理想化的来一次讲解。

第一步-邀请相关利益者并进行访谈研究

我们需要邀请一下人员参与此次情绪板的方法研究：1.用户（注意覆盖多类样本 3 名左右即可）2.设计团队成员（覆盖到其他参与方法的人员人数）3.其他利益相关部门负责人（2-3 人）4.老板（必须邀请）。由牵头设计师进行主持。

首先每一位设计师找到其他参与方法的人员，一对一开始进行访谈，主要围绕以下几个问题：

1. 产品带给你什么感受

2. 您觉得和 xx（竞品）比起来有什么差别

3. 如果将我们的产品比作一个人，你觉得他是谁

4. 如何向朋友介绍这个产品

5. 它和你身边的那种物品有相似的气质

……

还有更多的问题可以根据不同产品定位进行拓展。为什么要问这些问题呢？这些问题将覆盖到用户对产品的一种主观感受，并将其拟人、拟物化，让用户能描述出和竞品在主观感知上的差异和区别。于是我们会得到一些关于这些问题的关键词。

第二步-产出体验关键词并进行三维映射

得出的关键词例如我们经常会说的品质、自然这样比较抽象的词，也会得到像父亲、皮带这样具像化的关键词。这里要注意的是当用户描述出他心中的关键词后一定要进行追问，例如为什么您觉得它像父亲而不是母亲呢？这里就要时刻去找到用户关键词背后的真实想法。

接下来我们会用到三维映射法，将所有关键词都划分出 3 种类型：

1.视觉映射 2.感受映射 3.具象映射，并继续访谈用户：您刚才说产品给您的感觉是时尚的，那么您觉得时尚在你心中是什么颜色的，时尚给您一种什么感觉以及如果让您用一个物品来代替时尚，您会选择什么物品？

这样做的好处是能够让抽象的概念具像化，让设计师能够切实理解用户的主观感受。一般如果我们只让用户描述主观感受其实是不准确的。

第三步-让参与者创建情绪板

当我们把所有提炼出来的关键词都找到对应的三维映射后，我们将针对最后的结果进行可视化图片收集。例如用户觉得香奈儿包包可以用来代替时尚这个关键词，那么我们就需要收集更多有关香奈儿包包的图片。在收集图片过程中要注意这几点：

1. 图片必须高清不模糊

2. 图片的数量必须大于 6 张

3. 图片的色彩尽量覆盖多种

4. 图片尽量简洁有主体

将所有关键词都收集完图片后，我们让用户在其中进行挑选，让其选出最符合他说出来的那个关键词的图片，每个关键词选择 1-3 张图片。这三个步骤中，老板的建议和感知也是很关键的，因为我们知道用户一般都会做很多利己的选择，所以也只能作为一定的参考。而老板则是产品的创始人，对产品的定位和期望有更深入的想法，同时这也将为我们后续推动工作提供很有价值的参考。

那有小伙伴说，老板没有审美，很土怎么办。其实这个不重要，在这几个环节中同时也要避免为了迎合老板而做出的决定，我们只需要听老板的感知然后去分析即可，并不是老板说要什么就一定要去实现，否则就违背了本次方法的初衷。

第四步-结合情绪板制定设计风格

情绪板最后输出的其实就是关键词+具像化的图片。到最后一个步骤，大家觉得是不是还是很迷茫，那和我们做设计到底有什么关系呢？所以我们在做完这一系列操作之后，需要由资深、专家来牵头完成风格的脑爆和定义。例如我们可以在设计团队内继续进行讨论，围绕形、色、字、构、质五个维度进行脑暴。每个人对这五个维度进行效果制作，可以是 UI 首页、海报、插画，以提炼出来的关键词和图片为准绳进行设计。可能需要几天时间，之后再次进行会议讨论，为什么每个人的设计是这样的，思路是什么。

所以其实情绪板最后的效果，很大程度上取决于设计师的设计能力。如果团队都是设计新人，那么也没有必要做这个方法了。

案例

接下去我说一下之前我们项目中的案例。我们当时根据用户以及产品定位提炼出来这些关键词：沙发、撞色、口红、香奈儿包、潮流、多彩、品质。针对这些关键词我们继续寻找图片。

根据这些图片，我们从形色质构质五个维度去寻找设计的灵感，例如在形状方面我们提炼出了棱形作为一个特征符号，可以运用在图标、背景修饰元素以及容积形状等地方。

颜色我们提炼出了产品主色以及辅助色，让页面更加活泼、轻量化。在金刚区图标以及 banner 背景的运用上，用到了撞色以及浅色背景突出主题的设计。

字体方面主要是运用到一些特殊字体时候的字体设计，例如在今日特卖以及明日预告等一些固定栏目标题的场景。

构，运用在了一些氛围大图的结构布局上，采用了大标题结合大主体的对角线构图以及对称构图。还有在 banner 的设计中利用前中后景营造的纵深感。

质，运用到的是在图片背景中采用了氛围元素的搭配以及一些微渐变，让模块的视觉丰富更有质感。

之前给大家介绍的 NOKNOK 应用，一款像素风格的游戏社区产品。其实设计风格这回事，大家不要过度的追求，能营造出非常独特的风格必须要满足以下几个条件：

1. 功能简单。大家觉得淘宝和新浪微博的风格是什么？是不是很难明显的感知有什么独特的风格？因为产品题量大、功能复杂用户多，所以很难设计出满足所有用户且很独特的风格。

2. 风格小众。例如像素、极简、摇滚、潮流，这些风格是很容易出效果的，平时我们接触的大部分产品都是满足大部分用户的视觉偏好，突然有一天你看到这些小众风格你就会觉得很特别。但是这些小众的风格是很有局限的，例如你让淘宝去做成极简风，或者大众点评去做成很潮流的风格，人家功能点这么多，没有空间让你去做视觉的发挥，就无法展示出用来表达风格的细节。

所以，如果你们不是正在创业或者从零开始设计，那么就不要太追求小众化的设计风格。情绪板这回事听起来很专业，但实际操作起来还是有很多问题的，一味的追求方法不如自己多练习几种不同的设计风格，多看看国内外的优秀作品。希望大家在不久的将来都可以成为独当一面的设计专家。

欢迎关注作者的微信公众号：「应谋鬼计」