标注产品
联系我们

地址:北京市通州区长城国际写字楼7层703室

电话:010-56218858

邮编:101100

当前页面:

首度揭秘滴滴地图标注的换装设计过程

2018-03-20

滴滴出行 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. 推进计划落地
规划到了这个阶段,就算是进入收尾环节了。接着将计划切图输出,并确保和已有的方向、尺度共同,便利替换。设定好上线时刻与上线城市,后台配置完结后,新年的舞狮就准时活泼在每个滴滴出行用户的界面里了。
上线后还要对计划进行盯梢反应,一般会从微博、脉脉等平台中重视用户舆情,把用户点评按「欠好,影响打车」、「一般,没感觉」、「不错,有意思」分类整理,由此评判此次计划是否展示了其价值。
小结
回忆整个规划旅程,规划师经过发散—聚合—再发散的办法,快速了解需求找到爆发点,铺开思路探究构思的可行性;接着提炼规划的应战与约束,并反向使用约束条件来推进考虑,得到开始构思;再经过规划的快速测验与不断试错,完结方向的决议计划;细化打磨计划并发掘计划的延展性;在终究规划落地发布后,坚持继续的盯梢与反应。
从中咱们所收成的,不仅是完结一次次小车换装规划使命,还为往后的构思类规划需求提炼了规范化的流程与办法,更好的确保规划功率与质量。

010-56218858
售前咨询
进度查询
售后服务