少改稿秘诀！如何确定一个产品的主视觉风格？（附实战演示）

人人都是产品经理 • 9年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

关于一个APP，或者是一个互联网产品的视觉风格和主题颜色是怎么确定的，其实是有一套系统方法论的。这个方法论叫做：情绪板（Mood Board）。下面由网易设计师来解释情绪板的运用方法，附实战演示，特别实用！

什么是情绪板？

视觉设计师可能会花很长时间产出了精致的，高品质的设计，得到的却是用户或客户的一句话：“这不是我想要的！”一般来说，在没有实物前，人们并不清楚自己要的是什么。但是在看到成品后，他们可以轻易地判断是否符合自己的喜好或期望。因此，在为错误的设计方向投入过多前，了解用户对风格的期望和需求，从而确定整个网站或产品的视觉风格是有必要的。

情绪板是一种启发式和探索性的方法，可以对如下问题进行研究：图像风格（photography style），色彩（color palettes），文字排版（typography），图案（pattern）以及整体外观以及感觉。视觉设计和人的情绪紧密相连，不同的设计总是会引发不同的情感。

此外，情绪板也可以作为可视化的沟通工具，快速地向他人传达设计师想要表达的整体“感觉（feel）”。

如何创建情绪板？

首先，需要明确体验关键词，在一个设计项目中，通过进行涉众访谈和用户研究，研究，设计人员创建了产品的人物角色，基于人物角色，综合用户研究结果以及品牌/营销文档，可以得出体验关键词（Experience Keywords）。当人物角色和体验关键词都确定后，可以通过使用情绪板来探索网站或产品的视觉风格，并作为和内部人员进行早期沟通的基础。

体验关键词（Experience Keywords）举例：

其次，应基于时间限制，个人工作习惯以及用户的需求对情绪板的呈现方式进行选择。一般来说，可以从实体/数码，以及拼贴/精致模板两个维度来区分情绪板的呈现方式。

A. 拼贴画

这是一种最简单地创建情绪板的方式。使用这一模式，无需考虑诸如字体和特定颜色之类的细节问题。找到那些可以激发灵感的素材，其中可能包含那些传达相似风格和情绪的网站的截图。这种方式快速，有趣，但是，具有一定的含混性。

B. 精致化的模板

模板可用来展示不同的元素。如：

在这种形式的情绪板中，界定了配色，字体处理（如标题和副标题），按钮风格甚至是图片风格。标准模板可以让人们聚焦于特征化元素。

一般来说，情绪板可以以实体的方式呈现，也可以以数码方式呈现的，考虑到成本，时间等因素，我们多选用数码的方式，因为这种方式更为设计师提供了更灵活，多样的选择。

第三步是选择素材创建情绪板，这是一个迭代的过程。

如何使用情绪板？

在使用情绪板过程中，体验关键词的作用相当重要。这里首先要说明下什么是体验关键词，可以参考以下的PPT截图（此PPT为UCD CHINA2009年会上工作坊所用的PPT）。

获得体验关键词是情绪板的第一项工作，一般从内部涉众（相关的产品和设计人员）及外部用户两种渠道获得。

自涉众访谈和用户研究中，可以收集大量的体验词样本。在获得这些样本后，可以内部进行讨论，通过归纳整理精简为几个关键词。

体验关键词提取好之后，可以在内部使用情绪板（如果受限于资源或公司的保密政策），也可以招募用户来完成。

在内部，由视觉设计师来完成，要注意以下几点：

需要制作3套以上情绪板供评审。
制作的过程是个迭代的过程，需要内部团队慎重讨论决定。
情绪板的形式可以有多种，如拼贴画或精致化的模板（二者的区别在文档中有）

如果招募外部用户，则要注意以下几点：

主持人需要不断询问被访者，去探究选择图片背后的原因：“为什么你会选择这张图片？能否和大家分享一下你的想法？”
注意差异的挖掘。注意挖掘被访者之间的观点差异，一百个人心中有一百个哈雷姆特，同一张图片对于不同被访者可能会有不同的解释，如果好几位被访者同时选择一张图片代表他们各自对某个品牌的感觉，注意询问他们选择这张图片的原因是否一样。