header_v0.7.32

滴滴出行地图事件--来自设计师的爆料

1年前发布

原创文章 / UI / 教程
滴滴出行CDX 原创,如需商业用途或转载请与滴滴出行CDX联系,谢谢配合。

作为设计师,我们一直满怀着更美好的愿景与使命,致力于更多维度的思考,无论是外型还是功能,在研究与探索的路上,未来还有更多的挑战与惊喜~

参与设计师:文亚 荣荣

2015年9月9日,伴随品牌升级、更新LOGO,滴滴发布了全新版本的“滴滴出行”APP,这一版无论在UI风格还是UX体验上,都贯穿着:I 丰富的可扩展性 II 对于个体用户的简约 III 灵活的推广运营位  三点设计思路来实现信息组织的有序化,展现出清晰的层次结构。



从上述结构来看,内容底层与整个发单组件有着相辅相成的关系,它贯穿了整个打车流程,且承载了大量的数据信息,自然也是非常重要的一层,在这里我们就近期map相关事件进行严肃的总结报导。




>>>吸附路面<<<


「发生原因」


早期滴滴乘客端首页满满的水滴小气泡,有着微弱的业务区分(仅仅是抽象icon),等待接驾中不能清晰的识别司机行驶方向,且气泡的尖角富有指向性却没有指向内容,它是独立于地图之上存在的,像是贴在地图上的标签。

而吸附路面这个功能不仅仅是体验上的一个突破,也正是设计师们兼顾服务设计的一个出发点。



「执行手段」


  • 将小车进行具象偏拟物绘制,将车头车尾进行细节处理,明显区分,以突出在地图上车头对应的行驶方向;

  • 调试小车icon在地图中显示的比例大小,目标还原真实场景贴近于地图;

  • 从最早基础业务出租车、到其他类专车业务及新业务,选取市场内与各业务属性最为相近的车型进行演绎;

  • 分析并赋予各业务线不同的颜色感受,考虑平滑移动方向性的场景因素;

  • 在视觉细节上追求极致,以保证在地图上展示清晰且有明显的差异化。



「结案陈词」


当平滑移动的小车实时跑在地图上时,真实感将用户更好的代入场景,在使用频次的积累中,可加强对各业务线的认知,方便用户理解导航切换业务与小车形态之间的对应关系。尤其在司机接单,乘客等待接驾时,无须盲目等待,如下图,实时数据能更清晰的从小车的车头确认司机行驶方向,从小车的位置获取中间距离,评估等待时长,合理安排时间。




>>>上车点<<<


「发生原因」


通常在地图中确认位置最重要的元素就是定位点的聚焦作用,而在滴滴的体验场景中我们发现,定位点(实时位置)与上车地点(约定位置)是不吻合的,打车时输入的上车点更多是一个区域,例如下班前在办公室叫单,定位显示在楼中间,等司机到达时,需要电话/IM等渠道与司机沟通具体约定在哪个位置上车(例办公楼下的某一条路),碰到对附近不熟路的司机,乘客亦不能很好的表达自己的方位,即使导航也无法输入确切目的地,这过程中必然会导致焦躁的体验。为此,我们设计了上车点,这只是循序渐进过程中的一个开始。



「执行手段」


  • 对此进行前期调研与竞品分析,以全球最优秀的谷歌地图为学习方向,考虑基于地图展现的实际场景,设定上车点风格及展现形态;

  • 加强上车点“东门”or“南门”等的吸附动效,提升聚焦效果,逐步完善体验度;

  • 对上线结果进行总结,为解决默认上车点与“东门”or“南门”重叠的情况,将“东门”or“南门”气泡的尖角指向由纵向改为横向;

  • 结合运力气泡的展现,加强上车点功能引导,点击推荐X个上车点,地图比例尺即可自动缩放至显示上车点具体信息,用户选择并点击“东门”or“南门”时,底部发单组件上的起点会自动由之前的“XX大厦”变为“XX大厦-东门”,方便用户选择更准确的上车位置,从而提升司机接驾效率。



「结案陈词」


本着服务设计的理念,设计师们都像个研究人员一般致力于消费者研究,在人人与科技的互动中体验功能与服务特性。这个为用户精准到点的过程中,技术手段的一步步提升,视觉层面的一次次优化,都是在不断的完善目标,解决乘客司机彼此找不到的问题。但这些还不够,到现在设计师们依然在构想能让用户更容易理解的、更有趣的上车点展现形态,构想未来乘客不需要手动去选择点击,滴滴会默认自动匹配我的上车点,一层层去简化步骤…



