「如何做一份完整的竞品分析」视觉篇

前言

想必你也曾为做一款新产品或产品迭代苦恼。如何做设计思考？如何视觉探索？这篇文章总结了本人从事移动互联网设计以来的竞品分析方法，整篇文章文字表述较多，可能有些枯燥。如果能看到最后，那你一定是个很厉害的人！

下图为用户体验五要素，视觉展现在产品设计整个过程中属于靠后的位置，为表现层（最外层）的设计。那么产品的「感知体验」是如何在视觉设计中做到准确传达的？我们将通过以下的分析得到详细的解答。

分析执行

整篇分析包含1.明确分析目的 2.选择竞品 3.收集资料 4.建立分析维度 5.分析竞品 6.归纳总结 。为了让大家更好的理解此方法的实践原则，下文将以「互联网金融产品竞品分析」为例，概述分析步骤。

一【明确目的】

做一份竞品分析的目的：是从0到1探索全新的视觉风格？还是在现有产品基础上进行优化？都是需要在竞品分析中去深度剖析所选产品的视觉点，横向对比其产品特征。当然，最终目的是要输出「可执行的设计原则」，运用指导于产品的视觉设计中。使产品「感知体验特征」更加明确，在竞品中有明确的差异性，清晰的传递产品定位。

二【 选择竞品】

在做一份视觉调研的时候，竞品选择的可以在「直接竞品；间接竞品 」等2个维度去做筛选，同样也可在「业务领域；设计领域」去拓展选项，建议选3到5个产品作为分析。

直接竞品：目标&用户相同，内容相似，构成直接竞争的产品（业务领域）

间接竞品：目标&用户具有一定共性，内容模块缺少或者涵盖（业务领域）

转移性竞品：产品目标用户不同，作为特定的产品做专业领域分析（设计领域）

本次竞品选择：支付宝（V10.0.19）；京东金融(V4.2.2）;百度钱包（V3.1.0）;招联金融（V4.0.0）；人人贷借款（V2.5.0）

三【收集资料】

竞品印象收集（问卷调查法）& 竞品界面收集

问卷调查法 –是对目标对象的意见调查方法，由多个问题组成，用于收集被访者对竞品的意见，感受，反应，认知等。

注：问卷采用「结构问卷」优点在于易于大样本研究；问题比较具体，回答简单省事，回收率和信用度较高，易于统计分析，对比。

竞品印象收集– 调查问题列表参考：

1.你手机上安装了以下哪几个APP？（多选）

2.你使用哪个APP的频率最高？（多选）

3.你认为以下哪个APP颜值最高？（排序）

4.你认为哪个APP体验最棒？（单选）

5.通过使用，这个产品传达给你的性格/气质是怎样的？（用一到两个词语概括，填空）

竞品界面收集

展示形式建议针对所选版本做截图陈列，并对其色彩，icon等细节做抽离集合展示。以「京东金融」为例

四【建立分析维度】

通过问卷调查和收集材料，我们将所选竞品的「感知体验」转换成一些更加具体的形容词，并陈列出更加具体的视觉展现。举例「支付宝&京东金融」如下

那么，产品调性（性格／气质）是如何传达出来的？

视觉风格是通过细节建立起来的，这些细节包括色彩，形状，文字，节奏等。视觉能参与的是通过这些设计细节正确传递产品该有的气质。

1.产品调性：启动图标,色彩体系, icon样式,情感化设计，品牌传播；

2.视觉语言：基础元素，设计原则，设计手法；

3.规范一致性：建立规范手册, 统一缺省&反馈页面等；

五【分析竞品】

针对所有收集材料，「以维度为主导」进行详细对比分析。

1.产品调性_启动图标（LOGO)

启动图标和LOGO的区别？

启动图标 = 功能识别；LOGO = 形象识别。启动图标传递的是品牌形象，来自于品牌形象；启动图标是品牌形象（logo）在互联网传播中的一个应用形式。

【结论】通过右侧图可见，越是简洁的图形设计的启动图标越是能在小小的手机屏幕里脱颖而出；当然其他需要满足的还与品牌形象设计的5个层次分别对应：

第一层次：识别需求 —– 简约

第二层次：美感需求 —– 唯美

第三层次：应用需求 —– 易用

第四层次：版权需求 —– 差异

第五层次：创意需求 —– 深刻

1.产品调性_色彩体系

以「招联金融」和「京东金融」为例分析

「招联金融」的色彩体系较为丰富，页面有5种以上的辅色，饱和度极高，且页面用色面积较大，传递出来的产品气质较为活跃，相对也有凌乱感，品质感较低。

「京东金融」的色彩体系较清爽，并且大胆尝试小面积使用金色，传递出轻奢VIP的高级感。页面大面积的留白，用色节奏的掌握有度，使得整个产品传递的气质为简洁，精致，轻。

【结论】通过上述对比可见，色彩丰富度与品质感成反比，与活泼度成正比；在设计中，控制合适数量的颜色，能帮助品质感得到一定的提升。

1.产品调性_icon样式

优：以「线」的形式呈现，减弱icon本身对文字的干扰，辅助呈现信息。产品入口相关采用有色相的入口设计，其他功能性入口用黑白色调，一致性较高。缺省状态置灰，反馈状态点亮，状态清晰明确。

