滴滴这个页面，设计有失水准了

# 为什么我要搞TA！

• 最近国内油价这是一涨再涨，每次油少就焦虑，这不我又来加油啦~因为加油滴滴比较优惠，平常用得多一些。

• 所以关注滴滴加油页面存在的一些问题，今天对这个页面在原有的功能和逻辑做一些视觉和交互上的优化。如有不足，请大家多多指证。

我们先看下这个页面到底长啥样，竟让我这么不喜欢？

从上图可看出，油站列表进来，就是上图最左边默认的页面，页面标题叫“订单确认”，基本链路为：选择油枪-选择油号-选择(或输入)金额，会出现优惠信息-选择优惠券-去支付-完成。

从表面上看好像没啥大毛病，听我下面细细说来。

# "七罪" 难平我心头之 "恨"

1. 页面名称叫“确认订单”，其实就很懵逼。我还没下单呢，确认订单是什么意思？

   
   

2. 最右侧的页面，当时不知道怎么操作的，页面标题变成优惠券，可能是bug，后来操作没出现。

   
   

3. 油站信息下面的“#95”油号，显示对应的油价信息，当切换对应的油号，下面“我要加油”对应的油耗选择也变动了，这是什么逻辑？可能我只是看看不同油号的价格详情而已，并非加油时就是刚切换的油号。

   
   

4. 油站信息在上方，而“油站详情”却在下面和“我要加油”同一个tab层级，这是什么逻辑？而且我看“团油”App也是这么做，感觉互相抄了个寂寞。

   
   

5. 因为“选择油枪号”和选择“油号”是联动的，当点击“选择油枪号”弹出的弹层，先选的是油号？且油号选择用左右tab展示，在对应油号选择下方展示对应油枪号，一定要选油枪，如果选择了油号，没有选择油枪，就没办法确定。可以说很懵逼好么

   
   

6. 加油优惠券的“限时优惠”这条，每次都不知道怎么点(上图最左图)，存在的意义其实并不大。

   
   

7. “合计优惠”和“已优惠”，为什么要用两个不同的表达方式迷惑用户？其实是同一个东西。

# 且看我如何搞TA！

1. 加油链路优化

   进入油站—>选择油号—>选择油枪—>选择优惠—>去付款
   

   
   

2. 信息层级规划和调整

   A.提升评分层级，增强用户信任感

   B.调整油站详情和油站基本信息融合，使页面逻辑更顺畅

   C.油号和油枪选择拆分，分别选择

   D.优惠模块信息整合

   
   

3. 品牌融入

   A.品牌色的适用

   B.场景化的融合

   
   

4. 加强优惠信息的引导

   A.优惠券在优惠模块中引导

   B.优惠券在按钮上方气泡的强引导

   
   

第一招，且用三层功力：

其实这个方案梳理了以上存在的问题，做了重新排列组合，把相近的内容整合放在同一个模块，比如：

1.油站评价和评分整合到顶部和油站名称同一个模块；

2.加油号和对应价格信息；

3.优惠券整合等；

这样调整使页面结构更加清晰。

另外，加入品牌色的融入，作为页面头部背景，使页面更加沉稳。

点击可看大图 ↑↑

做完后发现，页面还是不太好，主要是没什么特点，页面比较普通，且页面还有优化空间，请继续往下看。

第二招，用五层功力：

1.在上述方案的基础上，做了通过对油站评分的强化，标签化凸显油站高评分，优评价，增强用户对于油站的好感度和信任度；

2.在按钮上方增加优惠券等权益的气泡提示，更好地引导用户，可提升转化。

点击可看大图 ↑↑

这个方案做完发现，还是感觉不太合适：

1.浅色的背景反而没有第一个方案稳重，评分位置和长油站名称会重叠；

2.页面显得比较平淡，比较难吸引用户；

3.优惠券的使用，是引导去开通会员才能使用，对于一些不太喜欢开会员的用户比较难接受，不想开会员，会流失一部分用户。

第三招，八层功力 放大招：

1.增加油站场景图片信息，让每一个油站有独立形象，具有品牌感；

2.放大油站评分占比，减少用户选择油站决策时间；

3.强化优惠券引导：优惠券的使用调整为“立即使用”，从文案表达上减少用户开会员的心理负担；

4.优惠券链路的优化：点击按钮以及上的气泡后，将跳转至支付页面，支付页面带出开通会员的信息，支付成功即开通会员，从操作上减少用户操作，从业务上提升会员开通转化，提升用户体验。

点击可看大图 ↑↑

# 最后总结

设计的最终目的是为了服务业务，三个方案经过分析得出结论：

1.第一个方案仅限于视觉层面，排版布局，信息整合

2.第二个方案的设计凸显了权益和会员开通的信息，但是没有考虑到用户心理对开通会员这件事的接受程度

3.第三个方案，缓解了用户对于开通会员这件事的焦虑心理，通过限时优惠券等信息引导下单转化