让视觉设计变得高效+有说服力的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

相关推荐

  • 017. 单选按钮、复选按钮——axure线框图部件库介绍

    有时候发现这做事情坚持下来是一件很不容易的,写教程也一样,不过听到很多朋友对我说 这个全部是图片的教程 对他们入门帮助很多,我就想想 在坚持坚持把基础部分先完善了! 1. 简单的问卷调查: 您的性别?  答案…

    2014-09-12
  • 浅谈动效设计,帮你掌握视觉都需要的动效知识

    精细而恰当的动画效果可以传达状态,增强用户对于直接操纵的感知,通过视觉化的方式向用户呈现操作结果。

    2017-05-10
  • 你天天挂嘴边的「用户体验」,到底是什么?

    用户体验到底是什么?这个每天都挂在嘴边的词,你真的懂吗?

    2017-05-02
  • 交互设计的三个半原则

    一些设计的基本原则往往是通用的、甚至可以说放之四海皆准的,例如优先级、一致性、界面的隐喻等等,好的设计都需要考虑到这些问题,甚至再更广的范围内也同样适用,而不仅仅是交互设计范畴。一个设计师&产品经…

    2017-08-01
  • MECC UED年终惊喜大放送

    时间是让人猝不及防的东西;岁月是一场有去无回的旅行。岁末年初,我们用一场部门小聚来辞旧迎新。有美食,有美景,更有大惊喜哦~首先要感谢在背后默默筹备了1周的工作人员,感谢组织为大家准备了这个充满惊喜的小聚会~感谢她们!👏👏👏👏👏这次我们年末小聚的地点是位于岭南天地——Loccy餐厅三楼那一天天空很高,风很清澈,从头到脚趾都快乐(就是有点冷)清新的绿植、简约的装饰、精致的餐具~最吸引人的还是这满满的礼物堆!现场准备了许多小道具供大家卖萌装逼...

    2018-02-24
  • 设计师的必备技能!你需要学会设计有意义的动效

    编者按:关于动效设计,我们探讨过很多次。直到现在,我们越来越清楚地意识到,动效设计已 经无处不在,已经成为了设计师们必须掌控的一个重要技能。参加过今年的Google I/O大会之后,设计师Paul Stamatiou 也充分…

    2014-12-03
  • 回顾交互设计的过去,并展望其未来

    你好,这是2017年的第13篇文章。除了电脑和手机,越来越多承载了新交互形式的产品涌现。语音、体感等更加自然的交互方式会不会成为主流?未来的产品形态和交互方式会走向何方?当NUI(自然用户界面)代替GUI时交互设计师和视觉设计师该何去何从?人机交互的未来在哪?这些问题都值得我们去思考……

    2017-05-04
  • APP中使用UI交互设计动效的三个好处

    1.让整个画面充满活力 在界面中加入了动态元素,可以很大的增加用户使用app趣味性,使整个app界面看起来不会那么枯燥,ui设计需要做的就是让 这些动态的元素效果有一种和用户在交流的情感。 来源 来源 来源 2.提高…

    2015-11-11
  • 做你女朋友,用户体验太差了

    关注黑白每晚睡前一篇暖心好文等你文 / 李月亮来源 / 李月亮(bymooneye)●●●●●01见过一个不会谈恋爱的男生。是我前同事,颜值和收入都很高,当时坐在我隔壁桌。他跟女友打电话的画风通常是这样的:“破圣诞节有啥好过的,别整那洋事儿,老老实实在家待着吧。”“后天啥日子?你生日?你有啥要求?我这有张购物卡,你拿去自己买点东西吧。哎呀谁买不一样!”“你能不能别工作时间给我打电话啊,我忙得要死还得伺候你。”“有事说事儿!没正事儿是吧?...

    2018-04-30
  • 用户体验入门:新人自学包之控件学习

    控件(或部件,widget或control)是一种图形用户界面元素,其显示的信息排列可由用户改变,例如视窗或文本框。控件定义的特点是为给定数据的直接操作(direct manipulation)提供单独的互动点。控件是一种基本的可视构件块,包含在应用程序中,控制着该程序处理的所有数据以及关于这些数据的交互操作。
    ——https://zh.wikipedia.org/wiki/控件

    2017-05-20