让视觉设计变得高效+有说服力的4个步骤

确定情感关键词 -> 情绪版 -> 脑爆概念设计 -> 用户验证

视觉设计有一个天然的困难,因为视觉风格是一个很主观的感受,所以设计师很难说服领导和其他人认可这种感受。如果恰巧你的设计和需求方的审美一致那都好说,但是如果不一致,那就有设计师好受的了。另外视觉设计也很难被衡量评判,也许团队都认为设计的不错,但是有什么客观的证据去证明这个设计真的就是对的吗?所以视觉设计师这个职业上升天然就有一道坎。

但是更可悲的是,我发现很多设计师并没有很努力去改进这种状态,因为长期的压抑和抱怨,很多设计师更乐忠于学习技巧工具和新的设计风格,而不是对设计方法和设计流程探索研究。设计成果是否能帮助项目不重要,设计的够不够屌、能不能拿得出手、能否被同行表扬才是最重要的。

所以我今天想分享一个很古老也很基础的设计流程,当我们团队在遇到视觉设计难题的时候,我们往往会试着通过这个方法找到灵感和把方案顺畅的推进下去。

让视觉设计变得高效+有说服力的4个步骤

一、确定情感关键词

所谓情感关键词,就是我们产品的视觉所要表达的情感感受,这是从0到1要做视觉设计的第一步。

前几个月我们团队支持公司一个新孵化的社交App,为它进行整体的视觉风格设计和定义,但第一步我们不是埋头开始,而是拉上产品的PM们和研发运营各方面leader一起来讨论产品的『情感关键词』是什么,在当时我们所有团队成员之间讨论确认了这三个问题:

1)我们的产品要解决的目标是什么?

2)我们面对的主要用户群是怎样的?

3)我们希望用户在使用我们时,产生怎样的情绪感受?

这些问题会扯出很多主观表达,设计师同学一边听大家讨论一边把听到的关键词记在黑板上。比如我们是想做年轻人的视频社交产品,我们就会记下诸如好 玩、热情、丰富、可爱、二次元等各种情感关键词,这都是团队成员希望这个产品成为的样子。但是在做视觉设计的时候收集的目标不能太多,于是征求大家建议 后,我们把优先级不高的去掉,把重复的感受合并,最后确认了我们产品的情感关键词是:阳光、温暖、年轻。也就是说,接下来我们做App的视觉设计,就应该 做出阳光、温暖和年轻的感觉。

让视觉设计变得高效+有说服力的4个步骤

<因为有保密信息所以我就没模糊了,反正大概就是这样的筛选过程>

让视觉设计变得高效+有说服力的4个步骤

<关键词要少而精,列出最重要的三个>

二、情绪板

有了关键词事情还不是那么简单,因为大家会对同一情感会有不同的认知,比如你认为的阳光是蓝天白云,而我认为的阳光是绿树草地,这就会导致后续视觉设计在颜色偏好上会有争议。所以我们必须要靠情绪板,把每个人对情感的抽象理解具象成实际可定义的元素。

因为当时我们只有一个设计师,所以号召大家一同参与,布置任务去帮我们在网上找一些符合阳光、温暖和年轻的各种图片来。这样的找寻工作要筛选好几轮,比如早期大家找的图片会有两个问题:

1)表达不够准确,不够普遍,比如一位同学找了个秋天落叶的照片会让人觉得不是温暖而是萧条,有争议;

2)不够直接,比如有一位同学找了个妈妈烧饭的场景,从而联想到温暖的感受,但是我们觉得这也太隐晦了。情绪板上的图片就是需要让人不经思考,一眼看到就能感受到情感关键词。

让视觉设计变得高效+有说服力的4个步骤 让视觉设计变得高效+有说服力的4个步骤

上图就是最后筛选出来的『情绪板』啦,经过3轮的Review我们从300张图片中找出了不到100个最终确认的图。那这个情绪板对我们到底有什么用呢?

