Weekly Redesgin#4 中国移动客户端——降低用户操作成本

中国移动app为工具类app，用户可用它查看套餐，办理业务。在重设计之前，我采访了7位中国移动移动app用户，让他们列出平时最常用的中国移动app的三个功能，并将三个功能从最常用到最不常用进行排序。得出的结果如下：

用户调研结果

从调研的结果可以看出，绝大部分用户最常用的功能是查看流量余额，其次是查话费、办理业务等。因此，针对调研结果，本次redesign将用户最关注的流量余额、话费和话费余额放到首页，让用户一打开app就能看到，省去任何的点击操作，快速满足用户查流量余额、查话费和话费余额的需求。

首页设计（左：redesign前；右：redesign后）

移动应用的使用场景往往是注意力不集中、干扰多、吵闹的环境，因此点击区域要尽可能大，降低用户的点击成本。因此，在首页功能入口的设计上，我将圆角图标改为方形可点击区域，占据屏幕四分之一宽度。视觉上看，点击区域比原来的圆角图标扩大了一倍，大大降低了用户的点击成本。

在业务办理页面，原设计采用垂直tab的形式进行切换，每个选项的高度较小，点击难度较大（如下左图）。考虑到用户要办理业务时往往非常清楚自己要办理的业务类型（如基础套餐、流量加油、短信包等），因此不会频繁的在多个入口之间进行切换。因此，本设计第一版将原设计的tab两级拆开来分别放在两个页面，如下中图所示，并且上方放上活动banner，以提示用户最近办理哪些业务有优惠。被单独放在一个页面的入口点击区域更大，更方便用户操作。

业务办理（左：redesign前；中：redesign后第一版；右：redesign后第二版）

然而，这样的设计降低了用户对每种入口内容的感知，只有点进去才知道每个入口到底包含了哪些业务。再考虑到每个入口中用户常用的功能类型也不多，不妨将较常用的功能提出来和入口放在一起，如上右图第二版所示。这样用户要办理比如“长漫定向优惠”业务时就能快速发现入口，少一步点击操作。在视觉上，为了区分不同的业务模块，在每个模块上方用不同颜色的边界线进行区分。

充值页（左、中：redesign前；右：redesign后）

在手机充值模块，原设计信息多而杂，分布分散，没有重点，如上左、中图所示。底部的三个充值活动是单选，只能三选一。充值活动中，“开通易充值”实际上在快欠费时自动扣款10元进行充值，不太适合这个手动充值的场景。而最后一项“放弃优惠”显然不太可能有用户选择，无存在的价值。原设计点下一步进入下一个页面，选择支付方式。对于用户而言，支付方式一般是固定的。比如我，一直用支付宝支付，而有些用户则固定用某个银行卡支付，所以支付方式只显示一种就行。

我的设计将支付过程的两个页面合二为一，将充值活动的选项全部去掉，将打折优惠直接列到每个充值金额下方，让用户一目了然充值优惠额。顶部的tab控件变换为下划线的形式，允许用户左右滑动页面来切换tab，而无需点击那个小小的tab区域。支付方式只显示一种，点击可切换不同的支付方式，默认显示用户上次的支付方式，减少用户的思考。

原设计的促销页

最后，在原设计的促销页，顶部的tab有图标对应，这样的设计增强了各个tab内容被感知的能力。相比于没有图标的tab，用户更容易感知到有图标的tab的存在。然而，原设计中没有在感知能力和占用空间之间做好协调，用户浏览页面时，该tab依然固定在顶部，占用了屏幕的许多宝贵空间。并且，原设计的tab只能通过点击切换tab，而不能通过滑动页面进行切换。我的设计将采用一种动效来解决顶部tab占用空间的问题，同时不破坏该tab的被感知性。如下gif所示，用户往上滑动页面时，tab的图标收起，仅留文字部分。当且仅当用户往下滑并页面滑到头的时候tab的图标重新出现，这样既保留了图标也不会占用太多浏览空间。同时用户可左右滑动页面来切换顶部的tab。

重设计后的tab动效

总结：

本次重设计中，降低用户操作成本有几个要点：1. 增大可点击区域；2. 用宽泛的滑动手势代替精确的点击操作；3.不要一次性呈献给用户太多信息，而应当一步一步地给出信息引导操作完成；4. 顺着用户的使用流程进行设计，在合适的页面给出合适的入口；5. 采用动效为用户提供不同情境下同一个界面的不同状态。

===我的公众号 “BaolingUX”，欢迎关注交流====