情绪版的应用

在很多项目总结中,我们几乎都能看到情绪板的运用,精美的图片搭配符合主题的关键词,可以向需求方和产品侧准确地表达出页面的设计方向和风格。那什么是情绪版呢,我们又该怎么建立情绪版呢,以下是我写的一点点总结。

什么是情绪板?

情绪板定义

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

情绪版@1x

情绪板的作用

情绪板首先能组织整个项目的灵感,保持风格和美学的一致性,并与客户的目标和期望保持一致。

情绪板是在开始实际设计前确定和完善产品风格的好方法。在资源和时间方面,情绪版比模型或原型的成本要低得多,并且能直接传达出关于最终设计风格的信息。

对设计师来说:情绪板是定义视觉风格和指导设计方向的依据;对团队:在团队之间传递设计灵感与设计思路,从而使想法充分融合,深化设计。情绪板能够巧妙地向客户传达设计理念。例如当设计师在说扁平化或极简等设计风格时,客户或者我们的产品可能并不知道这些风格是怎样的。这个时候我们就需要建立情绪版向客户和产品传达我们的想法。

情绪板的组成

每个情绪板都是不同的,包含的内容会根据项目需要而有所不同。

重要的是要包含尽可能多的元素,让想表现的设计思路更清晰。情绪板中包含的内容包括以下几种。

(1)图片

主要包括品牌图片、图库上的摄影/产品图片、插画、logo等。

图片

(2)颜色

色板是情绪板的重要组成部分,根据搜集的素材我们能确定哪种色系跟整体需求更相近,再通过吸色来获得配色信息。

色彩情绪版

(3)文字

搜集与品牌或主题相关的文案,或者展示选用的某种特定的字体。

文字

(4)纹理

设计中涉及到的纹理或图案都应该包含在情绪板上。

纹理

建立情绪板的步骤

当我们接到一个界面改版需求时,会考虑哪些点呢?大部分人都会重点关注美观度,但是这往往是不够的,我们既要把界面做得好看,也要做得科学。这次要说的情绪板,就可以帮助我们做出一个更加有理有据的界面设计。

那么情绪板到底如何使用呢?我们先来看看整体的操作流程:

流程

(1)确定原生关键词

通过产品定位、涉众访谈和以往的用户研究数据,可以获得大量的关键词,而这些关键词并不是都能用得上,我们需要筛选出既符合产品定位又能达到用户心理预期的。比如我们要做一个金融产品,最终可以提取3个基础关键词:收益、安全、灵活。

注意要点:基础关键词一般在3-5个之间,同时原生关键词,一定要抽象化,不能过于具体。(例如:咖啡就是个具体名次,脑海中一下子就能联想出该物体)

原生关键词

(2)确定衍生关键词

由于第一步的原生关键词大多都比较抽象,因此需要对其进行发散和联想。从而需要更多具体关键词,这样我们后面才能更容易找到相应的图片,具体关键词一般都是具体的物体。为了更科学地找图,第一步确定3-5个原生关键词,第二步在每个原生关键词下拓展3个衍生关键词。

衍生关键词

(3)搜集图片素材

关键词确定好后,我们终于可以在图库中,使用关键词进行图片的搜集了。这时候如果图片太多,不但会增加我们搜图的工作量,后期也不方便用户进行筛选,如果图片太多,则可能搜到的图片重复率太高,导致得出的结论不够准确。所以一般来说1个关键词对应搜3-5张图片就足够了。

收益

(4)创建图片库式的情绪板

搜集好图片后,可以先在部门内部筛选一次,再将挑选出来的图片打乱并依次排列,邀请目标用户进行再次挑选,下图为一部分图片:

收集图片

在挑选图片的过程中,我们需要问产品或者客户2个问题:

  1. 分别选择最能代表“投资收益”、“资金安全”、“周转灵活”的几张图片。

  2. 为什么选择了这张图片?图片的哪个元素让你觉得有安全的感觉?

问题1:是为了挑选出最终能代表关键词的图片;

问题2:是为了能让我们了解用户选择图片的原因,挖掘出用户的心理情绪,从而了解到用户的视觉偏好,而这2个点都可以为我们后面做视觉设计做好铺垫,如下图:

经过这样一轮分析,我们选择的任何一个颜色,都将会有理有据,具备科学度。

收益产品图

情绪板的应用

(1)情绪板在彩色化卡片的运用

彩色化卡片,是一个非常常见的功能入口,拥有各类颜色,但问题是:我们如何行之有效地提升细节感?

经过之前情绪板的铺垫,彩色化版块在设计时应该做到了色彩属性与业务属性相连接,才能与用户的认知匹配。比如稳健投资的业务属性是稳定,而蓝色的色彩属性也有安全、稳定的意思,那么就做到了图标色彩的选取连接业务属性。

彩色卡片

(2)情绪板在图标风格上的运用

根据用户画像可以发现用户在投资过程中容易出现紧张不安的心理情绪,大多数用户都倾向寻求一个“靠谱”的平台。

且通过之前情绪板的调研发现,用户觉得一个图片能给他安全感,除了颜色之外,坚固圆润的造型,同样也能传递安全的感受。因此在图标设计中采用圆角而非直角的设计细节也是为了缓和用户情绪,表达一种稳重和安全感。如Tab栏图标和列表流图标,都采用较为圆胖的圆角设计。

图标

(3)情绪板在界面呼吸感的运用

同样的,界面风格采用大留白的设计来增加页面的呼吸感,也是了缓解用户紧张不安的心理情绪。

什么样的图片能给用户带来安全?探索图片本质,我们同样能运用至界面设计,这就是情绪板的多样性。

界面

以上就是我所理解的情绪版的应用。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容