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

一个成功的视觉改版是靠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

相关推荐

  • 2018年用户体验趋势(一)

    2017年,我们见证了很多。在与全世界的189489位设计师策划并分享了1926条链接后,我们从行业内的所写、所说和所想中,预见了几个趋势。以下就是2018年用户体验的预期。#1UX的死亡和重生作为设计师,我们一直致力于能够参与早期的战略决策。如今,我们获得了一席之地,接下来要怎么做呢?APP关掉了新手体验怎么办?这有一份最好的实践清单;不确定网站适合哪种菜单?就用这个模板库吧;首页的标题不够吸引人?咱们来做做A/B测试...与此同时,...

    2018-02-28
  • 《用户体验可视化指南》视频讲书(4)

    这是《用户体验可视化指南》书中第一章的最后一个视频了。继续上个视频继续介绍几种共线图,这次横向比较各种共线图的差异,使用它们的原则和好处。点击视频观看(大约14分钟,推荐室内安静、有wifi环境下播放)兰静同学听后分享这节内容是第一章的精华,一定一定一定要边听边看书本,最好多看几遍。主要分为2个部分:在这节视频中,结合书本第3个大模块中的内容,详细讲解了这5类常见共线图的差异和各自的特色。闭上眼睛想一想,要是还想不起来服务蓝图、体验地图...

    2018-04-07
  • 我们招人啦:高级UX/UI设计师

    For EN version, clickhere生活在笔驰!想不想为前卫的客户创造出杰出的作品?加入我们紧密团结,具有才华,能吃苦耐劳的大家庭,你将会为不同行业构建最具深刻印象的品牌形象。你将迎接带有刺激和创造性的挑战。你会和一个带有创新思维的团队一起工作,不断地推动自己,让自己继续迈向未知的步伐。有时混乱,但永远是具有想象力的一个过程,我们能够专注于做出一个非凡的设计并将它和乐趣结合到一起。我们需要的高级UX/UI设计师!我们正在寻...

    微信热点 2018-04-05
  • 十二条动效体验原则

    如果你想要了解更多背景信息,建议先阅读我的前一篇译文《动效的基本常识》,其中介绍了动画与动效的差异、即时与非即时的定义、动效提升可用性的四种方式(可预期、连续性、表述性、关联性)、以及理论、手段、属性与值之间的关系。

    2017-04-28
  • 我花了五个小时,完成了iOS 11新版App Store的交互探索

    WWDC 2017 上发布了全新的 iOS 11 ,系统本身在设计上就有了诸多变化和更新:信息更扁平的控制中心、WP 风格的大标题、截图编辑功能、相机直扫二维码等等。不过,作为一名电商设计师和 App 爱好者,此次更新最让我感兴趣的莫过于 App Store 的“改头换面”了。

    2017-06-12
  • 如何制作高段位的交互输出物?

    如何制作具有全局把控和细节专注的高段位交互输出物是交互设计师一直需要淬炼的能力。今天阿里的同学把多年的经验写出来,内容超多,全是干货,来收。 交互设计师在项目体验设计过程中常常担任着承上启下的至关重要…

    2015-10-14
  • 交互设计师的60日计划第十六天

    周五综合症:不想做事...今天把昨天的需求做完善,与产品经理讨论其中的一个问题,然后将细节标注清楚,但是产品最终还没有确认。除此之外,一直在帮要晋级的一个视觉同事想文案,最后得出结论,还是得多读书,书到…

    交互专题 2015-08-20
  • 赤兔VS脉脉,产品分析、设计是否能驱动产品?

    一、行业综述 随着互联网浪潮的袭来,职场人士已经越来越不满足于传统低效率的设计方式,他们想要快速交友,快速达到自己的潜在目的(找工作、挖人、营造个人品牌等),这部分人群一直都是一个巨大的市场。 领英在2…

    2016-03-09
  • 非设计专业的学生,如何系统的学习交互设计

    数十万互联网从业者的共同关注!作者:青溪Joanna微信公众号:qingxizhaji(青溪札记)作者投稿早读课发表,转载请联系作者。曾经我也是一名非设计专业的学生,作为自动化专业的硕士希望自学做交互设计,有很长一段…

    2017-08-02
  • APP特有的交互设计模式解析

      1、触屏滑动操作,移动APP端最基本的操作方式。 (1)屏幕之间或者页面直接的自由滑动切换 比如手机移动端的界面切换效果,可以滑动使用快速友好的切换 (2)滑动条目经行删除 横向滑动条目的操作犹如一汪清…

    交互设计 2015-08-19