首页 > 科技 > IT

轻“装”上阵,从“心”出发—滴滴全新设计背后的故事

IXDC 2016-12-02 20:16

本文来源:CDX创意设计中心IXDC获授权转载写在前面作为滴滴的用户体验设计师,我们一直在不断的探索,滴滴这款“工具类”产品,应该以怎样的形态去面对用户。'...

本文来源:CDX创意设计中心

IXDC获授权转载

写在前面

作为滴滴的用户体验设计师,我们一直在不断的探索,滴滴这款“工具类”产品,应该以怎样的形态去面对用户。同在互联网行业、身边那些的小伙伴们都在给自己量身定制所谓的“调性”,苹果的逼格than逼格,豆瓣的文艺小清新,Airbnb的人文情怀,那么滴滴呢,小桔人也曾尝试过为滴滴定下的调性——“亲和、亲切”。是的,我们的用户上到花甲的老人,下到学龄的孩子,各行各业,无所不有,滴滴包容的面对所有有出行需求的用户,致力于为每一位用户提供更美好的出行服务。我们坚信,“是工具,也可以有情怀!”。调性不是在一朝一夕间形成的,在当下,“简单”“好用”“高效”是基础,所有的设计实验与探索都将会在这个大前提下开展,在这个基础上传承着“亲和与亲切”,也尝试着渐渐表达出滴滴气质的调性与情怀。所以,5.0的设计主题不会偏离“简”的基本原则,希望不造作,不虚张,能轻浅的透出滴滴设计这几年沉淀出的味道、与用户分享交流。

1.设计准备

    1.0到4.0

    从1.0开始,滴滴以一个接地气的老北京出租车形象出道,服务了第一批用户;从看起来并不是那么专业的互联网产品到2.0的形象升级,滴滴的产品与设计的专业性越来越强,渐渐的为用户和行业认可,也历经著名的“快的大战”成为国内出行类产品的老大;致力于实现“让出行更美好的愿景”,3.0后我们新增了价格亲民的快车和高端舒适的专车,产品也适应新业务的增加更具有包容性、扩展性;4.0后公司业务快速发展,用户飞速增涨,乘客端几乎同时新增了包含顺风车、巴士、代驾、试驾等在内的多条业务线,随之,产品架构和页面布局在4.0有了重大的调整,统一是基本原则。

      4.0到5.0

      产品服务于业务,公司业务飞速扩展。不得不说的是,4.0的实现是有遗憾的,“统一”的有些牵强,但为保证业务的快速发展,产品也需要快速迭代跟进,有时的不尽完美也不可避免。

      从设计服务于产品和业务的角度,5.0改版,我们要解决一些显而易见的已知问题,乘客端安装包的体量过大,已然领跑app store和各大安卓应用商店,这不符合工具类产品应有的“轻薄”的气质:如各业务线功能、操作各异,体验不统一,平台运营页和业务运营页不能和平共处、频频冲突;从让用户的出行体验更美好的角度出发,我们通过结合线上数据及用户反馈,将问题归类分析,而产出用户体验研究报告,在乘客体验出行的每一个节点发现潜在问题,并给予设计优化建议及方案。

      例如:下图就是通过收集之前版本的信息数据绘制出的用户体验地图。体验地图让我们可视化的观察到在用户出行的过程中,在哪些节点存在体验断层,可以从哪些方面去优化体验问题。例如:乘客接受怎样的价格梯度,他们是否能理解动态调价背后的原理,如何减少司乘双方的等待时间xxxx


      用户体验地图

      2.设计主导

      基于5.0前的积累与准备,我们的团队试图从设计的角度去推动5.0的全新改版,我们为5.0定了三个关键词:轻量化、体验统一、高效。

      1.轻量化

      目标是从App Store和安卓应用市场的最大包排行榜上走下来,节能减排、轻量化设计是5.0重中之重;

      2.体验统一

      各个业务功能与操作各异、体验不统一,思考如何为不同的业务形态提供一套统一的设计规则;

      3.高效

      再次分析用户在乘车服务中的信息获取和行为操作,重新梳理的信息层级,优化用户与产品的信息连结点。

      一、骨-交互框架层

      如今,围绕着“出行”二字,滴滴为用户提供了多样化的业务服务,如此丰富的服务类型都各有特点,每一个业务服务也都在为了追求更极致的用户体验不断的进行功能迭代。如何在让新的设计框架可以同时接纳包容这么多业务类型,保证体验统一,又尽量不去磨平业务的特点,给予业务一定的发挥空间,助力产品的快速更新与迭代;面对用户,什么样的设计语言可以既高效的传递信息,又能给予用户在使用过程中的良好体验,让操作流程更轻量化。


        横:抽离与布局-页面元素组件化

        我们从4.0发现,用户的整个乘车流程,都基本上可以被视为一个线性行为操作流,贯穿着服务筛选(一级业务删选、二级场景筛选);确认发单前的表单需求表达;等待匹配、等待服务、服务中的订单操作,如取消订单、一键报警、分享行程;以及全流程的地图操作及信息获取,运营消息及系统消息获取;然后是行程结束的支付行为;评价行为…

        下图是尝试着表达,贯穿于线性的操作流程中,用户与产品发生连结(信息传递与行为操作)的概念图。


        梳理用户与产品的连结点,从中抽离出四大组件

        一级导航和二级导航在不同业务标签下,位置不一致;表单的交互操作和使用体验不统一;给予用户的操作项样式各异、位置随机;运营消息、系统消息、司乘沟通消息分别有各自的传递入口;支付与评价页内容冗余…我们尝试着把之前想复杂的问题简单化,从用户使用app的真实场景出发,剥离到最本质,将所有的元素分解再重组,用户与产品交流与反馈的“连结点”用四大组件承载:

        A.筛选组件-对应用户的服务选择需求;

        B.卡片组件-对应全流程的订单操作及订单信息获取需求;

        C.地图组件-对应全流程的地图信息获取及操作需求;

        D.消息组件-对应所有系统消息、运营消息、即时消息获取及传递需求;

        1.筛选组件-(灵活、拓展、流程打通)

        筛选组件主要承载了一级业务导航和二级场景导航,以便于用户选择合适的出行服务。我们在分析研究的过程中一直思考如何减少用户理解业务、选择业务的成本,将用户的行为模型简化至直接表达“我要去哪儿”的出行需求为起始点,弱化业务选择或者更智能的判断用户需要的服务类别。所以我们希望筛选组件做的更灵活、更具有拓展性,在未来甚至可以打通页面流程,在用户感知用户需要时适时出现。

        5.0版本的一级导航还是沿用了4.0的设计思路,置顶于首页。而二级场景导航贴近表单卡片。设计的考虑在于用户,对单一业务的忠诚度是较高的,将用户对业务的筛选作为导航放至顶部位置,而用户对某一业务下的使用场景呈现一定范围的波动,于是将业务导航与场景导航分开放置,场景导航则更靠近于用户的需求表达卡片,便于用户操作。

         1 2 3 4 下一页 尾页
最新文章
猜你喜欢