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

　　不知道大家遇到视觉改版的第一个想法是什么，是参考竞争产品吗?还是主观猜测?还是问用户喜欢什么?

　　事实上，它们是不正确的。修订通常分为以下几种情况：

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

　　2. 视觉交互一起改变。

　　3. 改变互动而不改变视觉。

　　第三点的情况并不多，主要是第一点和第二点。如果视觉交互一起改变，那就相对简单了，但交互的变化往往伴随着产品的整体规划调整。如果你只改变视觉而不改变布局，那么就会有更多的限制。所以，如何开始视觉修改，让我们一起分析一下：

　　目标

首先，我们需要明确我们修订的目标是什么?在确定改版目标之前，我们先问问自己，目前的产品有什么问题，也就是为什么要改版?修订是一项巨大的工作，因为首先，风格的推导过程不是一朝一夕就能实现的。你不能说你们中的一些人做出了决定。从你自己的经验来看，你说：我们必须这样改变!这是错误的。其次，修订后的标准组件数据库应相应更新，再开发资源的分配更加紧张。我们需要在完成产品功能需求开发的同时完成修订需求的开发。我们如何衡量最终修订的效果?是否是成功的修订，如果没有，哪些地方需要重新调整?这是整个修订需要做的闭环工作，从前到后都需要感性发散和理性执行。

　　所以我们改版的原因是视觉和品牌定位不匹配，还是产品用户体验差?还是需要重建标准组件库?原因可能是重叠的，它们并不是孤立的。因此，在这次修订中，我们将问题定在了视觉上与品牌定位不匹配，需要在一定程度上优化用户体验。因此，我们的目标是从品牌、配色、排版、情感化、微互动、趋势等维度重新定义视觉风格，让用户一使用我们的产品就能感受到我们的品牌魅力和个性，让用户达到情感共鸣的效果，输出DPL。

　　事实上，目标的定义需要准确。不准确的目标会使最终产出流于形式，太广泛的目标不容易实现。

　　方案

　　说到这个定义方案，这实际上是一个痛苦的过程，因为每个人都没有完全修改或客观修改，但通过这次修改，我们学到了很多，发生了一些有趣的事情。

　　首先，我们将使用情绪板来定义一种风格方向，然后使用品牌冲刺。事实上，这些方法最终可能无法实际标准化。我们做一些修改设计，但我们需要找到一些方向和参考，以帮助指导我们的设计。我们想知道的是产品的核心价值观、产品的个性和态度，以及观众的情感和动机。我们可以通过这些方法获得这些信息，这对我们有很大的帮助，而不是通过这些方法立即得到按钮的高度和宽度。所以最后我们用了三种方法:情绪板、品牌冲刺、脑暴定义

　　流程

　　方法一:情绪板

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

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

　　事实上，这种感觉是一种虚无缥缈的东西。即使你是一个产品设计师或开发人员，你可能会有不同的感受和用户体验。因此，第一步是找出品牌定位和用户心目中的产品是什么样的，是优雅的绅士还是华丽的女孩?当然，你最终形成的品牌风格并不能满足所有用户，但只要你满足大多数用户，你就会成功。

　　我们修改了情绪板的步骤，因为如果我们遵循情绪板的常规步骤，我们需要用户再次参与。由于某些原因，我们做了不同的尝试。我们首先提炼了关键字。

　　所以我们的步骤有了一些变化，变成了:

　　找到提取关键词(我们自己)——找到相应的材料来创建情感板——探索品牌感觉(让用户)——指导设计。

　　有些人可能会问，如果你随意改变步骤的最终结果不准确怎么办?事实上，最终的结果并不是一个非常准确的结果，我们不需要一步一步地使用一种方法，否则我们很难找到一些新的问题。

　　第一步 脑暴提炼关键词

在此之前，我们需要一些基本的用户数据信息，如用户肖像、体验地图、故事板等。同时，因为我们也是产品用户，所以关键词也有一定的准确性，这里是通过具体和抽象两个维度发散思维，尽可能多的产品感觉接近或不那么接近描述，基本上抽象词更多，具体会更少，当然，脑暴分类方法必须有很多，这里只是一个例子。

　　第二步 寻找相应的材料及其图像

脑暴出关键词后，我们需要找出不同的图片图像。为什么要找图片?因为在采访过程中，用户很可能无法表达自己的直观感受，需要图像的帮助才能更直观的表达。在这里，我们应该注意尽可能多地找到高质量和完整类型的图片。例如，有一个关键词叫做“女性”，所以我们需要在用户范围内找到不同标准的女性照片，包括大学女生、新白领或全职母亲。每种类型的图片也可以找到不同的风格和颜色，这些图像在我们以后的采访中需要使用。

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

　　产品依赖谁：当然，是用户，有时会发现一些非常有趣的问题，比如你的产品定位先进，轻奢华，品味，但你的视觉风格让用户看起来只是单一，无聊，性冷，所以你的感觉和用户的感觉可能不一样。所以在这里，我们需要采访用户和一些利益相关者，看看他们对我们的产品的感受。

