首度揭秘！春节期间滴滴地图小车图标的换装设计过程

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

如何为创意插上理性的翅膀，滴滴设计师和你一起回顾春节地图小车 icon 换装的设计全过程。

前言

新年刚过，元宵即临，开工的小伙伴都身着新衣，领了红包，是否还记得春节时载着你走门串户的舞狮小车呢？

我们作为舞狮 icon 的设计师，在此将设计过程梳理成文，揭秘舞狮 icon 的诞生过程。文章分为两部分：

• 介绍地图小车换装的由来。
• 以春节小车设计为例，沉淀创意 icon 设计的标准化流程。

地图小车换装回顾

滴滴出行 App 中除了常规地图小车，类似春节舞狮的 icon 换装设计已经做过很多次了。在重大节日或发生热点新闻时，通过icon 换装的形式来配合运营活动烘托活动气氛。

圣诞节的时候，小车变成了圣诞老人，驾着驯鹿雪橇带着满满的礼物飞奔在地图上；奥运会火炬传递的时候，小车成了高举火炬奔跑的火炬手，传递着奥运精神；北京市7月暴雨的那天，小车成了一艘艘小船，帮助需要出行的人们航行在城市道路上……

今年的春节 icon 设计就是文章开头看到的舞狮了。做了多次的换装设计后积累了一些方法和经验，现在借新年伊始大吉大利的时机，以本次春节舞狮设计为例，和大家一起聊聊一个换装 icon 设计是怎样一步步炼成的。

地图小车换装设计全流程

换装 icon 的设计过程分为7个阶段，是不断地发散、聚合、再发散的过程。

首先从活动运营方接到需求，分析审核需求是否存在不合理或难以产出设计的部分。通过这一步，为后续设计的顺利执行奠定基础，前期的需求分析沟通也能让项目的上下游快速达成一致，避免后续产生疑问导致设计的反复影响进度。

需求确定后，根据活动主题发散关联元素，进行头脑风暴寻找创意点，这也是整个阶段里最疯狂的部分。发散的目的是增大创意的可能性，正如莱纳斯·鲍林所说，「为了有个好主意，必须要先有很多想法。」

然后结合设计的最终输出环境，明确执行挑战有哪些，将发散的创意点一一通过这些挑战进行筛选，决策设计方案方向。随后就是细化方案反复推敲，达到高质量的输出标准。

由于滴滴出行多业务形态的模式，设计方案需从一个方案延展至多条业务线，并保障所有业务线方案既整体统一又符合业务特性。方案确定后输出切图元素，推动落地发布上线，并进行跟踪反馈。

整个设计的过程就是发散和聚合的规律交替，每个重复的过程与前一次相比都会更聚焦，也更关注细节。在发散阶段，新选择会出现，在聚合阶段则恰恰相反，要淘汰选项保留最合适的选择。这种设计流程可普遍适用于创意类的设计需求。

接下来就对7个阶段一一详细介绍。

1. 分析活动需求

换装设计需求通常是由市场运营活动或实事热点活动发起，希望通过 icon 烘托活动气氛，吸引用户关注。曾经也由设计师发起过换装需求，目的是通过 icon 的视觉变化营造节日气氛，增加产品的情感化表达拉近与用户的距离。

但很快我们发现，纯视觉的 icon 变化在产品使用中是断层的，强烈吸引了用户注意，没有活动解释，没有后续操作，且不能为用户带来实际收益，这反而引发一些用户的疑惑，也让我们思考如何体现换装设计的价值，于是制定了需求审核标准。

首先，需求要有多维度的运营活动背景，icon 换装作为线上展示的活动部分，通常还会有运营对话框，运营卡片等对活动进行解释，引导用户操作。其次，设计需求的执行性强，不破坏地图小车本身的功能属性。第三，活动均为正向情绪的表达，并为用户普遍认知事件。只有需求满足了这三点才可进行下一步。

换装需求分为4类，热点类、天气类、节日类、商业类。每一类对设计的要求也不太一样。

• 时事热点类，要求设计师能够快速产出设计方案，精准匹配新闻发生的时间段。
• 天气类需求在时间上具有不确定性，比如不确定今年的初雪是哪一天，要结合运营策略提前准备预案，避免临时设计时间不足。
• 节日类需求时间固定，且较常规，可根据运营活动排期提前2-3周准备。本次春节舞狮 icon 设计，就属于节日类换装设计。
• 商业类是商业合作往来，具有直接的商业收益，但商业需求要和滴滴的品牌气质高度契合才可。

2. 寻找最佳创意

这一步是整个设计流程最关键的步骤，我们希望用户看到换装 icon 时能够快速感知其代表的活动寓意。

