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

何为创意插上理的翅膀，滴滴设计师和你一回顾春节地图小车 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. 推动方案落地

设计到个阶段，就是进收尾节。接着将方案切图输出，并障和已有的方向、尺寸一致，方便替换。设定上时间与上市，台置完成，春节的舞狮就按时活跃在每个滴滴出行用户的界面里。

线后还对方案行踪反馈，一般会从微博、脉脉平台中关注用户舆，把用户价按「不好，影响打车」、「一般，感觉」、「不错，意思」分类整理，由此判此次方案否展了其价。

小结

回顾整设程，设师通过发散—聚合—再发散的方法，速理解需求找到爆发点，思探索创意的可行性；接提炼设的挑战与限制，并反向利用限制条件推动思考，得到初创意；再通过设的速试与不断试错，完方向的决策；细化打磨方案并挖掘方案的延展性；终设落发布后，保持持续的踪与反馈。

从中所收获的，不仅是完成一次次车换装计任，还为今后的创类计需求提炼了标准化的流程方法，更好的保障计效率质量。

注滴滴创意设计中心：