　　在准备第三步访谈之前，我们还需要设定一个目标。我们需要通过这次访谈实现什么目标?这一次，我们的目的是获得用户对我们产品引起的一些清晰的情感和准确的描述，如色彩搭配、个性、图标风格、排版等。

　　当然，在面试之前，我们会准备一个面试大纲。这个大纲也有一些方法。当我们第一次列出大纲时，我们会陷入困境，因为我设置的问题将更具术语性。例如，您认为我们产品的视觉风格如何?这个问题犯了两个错误：第一：问题太空了，用户无法回答，他们只能说没关系，或者很好。第二点:根据我们用户接触互联网的水平和敏感性，她根本听不懂视觉风格是什么意思。因此，我们修改了问题，不再单独向用户提问，而是让用户通过比较竞争产品的图片和有针对性的元素来表达自己的真实想法。

　　在第二步中，我们将关键字对应的照片放在每个以关键字命名的文件夹中，让用户选择符合产品感觉的关键字。此时，我们需要问用户为什么选择这个关键字。我们需要深入挖掘原因。例如，如果用户选择了一个叫做安全感的关键字，有很多因素会让用户感到安全。我们不知道为什么产品能让用户感到安全，所以我们会继续问，为什么选择安全感，产品的位置、步骤、元素或其他因素让你有安全感。直到用户能够准确地确定这是根本原因，我们才能停止。

最后，我们让用户在关键字下选择各种图片。我们还应该问用户为什么这个而不是那个。

　　第四步 指导设计

　　首先，我认为仅仅依靠情绪板是不够的，因为我们仍然不能考虑品牌，视觉风格可能有一定的方向，但我们没有定义品牌视觉风格，所以我们找到了另一种方法，叫做品牌冲刺。

　　方法二:品牌冲刺

　　如何开始品牌冲刺，品牌冲刺给我的第一印象几乎是一种高效但有限的探索方法，但我们会发现，即使投入更多的时间做一些品牌探索不是100%产生更好的结果，所以品牌冲刺将是一个更好的选择。

　　品牌冲刺包括六项操作：

　　1. 二十年线路图:可以帮助你从长远来看。

　　2. 是什么，怎么做，为什么:帮助你思考公司/产品存在的原因。

　　3. 三大市场价值:为什么让你的更具体。

　　4. 三大受众:帮你梳理品牌目标的优先级和优先级。

　　5. 人格化块：定义你的品牌态度和风格。

　　6. 竞争地图：将您的品牌与竞争产品进行比较。

　　参与人员：

　　决策者(老板、运营总监、产品总监、ued总监)

　　参与者(用户、产品、操作、研究、交互、视觉)

　　记录者

　　这里会有一些有趣的地方，即决策者的选择可能不一致，主要是看决策者是否与我们的方向大致一致，而不是让决策者真正做出决定。

　　好了，在这里，我们主要使用人格滑块和竞争产品地图。为什么我们不做所有的步骤?因为方法是死的，人是活的。我认为在这里使用两个最划算的步骤就足够了，但你可以尝试整个过程，这肯定会受益匪浅。

　　人格滑块：

这个词听起来很有趣吗?事实上，它是一个可以在白纸上完成的小案例。在这个操作中，我们需要在产品品牌对应的定位位置上绘制小滑块。有一定的偏差或极端的选择是有价值的选择。这里的选项不是固定的。只有这四个。您可以添加您需要的对立和极端定位。选择后，每个人都需要说出选择的原因，并由记录员记录。

　　竞品地图：

事实上，它是一个四象限矩阵。x轴标记为从传统经典道路的现代前卫，y轴标记为从生动到保守和严谨。当然，你也可以制作第二个矩阵和第三个矩阵。xy轴标记可以根据情况编写，但最好不要重叠。

　　做了这么多探索性质的工作，我们对产品和用户对产品的感受有了清晰的概念。我们知道他们喜欢哪种风格，喜欢哪种颜色，以及他们的一些建议。最后，我们将通过脑暴来定义这些具体的解决方案。

在定义之前，我们还做了一项工作，那就是视觉竞争产品分析。有人说参考竞争产品就像抄袭。事实上，我们不应该这么说。我们可以从竞争产品中获得更好的惊喜。我们可以把它改进成我们的东西，这是可以理解的。这最终不会导致两种非常相似的产品，关键是我们是否可以在参考他人优势的同时整合我们的创意点和品牌个性。

　　总结

　　目前正在做修改，所有的方法可能只是参考，做这么多的探索，事实上，只是为了提高准确性，即使错了也不会离谱。但如果你不这样做，你可能会犯错误。因此，我们应该注意一个设计过程。一个原因是我们可以得到支持您提案的论据。第二个原因是它可以帮助您准确定位用户和产品的情感方向。最后一个原因是它可以帮助您积累一定的设计经验和方法，并总结问题。最终能否达到一个成功的视觉修订，取决于30%的探索过程+70%的设计师水平。