最近想整理一些我认为好的交互设计的各类产品，选择先从滴滴开始是因为我生活中经常使用，方便体验和总结；滴滴开发到现在为止已经比较成熟，整体的设计非常统一而且严谨，交互设计可思考的点也确实非常地多。接下来的一段时间里，我会挑选一些我认为比较好的或关键的流程和模块来进行不定期更新。各位同行如果有不同见解，欢迎提出，大家互相交流，不胜感激。（话说今天是中秋节，早上一边啃月饼一边看李亚鹏版笑傲江湖。某人背着贵贵的户外小包跑大同看石窟去了，南京下雨不好出门，宅在家里写小文纯粹是为了讽刺某人一周一次的技术总结从未实现过）

        滴滴乘客端目前提供的最主要服务一定就是用户乘车，但今天作为第一篇，我想先说说整体的布局。坐车，咱们下次再说。（其实是因为这样的一个小目标比较好实现✌️）

一. logo和启动页

     下图是滴滴打车改名为“滴滴出行”时的引导页截图，可以看出滴滴logo一路的由繁至简、由拟物到轻扁平的变化。功能越来越重，而logo却越来越简洁，也脱离了出租车造型，传达了不再只是打车软件，而是提供一站式出行服务。logo的颜色沿用了桔色，此色是桔子色（公司叫小桔科技嘛），是主流出租车的颜色，更是与地图上行车路的颜色相近；logo的造型为桔子的抽象化，也是笑脸，树立了十分友好又正面的形象。应用图标上，灰色为背景色，桔色为主色。在整个app的视觉设计中，也高度保持了这一配色原则。

       启动页以简洁的地图为背景，其中点缀了一些“点”。滴滴含有多个产品线，因此启动后停留在哪个产品页面上总是别有用心。如下图所示是不同版本的启动后首个显示页面。可以看出4.2.5版时，启动后停在出租车，说明出租车仍然是主推产品；而4.4.2时则停在了公交上，公交是新上线产品，滴滴想要引起用户的关注并学会使用公交。启动带有地图的产品时，总是有个地图从大比例到小比例的切换，一方面是便于数据的加载，另一方面也给用户一个大范围的地理位置感（如我在东三省、我在江浙沪）。启动完成后，代表上车点的绿色大头钉会有个弹起又落下的小动画，这对应着上车点数据获取完毕这一过程，也传达了地理位置数据的实时性和准确性。

二.整体布局及顶部导航栏

     滴滴在页面布局上由出行产品（7个）、个人中心和消息中心组成。其中个人中心为抽屉式，消息中心为新开页面，整个应用主体为7个出行产品，以导航栏形式显示在顶部。有关导航栏的交互说明如下：

1. 导航和状态栏、标题栏设计在了一个区块，让整个页面不会太碎片化，给地图和打车操作面板留出更完整的空间。
2. 整个顶部的设计非常简洁、统一，而且突出重点。弱化了logo，将重点集中导航和左右两个系统中心；同时，导航使用胶囊的设计再次突出了重点，那就是当前激活的导航选项。胶囊的外观也明确了可点击范围，让人觉得非常好点击。
3. 导航栏上陈列着全部的出行产品，用户点击可进行自由切换。也可左右滑动查看更多隐藏在屏幕外的选项。
4. 导航栏上的产品顺序自左向右对应着各产品优先级的自高到低，对用户的引导也占有了主导权。如下图所示，导航2中，“巴士”被放在了左起第6个位置；而在导航3中，“巴士”摇身一变变成“公交”，且被放到了左起第一位的重要位置。
5. 导航栏上的数据做成的是可动态更新，包括数据内容、排列顺序。更方便地根据市场战略来调整产品顺序，同时在引导用户使用时占有主动权。例如，在没有开通实时公交的城市里，就不会显示“公交”；下图中导航1和导航2是同一个版本，导航的显示顺序却有所调整；在里约奥运会期间，增加了一个“运动季”（导航4），但似乎没有启动使用，因为点击没有任何效果。。
6. 导航栏最右侧有个“更多”按钮，打开是个全部产品的一览浮窗，既是察看，又做为点击切换到对应的面板的辅助功能。第3层含义是，这个为接下来可能会接入的后续产品埋下伏笔，如果没猜错的话，滴滴还会开展其它业务，放在此弹窗。但产品业务数量到一定多的时候，这种显示模式便不再适合了，不知道滴滴后面会如何应对，以及如何扩展或整合产品线。   

