搜狐汽车产品图标改版设计全流程.pdfVIP

本文由简悦SimpRead转码，原文地址

在上一讲中，我强调了实用性的图标设计要注重辨识度、美观度、凸显功能和通用性，而主要的思考维

度就是找准品牌符号和优化表现方式。那么在实际设计中，你该怎么这些准则，设计出符合产品定

位的实用标呢？

这节课，我就以搜狐的一款汽车产品做案例，这款产品的是由我发起的，我全程参与了用户调

研、竞品分析，一次次评审和线上数据的反馈，比较了解整体设计流程，虽然是2015儿，但直

到今天，它的设计流程和方法依然具有说服力，因为它清晰地呈现了在图标实际设计过程中的难点与痛

点问题。

好了，话不多说，我们进入今天的学习。

我们为什么要？

2015年“搜狐汽车”已经积累了700多万的用户，产品日活在10万左右，处在日活放缓的瓶颈阶段，

产品中主推找车、、特惠等功能带来的转化也就在1%左右，实在比较低。而且它很久没做过

大的了，设计风格也比较陈旧。比如下图的这些图标，你看完是不是想吐槽一下？既不统一也没有

任何特色。

正是在产品运营数据都不好的背景下，我们开始启动产品的计划，而在这之中，我们把图标的

设计放在了重要位置，为的就是提升这些功能的转化率，从而激活产品的运营数据，改善下用户的

审美疲劳。

的需求？

刚刚我提到，图标是在产品整体的基本上进行的，那么图标的设计风格肯定要与之相匹配，解

决现存的问题，当时的图标存在哪些问题呢？在我看来主要有这样4点：

图标设计规则不统一，有粗线条、有方的、有扁的；

色彩单调，选中态才有红色呈现；

图标行业辨识度不高，体现不出汽车属性，其他不同类产品用了也没问题；

缺少吸引人的设计细节，简单的线条图形，没有设计特点。

在明确了图标在设计上存在的问题，我们梳理了的目标：在视觉上体现牌和行业特征，凸

显产品的主推功能，提升运营数据的转化。至此，我们在此基础上，从设计符号，色彩，辨识度，设计

特点制定了改动方向：

找准品牌符号融入设计中，统一整体图标的设计风格；

采用品牌色和辅助色的搭配，凸显图标的视觉层级；

提高图标的辨识度，帮助用户直观认识产品和功能；

采用前沿的设计手法，新颖的设计元素，让产品充满和。

如何升级？

我们这次最主要目的是要提升转化，所以为了节约时间，快速验证，我们决定在不做大动作的前提

下，先上线一版，看看后，图标能不能带来转化上的提升，具体的操作流程是这样的：

我们找到了一种比较快捷的方式：在设计上找准一个设计符号，使用新的品牌色和辅助色，将所有图标

统一化。

那么在符号选择上，我们用了简洁的断线缺口，然后使用布尔运算进行裁切，融入所有图标设计中，表

现手法主要用了拟物和比喻的手法，比如：

热门车用拉风的车型配合红色，体现出热门和车型；

二手车用皮卡车型加上售卖的符号配合，体现出折价破旧的车型。

品牌色和辅助色上，原来的品牌色都是搜狐黄，后来汽车频道重新设计VI，将蓝色作为汽车的品牌色，

所以图标了VI品牌色里的主蓝色和其定义的红、黄、绿辅助色，现在虽然升级主打资讯为主的品牌

产品，但品牌蓝色不变。

品牌变化的阶段示意图

很快，新一版的图标设计就出炉上线了。从下图中你可以清晰地看到，断线缺口的设计符号在所有图标

上形成了统一，这样一来，辨识度就提高了，不过这一版的设计符号还不够新颖，因为我们选取的符号

只是断线，而断线设计风格的图标又很多，并不新颖。

但当时，我们主要是想快速测试新的转化数据是否能有所提升，所以在不影响进度的情况下，我们

舍弃了精细化设计很多方案的做法（比如在时间允许的前提下，从汽车品牌中提炼设计符号，做出多版

设计风格的尝试，一遍评审完善）。

这样一来，这一版从开始分析到设计完成只用了3天时间，开发只用了2天时间就上线了，经过一周线

上运营的数据分析，新和后