经验总结|品牌视觉改版要如何开始做?

一个成功的视觉改版是靠30%的探索流程+70%设计师水平。探索品牌感觉 → 发现提取关键词 → 寻找对应素材创建情绪板 → 指导设计发现提取关键词(我们自己) → 寻找对应素材创建情绪板 → 探索品牌感觉(让用户)→ 指导设计请问您觉得目前我们产品的视觉风格怎么样?


一个成功的视觉改版是靠30%的探索流程+70%设计师水平。

经验总结|品牌视觉改版要如何开始做?

最近有个很好的机会来做了一次视觉改版,感谢team(良辰、圆圆、小马哥、珂珂、妖子)的努力,我们一起来完成这次极具挑战性的任务。我们发现了许多问题,也学到了许多方法。

不知道大家在遇到视觉改版的时候第一个想法是什么,是参考竞品?还是主观猜测?还是问问用户喜欢什么样的?

其实都不正确,改版通常会分以下几种情况:

  1. 只改视觉,不动交互。
  2. 视觉交互一起改。
  3. 改交互不改视觉。

第3点的情况不多,主要是第1点和第2点,如果视觉交互一起改,还相对更简单一些,但是交互的改动往往伴随着产品的整体规划调整。如果只改视觉不改布局,那限制条件就更多了。那么,究竟视觉改版要如何开始做?我们一起来分析一下。

一、目标

首先我们需要明确我们改版的目标是什么?在确定改版目标之前,我们先问问自己,目前的产品出现了什么问题,也就是为什么要改版?改版是一件工程量非常巨大的事情,因为首先风格的推导过程不是一蹴而就的,不能说你几个人拍板,从自身经验出发说:我们就要这样改!这是不对的。其次改版之后的规范组件库要相应的更新,再次开发资源的分配更捉襟见肘,需要在完成产品功能需求的开发同时来完成改版需求的开发,最后改版的效果我们如何来衡量?是否是一次成功的改版,如果不是,哪些地方需要重新调整?这是一整个改版需要做的闭环工作,从前到后都是需要感性发散,理性执行的

所以,我们改版的原因是视觉和品牌定位不匹配,还是产品的用户体验很差劲?亦或者是规范组件库需要重新建立?原因可能是重叠的,他们并不是孤立的,那么这次改版我们将问题定在视觉与品牌定位不匹配,并且需要一定程度上优化用户体验这个点上。所以我们的目标是基于正确的品牌定位,从品牌,配色,排版,情感化,微交互,趋势等维度出发,重新定义视觉风格,达到一种让用户一使用我们的产品就能感受到我们的品牌魅力和性格的目的,让用户从情感上达到共鸣的效果,并输出DPL。

其实定义目标,是需要精准化的,不够精准化的目标会让最后的产出流于形式,太广泛的目标并不好落地。

二、方案

说起这个定义方案,其实是比较痛苦的一个过程,因为大家都没有完整的做过一次改版,或者说一次客观的改版,但是通过这次的改版让我们学习到了不少,也发生了一些比较有趣的事情。

首先我们会用到情绪板来定义一个风格走向,其次用到了品牌冲刺,其实这些方法可能最后并不能切实标准化我们去做一些改版设计,但是我们需要找到一些方向,以及一些参考,从而帮助指导我们设计。我们希望了解的是产品的核心价值,产品的性格态度,以及受众的情感和动机,我们通过这些方法我们能够获取这些信息,对我们的帮助是巨大的,而不是马上通过这些方法能得出一个按钮的高度和宽度是多少。所以最后我们用到了3种方法:情绪板、品牌冲刺、定义脑暴

三、流程

方法一:情绪板

情绪板的原本流程是这样的:

探索品牌感觉 → 发现提取关键词 → 寻找对应素材创建情绪板 → 指导设计

