运用多目标追踪技术进行视觉改版

原文 前言

视觉设计的美学和风格应当以用户感受为出发点

衡量美学最重要的指标就是色彩与视觉复杂度，它们占据了用户审美偏好的47%。通常情况下视觉复杂度越低，用户喜爱度越高，简约乃优雅之本，但不代表越简单用户越喜欢，真正的美学妙处是找到一个恰好的平衡点。不同的用户群体（年龄、性别、地区、教育程度等）对色彩以及视觉复杂度都有较大的审美偏好差异。

任何一种风格的表现形式（无论是显性的还是隐性的），都具有与生俱来的结构性。一个清晰的风格未必是良好的，但一个混乱的风格一定不行。即使是个人的风格也需要保持与时俱进。风格中的流行元素日新月异，设计师需要跟随潮流，从流行音乐到流行用语都如此。

在视觉设计的过程中，应当以用户感受为出发点对风格趋势进行探索，尽量避免设计师的自我意识对方案产生较大的影响。

什么是多目标追踪

多目标追踪的概念来自于Chip Heath《行为设计学-掌控关键决策》（是一本书），是从不同角度，同时考虑多个选项的过程。

视觉设计工作开展的范式大致有两类：

一类是通过设计分析、设计工具方法的运用、推导，不断打磨迭代设计方案。在这个过程中，分析得越精密，就越能衡量出设计条件的满足程度以及设计约束的遵循程度。

另一类是同时进行多套创意尝试，收集用户、专家、业务方等多方建议。由于同步进行，设计师能同时收到多方关于设计的反馈，他们就有可能同时阅读和分析多个方案的评价。直接的对比能够使设计师更好地理解关键设计原则，并为后续的设计提供更多有效的选择。

如果只有一个设计方案，那么设计师的自我意识就会和这个设计完美结合。但如果有很多个设计方案，就能更好的把自己与方案分开。

多目标追踪有以下三个优势：

• 多目标追踪能够使设计师时刻保持自省。
• 对选择进行对比能够帮助设计师理解“现实情况”，这种理解提供了做设计决策的信心。
• 当考虑多个选择的时候，就已经给自己准备好改善计划。

Frederick P. Brooks在《设计原本》中提到过这样一个问题：如果仅仅是依靠思考，是否可以让我们合理地设计出复杂对象？

围绕着这个问题，两大源远流长的哲学派系——理性主义与实证主义进行过非常激烈的争论。

在交互设计领域更偏向于理性主义，用严格的形式化证明的方法来验证设计的正确性，因为它基于抽象的思维而非具体的物质。

但是视觉设计应当更偏向于实证主义，实际上大部分的设计工作最终将以物理逻辑、视觉呈现的方式得到实现。

用户的审美偏好以及风格趋势的定义通过逻辑推导很难有效命中，多目标追踪恰好有利于设计师去进行视觉探索，基于用户反馈去定义、修正设计方向、跳出自我意识的限制，并方便后续快速进行设计决策。

基于用户反馈的多目标追踪设计流程

△ 基于用户反馈的多目标追踪设计流程方法

1. 明确改版目标

清晰的品牌定位

传达品牌感受是视觉设计最重要的目标，找到品牌定位前首先要了解产品的品牌目标，品牌目标的搭建有三类关键的信息源：商业模型、品牌及传播战略、用户的目标与期望，对其加以协调、评估。探索品牌定位的过程中可以通过品牌BIOS模型对品牌进行定义，可以通过品牌定位图表将某一品牌与其他品牌区分开来，也可以分析品牌的现有状态以及描绘未来的目标状态。

△ vivo视频BIOS模型

△ vivo视频品牌定位图表

 

可衡量的数据指标

基本上所有的视觉设计工作在展开前都要对页面入口点击数据进行分析从而强化对业务模块的理解、对用户需求的分析。有效的分析将有助于在页面的视觉信息层级上进行微妙的把控。改版的目标可以是点击率的提升、活跃率的提升，也可以是满意度的提升，建立关键的衡量指标可以确保目标的清晰。

 

明确的改动范围

大的改版升级一定要在前期明确可改动的范围，对整体风格可执行的细节有一个完整的认识，就像我们在进行广告物料投放的时候一定要先了解投放渠道和场景，在进行视觉风格的定义时对它的适配性、适配效果要有一个评估和预期。

2. 发散创意

流行趋势尽量站在大的设计行业去研究。在研究趋势的同时可以回溯历史风格，看是否有新的启发。平面设计大师-保罗兰德就非常擅于处理设计中“旧”和“新”的矛盾，通过一些出人意料的方法，把熟悉的元素重新排列组合处理出新的形式，提供全然一新的视觉体验。

