交易详情页中的精益安全设计
关键词：交互设计，反馈与告知，交易详情
移动支付时代交易的产品，不仅包含可以使用物流运输的实体产品，还包含很多无实物性质的虚拟产品，例如游戏点卡、Q币充值、话费充值、购买电子书、理财产品、还信用卡、交水电费等，虚拟产品其实已经渗透到人们生活中的方方面面。在交易虚拟产品时，同样需要像实体产品提供一个票据凭证一样，为产品后面的追溯和查询提供支持，如图1-51所示。
图1-51 票据凭证
场景细节还原
问：“我在微信钱包上充了一次话费，过了一会钱没有到账，我在哪里能找到这个交易记录的详细信息，以便了解现在钱在哪里（交易进度）或者说有什么途径可以打电话咨询一下（服务途径）?”
答：“你可以在你的交易记录里查看相关进度哦。”
在这个场景中提及的交易详情页出现在交易发生之后，一般从交易记录中可以查询，不同的支付场景中商品的记录详情不尽相同，如图1-52所示。
图1-52 交易详情页
微信为了精简钱包中产品的层级，不在产品中提供详情入口，一般将详情放在平台上或者是产品本身的公众号中。微信的转账和手机充值都没有在产品中直接提供查询充值详情的入口，转账依赖于平台充值详情，而手机充值的详情放在产品的公众号中，如图1-53所示。
图1-53 支付宝转账、充值详情页
支付宝采用平台产品复用账单详情页的做法，所有产品中虽然提供了查询记录的入口，但是跳转详情页的时候还是跳转到账单中，这种页面的复用保证了详情页设计的统一，如图1-54所示。
图1-54 手机QQ钱包的转账和手机充值详情页
手机QQ则从产品本身用户使用的场景出发，支持内嵌的各个小产品定制自身的详情页，这些详情页承载了用户当下最希望看到的产品信息。
一个详情页可以解决什么问题
以上对比了微信、支付宝和手机QQ三个平台对同一类产品的详情页处理方式，可知详情页中的信息分类要解决以下重要问题：
●提供操作反馈状态/对用户的请求操作进行一个明确的状态提示，这个状态可能是已经完成也可能是等待中或者操作失败；还可能涉及付款金额、优惠金额等明确的金额提示，如图1-55所示。
图1-55 详情页
●详细商家信息/提供商品（或服务）的商家名称以及交易的商品信息，如图1-56和图1-57所示。
图1-56 支付宝中校园一卡通服务商家信息
图1-57 微信零钱支付的滴滴出行的商品信息
●详细订单信息、详细的订单号、订单发起时间等本次交易的重要信息记录，在发生服务问题涉及退款等操作时十分重要，例如，手机QQ钱包7-11消费订单信息，如图1-58所示。
图1-58 手机QQ钱包7-11消费订单信息
●吸引再次购买。为客户成为回头客提供诱因，在客户已经消费的详细页面促使客户再次光顾的可能，如图1-59所示。
图1-59 微信理财通收益详情页促进购买理财产品
●客服咨询途径。这里的客服主要指的是虚拟产品的售后服务，客户购买了产品之后，一切跟产品相关的使用、退换等连带关系的服务都属于虚拟产品的售后服务范围，在详情页为客户提供售后服务入口是非常重要的。例如，微信支付转账成功客服途径，如图1-60所示。
图1-60 微信支付转账成功客服途
●其他特殊需要。这里的特殊需要可以是自己定制的服务进度展示，也可以是服务的特别说明或者是服务的广告等。例如，信用卡还款记录详情展示了包括银行的第三方服务的进度，如图1-61所示，滴滴在客户支付车费后为自己的客户端运营广告，如图1-62所示。
图1-61 信用卡还款记录详情页
图1-62 滴滴打车付款详情页
简单兼顾安全，如何设计
详情页信息种类这么多，那么怎么来决定到底放哪些内容呢？这里列举一个最近做的在微信城市服务的“加油卡充值”项目的详情页。在微信钱包中为用户提供“加油卡充值”的线上服务，用户只需要使用已有的中石化加油卡号在平台线上充值，线下加油站嘀卡就可以获得到账金额，进行加油消费。详情页是放置在充值记录中用于查询的，支付成功后的充值流程如图1-63所示，从中可以得出充值详情页有4个：充值成功、等待到账、退款中、退款成功。
图1-63 支付成功后的充值流程
我们设计了第一版详情页，展示了操作反馈状态、吸引用户再次购买的途径以及加油站圈存机嘀卡的特殊说明，如图1-64所示。
图1-64 等待到账和充值成功的详情页第一版
这样就满足了用户查询详情页的诉求了吗？根据文章一开始的场景来设想用户查看加油卡详情页的场景：在平台上充了500元油费，充值支付成功了，赶紧到充值记录中确认一下钱是不是充进去了，充进去了是不是就可以直接在加油站使用了？
那么，哪些内容能够满足用户的场景需求呢？这其中用户最关心的也是最需要重点展示的是：充值状态、充值金额，而平台最希望提示用户的是：圈存机嘀卡。
于是我们尝试设计了第二版方案，重点展示了用户充值状态和金额，并且用图形化的方法来提示用户只有去加油站圈存机嘀卡才能使用充值金额；还提供了订单详细的商家信息，客服服务的途径以及“什么是嘀卡”的链接等，如图1-65所示。
图1-65 充值成功和等待到账的详情页面交互设计
接下来，顺着上面的思路再来看充值失败退款的情况。哪些是用户最关心和最有可能投诉的？我们同样来假设用户碰到这种情况的场景：用户充了一笔不小的钱（500元、1000元），充完了提示用户充值失败，他非常担心这个钱去哪里了。
充值跳转页提示他沿着原路返回了，那到底返回到哪里？返了多少钱，什么时候能到账？有没有人工服务可以询问？所有应该展示的信息，如退款的状态，退款的金额，退款所需要的时间，退款开始和到账的时间，退款到哪里，商户名称，商户单号，交易单号，客服电话等，如图1-66所示，其页面布局也应该与充值成功详情页保持一致。
图1-66 充值详情页退款中和退款成功页面
案例启发
充值详情页是一个很多产品都有的页面，也是很容易被忽视的一个细节页面。即使是这样一个细节的页面也应该从用户的具体场景出发去考虑筛选信息，以及展示和排布信息。
产品的整体体验是从一个个微小的页面体验开始的，著名的设计师Charles Eames说过：“细节本身并非细节，而是产品的精髓。”在产品的整个体验过程中，既要为用户提供当前场景的需求，又要进行巧妙的排列和筛选，给用户一种贴心的安全感，这就是体验的来源。