其实感觉是一种比较虚无飘渺的东西,即便你是产品的设计或者开发人员,可能你所体会的感受和用户体会的感受并不相同,所以第一步我们需要找准品牌的定位以及用户心中产品是个什么样子,是优雅的绅士还是花枝招展的少女?当然最后你所成型的品牌风格并不能满足你所有用户,但是只要满足大部分用户,你就成功了。

我们对情绪板步骤做了一次修改,因为如果按照情绪板常规的步骤来做的话,我们需要用户二度参与,由于一些原因限制我们进行了一次不一样的尝试,我们首先进行了关键词提炼。

所以我们这次的步骤有了一些改动,就变成了:

发现提取关键词(我们自己) → 寻找对应素材创建情绪板 → 探索品牌感觉(让用户)→ 指导设计

可能有些人会问了,你这样随意改动步骤最后的结果不准确怎么办?其实本来最后也不是一个很准确的结果,而且我们使用一个方法并不需要按部就班的跟着做,否则我们很难从中取发现一些新的问题。

第一步:脑暴提炼关键词

在这之前我们需要用户画像、体验地图、故事板等一些基础用户数据信息。同时因为我们自己也是产品的用户,所以关键词也是有一定的准确性的,这边就是通过具象和抽象两个维度去发散思维,尽可能多的想出一些和产品感觉靠近或者没那么靠近的描述,基本上抽象的类的词比较多,具象类的会比较少,当然脑暴的分类方法肯定有很多中,这里只是举个例子。

经验总结|品牌视觉改版要如何开始做?

经验总结|品牌视觉改版要如何开始做?

第二步:寻找对应的素材及其图像

脑暴出关键词之后我们需要将他们对应的找出不同的图片图像,为什么要找图片,因为我们在访谈过程中,用户很有可能无法将自己的直观感受表达出来,他们需要有图像的辅助才能更直观的表达。这边注意一点尽量找出质量高、种类全的图片,举个例子:有一个关键词叫”女性”,那么我们需要在我们的用户范围内找出不同标准的女性照片,可以有大学女生、新白领亦或者是全职妈妈等等,每一个种类的图片也可以找不同的风格色彩,这些图像后面我们访谈中需要用到。

经验总结|品牌视觉改版要如何开始做?

第三步:探索品牌感觉(让用户)

产品靠谁而活:当然是用户,有时候会发现一些很有趣的问题,比如你将自己的产品定位高级、轻奢、有品位,但是你的视觉风格让用户看起来只有单一、枯燥、性冷淡,所以你的感觉和用户感觉可能并不是同一回事。所以这里我们需要向用户以及一些利益相关者进行一次访谈,来看看他们对我们的产品的感受是怎样的。

在准备第三步访谈之前我们也需要制定一个目标,我们需要通过这次访谈达到一个什么样的目的?这次我们的目的是需要获取用户对我们产品引发出的一些明确的情感以及准确的描述,例如色彩搭配、性格、图标风格、排版方式等等。

当然在访谈之前我们一定会准备一个访谈提纲,这个提纲也是有一些门道,第一次提纲列的时候就坑了,因为我设置的问题会比较术语化,比如:

请问您觉得目前我们产品的视觉风格怎么样?

这个问题犯了2个错:

  1. 问的太空泛,用户无法回答,他们只能说还行,或者不错。
  2. 根据我们用户接触互联网的水平及敏感度,她完全听不懂视觉风格是什么意思。

所以,我们将问题进行了修改,不再单一的向用户询问问题,而是通过对竞品图片比较,以及有针对性的元素举例来让用户表达她们内心真实的想法。

我们在第二步中将关键词对应的照片分别放在每一个以关键词命名的文件夹中,让用户去选择符合她心中产品感觉的关键词,这时候我们需要去追问用户为什么选择这个关键词,其中的原因我们要深入挖掘,举个例子:用户选择了一个叫安全感的关键词,那么让用户造成安全感的因素是很多的,我们不知道产品为什么能让用户产生安全感,所以我们会继续提问,为什么选择安全感,是产品的哪个地方、步骤、元素、或者别的一些什么因素让你产生了安全感。直到用户能够准确并确定这是根本原因的时候我们才能停止。

