什么是情绪版
情绪板就像是拼贴画,其中包含各种图像,文本以及其他定义您的设计风格并传达您设计理念的对象。它可用于传达有关特定主题的想法或者感觉。设计师可以使用情绪板直观地展示他们想要追求的风格,以快速将构想的整体“感觉”告知他人。在创作过程中,情绪版可以平衡协调和创作自由。 如果你在开展设计项目时,缺乏灵感,那么情绪版是对你很有价值的一个视觉设计工具。 (图源来源网络)
为什么要制作情绪版
- 我们可以试着从设计过程中遇到的痛点来了解情绪板的作用或者意义,在设计的过程中你是否会存在下面几个问题:
- 前期思考不够——设计产出方案少;
- 设计不具探索性——设计来源没有考究;
- 初稿多次修改没能达成共识——设计表达不出对方想要的;
- 设计中期出现不一致——设计没有贯彻始终。
制作情绪版的步骤
1.产生关键词 关键词的产生前期不要立即去做设计,可以根据企业文化、用户研究、行业特征、用户群、产品核心定位来进行总结关键词。 也可以根据一定数量的用户访谈结果来总结,需要邀请的人员有:1. 用户(注意覆盖多类样本3名左右即可)
2. 设计团队成员
3. 其他相关部门负责人(2-3人)
4. 老板/老师(图源来源网络) 还有更多的问题可以根据不同产品定位进行拓展。为什么要问这些问题呢?这些问题将覆盖到用户对产品的一种主观感受,并将其拟人、拟物化,让用户能描述出和竞品在主观感知上的差异和区别。于是我们会得到一些关于这些问题的关键词。2.挖掘关键词
得出的关键词例如我们经常会说的品质、自然这样比较抽象的词,也会得到像父亲、皮带这样具像化的关键词。这里要注意的是当用户描述出他心中的关键词后一定要进行追问,例如为什么您觉得它像父亲而不是母亲呢?这里就要时刻去找到用户关键词背后的真实想法。 接下来我们会用到三维映射法,将所有关键词都划分出3种类型:1.视觉映射 2.感受映射 3.具象映射 并继续访谈用户:您刚才说产品给您的感觉是时尚的,那么您觉得时尚在你心中是什么颜色的,时尚给您一种什么感觉以及如果让您用一个物品来代替时尚,您会选择什么物品?(图源来源网络) 这样做的好处是能够让抽象的概念具象化,让设计师能够切实理解用户的主观感受。一般如果我们只让用户描述主观感受其实是不准确的。3.创建情绪版 当我们把所有提炼出来的关键词都找到对应的三维映射后,我们将针对最后的结果进行可视化图片收集。例如用户觉得香奈儿包包可以用来代替时尚这个关键词,那么我们就需要收集更多有关香奈儿包包的图片。* 在收集图片过程中要注意这几点:
- 图片必须高清不模糊
- 图片的数量必须大于6张
- 图片的色彩尽量覆盖多种
- 图片尽量简洁有主体
将所有关键词都收集完图片后,我们让用户在其中进行挑选,让其选出最符合他说出来的那个关键词的图片,每个关键词选择1-3张图片。
(图源来源网络)
4.制定设计风格
情绪板本身是试验配色、字体、样式和视觉层次结构的好地方。当情绪版创立好之后,我们可以充分发挥自己的设计思维去把我们的产品风格、字体、颜色、控件等设计出来。帮助我们进行下一步页面设计。这样大大提升了我们的设计思维深度、拓展度。
(图源来源网络)
制作情绪版的基本原则
- 这些原则可以让我们在做的时候更加严谨,输出更加准确的设计方案:
- 多方向性:情绪板的设计与我们日常设计一样,需要给出不同的方向建议,单一的方案往往难以抉择。多方案输出除了提升抉择空间之外,还可以增加方案碰撞的情况,往往可能是方案A的某部分内容叠加方案B的某部分内容才能产生最初的方向。
- 尝试性:此阶段的所有输出皆属于尝试与探索,因此不必过于考究设计细节,重点在于表达出需要相关的设计概念及思考想法,把更多的时间留作设计思考及方案尝试。
- 效率性:情绪板的输出重点在于前期沟通而达到一个比较好的共识,因此在保证质量的情况下,避免花费过多的时间而影响输出的效率性。尽量做到快与准。在过往中项目组,基本上是以半天(4个小时左右)为一个单位来完成一套方案。
- 试探性:情绪板是一种非常有效试探产品侧想要往哪种方向去推动的方式,因为我们在实际的设计过程中,产品侧可能也对整体的设计大调并不少特别有明确的脑补,因此设计师可以借助情绪板的设计来挖掘产品侧想要往哪个方向进行发力。
制作情绪版的设计方法
1.借鉴图像、插图 在我们设计一些专题活动或者绘制插图相关的一些设计时,可以考虑使用这种方法来输出你的情绪板设计,可以通过借鉴一些设计网站或插图网站上的现有素材来拼接,并表达自己在这方法的一些设计意图及想法。
(图源来源网络)
2.结合实际场景引申 从更概念化的角度出发,通过引用一些实际场景、物品、图像,来拓展相关的图形、质感、色彩方面的设计,并且输出相关的设计雏形。例如我们在设计LOGO或者图形类的一些设计,使用这种方法就可以帮助我们突破一些现有的认知壁垒。
(图源来源网络)
3.借鉴摘取同类型设计 在设计之初,我们通常会有一个大概的思考雏形,但如果直接开始设计往往效率上并不高。因此可以借助一些设计网站上的设计,通过摘取组合的方式呈现自己的初步想法。我通常会在UI新版或者改版的时候使用这种方式,但只能表达大概的想法且不能代表最终的初稿设计。
(图源来源网络)
4.绘制草稿 当我们想要表达一些沟通或者框架的设计时,我们可以使用草稿绘制的方式来表现,这个方式简单快捷,可以很有效率的对齐大部分的设计共识。
(图源来源网络)
制作情绪版的注意事项
1.控制方案的数量 设计方案控制在2-3个左右即可,前期大多是属于试探性方案呈现及找方向,太多则容易导致选择困难。2.避免篇幅过长 篇幅过长往往容易降低别人阅读的耐心,对于情绪版的输出也是如此。结合过往的经验,建议以16:9的画面为一页来呈现一个方案。3.区分重点次要 在一页内呈现的方案避免过于平均,可以适当突出某些想要重点表达的内容,例如在这个方案中想要重点突出图标、颜色等,那么这里需要突出这部分在画面中的比例,适当缩小其他模块的尺寸。4.结合世界观 在输出情绪板设计方案时还可以适当考虑结合产品的世界观,通过一些具象化的图形或者插图来表现相关的内容。5.保持整体风格一致性 一致性是表现一个设计师是否具有系统化、全局观的思考思维,因此我们在表现情绪板时也需要关注这方面的内容,避免整体的调性不匹配。6.完整性表达 在呈现方案时,尽量多维度地进行对比,呈现一个完整性、系统性的设计。例如我们在设计UI相关的内容,从图标、颜色、字体等等一系列的内容需要细致的阐述清楚,让人更加能够了解你的意图。
UI设计中的情绪版案例
当你在做UI设计情绪板时,需要明确了解UI设计中的结构,更系统性地去思考整体的内容。我们在UI设计中往往需要包含以下这些内容:** 图形系统(图标+辅助图形)、颜色系统、字体字形系统、质感形态、界面形态、插图风格、动效系统、影像系统,等等这些部分的内容。**
(图源来源网络)
案例1:整体风格比较偏个性一些,页面尝试用深色的背景设计优点:整体风格比较酷,配色比较未来感符合年轻的人的审美,深色的背景让内容更加聚焦缺点:深色的设计接受度是否高,是否适合APP设计风格
(图源来源网络)
案例2:整体风格3D化的设计,包括页面的一些体验上都可以增加视察的效果来设计 优点:整体设计风格比较新颖,符合现在的设计趋势,整体感觉也比较年轻多彩 缺点:3D的制作成本相对较大
(图源来源网络)
案例3:整体风格比较清爽,白色融入渐变的设计也会显得比较年轻优点:整体页面清爽,可以满足任何内容的透出,渐变色的图标和按钮的设计补充了细节 缺点:整体氛围感、娱乐感较弱
(图源来源网络)
总结
很多时候我们会觉得情绪板设计可有可无,或者因为时间的关系不允许我们经过这一步。但情绪板可以在前期帮助我们去打通很多思考的壁垒,辅助团队在前期直观的与产品进行方向上的探讨,从而找到大方向上的共识,也大大提高了后期工作的效率。情绪板听起来很简单,但实际操作起来还是有很多问题的,因此可以在日常项目或作业中多去尝试,并在尝试中找到适合自己的方法。# 参考文章