header_v0.7.32

滴滴打车3.0改版 轻装出发

3年前发布

原创文章 / 多领域 / 观点
滴滴出行CDX 原创,如需商业用途或转载请与滴滴出行CDX联系,谢谢配合。

本次3.0的改版在交互和叫车主流程上并没有做太大改变,只是在视觉和信息层级上做了全新设计,使整体视觉感轻便统一,易与操作,同时迎合了IOS7扁平化的设计风格。

本次3.0的改版在交互和叫车主流程上并没有做太大改变,只是在视觉和信息层级上做了全新设计,使整体视觉感轻便统一,易与操作,同时迎合了IOS7扁平化的设计风格。界面信息层级的减轻是为了承载更多信息和内容,除了表达主需求外,需要有更多的内容和服务来满足不同层次用户的需求。


这次改版的预期:用户能轻松表达自己的主需求,叫车体验无阻碍感;在不干扰用户表达主需求的同时,增加便捷的辅助操作需求,促成更多订单成交;视觉交互平静、柔和,使应用体验更加轻松高效。


理清视觉层级


IOS7的设计宗旨如Jony Ive所说“真正的简约远不只是删繁就简,而是在纷繁里建立秩序”。

本次改版清除掉了一些没有必要的拟物及投影效果,减少页面的层次,使页面布局更加一体化,主要的信息最快传达给用户;主色调以白色为主,橙色作为品牌色体现在页面中最重要的信息及操作控件处,传达品牌的同时,适当的留白能给页面一点呼吸,以达到平衡。


在使用过程中,最重要的是让用户表达“在哪?要去哪?”信息;当前位置可通过网络自动获取,第一时间清晰明确的告知用户即可,因此气泡并没有完全扁平化处理,用投影拉开了与地图之间的距离,从而高于地图信息之上;接着需要用户表达去哪里,在界面中处于易操作的位置,用了比较显眼的按钮,按住即可语音叫车。其它辅助功能,文本切换、预约、司机信息、菜单、地图回归原点,均为用户表达次级需求,界面视觉层级靠后,采用交互和视觉语言来解决信息层级。


同样,在确认需求页面,加价、捎话均为主需求之外的需求,利用交互的切换,能及时在当前页面处理加价,视觉层级上与主操作按钮区分;等待应答页表达完主需求等待司机抢单时,只有再调整加价、捎话需求后,才出现确认按钮,减少页面无必要操作按钮,让用户集中注意力,专注于目标任务来进行一系列操作。


一页到底


地图贯穿在整个叫车的主要流程中,蓝点气泡为展示用户信息的窗口,同样贯穿在叫车的流程中,用户的主需求表达会在同一页面切换不同状态完成,使每一个状态平滑的连接,减轻页面的转场。


完成整个打车需求后,支付与评价的设计也同样在一个页面完成,需要支付的时候出现支付框,支付完成后依然在当前的位置显示支付结果;滑动评星按钮,页面上移展现输入框,输入完成后,页面下移退回到原来位置。每一个页面的元素登场与消失方式都是连贯的,用户在操作时感受更加一体化,减少每一步操作的不必要干扰。


寻求平衡


按照IOS7的设计语言,页面的元素整体拍平后,我们用来构建信息层级关系和视觉表现方式就会减少,用低对比度的视觉元素来表达页面元素之间的关系也遇到了一些挑战;彼此之间的差异性会有所降低,比如在等待接驾页面,师傅的信息没有用高对比度的颜色做以明显的区分;支付与已到达的按钮很容易和地图混在一起,用户很难立刻找到。


针对这些问题,我们做了重新思考,以高对比度色块来区分司机信息,会给页面带来很强烈的割裂感,破坏了页面的整体性;给支付与已到达按钮加一块底色来分割地图,又会减少地图的可视范围,同时使页面变的不通透。多次尝试后,采取了给控件元素增加投影效果的方式,拉开与地图之间的空间,在保持页面整体风格的情况下,提升控件的可操作性。


根据页面的层次需要设计了不同层级的辅助图形,菜单采用线性icon让页面变的更轻,通过菜单的文字信息直接传达给用户;辅助功能按钮采用实色面的icon,以至于在地图信息及页面信息中准确找到。


把现有的界面元素过渡到IOS7整体设计语言适配,不仅是满足于ios7,更多体现在清晰的层次关系上,让用户更易于操作,更便捷传达用户所需的信息,以便让用户知道他们在叫车时首先应该做什么,让用户的注意力集中在最优先的功能上。

最终,呈现的效果和动效细节还有一些不完美的地方,比如各元素之前转场的统一化思考、切换状态的缓冲动效,以及更加新颖便捷的叫车体验;还好我们一直怀着“让出行更美好”的信念,任在不断迭代和优化交互体验。如果可以,不妨体验一下,看看我们的改变,更希望大家吐槽出不爽的点。


52

    文章信息

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

    提示文案

    提示文案

    提示失败
    提示成功