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

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

什么是情绪板？

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

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

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

如何创建情绪板？

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

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

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

A. 拼贴画

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

B. 精致化的模板

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

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

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

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

如何使用情绪板？

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

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

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

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

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

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

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

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

可以呈现给用户的图片有限的，因此，在挑选图片时，需要内部研究和设计人员协同，根据视觉设计所需要考虑的几个维度结合已有的关键词进行图片的筛选。一般来说，在将图片呈现给用户之前，内部人员已经明确了每一张图片所代表的意义，在用户选择和访谈结束后，两方面的数据综合分析才能获得最终的结果。

以上是操作情绪板的一些技巧的总结。

OK，那么现在我们已经知道了情绪板的运用方法，就来马上动手试试。（以下内容仅作演示，可能略显粗糙）

首先，我给自己定义一个主题：外卖APP。

关键词提取：美食 快速 送餐 打电话 （越多越好）

根据关键词寻找的一些图片（色系尽量丰富，风格尽量多样）：

然后根据查找的图片提取出用色：

当然，现在提取出的颜色是杂乱的，且不具代表性。因此我做了第一次颜色筛选，提取出了最高频的16种颜色。

接着是第二次颜色筛选，主要去掉竞品色（美团外卖、饿了么、百度外卖、达达、派乐趣、点评、京东到家、爱鲜蜂等）和脏色。当然去掉之后发现基本没什么可用的颜色了，因此还有一个问题就是，如果竞品色不足以影响到我们的品牌色的话（在可控范围内），还是可以采用的。具体这个决策过程需要大家一起讨论决定。

筛选出以下颜色：

现在我们基本可以控制可选择的主题色了，如果人力足够的话，建议多做几个版本以查看具体使用效果。当然，也可能是老板拍板来决定。

其他的视觉风格，如图像风格、文字排版等也可以在这个调研基础上进行确定。

【优设名师访谈系列】

1. 曾任腾讯大粤网设计主管的跨域达人：《优设访谈！腾讯设计师米田的设计之道与成长之路》
2. 没有听过冯叔的设计师不是好设计师：《优设访谈！著名设计师冯铁的设计思考与经验之谈》
3. 前端重构视觉交互无一不精的设计师：《优设访谈！腾讯高级交互设计师C7210的十年设计路》
4. 非议不断前行不止，用心的设计团队：《优设访谈！国内知名设计团队专访之滴滴DISIGN》
5. 前网易现阿里写的书是交互领域必读：《优设访谈！阿里交互设计专家刘津的设计管理之路》
6. 职业路径最为清晰的科班交互设计师：《优设访谈！LBE安全大师产品总监晓生的职场进阶之路》
7. 能靠脸吃饭偏偏不的设计界「鹿晗」：《优设访谈！阿里资深设计师的自学设计之路》
8. 300多人的百度设计团队该如何运转：《优设访谈！国内知名设计团队专访之百度大UE》
9. 百度上海团队负责人的非科班设计师：《优设访谈！百度设计大咖JJ YING的自学成才之路》
10. 他带的学生已经是国内的设计大咖了：《优设访谈！灰昼：从非科班生到首席美术总监的15年设计路》
11. 设计的产品有几亿人在用的非科班生：《优设访谈！腾讯电脑管家视觉负责人张晓翔的UI自学之路》
12. 英雄联盟穿越火线天天爱消除都有他：《优设访谈！腾讯游戏Tgideas团队设计总监李若凡的十年设计路》

原文地址：uedc.163
作者：nihongyun

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量108万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com