UI/视觉设计师如何确定一个产品的主视觉风格?

一.视觉设计的现实困境互联网产品的视觉设计存在着很多不确定性,譬如:

参考自:网易UEDC、简书 庖丁开发整理

图片 1

你按照典雅去设计的,他却觉得是清新?——评判的主观性&看到图画才明白

一个产品的视觉效果无异于一个人的外形打扮,它是用户对你的产品的第一印象,直接影响到用户接下来的使用体验,尤为重要,那么一个好的视觉风格是怎么设计出来的呢?今天丁丁给大家介绍一个名词:情绪板(Mood Board)。它是一个系统的确定主视觉风格的方法。

Nikki Clark使用情绪板探索其网站的主题颜色

有时不喜欢某些设计作品,却无法立即说出原因——潜意识

什么是情绪板?

MOOD BOARD(情绪板),是指对要设计的产品以及相关主题方向的色彩,图片,影像或其他材料的收集,从而引起某些情绪反应, 以此作为设计方向或者是形式的参考。帮助设计师明确视觉设计需求,用于提取配色方案、视觉风格、质感材质,以指导视觉设计,为设计师提供灵感。

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

情绪板是一种借助图像,启发和探索用户的体验,然后再作用于视觉设计的研究方法。 可以调查并形成具有指导意义的「风格感受」和「设计元素」。情绪板的核心原理是依靠「图像」,沟通产品与用户、用户的潜意识与意识、用户的感性(情绪)与理性,其神经心理学基础为:

  • 大部分沟通为非语言的
  • 思考是通过影像产生的
  • 感官影像为重要隐喻,而这些影像大多是视觉的
  • 思考中的深层结构是可触及的
  • 体验是理性与感性(情绪)的混合

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

此前所接触到的用研方法中很少有是针对产品视觉设计的,今天记录的关于情绪板(Mood Board)主要是整理了微专业中的课程内容,同时结合自己完成课程作业的过程介绍情绪板的操作流程。。

开始要求一种风格,很快变卦要求改成另一种风格——不了解用户

如何创建一个情绪板

完整过程总览

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

丨确定体验关键词

主要是通过事先涉众访谈以及对既往用户的研究,比如这个产品给用户带来什么特别的感受,和 xx 竞品相比有什么差异等问题来确定体验关键词。

丨图片素材的收集

体验关键词提取好之后,可以在内部使用情绪板,由视觉设计师来完成,要注意以下几点:
1、需要制作3套以上情绪板供评审。
2、制作的过程是个迭代的过程,需要内部团队慎重讨论决定。
3、情绪板的形式可以有多种,如拼贴画或精致化的模板。

丨邀请用户来参与创建情绪板

最终你的产品时为用户服务的,所以还要由用户参与创建、更改情绪板。这时候要注意可以呈现给用户的图片有限的,因此,在挑选图片时,需要内部研究和设计人员协同,根据视觉设计所需要考虑的几个维度结合已有的关键词进行图片的筛选。一般来说,在将图片呈现给用户之前,内部人员已经明确了每一张图片所代表的意义,在用户选择和访谈结束后,两方面的数据综合分析才能获得最终的结果。

概念解释:

情绪板一个由能够唤醒用户同一种情绪体验的图片、文本、实物样本等视觉元素组合而成的拼贴画。

使用意义:从定义中可以看出,情绪板是一种试图通过从用户情绪入手来为产品设计提供视觉元素,并统一产品UI的方法。网易的Bo-jian在其文章中指出:情绪板是依靠“图像”,沟通产品与用户、用户的潜意识与意识、用户的感性(情绪)与理性的方法。具体的操作意义在于:

a) 情绪板的制作是基于对产品的明确定位而进行的,所以通过情绪板能够形成一个统一和清晰的产品定位;

b) 设计师、团队成员与用户共同参与情绪板的制作,对产品的视觉设计形成共识;

c) 通过情绪板提供的视觉设计方案更加客观和理性,并有迹可循。

如果以用户为中心的设计不是一个噱头的话,我们可以试试让用户来给视觉设计一个方向。

情绪板用于视觉设计的实践

实践才是真理。我们用一个案例来分析阐述如何利用情绪板的结果,并与视觉设计很好地结合起来。在 App Store 随意选择一款手机应用《老偏方》,用作实践。

对《老偏方》采用情绪板的用户研究方法(具体过程略去)。情绪板结果如下:

情绪板结果分析、及提取视觉元素:

设计过程如下:

丨背景

丨导航

丨点击导航

****丨最终成果(对比)

一个看似简单的 logo 其实是经过无数的调研,分析设计出来的,同样,一个页面的主视觉页面也不是随便设计出来的。周一学会用情绪板确定主视觉风格的目标完成了,如何去做好就要在工作实践中去摸索总结了。

情绪板的操作流程

情绪板的核心在于根据产品定位得出合适的体验关键词,并据此选择出一系列与之相关的图片/实物样本,然后从中提取出符合产品定位的视觉元素。

图片 2

情绪板的操作流程(图片源于淘宝UED)

由于微专业课程中介绍的案例可能不太适合分享,所以接下来以课程作业的内容为例介绍如何制作情绪板。