1,图片上出现的颜色、元素和感觉,就是我们接下来做视觉设计的时候可以用到的。比如那种阳光和温暖的暖色和高饱色调,小花小鸟光斑元素,都是可以直接被借鉴在界面里的;

2,因为团队都一起参与帮忙了,所以可以帮助统一”审美观”(你懂的);

3,在做情绪板的过程中设计师本身也在跟着思考和完善自己的感觉;

三、脑爆概念设计

有了情绪板设计师心中就已经有了很多想法,而且之后的推进成功率也大了很多,但是这个时候也不太适合马上精细的做方案,而是用头脑风暴的方法做概念设计。

1,用头脑风暴的方法做设计是指,主要目标不是为了马上确定方案,而是尽可能多的收集创意和想法。不然设计师会很快陷入细节而错过很多精彩的设计点子,而在后续推进的时候其他人也一定会质疑和提出各种反对方案,让设计师反复验证和修改,所以我们一开始就要打开脑洞。

2,而所谓的概念设计,就是不用那么靠谱和精细,表达大概感觉和意思就可以了,关键在于创意和想法而不是细节。

也是因为当时人力不足,所以我号召了部门里其他设计师以参加游戏的形式来帮忙脑爆,大家利用工作之余帮我们做一些效果图,可以尽情发挥自己的脑洞。 而且不用很精细,图标网上扒一扒,界面摆的乱一些也没有关系,但是最重要是一定要依据我们的『情感关键词』和『情绪板』来开展。

这次同事的热情参与超出了我的想象,虽然所处不同的项目也不是他们的分内工作,但是因为大家平时都深陷各个项目做细节,做个新产品风格还能随心所欲的发挥是很多人都乐意的,于是短短3天内,我们就收集到了50多不同风格的App设计方案。

有了方案就需要评审,最初的评审我们就是互相解释设计想法和给点建议,大家互不批判,发现有趣的点子就让对方修改一下,以把他的想法表现的更明确一 些。而最终的评审就是有点相亲会的感觉了,我们拉上了所有的设计师,产品的PM和各leader,还有公司内可能潜在的目标用户,对方案进行投票。但是这 个投票的规则不是纯凭自己喜好,而是了解背景后,大家投出自己认为最符合『情感关键词』和『情绪板』的设计方案。

让视觉设计变得高效+有说服力的4个步骤

大家依据关键词和情绪板的目标选出最符合的方案,再分析和筛选。

让视觉设计变得高效+有说服力的4个步骤

最后如上图,根据评审我们选出了票数最高的三个不同风格的方案,理论上我们认为这三个方案都是正确的、内部达成一致、且都符合我们在『情感关键词』 和『情绪板』分析时『阳光温暖年轻』的设计目标。但是三个是不同风格各有千秋,而且我们都挺喜欢的,要怎么抉择呢?最后就要试探一下用户的感觉了。

四、用户验证

毕竟之前的工作全部都是建立在设计师理论推断和我们一帮大老头子的感觉上,再怎么装,我们也不是目标用户,所以用户验证是视觉设计最后的关键一步。

第一个是定量研究,我们把选出的三个方案放在问卷里,通过猎豹清理大师的渠道发放出去。因为猎豹清理大师在全球有几亿用户,而且广告平台可以选出性 别、年龄、国家等不同的用户脸谱,所以我们花了一个周末就回收了一千多份反馈。有一些反馈是很有意思的,比如女生更喜欢方案2那种整体白色的界面,而方案 1的红色界面,在巴西这种火辣辣的热情国家就会更受欢迎一些,或者是在比较低龄(15岁以下)更受欢迎一些。最后根据各方面的数据还有我们的目标年龄和国 家市场定位,我们选择了方案二作为确定的方向。

让视觉设计变得高效+有说服力的4个步骤

