第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

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

时间:2018-02-28 09:14来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
对方案的评估主要有3个维度:图像清晰、表意直观、氛围营造。在团队内部对待选方案从以上维度进行打分评估。其中花纹方案在尺寸中无法清楚看到车

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

  

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

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

  5. 深化设计细节

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

  形态

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

  

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

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

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

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

  光影

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

  颜色

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

  材质

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

  

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

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

  6. 延展设计方案

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

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

  

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

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

  

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

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

  7. 推动方案落地

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