UI设计：简单学会视觉改版的几种方法.pdfVIP

不知道家在遇到视觉改版的时候个想法什么，参考竞品？还主观猜测？还问问用户

喜欢什么样的？

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

1.只改视觉，不动交互。

2.视觉交互改。

3.改交互不改视觉。

第3的情况不多，主要第1和第2，如果视觉交互改，还相对更简单一些，但交

互的改动往往伴随着产品的整体规划调整。如果只改视觉不改布局，那限制条件就

更多了。那么，究竟视觉改版要如何始们来分析一下：

目标

首先们需要明确们改版的目标什么？在确定改版目标之前，们先问问自己，目前的

产品出现了什么问题，也就为什么要改版？改版一件工程量非常巨的事情，因为首

先风格的推导过程不一蹴而就的，不能说你几个人拍板，从自身经验出发说：们就

要这样改!这不对的。其次改版之后的规范组件库要相应的更新，再次发资源的分

配更捉襟见肘，需要在完成产品功能需求的发同时来完成改版需求的发，最后改版

的们如何来衡量？否一次成功的改版，如果不，哪些地方需要重新调整？这一整个

改版需要的闭环工作，从前到后都需要感性发散，理性执行的。

所以们改版的原因视觉和品牌定位不匹配，还产品的用户体验很差劲？亦或者规范

组件库需要重新建立？原因可能重叠的，他们并不孤立的，那么这次改版们将问题

定在视觉与品牌定位不匹配，并且需要一定程度上优化用户体验这个上。所以们的

1

目标基于正确的品牌定位，从品牌，配色，排版，情感化，微交互，趋势等维度出

发，重新定义视觉风格，达到一种让用户一使用们的产品就能感受到们的品牌魅力

和性格的目的，让用户从情感上达到共鸣的，并输出DPL。

其实定义目标，需要精准化的，不够精准化的目标会让最后的产出流于形式，太广

泛的目标并不好落地。

方案

说起这个定义方案，其实比较痛苦的一个过程，因为家都没有完整的过一次改版，

或者说一次客观的改版，但通过这次的改版让们学习到了不少，也发生了一些比较

有趣的事情。

首先们会用到情绪板来定义一个风格走向，其次用到了品牌冲刺，其实这些方法可

能最后并不能切实标准化们去一些改版设计，但们需要找到一些方向，以及一些参

考，从而帮助指导们设计。们希望了解的产品的核心价值，产品的性格态度，以及

受众的情感和动机，们通过这些方法们能够获取这些信息，对们的帮助巨的，而不

马上通过这些方法能得出一个按钮的高度和宽度多少。所以最后们用到了3种方

法：情绪板、品牌冲刺、定义脑暴

流程

方法一：情绪板

情绪板的原本流程这样的：

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

其实感觉一种比较虚无飘渺的东西，即便你产品的设计或者发人员，可能你所体会

的感受和用户体会的感受并不相同，所以步们需要找准品牌的定位以及用户心中产

品个什么样子，优雅的绅士还花枝招展的少女？当然最后你所成型的品牌风格并不

能满足你所有用户，但只要满足部分用户，你就成功了。

们对情绪板步骤了一次，因为如果按照情绪板常规的步骤来的话，们需要用户二度

参与，由于一些原因限制们进行了一次不一样的尝试，们首先进行了关键词提炼。

所以们这次的步骤有了一些改动，就变成了：

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

计。

可能有些人会问了，你这样随意改动步骤最后的结果不准确怎么？其实本来最后也

不一个很准确的结果，而且们使用一个方法并不需要按部就班的跟着，否则们很难

从中取发现一些新的问题。

步脑暴提炼关键词

2

在这之前们需要用户画像、体验地图、故事板等一些基础用户数据信息。同时因为

们自己也产品的用户，所以关键词也有一定的准确性的，这边就通过具象和抽象两

个维度去发散思维，尽可能多的想出一些和产品感觉靠近或者没那么靠近的描述，

基本上抽象的类的词比较多，具象类的会比较少，当然脑暴的分类方法肯定有很多

中，这里只举个例子。

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

脑暴出关键词之后们需要将他们对应的找出不同的图片图像，为什么要找图片，因

为们在访谈过程中，用户很有可能无法将自己的直观感受表达出来，他们需要有图

像的辅助才能更直观的表达。这边注意一尽量找出质量高、种类全的图片，举个例

子：有一个关键词叫”女性”，那么们需要在们的用户范围内找出不同标准的女性照

片，可以有学女生、新白领亦或者全职等等，每一个种类的图片也可以找不同的风

格色彩，这些图像后面们访谈中需要用到。

3