第二个是定性研究,找不同的用户实际和他们去聊,这件事情看起来很难但是其实不用搞得那么复杂。我们就是让团队成员在微信上发给各种弟弟妹妹亲戚朋 友的孩子们看。还有很巧的事情是咱们有个设计师是基督徒,在他们教会上可以接触到很多在北京的外籍年轻人,通过与他们交流也收集了很多反馈。

让视觉设计变得高效+有说服力的4个步骤

定性研究里我们不但可以获得目标用户的倾向,还可以知道背后的原因是什么。比如当时用户告诉我们为什么不喜欢1,是因为现在的小孩其实都不希望自己 被当成小孩,稍微上初中的就不会再用那么可爱的元素来粉饰自己了,会希望自己变得看起来更像20多岁的成熟女性。当然,因为他们本质上还是小孩,虽然故意 装但是还是会在细节上透露出一些孩子的心理诉求。

经过用户验证后我们的想法就更明确了,加上之前的一步步推演我们确定了方案2就是我们整个App最终的设计风格方向,当然这不是最终效果图,而是确定了后我们的设计师就会根据整个方向去完善细节输出,真实的定稿还需要考量很多因素。

让视觉设计变得高效+有说服力的4个步骤

总结

确定情感关键词 -> 情绪版 -> 脑爆概念设计 -> 用户验证

以上就是一套我们团队做新产品视觉设计的完整流程,在经过这么一套折腾后有什么实际意义呢?

1)首先就是我们非常自信的认为我们的设计方向是正确的;

2)因为整个过程领导和产品研发都参与了,设计过程的推演步骤大家非常清楚,所以后期的设计执行也基本上没有了障碍,大家都很信任设计同学的感觉;

3)流程里的产出物我们不但只是用在做界面上,后来我们还打印张贴在了产品经理和研发的工区周围,有点”洗脑”的感觉,让他们时刻记住”我们的用户就是这样的”,我们产品就是要做出”这样的感觉”;

另外就是大家肯定会有一个很大的疑问就是关于时间成本的问题,这样设计看起来好慢哦,我平常没有那么久的时间,而且看起来要做好多东西,我就一个人怎么办?

1)首先我们整体做下来就差不多2周的时间,我觉得2周对于一件这么重要的事情是值得投入的吧,而且一边让大家共同参与,一边还有阶段性产出,团队的人都很支持我们的时间投入;

2)设计过程应该短而快,就像我一直强调的,不要陷入细节,不要过于强迫症的专业,以合适的方法从粗犷到精细;

3)这次项目除了我外就只投入了一个视觉设计师,做一套界面一个有经验的视觉设计师就够了,但是正确的构思一个风格却不是一个人能做到的。所以我们都是号召群体的力量,发挥大家共同参与和交流,而设计师做到核心的流程的梳理和把控就好了,当好一个导演。

最后发表一下我自己的感悟,以前我一直比较迷茫设计这么主观的工作如何优化,貌似除了不断提升自己的感觉和经验也没有什么办法了,面对撕逼也无可奈 何。设计管理者的价值似乎也只能是安排下项目,做做指点。但是后来我发现设计其实是有一套方法论的,而且还能是一套理性客观的方法论。比如进行创意的头脑 风暴,学习和利用数据,处理产品经理不成熟的需求,分解设计目标,让不同性格的设计师合作 等。希望在这个浮躁的行业里与其去争论大道理,我经常整理的方法论干货可以真正帮到大家。

 

原文地址:zhuanlan.zhihu

作者:@可风f (猎豹移动 资深交互设计师)

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30027/

(0)
CatherineCatherine
上一篇 2017-05-26 17:52
下一篇 2017-05-26 19:49

相关推荐

  • 交互总结篇(一):框架与布局

    上篇文章里面简单介绍了一下关于交互设计分析的三维度,即框架、流程和状态;这里就不做特殊介绍了,详细内容请见《三个维度,解析产品的交互设计》。而本文作为交互设计总结篇的第一篇——框架布局篇,主要是系统地整理一下交互框架设计所需要考虑到的方方面面。框架是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法。

    2017-04-28
  • 用户体验至上?也许并非如此 | 动点圆桌会

    动点科技 | ID:technode大家晚上好,我是动点君~近日,有网友反馈,微信朋友圈疑似屏蔽抖音短视频的内容,内容仅本人可见。但当晚24点之后,抖音小视频的内容分享到朋友圈又恢复了“所有人可见”。对于网友反映的这件事,微信团队已经做出了回应。腾讯公关总监张军发微博称:“朋友圈一直有防刷频机制,过了阀值就自动不可见了。过了凌晨12点自动恢复正常。屏蔽之说不存在哈。”虽然微信方面对网友的这一质疑做出了否定的回应,但是竞争平台疑似屏蔽竞品...

    2018-03-26
  • 人鸡交互Vs人机交互

    很多人听说我是学人机交互的,都会问我一个问题,什么是人机交互? 答:human-hen(人-鸡),当然这是一些朋友的戏谑之作。但是现在看来,又似乎有些道理,至少有一半是对的,人(human)。至于另一半么,他们想的…

    交互设计 2017-03-08
  • 跨终端体验设计,绕不开的用户槛儿

      随着平板电脑的普及,越来越多的手机端APP将自己的应用拓展到Pad端,来为用户提供更丰富的多终端体验。此前一些设计师从视觉设计的角度探讨了多终端产品的设计,作为一枚用研,除了视觉体验,我们会更多地去…

    2015-04-18
  • 如何系统地整理设计规范?

    整理规范对设计师的基本能力有很好的锻炼作用,所以各位设计师们整理规范时不要嫌琐碎麻烦,它可以让我们慢慢变强!

    2017-04-28
  • 用户体验与故事大王的创新火花

    嗨,亲爱的小伙伴们,2018年4月25日,我们又一同相约创新的周三,每周一次的创新工程实践如期而至。此次见面课主场是北京大学,由黄文彬老师主讲的《用户体验创新》。首先带大家了解一下黄老师。来自北京大学、南开大学、北京科技大学、西安电子科技大学、新疆大学、暨南大学、西北农林科技大学、西安交通大学、南昌大学、东北农业大学、哈尔滨工程大学等全国285所高校、九万六千多名师生共同收看了此次课程直播,其中江苏工程职业技术学院和山东财经大学参加了本...

    2018-04-25
  • 3000字,详细梳理用户体验要素之核心五要素

    网站看起来如何,它怎样进行运转,它让你执行什么。这些决策都是互相依赖的,它告知并影响用户体验的各个方面。当产品发展到一定阶段,系统化的用户体验设计对于产品在激烈的商业竞争中保持核心竞争力至关重要。比如最近很火的共享单车,开锁是否方便这样一个小细节直接决定着用户选择,用户体验就成为了商机。这里与大家分享用户体验要素的核心五要素。要讨论的事今天跟大家分享的是用户体验的五个核心要素。虽然用户体验要素远不止这五个,但作为梳理一个产品的用户体验开...

    2018-03-20
  • 产品设计之行为学研究,四步打造影响力超高的产品!

    我们每天都感叹“改变”有多难——落空的新年计划、从未使用的健身卡、东西少吃点、存款留多点,可惜都止步在了yy。

    2016-08-29
  • 不要做椅子上的设计师

    事件一:某巨头公司L开会,产品的老大C带头发言:“我觉得吧,用户不会喜欢这个设计、他们……”。相信在各位设计师的工作历程种这种发言都不是第一次听。

    2017-05-28
  • 网易云音乐交互设计:如何让用户感知到个性化推荐

    一般用户会以为都是热门推荐,只有非常细心的用户才可能发现,比如你最近听了不少古典音乐,那在首页上就会看到古典相关的歌单推荐。

    2016-10-25