从活动主题出发，不断在网络上和脑海中搜集提炼春节相关的关键元素，发散搜集需要多反复几次，查找资料并和身边的朋友交流沟通，尽可能全面多角度的进行列举，然后对其分类整理。此次我们搜集与整理了这些关键元素：

• 立体物体：灯笼、寿桃、元宝、祥云、葫芦、布老虎、财神、门神、龙、凤凰、生肖、年兽、舞狮、寿星、鱼。
• 平面物体：对联、福字、年画、贺卡、窗花、脸谱。
• 代表颜色：红色、金色。
• 装饰纹样：传统花纹、象征符号、祥云。

不同类别的关键元素之间还可以进行关联组合，比如金色带传统花纹的元宝。

3. 明确执行挑战

进行了需求分析，和广泛的创意发散后，接下来就是要梳理设计的限制与挑战，从而对发散的创意元素进行聚合收敛。经过了多次地图小车的换装设计，设计团队总结出了以下几点设计挑战：尺寸限制、视角限制、要求认知的普适性、要求可扩展性。

表现面积小，小车图标尺寸大约只有88*48 px

小车图标设计最大的难点就是尺寸过小，通常常规功能性图标的大小约为40*40 px，而滴滴小车则是要在大约两个功能性图标大小的面积里，画出一个充满细节的写实 icon，要保证清晰地表达出小车的形象、光影以及配饰细节等内容。

例如绘制代驾 icon 中具有体积光感的眼睛细节，就要求仅使用4个像素表达出来，许多优秀的创意灵感，可能都会因为面积过小的原因而被放弃。

小车图标需要俯视展示，并表明方向

因地图为俯视视角，地图上的小车也需要俯视展示。同时地图上的小车要求保障用户识别真实车辆的行进方向和实时状态，所以图标设计要能够分清头尾，以指明前进方向。

有时候 icon 俯视角度太难以表现其内容，我们也会尝试做成正面平视角度，并将360度旋转方向去掉，改为地图上平移前进，但这样对用户的习惯认知有所影响，所以不到非必要条件不会采取这种方式。

图标的意象要符合认知

以此次春节小车变装为例，小车形象要凸显春节气息，并表达准确、符合大众认知，不会产生错误联想或地区差异化矛盾。此外如果 icon 的意象本身和交通工具有所结合就更好了。

能够支持六个业务线的差异化设计

滴滴出行是一个集合多业务形态的产品，比如注重效率的快车、出租车、小巴，注重服务和品质的专车、豪华车等。这些业务线的小车图标在表现形式上是相近的，但传达特性上又要传达差异性。在做图标换装设计时，会先选择一个业务线快车为基准，做出通用方案后再延展至所有业务线上，因此方案的可扩展性就成了挑战之一。

明确了设计挑战后，结合以上限制与挑战，对上一步的广泛创意方向进行筛选。此次春节小车的设计要大众认同、直白明确显而易见、可执行可表现，最终选择了传统花纹喷漆、车顶张贴福字、春节舞狮舞龙这几种初步创意方向。

4. 决策设计方向

明确了执行条件，有了初步的创意，接下来就要快速出草图、出方案，建立评价标准决策创意的可行性，筛选出最终的设计方向。

画草图的过程就是将信息化的创意转化为图示的视觉设计的过程，而草图的潜力在于从纸面经过眼睛到大脑，然后返回纸面的信息循环之中。理论上信息通过循环的次数越多，变化的机遇也越多，随机记录、表达、讨论设计构思意向的草图，能够最大限度地解除方案构思思维的表达束缚。经过草图的尝试后，进一步产出方案进行评估与快速测试。

对方案的评估主要有3个维度：图像清晰、表意直观、氛围营造。在团队内部对待选方案从以上维度进行打分评估。其中花纹方案在尺寸中无法清楚看到车身上的细节；福字方案在氛围营造上比较保守；舞龙方案因为和端午节龙舟感觉相似，不能明确节日氛围；舞狮方案总体上更符合标准，且更具氛围感与情感化。

除了以上几个维度的评估，针对几个方案，还在公司展开小范围调查，舞狮也是更多非设计同事更喜欢的一个方案。综合专业性的评估和快速的用户测试，最终春节小车的设计方向为舞狮主题。

5. 深化设计细节

通过上面几步已经可以得到一个可靠的初步设计方案，现在就要从形态、光影、材质、颜色四个方向进行细化，完善其视觉表达。

形态

icon 形态上采用提取与重构的设计方法，提取具有代表性的物体特征，转化为视觉元素，将其不断组合改善，重新塑造为新的设计。