作业内容:假设你所在的团队要推出一个面向追求生活品质女性用户的一个美妆经验分享社区,请你根据这个初步的产品定位,以自己为用户,来用情绪板的方法给出最终产品视觉设计策略的建议。

第一步:确定原生关键词,这些关键词是设计师希望产品带给用户的视觉体验。

通常,这些关键词是通过内部讨论和访谈所得到的。但在本次作业中通过回收201份网络问卷询问女性网友“在想到‘品质生活’的时候,你想到的第一个词语/事物是什么”得到三个原生关键词:精致、优雅和舒适;

图片 3

第二步:由原生关键词得出衍生关键词。

传统的情绪板会直接开始搜索与原生关键词相关的图片,但这样收集到的素材很容易出现同质化的问题。所以调整后的流程增加了对’衍生关键词’的探索:可以通过访谈或讨论的方式获得衍生关键词,比如在看到’年轻有趣’的时候,你想到了什么?如果’年轻有趣’是一种颜色/物品,你觉得它是什么?为什么?

敏捷的用户研究可能没办法邀请用户来进行关键词的衍生,因此衍生关键词同样可以通过内部探讨得出。在完成作业的过程中,同样通过网络问卷询问对于原生关键词所联想到的食物/动植物/人造物的联想进行了统计。下表中为出现频率较高的几种事物。

图片 4

第三步:利用衍生关键词进行图片的收集。一般而言,某个产品会有3~5个原生关键词,然后每个原生词会有3~5个衍生关键词。微专业的老师推荐针对每个衍生关键词挑选1张图片就好。

在本次的作业中,我从上表中为每个原生词挑选出的衍生词如下:精致(蛋糕、多肉、玫瑰、钻石);舒适(棉花糖、猫、狗、沙发);优雅(红酒、天鹅、百合花、花瓶)。通过Lofter收集到的图片如下:

图片 5

第四步:邀请用户进行情绪板的制作。通过关键词挑选的图片只能代表设计师和产品团队对产品定位的理解,但情绪板最终需要理解的是用户的情绪体验。所以在确定最终的情绪板中需要哪些图片的时候,应该邀请用户的参与。

4.1) 关键词的分维诠释

在用户进行挑选图片之前,先让他们在不同的维度去唤醒视觉设计想要达到的情绪体验能够帮助用户对图片进行更加准确的筛选,比如:

物化映射:在看到‘精致’这个词的时候,你会想到那些具体的东西?

视觉映射:整体来看,这些东西的外观是什么颜色的呢?有怎样的风格呢?

心境映射:当你看到这个东西的时候,你会有怎样的感觉呢?

4.2) 图片的挑选

一般情况下,你需要大概5个左右的用户来完成图片的挑选。然后由用户选择频率最高的图片构成最终的情绪版。

由于种种原因,我只邀请了一名用户,按照每个原生关键词挑选3张图片。如下图是这名用户最终挑选出的情绪板。

图片 6

第五步:从情绪板中提取设计要点

对情绪板进行高斯模糊处理,然后使用工具提取虚化图形中的大色块。同时,从用户对于关键词的诠释中,也能够提取出设计风格、情绪体验等设计元素。如图,是从以上图片中提取出的色彩元素。

图片 7

总结:前文中我按着作业的过程分享了制作情绪板的过程。老实说,对于结果我是不太满意的。由于是第一次接触情绪板,可能踩了许多坑:

a) 可能是问卷调查的原因,导致用户得出的原生和衍生关键词都存在一定意义上的重叠;

b) 用户在诠释关键词的时候很难绕开这个关键词以提供更有价值的方向;

c) 在进行高斯模糊后,图片背景的颜色变得突出,,对色彩的提取造成较大的偏差;

d) 最后也是最重要的一点,我大概知道目标产品是网易美学,但情绪板的结果与真实的设计相差甚远。最有可能的原因在于我在整个研究中把重点放在了‘追求生活品质’的定位,而不是‘美妆经验分享社区’的产品本身。

图片 8

参考文献&推荐阅读

情绪板携手视觉设计

用户研究方法介绍—情绪板(Mood Board)

情绪版(Mood board)操作流程的新思考

情绪板的制作方法:写给设计师的全方位使用指南

How to Create a Moodboard And Get Your Creative Juices Flowing

24 pro tips for creating inspirational mood boards

虽然传统用户研究方法对于了解用户有些帮助,但似乎对直接指导视觉设计无能为力。

有没有一种用户研究方法可以同时解决视觉设计中的评判主观性、看到实际作品才明白、说不出潜意识感受的问题,进而直接指导视觉设计?

二.情绪板方法的理论基础

情绪板是一种借助于图像,启发和探索用户的体验,然后再作用于视觉设计的研究方法。 可以调查并形成具有指导意义的风格感受和设计元素。

情绪板的核心原理是依靠图像,沟通产品与用户、用户的潜意识与意识、用户的感性(情绪)与理性,其神经心理学基础为:

大部分沟通为非语言的

思考是通过影像产生的

感官影像为重要隐喻,而这些影像大多是视觉的

思考中的深层结构是可触及的

体验是理性与感性(情绪)的混合

三.情绪板方法的操作过程

完整过程总览:

本文由365bet中文官网发布于摄影专区,转载请注明出处:UI/视觉设计师如何确定一个产品的主视觉风格?

您可能还会对下面的文章感兴趣: