案例分享|情绪板创建使用流程

分享人:肖语橦

学会怎么应用情绪板,就要先了解情绪板的创建方法和流程。



1.关键词提取


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


常⻅的比如:高端、大气、上档次……


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


2.映射衍生词


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


而我将这种衍生词汇的方式划分成了视觉、心境、物化三个类型。 在大厂专业的用研中,这些映射是通过对用户进行访谈,咨询他们对这些关键字的联想统计出来的,比如下面这样的表格。



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


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


3.图片检索


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


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



4.情绪板制作


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


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


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



5.⻛格分析


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


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



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



从这些设计的实际案例中,我们就可以得到一些设计细节上的指示,比如使用直⻆按钮、横线分割、纯色填充、留白较大等等,和大量使用渐变、投影、毛玻璃的设计明显不是一种类型。所以总结了这些参考,那么我们脑子里也就有画面了,可以展开具体的设计了。到这一步,我们对于情绪板的创建和使用,也就完成了。而剩下的, 就是通过在具体的设计过程中对前面的内容进行尝试,设计出一套符合目标和让我们满意的结果出来。


总结


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


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



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


刚开始应用情绪板,肯定会觉得流程特别繁琐,执行起来特别麻烦, 但随着我们对它理解的深入,以及使用经验的提升,应用起来就会越来越顺手。 并且,熟练掌握情绪板的设计师,就可以跳出流程的条条框框, 根据自己的需要灵活的创建和应用情绪板。