最后我们让用户来挑选该关键词下的多类图片,同样的挑选图片我们也要问用户,为什么是这张而不是那张。

经验总结|品牌视觉改版要如何开始做?

经验总结|品牌视觉改版要如何开始做?

第四步:指导设计

先等等,光靠情绪板我认为还是不足以将这次改版做好,因为我们还是没有能够将品牌考虑进去,视觉风格可能有一定的方向了,但是具有品牌化的视觉风格我们还未能定义出来,所以我们又找到了一种方法,叫做品牌冲刺。

方法二:品牌冲刺

这里要感谢珂珂同学当时分享给我的一篇文章,所以后面我们也是尝试性的做了一下其中的几个环节。具体的品牌冲刺步骤大家可以去知乎搜一下 ONES Piece

好,那么如何开始做品牌冲刺,品牌冲刺给我的第一印象差不多是类似于设计冲刺那样的高效但是局限性很大的一种探索方法,但是我们会发现,即便投入更多时间去做一些品牌的探索也并非百分百能产出更好的结果,所以品牌冲刺会是一个比较好的选择。

品牌冲刺包含六项操作:

  1. 二十年线路图:可以帮助你把眼光放长远。
  2. 是什么、怎么做、为什么:帮助你思考公司/产品存在的理由。
  3. 三大市场价值:让你的为什么更具体。
  4. 三大受众:帮你为品牌目标梳理轻重缓急。
  5. 人格化块:定义了你的品牌态度和风格。
  6. 竞品地图:将你的品牌与竞品进行对比。

参与人员:

  • 决策者(老板、运营总监、产品总监、ued总监)
  • 参与者(用户、产品、运营、用研、交互、视觉)
  • 记录者

这里会有一些很有意思的地方,那就是决策者的选择可能不一致,主要是看看决策者和我们的方向是不是大致一致的,并非是让决策者真的来拍板。

好了,这边我们主要用了人格滑块和竞品地图,为什么不把所有的步骤都做一遍?因为方法是死的,人是活的,这里用到两个对我们性价比最高的步骤我认为就足够了,不过大家可以去整一个流程去尝试一下,肯定获益匪浅。

人格滑块

这个词听起来是不是挺有趣的,其实它就是可以在白纸上完成的小case,在这步操作中我们需要将小滑块画在我们心中产品品牌对应的定位位置,有一定的偏向或者极端选择,都是有价值的选择。这里的选项并不固定只有这四个,你可以自己补充需要的对立极端定位。选择完之后每一个人都需要将选择的理由说一下并由记录者记录。

经验总结|品牌视觉改版要如何开始做?

经验总结|品牌视觉改版要如何开始做?

竞品地图

其实就是一个四象限矩阵,x轴标记为从传统经典道现代前卫,y轴标记为从生动活泼到保守严谨,当然你还可以做第二个矩阵第三个矩阵,xy轴标记可以自己根据情况写,但是最好不要重叠。

经验总结|品牌视觉改版要如何开始做?

做了这么多探索性质的工作,我们心中对产品,以及用户对产品的感受有了一个比较清晰的概念,我们知道了她们偏好哪一种风格,喜欢哪一类颜色,以及她们的一些建议,最终我们将通过脑暴来定义这些可以落地的具体方案。

在定义之前我们还做了一项工作那就是视觉竞品分析,有些人说参考竞品就好比抄袭,其实不应该这么说,我们能从竞品中获得比较好的惊喜点,我们可以加以改进成为我们的东西这其实无可厚非,这也并不会最终造成两个很像的的产品出来,关键的地方在于在参考别人优点的同时能否将自己的创意点、品牌个性融合进去。

经验总结|品牌视觉改版要如何开始做?

经验总结|品牌视觉改版要如何开始做?

经验总结|品牌视觉改版要如何开始做?