>>>地图底层<<<


「发生原因」


如上所述,内容底层与上层导航及发单组件有着相辅相成的关系,我们来看一下新首页的结构:



底部主操作控件区为卡片形式,将深度信息进行了简化,力求用小包装来承载大量信息,让内容更加直观,更具有视觉凝聚力。但是发单卡片有一定的局限性,由于空间问题,每一项一般只能讲一件事情,这种限制反而对我们有所帮助,迫使我们要做到所要表达的内容必须足够清晰明确,这样整个布局也就会显得更整洁。


可扩展的卡片帮助用户更直接的获取信息,也使得信息具有更大的可塑性,相比通常整页的list形式,节省了珍贵的空间。而在这珍贵的空间里,地图底图上原本过多的文字信息及路线,对上层顶部导航及重要的发单组件造成了干扰,需要同时考虑的还有为用户全新打造的上车点功能展示,他们之间的相互叠加,必须力求和谐点,使用户迅速且愉悦的获取到最想要了解的内容,有效率的看,有质量的看。且为了视觉层面更符合滴滴出行APP的调性,我们将最底层的地图进行了底图sdk样式优化。


「执行手段」


  • 调研 

百度地图是近几年比较火热的地图,包含丰富的服务信息,使用四维地图(腾讯控股)数据;高德地图是国内老牌地图,有十几年的地理测绘经验,也是苹果中国的唯一地图合作商,同时也是宝马,奔驰等高端车的导航合作商;谷歌地图是全球优秀的地图,但因为业务受限,在中国地区谷歌地图基本上属于无法使用的状态。虽然苹果自带地图有很多缺陷,但在中国是原生高德地图本土产品,效果比谷歌更好。 


  • 探索

针对高德、百度及腾讯地图展现层面进行差异分析(均为200M比例尺):



一、路线层级展现(路线种类、路线颜色、路线粗细、路线描边颜色及粗细)

二、POI文字信息(POI文字密集度、大小、颜色、排布方向)

三、色相抽离深度分析


  • 方案

在单一比例尺下突出主要道路,从视觉角度出发,弱化下一层级的道路信息,减少密集度;将不必要的POI文字信息删减并缩小字号,考虑到滴滴使用过程中3D楼块对行程展示的干扰,将楼块平面化处理;整体色相进行重新调和,避免地图与上一层功能操作区产生粘连,不单纯使用灰色,加入一些色彩倾向,在设计上希望传达给用户一种简洁清爽的视觉感受,又能聚焦于内容。



  • 实现

使用调图工具,将修改内容还原真机预览效果,历经N多遍修改后,最终方案落实,总结到样式表调整内容主要为一、显示比例尺调整:① poi  ② line  ③ region  ④ text  ⑤ arrow  二、样式调整两个方向。



「结案陈词」


底图样式优化是最为耗时耗力的一个工程,这过程中反复的整体与散点思考,考验的不仅仅是毅力,执行力,为了达成用户迅速获取信息一键发单的愿景,我们将追求更多的细节,不断打造更符合滴滴产品属性的定制版设计。




然而,还没有完,地图事件到这里还有最骚气的没有讲


那就是


>>>热点事件<<<



「情感化氛围传达」


在吸附路面小车原有的形态中,我们为此寄托了丰富的情感空间,每逢有意义的节日、最新的社会新闻甚至特殊天气,都会结合时下元素对小车进行包装,而后华丽丽的跑在地图上传达出当时的氛围,感染到每一位滴滴用户。



「商务合作」


灵活的推广运营位中,除开屏、推送及公告之外,地图上的小车也可以。根据合作商家的推广信息&滴滴APP自身的调性,定制全新的小车,实时展现在地图上格外生动。



>>>报导总结<<<


我们不断解决并完善这些事情的核心目标就是接驾效率的提升。这些仅仅是呈现角度的罗列,它背后涵盖了更深度的思考,运力的调配、司机用户的教育、数据、导航等,都是关乎到接驾效率的重要因素。


接驾效率是整个出行体验当中非常重要的一环,如何让乘客将自己所期望的上车位置通过平台更明确的表达出来,如何让司机更清晰的了解到乘客的接驾位置,更快的接到乘客,让出行更便捷。作为设计师,我们一直满怀着更美好的愿景与使命,致力于更多维度的思考,无论是外型还是功能,在研究与探索的路上,未来还有更多的挑战与惊喜~


滴滴设计团队公众号:disign滴滴创意设计中心

286

    文章信息

    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功