赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
3.6K 0 0

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

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

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

小结

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

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

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

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

设计「诱惑」绝对不是诱导和操纵用户 —— 而是在设计产品过程中给予更多用户想要的东西,甚至是用户没有想到的东西。就像原本...
情感化设计
Elaine Zhu :最近已经是个抖友了!每天抖音中毒停不下来。 因为微视是腾讯力推的产品,出于好奇也下载了。作为交互设计师,...
App分析
在前边的文章中我们已经全方位立体式的讲解了系统图标的相关知识点。即讲到了系统图标的设计风格,也讲到图标设计的栅格体系...
Icon设计
前言 西蒙·斯涅克在他的《从“为什么”开始》一书中提出了“黄金圈法则”的概念。他发现,人们一般向别人表达或者激励时,常规路...
交互设计
很多时候,当你的设计遇到了挑战,你无法客观地回答为什么,甚至在和业务方沟通的过程中表现得很被动。 为什么行为召唤按钮的...
交互
描边风是近几年比较流行,且被大量应用于平面和 UI 设计中的一种设计风格。 欢迎关注作者微信公众号:...
MBE风格
王M争:我最近在做改版设计,所以很长时间没有更文了。期间遇到了很多问题,其中一个就是顶部栏配色,后来我索性就针对移动端...
Tab
@糖糖糖就是糖 :谢谢大家喜欢上一篇的内容《自学水彩没你想的那么难,说说我是怎么自学的》,文章推荐了十本自学书籍。我会...
手绘