顶尖设计师系列！平面设计界毕加索，教父级人物「保罗·兰德」

@研习设K先生 ：保罗·兰德是20世纪杰出的平面设计师、思想家、教育家。

阅读文章 >>

△ vivo浏览器前期风格趋势研究

△ vivo视频前期风格趋势研究

竞品分析不仅是分析品牌定位、视觉风格语言，还要研究统一性在细节中的执行如何取舍，对大量的设计微观决策进行研究才能窥探到问题分析的思路和方法。

方案探索阶段应当尽量去发散方案，不要受到思维的限制，不要进行批判。重大项目、资源充足的情况下应当采用多人进行，参与的设计师越多、产出的方案越多视觉感受的对比会越直接、越强烈。

这个过程不需要给出斩钉截铁的结论，而是需要对风格趋势对竞品有一个全面完整的了解，在此基础上再进行发散和创新。

△ vivo视频视觉方向发散

3. 多目标选择评估

进行启发式评估，对风格的正交性（不将无关事物耦合起来）、专用性、可适配性以及核心用户定位、品牌匹配度去分析推导，最终确认至少三套设计风格。风格的选择一定不是非此即彼，对每个方案要有全面的评估，其它的方案里面一定也有一些散光的亮点或者在设计上的启发，这个时候可以考虑把一些可执行的设计点进行融合。

最终的决策一定要突出三套风格的差异性，差异越大用户越容易对设计方向的喜好度进行判断和表达。

△ vivo视频多目标追踪方案

基于核心页面的风格去拓展其它页面的设计效果，去实践设计风格的可适配性。因为不同功能页面有特定的业务属性，所以单一的设计风格很难有效适配到一个产品的所有页面。

4. 喜好度调研

定量调研可以发现用户最不喜欢的方案，但是很难找到用户最喜爱的风格方向。我们对同样的方案做完定量和定性研究后可以发现，用户不喜欢的方向和原因保持一致，最喜欢的结论会有较大波动，即使在定量数据上也没有明显的优势。大多数情况下用户在做选择时只是觉得在风格上有差异，但是没有明确的喜好程度的倾向。

△ vivo浏览器用户喜好度调研结果

△ vivo视频用户喜好度调研结果

采用定性调研去挖掘用户的审美偏好、对品牌的认知与期望。相对于用户的选择我们更应该重视用户在判断后的表达，喜欢的原因及描述。通常情况下用户会用一些形容词进行表达，比方说更科技、年轻，设计师可以基于这些关键词进一步明确对风格的定义，去把控设计的方向。

△ vivo浏览器用户品牌感受调研结果

不仅仅是对整体页面风格进行喜好度的研究，对重要的核心元素也可以进行调研，重要的变量最好在2到3个，变量太多组合会成倍速增加，不利于用户做选择。

5. 设计决策

风格提取，结合三个方案的设计细节对调研结论进行总结提炼，从色彩、造型、材质、处理手法等层面对每个方案的优势进行分析提炼简洁清晰的设计语言。

△ vivo浏览器用户反馈总结

△ vivo视频用户反馈总结

争取“两项都选”而不是非此即彼的选择，锁定一个方向为主要方向，把其它方案可以借鉴的优点和优势融入进来，删除优化不好的细节。

基于最终的方案选择，为了保持概念的完整性，提取最终风格的关键词，用合适的方法将风格记录下来。

在设计的过程中还会有大量意料之外的微观决策，将影响最终设计的那些微观决策也都可以记录下来，这样才能最大程度的保证设计结果的统一性。

总结

• 前期要制定明确的目标，在方案发散阶段要对风格趋势、主流竞品有全面的了解。
• 跳出自我意识的局限，多人参与多方案尝试可以保证更多的视觉刺激和启发性，有利于做方向的选择。
• 避免决策瘫痪，主要方向不要超过3个，拉开方案的差异性，采用定性调研挖掘用户的审美偏好，对品牌的认知与期望。
• 最终决策不要有非此即彼的偏好，客观的分析用户偏爱的风格以及喜欢的原因，把优点进行整合，删除不好的。

我们今年在vivo视频、vivo浏览器两个项目上采用了多目标追踪的方法，通过不断的对问题进行探索、决策、总结。在推动的过程中如何让方案有充足的说服力，如何保证设计结果的有效性，是一个需要不断发现问题、解决问题的学习过程。目前vivo视频的设计改版已上线满意度有了较大提升，vivo浏览器在开发过程中。后续会发出项目总结的文章，敬请期待！

引用：

• [美] Chip Heath《行为设计学：掌控关键决策》
• [美] Frederick P. Brooks《设计原本》

欢迎关注作者微信公众号：「VMIC UED」