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

相关推荐

  • 探究当前数据可视化的用户体验设计趋势

    作者:Jake Rocheleau 译者:ITsCrystal   我们发现,对后台设计的技巧通常不会像普通网页布局设计那样公开分享。这是因为我们通常很难在网络上找到后台的一些样例。由于要进入后台界面都需要账户和密码,所以很多…

    交互专题 2017-08-07
  • 设计神器Figma出马!Sketch、PS有些慌了,因为...

    这年头真的是“长江后浪推前浪,一浪更比一浪强”,许多新产品、新工具纷纷冒出头来,就拿我们设计师的设计工具来说吧,Photoshop 算是一名老将了,它也是我们走上设计不归路的第一个敲门砖(当然还有 CDR);被 PS 折磨的要死要活的时候 Sketch 和 Affinity 杀了出来,一个是专攻用户界面的矢量设计,另一个则像是加强版的 PS 和 AI;Sketch 和 Affinity 还没用熟又冒出个 Figma:说出来你可能不相信,...

    2018-04-17
  • 3种空状态出现场景,5种消灭空状态的技能教你玩转空状态

    举个例子:假设有一款图片分享类的应用,然后有个页面是“我的图片”,如果在我从来没有发布过图片的时候,这个页面理所应当就是空的。并且在这个时候,第一种方法显然是不可行的。当然,空荡荡的界面有不好,所以此时可以通过操作指引来引导用户产生内容。

    2017-05-28
  • 设计App Landing Page其实就是设计产品推销套路

      没错,就这么简单。让你自信面对设计App Landing Page这件小事! 开始思考APP LANDING PAGE设计 为方便描述和阅读,约定以下将“App Landing Page”简写为ALP。 大部分优秀的App都有自己的Landing Page。我在…

    2015-11-22
  • 「10招」教你玩转电商专题页面设计

    电商中的专题设计都是单页设计的一种应用。

    2017-08-04
  • 【招聘】在专注用户体验的公司上班是什么体验?

    随着艾体验业务范围的逐渐扩大以及合作伙伴不断增长,我司也开始扩充人力啦!我们是谁?艾体验是一家为需求企业提供更具商业价值和科技未来的产品“大设计”服务公司!(base in天府五街菁蓉国际广场)作为一家“大设计”公司,时常需要对外提供高端产品体验咨询服务,创新前沿人机交互解决方案研发,并且不断沉淀分享产品干货。而成为“我们”的将是这样一群人:这群人,热爱互联网和产品,同时也热衷于观察生活,不放过身边的任何一个小细节;这群人,贯彻着生命不...

    2018-02-26
  • 最浓缩的概念:交互是什么?交互的本质及如何理解

    在使用一种产品或东西的整体过程。而无论这个使用行为是有无目的导向。本身这个过程,即是交互的本质。而任何一个交互的过程中必定存在交互对相,及交互的媒介。在这里,我先声明一下哦。以下的分析过程可不那么容易跟得上,思维与对生活细节观察力不够的,请直接跳过。但,以下的内容是当年我在新加坡修用户体验时,在交互过程一环中的必修环节。做好心理准备,那就开始看吧。题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余软件操作环节。3,有无改变硬软件间关系的其它模式?题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余渠道操作环节,如展开一个个目录,或通过其它模式打开。3,提升系统本身效率。产品设计的体验层级关系:
    核心层:产品本质体验层。---这产品是为达成什么用户目的而生的。
    中间层:产品使用过程中的体验层。---这就是我们所有产品中的交互层。
    最表层:产品的视觉体验层。---这部分就是UI〜我们也知道约炮软件其实并没有什么用,但为什么能相对留存久呢?也就是在于用户在心理层上有侥幸心理。同时加上其在媒体上潜意默化的某某成功的宣传。所以,让用户的心理否定延后。所以,相对来说,知道没什么用,但还是久留一下看看。但大多有头脑的。基本上也在一段时间后最终放弃。

    2017-05-25
  • PS、AI、Sketch 用着太费劲?这些插件本宝宝力荐!

    虽然 Mac 和 Windows 平台有许多特别棒的软件或工具,但 PS、AI 和 Sketch 仍然是设计师的标配。有时候看到一个特别棒的效果花了很久才折腾出来,殊不知一些插件能够轻松完成,这里小编推荐一些特别实用、效率翻倍的插件给大家,让设计工作事半功倍!GuideGuideGuideGuide 是小编用过的最棒的参考线拓展工具!没有之一!再也不用从标尺一条一条拉参考线还要担心位置不精确,只要输入需要的数值就可以自动生成对应的参考线...

    2018-03-03
  • 在交互稿中,应重视「键盘类型」的标注

    在交互稿的标注中,我们经常会忽略键盘的说明,这是不对的。键盘在用户的交互过程中起到了非常重要的作用,尤其在多个输入框的场景下。

    2017-05-13
  • 社区O2O与传统社区平台的对比

    社区O2O是一个需要长时间探索的行业,主要是因为社区是一个复杂的地方,看似商机很大但真正建立一个粘度很高的平台并不那么容易,但平台无论从何点切入,其社区的复杂性决定了在平台搭建时不得不去思考以下四点,分别是场景、内容、载体和融合,本次和大家探讨的是生活场景的打造和载体的介入。

    2017-05-21