【滴滴平台体验设计研究】首度揭秘!滴滴地图小车春节变身记(2)

来源:网络   作者:热心网友   发布时间:2018-03-27    浏览次数:92

3. 明确执行挑战


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

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

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


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


b. 小车图标需要俯视展示,并表明方向

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


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


c. 图标的意象要符合认知

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


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

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


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



4.决策设计方向


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


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

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

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



5.深化设计细节


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


a. 形态

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


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

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


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


b. 光影

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


c. 颜色

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


d. 材质

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

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



6.延展设计方案


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


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


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

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



7.推动方案落地


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


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


『 小结 』


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


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


12共2页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/7154.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通