四、总结

目前正在做改版,所有的方法可能都只是参考,做那么多探索,其实就是为了提高正确率而已,即使错了也不会离谱。但是你不去做,可能会错得很离谱。所以,我们为什么要讲究一个设计流程?一个原因是能够获得支持你提案的论据,第二个原因是能帮助你准确定位用户及产品的情感方向;最后一个原因是能够帮助你积累一定的设计经验和方法,以及问题的总结。最后能否达到一个成功的视觉改版是靠30%的探索流程+70%设计师水平。

#专栏作家#

作者:Yjjj,人人都是产品经理专栏作家,公众号:应谋鬼计(shejishiyj)

本文由 @Yjjj 原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-03 14:25
下一篇 2017-05-03 16:13

相关推荐

  • 译文|一个好故事在用户体验设计中的力量

    “细心的观众/听众会很有可能会与这个故事中的人物的情感产生共鸣,并在故事结束后模仿这些人物的感情和行为。这也就解释了为什么你看了詹姆斯邦德拯救世界之后而产生的支配感觉,看了斯巴达300勇士之后就有了外出工作打算。”
    ——保罗J.扎克,经济学家“故事是激活部分大脑的唯一的方式,使听者把经验变成他们自己的东西
    一个单一的故事可以让我们的整个大脑工作。比较这个层级的参与,只阅读要点或无关的文本只能让我们大脑的某些区域工作。然后我们很快就忘记了这些信息,因为对于这些信息来说,我们没能联系到我们自己的经验,也没有积累任何情绪的连接”“精心设计的东西也不足以单独取得成功。整个生态系统及其相关交互点也必须如同产品本身一般被设计过,这也是可持续设计的要求”
    ——罗伯特布鲁纳,Ammunition Group创始人“许多商家其实已经发现在实际意义上讲故事的力量,他们已经观察到了一个精心构造的叙事是可以多么的令人信服。并且最近的科学研究也很好的阐释故事是如何在某些方面影响我们的态度、信念和行为。”

    2017-05-29
  • 互联网产品经理常用工具有哪些?

    互联网产品经理的工作是复杂和多样的,PM们通常要负责产品各方面的事务,因此工作中需要用到的工具有很多,现在就跟这笔者一起来看看互联网产品经理常用工具有哪些,想走产品经理路线的同学可以提前了解一下。一、产品经理的主要工作"工欲善其事,必先利其器!"既然是"善其事",关键就是搞明白产品经理相关的工作内容,针对工作合理有效的利用软件,才能达到事半功倍的效果。要说到产品经理的职能,这是另开新篇的话题,这里我们先通俗概括一下PM的主要活动:1、参...

    2018-03-13
  • 关于2017年的设计趋势,国外已经有了这13个预言

    在未来,当对微小细节的关注渗入用户体验设计的每一寸土壤;当对像素级完美的追求成为设计的基本要求;当将简单便捷的设计理念融入用户的日常生活,那么我们就能够帮助用户体验全新的生活。“庆祝成功自然无可厚非,但学习并反思失败更加重要。” ——比尔·盖茨“他们是种异常必要的无谓存在,他们因为需要被呵护而带给人恰到好处的慰藉。”“差劲的设计团队提供用户要求的UX。伟大的设计团队提供用户需要的UX。”“对于一个优秀的UX设计师来说,他/她最大的责任就是使用户在使用产品 的时候能产生信任感。”“一件好产品就如一部伟大的电影。”“我们逐渐发现这些智能小助手(AI)之间的合作能力可能并没有想象中那么强大。”“Material Design将会目睹它所倚仗的‘笔’与‘纸’之间的枪战——它会发现它的立身之本在面对未来强大多元的互联网时不堪一击。”——Chase Buckley(独立UX设计师)“与真实的纸不同的是,我们的数字材料可以随意伸缩与变形。纸质材料有物理表面与边界。是那些缝隙与阴影告诉你这一切,赋予了你能触碰到的东西意义。”

    2017-05-18
  • 善用Axure写PRD:产品逻辑的五种呈现方法

    每天一篇好文章,2018年第2期不管是APP、web网站还是pc客户端的软件,流程&页面&交互&逻辑始终是最重要的几环,分享一下我呈现逻辑的几种方法,大部分PM应该也采用过类似的方法。一、直接不写逻辑最开始根本没有写逻辑的概念,只是用交互事件加上基本的页面跳转。当技术童鞋来问的时候,口述给他。经常会被鄙视。二、直接写到页面里开始学乖了,把一些逻辑直接写到页面里。不过很快就发现了弊病,某些逻辑不应该呈现给用户,只能给前后端童鞋看。同时也造...

    2018-03-27
  • iOS和Android规范解析:提示框(Toast)对比

    在交互设计稿中Toast是其中很常用的一种用户反馈手段,但是作者却发现在iOS中根本没有toast这种部件,那么在设计该如何处理呢?一起来看看作者的解读。Snackbars包含一行与进行的操作直接相关的文案(文案前不可有icon)。它可以包含一个操作。Toast优先适用于系统提示。它也在屏幕下方出现,但是不能被划出屏幕外(而被清除)。潜移默化地将状态改变或者其它类型的反馈放进你的界面中。理想的情况是:用户可以不用进行操作或者被打扰,就能得知重要的信息。
    Unobtrusively integrate status and other types of feedback into your interface.Ideally, users can get important information without taking action or being interrupted.

    2017-05-05
  • Facebook的用户体验评判规则

    Facebook的产品设计五维情感精准定位——设计对受众定位清晰,符合该设计目标用户群的使用体验。亲和力——所有交互元素的设计上,用户对信息沟通顺畅,感觉似有人一般的亲和感。分享——承载对Facebook连接、自由、生活的文化认同。留恋度——给人超出想象的空间,让人留恋往返,对产品期待更多,得到二次访问。易用反馈及时——在交互过程中,用户的操作能够在屏幕上及时得到反馈效果,帮助用户提高效率。方位清晰——清晰的知道自己在那里,退路在那里,...

    2018-03-25
  • 界面框架与内容控件总结

    UI设计中一项很基本的工作就是界面设计,但是,如果一开始就是从界面这个概念去入手的话,往往会觉得无从谈起。所以,我会一个界面拆分成几个模块:框架、导航和内容。然后根据每个模块的特征去选择适合的展示方式,然后再拼凑成一个完整的界面。

    2017-05-29
  • 能够带来更好体验的“浅交互设计”,是对人机交互设计方式的全新思考

    原文地址:https://www.smashingmagazine.com/2016/03/getting-disconnected-shallow-interaction-design-deeper-human-experiences/本文由设计夹设计研究小组 成员杨梦龙翻译校对我们的一切都被连接起来了。我的手…

    2017-08-02
  • 交互设计 | 张艺谋这样玩儿

    3 月 4 日,张艺谋导演的观念演出《对话·寓言 2047》在上海大剧院正式演出。在连演两场之后,他们将移师广州和杭州,共同组成《对话·寓言 2047》第二季的演出。尽管被称为第二季,但此次演出的内容与去年 6 月在国家大剧院上演的第一季大体相似。开场仍旧是 71 岁的蒙古族老人其布日一边编织着麻绳,一边唱着悠扬的蒙古长调。背景中,美国先锋艺术家 Daniel Wurtzel 利用空气动力学原理,让一块云纱在舞台上翩翩飞舞。在这个段落之...

    2018-03-06
  • 写给新手的情感化UI设计简明指南

    “仔细看这个情感色轮,你会发现,距离中心越远,情感的强度越弱,但是在进行色彩的设计之时,几乎没人探讨这个问题。我们在做设计的时候,常常会探讨如何传递或者影响基本的情绪,但是我们从未探讨过用户的情绪是否会被强化或者逐步减淡。”

    2017-05-17