通用高转化体验设计策略

文/周俊俊

关键词：交互设计，信息扁平，转化率，体验规模，彩票

Tab形式是一种能够为大量类似的结构化数据提供简单的页面展示形式，同时不需进行页面跳转的扁平化导航设计，类似于PC端的模块选项卡、标签页导航等设计形式，广泛存在于移动端的页面设计中。研究表明，每一次页面的跳转，转化率就会减小10%；页面的跳转会导致用户流失，因此，保证转化，简化体验层级，这对线上金融产品来说尤为重要。

追求转化的第一步：让信息扁平化

信息扁平化即较少的信息层级关系，也就是在交互过程中，用户通过较少的页面跳转就能找到想要的信息。Tab的设计形式就为用户减少了一级页面跳转，使得信息趋向扁平。

在交互范畴内所指的信息解构，如图1-67所示，在这个立体树形结构中，Z轴表示信息的深度，即链接的信息层数；底层页面包含的页面总数被称为链接的广度，即Ⅹ轴，信息的广度；Y轴一般情况下只有一层。手机设备有限的显示区域限制了信息展示的广度，在信息结构中应尽可能减少Z轴的信息深度，即能够尽可能使信息扁平化，如此繁杂的条件限制和信息内容，为使用户不在“返回”操作中迷失，不在页面跳转中流失，移动端金融产品设计中尤其需要信息扁平化。

用Tab（标签卡）来减少跳转

Tab形式可以将产品包含的所有内容进行清晰分类，一目了然地为用户呈现应用的内容范围，方便概览与跳转。

如图1-68所示，同样的代币充值流程设计，图1-68（a）所示的金豆充值因法务原因需要4个操作页面才能完成。而图1-68（b）所示的点券充值仅需两步操作即可实现。除去游戏本身和充值需求的影响，就充值流程本身而言，后者的转化率一定优于前者。

位移和重叠，提升页面利用率

Tab之外，也有许多其他的设计形式有助于信息扁平化。若要减少页面的跳转，在信息广度一定的情况下，单个页面就要承载更多的内容，重叠与位移具有同样的作用，把关系紧密的信息放在一个区域内，以增加页面利用率。

图1-69所示的是同一个应用的不同版本，版本一为传统的页面跳转交互形式，页面1用于选择题目，页面2用于查看题目详情并进行操作投注，然后弹层提示是否投注成功。迭代后的版本将所有页面整合为一个页面，采用局部状态切换而非页面跳转的交互形式。值得注意的是，这样改版后上线一周，用户次日留存提升68%。

常见的位移和重叠形式还有很多，例如Banner轮播、信息轮播、固定区域局部信息切换等。其中重叠利用比较好的是淘宝产品详情页，它可以快速查看图片轮播，其设置合理且利用率高。

快捷通道，直达目标

在页面中设置快捷通道，可以打破移动端必须原路返回的路径，减少页面跳转。应用过程中在我的金豆区域增加充值的快捷通道，能够让用户在需要充值时通过点击“+”快速唤起充值模块，完成充值操作，如图1-70所示。而非通过“返回”操作先退出应用，回到首页，找到充值入口，再进行充值操作，如图1-71所示。

产品中还经常可以在流程的最后一个页面看到诸如“继续投注、返回首页、去充值、查看记录”等按钮信息，可以在图1-71所展示的流程中，通过点击“返回限量抢抽”按钮快速回到首页，而非一步步返回。这也是信息扁平化的一种表现。

信息的提取与整合

有时候页面的跳转并非必须，在彩票产品彩种设计过程中，因彩票投注详情页中信息量大，一直采用的是先有投注记录列表页，再通过列表页跳转进入单个投注信息的详情页（如双色球详情页）。彩票停售后我们开发的新应用也一直采用此类设计（如题目竞猜详情页），但对许多应用来说，详情页并非必须，在题目竞猜的详情页中，与列表页信息差别极小，完全可以合并为一个页面，从而减少一级页面跳转，如图1-72所示。

任何情况下，操作的步骤越多，让用户思考的就越多，那么用户完成预设操作的可能性就越低。在彩票竞猜的不同应用中，因不同用户携带代币量各有不同，需要设置许多不同等级的额度以方便用户投注，从而造成页面信息冗余。迭代后的版本在前端展示上完全摒弃了这部分多余的信息，通过不同用户的代币携带量，自行匹配相应的筹码额度，代币携带量大的用户看到的页面展示的筹码额度也会相应提高，如图1-73所示。

案例启发

追本溯源，页面跳转多，交互步骤多，是因为前端要展示的信息太多。每个用户的需求都有所不同，多场景信息全部展示完全没有必要，产品自身能够做好的，完全不需要展示在前端让用户思考，这些或改变大局，或着眼小处的设计，都是我们在日常设计过程中使用过或者考虑过的形式。