三.地图

    出租车、专车和快车这3个选项卡所对应的面板表现形式为地图加底部操作区，因此单独把地图拉出来说说。

1. 出租车、专车、快车这3种出行产品都使用地图的表现形式，体现了滴滴在产品线之间的设计统一；但又为了表达差异性，3种车辆的UI素材、地图显示的比例尺、以及绿色大头针上的文案都不相同。出租车为常识中的黄色样式；专车样式更为高端商务；快车样式则更平民化。出租车的文案显示为“xx辆车”，突出可用车的数量；专车和快车的文案为“xx分钟”，突出接车的时间。
2. 底部的打车操作区没有设计成紧贴屏幕的样式，而是在左、右、下方都与显示屏留有一定的空隙，在缝隙处也能看见地图。这样做一来增加呼吸感，二来让人觉得地图很大，有延展的感觉（但其实地图的可交互范围并没有变化太多）。
3. 地图上显示着3公里范围内的可见车辆，且车都是根据定位实时移动的，大大提高了服务的可信度（当然时间长了我们也知道并没有卵用，仍然会打不着车）。
4. 地图上显示和“我”的位置信息相关的有两个控件：用户当前位置和上车点。用户当前位置以头像表现，顺带显示了面朝方向，样式扁平；上车点表现形式为绿色大头钉，样式更立体，和用户头像能很好的区分开。绿色图钉的设计和后来出现的最佳上车点也做到了完美契合。
5. 绿色大头钉所在的位置数据会自动填充到底部操作面板的起点输入框。用户通过拖拽地图来移动大头针位置。拖拽地图，手指未松开时，起点输入框显示“正在获取上车地点”；拖拽完成，手指松开后，大头针会弹跳一下，落地时，为数据获取成功，且填充到起点输入框中。
6. 在4.2.5版本时，地图上又新增加了一个显示元素叫“最佳上车点”，专门在下一节说明。

四.最佳上车点

1. 视觉上，最佳上车点是由绿色圆圈及同色位置名称联合显示的，颜色与上车点图钉颜色完全一致，也与底部操作区的起点输入框前面的绿色小圈的边框颜色一致。
2. 显示规则为，只显示绿色图钉附近的若干个位置，数据内容一般都是地标建筑（商场、小区门口等）、路口、车站站点等。
3. 绿色图钉是可以移动到最佳上车点的，在拖拽过程中，只要绿色图钉靠近最佳上车点至一定的距离时，最佳上车点会发出一个视觉反馈，表现形式是由内至外连续发出两个半透明的圆圈，绿色图钉只要移动到圆圈范围之内，就会自动落在最佳上车点上，降低了操作的难度。
4. 推荐上车点的作用（为此滴滴还做了H5和一组漫画）： 让不了解街道名称的用户（路痴）能根据上车点和司机更好的沟通（可以节约很多废话），司机更方便找到用户。
5. 滴滴十分重视推荐上车点的新功能推广，体现在有专门的H5页面，以及在微博和微信上用一组漫画做宣传。
6. 一开始最佳上车点只是显示，让用户去自己拖拽，让用户有去探索学习的过程；到后来应用启动后，直接将绿色图钉放在了距离我当前位置最近的最佳上车点。
7. 在地图上拖拽试了一下，最佳上车点的数据还是挺全的。

     嗯，有关滴滴的第一篇分享就先到这里，欢迎小伙伴们提出宝贵意见～