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

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

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

什么是情绪板?

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

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

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

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

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

如何创建一个情绪板

完整过程总览

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

丨确定体验关键词


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

丨图片素材的收集


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

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


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

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

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

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

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

设计过程如下:

丨背景


丨导航


丨点击导航


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


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

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

推荐阅读更多精彩内容