缺：缺省状态页面背景不够统一，不同入口的层级性较弱。

优：线面结合的设计，加入红蓝两色的对比，调节画面活跃感，细节较多。缺省页面呈现有场景代入感，趣味性较高，符合年轻的用户群体。

缺：缺省页面背景一致性较弱。

优：以「线」为主要设计手法，加入不同色相点缀区别不同类别产品，icon大多规整简约。

缺：缺省页面有单色和多色两种呈现方式，一致性较弱。

优：蓝色搭配其他同饱和度其他色彩的使用，使得画面丰富活泼。

缺：icon设计的表现形式较多，不够统一。色彩的使用未能合理约束，给人凌乱的感觉。缺省反馈状态多样，不一致性较高。

优：整体色调一致，icon构成简洁，寓意明确，可辨识度高。

缺：设计元素较为普通，且用色灰度偏高，平稳无特色，给人中庸无新意的感觉。

【结论】通过上述对比可见，icon设计的三要素：形式感（信息传递／个性化）一致性（颜色／构成）层级性（差异化／关系级别层次）

1.产品调性_情感化设计

什么是情感化设计？

情感化设计是Norman在《设计心理学3：情感化设计》一书中提到的，他将大脑运作层次拆分成「本能，行为和反思」三个层次。三个层次互相作用的方式比较复杂。设计师要做的是通过本能(外观) & 行为(交互) & 反思(思维) 设计的三个作用，使产品与用户建立一个愉悦的关系，在情绪影响中由量变到质变产生情感，增加长期粘性。

例：如何在缺省页面中体现情感化设计？

了解缺省页需求背景：

没有提交任何资料或者网络连接不通畅带来的困扰

建立设计原则& 目标：

What 告诉用户什么样的数据会出现在这

Why 告诉用户为什么要提交这些信息

How 通过明确性的步骤性操作引导用户

【结论】情感化设计：了解需求背景 – 建立设计原则 – 达到设计目标 – 影响用户情感

1.产品调性_品牌传播

品牌概念是指能够吸引用户，并且建立品牌忠诚度，进而为用户创造品牌（与用户）优势地位的观念。品牌概念应该包括核心概念和延伸概念，必须保持品牌概念的统一和完整。

【结论】在APP界面中应该具有品牌设计思维，使用颜色，形状等「品牌基因」在1.图标设计，2.引导页，3.启动页， 4.刷新控件，5.缺省反馈页面等设计中，将其落实到和用户交互的每一个细节中去，也就是我们所说的服务设计，这样品牌的影响力才能逐渐深入人心。

2.视觉语言：整体外形，设计手法，设计原则

什么是视觉语言？

「视觉语言」一词是英国著名设计学家大卫·科恩在《英国设计基础系列：视觉语言》一书中提到的概念：视觉语言是设计艺术实现视觉传达的设计语言，它既包含了基本视觉造型语汇，又包含了起类似语法和修辞作用的造型法则，以及由此产生的设计语义。注重视觉语汇的有机结合以及在不同语境下选择适合的视觉语言组合方式可以实现信息的准确传达。

视觉语言是由「视觉基本元素」和「设计原则」两个部分构成的一套传达意义的规范或符号系统。 在互联网设计中，「设计手法」也建议作为分析项别纳入视觉语言分析中。

「视觉基本元素」是指表达设计的图形，包括基础元素点线面，几何图形如正方形，圆形等，复杂图形如人，建筑等

「设计原则」是指视觉表现手法，包括：位置、大小、距离、内容形式、色彩等

「设计手法」也称之为设计风格，如扁平风、拟物风、MD，以及之前Instagram、Airbnb都争相在用的设计风ComplexionReduction等

3.规范一致性：规范手册，统一缺省&反馈页面等；

为什么要建立规范？

宏观上对内统一，对外区分；

简化，优化，纠正执行错误；

管理与合作变得容易。

六【归纳总结 】

输出设计原则，总结执行细节。

色彩

保证唯一性；留白&节奏；控制丰富度；克制用色

启动图标

满足品牌形象需求5个层次：识别需求／简约；美感需求／唯美；应用需求／易用；版权需求／差异；创意层次／深刻

icon设计

强化形式感（信息传递／个性化）；规范一致性（颜色／构成）；提高层级性（差异化／关系级别层次）

情感化设计

了解需求背景 – 建立设计原则 – 达到设计目标 – 影响用户情感

品牌传播

使用「品牌基因」在图标，引导页，启动页，刷新控件，缺省反馈页面等设计中

一致性原则

建立规范手册；统一缺省&反馈页面

总结

首先，感谢耐心阅读。把分析流程写下来简单，但是把设计思考写清楚，写明白很难。每个人的工作方法不一样，设计师可以通过项目实战总结自己的工作方法，构建自己的知识体系。如果这篇竞品分析方法对你有用，不要吝啬点个赞吧 ，么么哒(˶‾᷄ ⁻̫ ‾᷅˵)

原文始发于微信公众号（互联网设计帮）：「如何做一份完整的竞品分析」视觉篇