此次视觉化的过程中，提取了舞狮头部、舞狮步伐、面部表情、春节元素等，将元素不断融合调整，要做到形态即整体协调又丰富生动。舞狮的脚虽然小到看不清，但仔细看仍是有着功夫步在里面的。另外舞狮的背上增加了春节祝福文字，使 icon 更具趣味性，并且无论舞狮以正反方向前进的时候 icon 中都有了能够阅读的视觉内容，这也是此次方案的一个亮点了。

因地图上常会出现多辆小车相互叠压的状态，需要 icon 形态还是保持在一个块状的几个形体中，即保持 icon 自身的整体性，也方便车辆之间进行区分，保障界面的舒适性。

地图 icon 采用俯视角度最合理，但俯视视角下很多事物识别难度加大，所以此次舞狮 icon 将正视的狮头与俯视的身体结合，既保障了认知度，还保持了俯视角度的功能性。这样不同角度的形态组合，对不适合纯俯视的元素非常适用。

光影

因 icon 是顶视图且会360旋转，所以光影表现以顶视光为主，这样多辆车不同角度的出现在界面中时，光源仍是统一的。另外 icon 和地图之间会有淡淡的一圈阴影，让 icon 和地图有所区分，但又和谐的停留在地图上，这些阴影的深浅大小只能靠一遍遍尝试才能找到最佳程度。

颜色

icon 本身尺寸较小，又有多个 icon 叠压的情况，所以需尽量保障 icon 在一个颜色体系内，颜色统一可以直观的保障 icon 的整体感。一个主色搭配辅助色表现活动气氛，拿捏好颜色比例，做到整体不花哨即可。

材质

地图小车一直采用立体写实的手法来表现，通过玻璃反光，车顶高光，渐变肌理等带给用户真实感，从而对界面中的车辆信息感受到真实可信赖。顶视光源下要表现icon的立体感和材质感是考验技法的，需要细致观察和耐心打磨。

完成这一步后，就得到了一个以快车为基础的通用方案，其它业务线的方案基调也就奠定了。

6. 延展设计方案

经过与各业务线的协商沟通，此次确定六个业务线推出春节换装设计，因业务线都集中于一个应用中，就要求地图换装 icon 既能够保持整体风格统一，还能表达业务特性。

我们联想到了08年奥运福娃的设计，两者都是多个统一又独立的形象延展，其主要是通过颜色来进行区分，辅助局部做差异化调整。

根据这样的思路，快车是滴滴用户量最大的业务，使用了最具春节气息的红色，出租车延续使用了金黄色调，专车与豪华车注重乘车品质与服务，分别使用了藏青色以及黑色，凸显其高端尊贵的气质且保持与业务线品牌色系一致，同时将豪华车 icon 的眉毛进行夸张化，更突出其豪华尊贵的形象，小巴注重价格实惠延续了原有 icon 的色彩，用高级灰作为其主色调，而代驾也不能缺少春节的气息，代驾师傅们就换上了红色的春节唐装。

另外每个舞狮的背上都增加了春节祝福文字，不同的文字既能够让舞狮代表不同的春节祝福，也代表了不同的业务线的气质差异，使形象更具趣味性。

7. 推动方案落地

设计到了这个阶段，就算是进入收尾环节了。接着将方案切图输出，并保障和已有的方向、尺寸一致，方便替换。设定好上线时间与上线城市，后台配置完成后，春节的舞狮就按时活跃在每个滴滴出行用户的界面里了。

上线后还要对方案进行跟踪反馈，一般会从微博、脉脉等平台中关注用户舆情，把用户评价按「不好，影响打车」、「一般，没感觉」、「不错，有意思」分类整理，由此评判此次方案是否展现了其价值。

小结

回顾整个设计路程，设计师通过发散—聚合—再发散的方法，快速理解需求找到爆发点，放开思路探索创意的可行性；接着提炼设计的挑战与限制，并反向利用限制条件来推动思考，得到初步创意；再通过设计的快速尝试与不断试错，完成方向的决策；细化打磨方案并挖掘方案的延展性；在最终设计落地发布后，保持持续的跟踪与反馈。

从中我们所收获的，不仅是完成一次次小车换装设计任务，还为今后的创意类设计需求提炼了标准化的流程与方法，更好的保障设计效率与质量。

欢迎关注滴滴创意设计中心：

「拉近用户距离的主题设计」

• 《如何给节日主题做设计，来看这篇超全面的分析！》
• 《今年的双11品牌设计，官方首度揭秘背后全过程！》
• 《吐血整理！2017年杜蕾斯海报最全合集，一次看过瘾！》

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备： https://www.muzisucai.com/