过去一个月，我从同事手里接手了购物车结算的改版工作，借机梳理了这两个下单环节的所有场景和界面细节。
这次UED推行的设计改版，既有“设计先行”的天然优势——可以完全地把提升用户体验作为目标，同时也有着难以落地的苦恼——尽管事先安排了开发评审，设计稿交付产品和开发后，实现困难、排期紧张等原因还是不断拖长了战线。设计师需要反复地校稿和沟通，“改UI不改接口”常常阻碍改版的进行，而日常版本需求的并行也消耗了我们大量精力 >o< Anyway, 我们还是尽力优化到最佳，虽然结果看上去变化不大，设计和争取的过程却是值得我反思的。
这篇总结包含了「改版背景」，「前期分析」，「设计过程」，「方案细化」几部分，后期有上线数据也会加上「数据反馈」「问题总结」来收尾。
一、改版背景
购物车结算在电商平台的作用不作解释了，改版主要基于设计师的业务经验、当前用户诉求、设计风格走向和产品策略来进行。例如，优化点可能来自于业务重点转变造成的功能冗余，对可能发生误操作的及时减损，完善一个步骤前后的路径引导，等等。
二、前期分析
前期我们对产品自身的购物车功能设计做了走查，并与其它的电商平台作了比较：
我们得到了一些论点：
- 相比其它平台，唯品会下单线比较冷静寡淡，抢购气氛不浓烈；
- 购物车和结算对比商品详情，更要减少用户犹豫、加速转化过程，应该去繁从简地设计，区分信息层级，将关键信息清晰展现给用户。
而更多的优化和落地建议则来自产品经理，他们掌握了大量用户反馈，并给我们提供了产品策略角度的意见。我归纳了以下几点：
- 填错收货信息仍是用户取消购买和咨询的一大原因，需要优先展示和提醒用户核对收货地址。
- 海淘订单中的支付方式需匹配支付人信息，而用户常常选错填错、被海关退回，增加了很多退换订单，降低购买效率。因此需要提示用户正确填写。
- 线上购物车商品的价格和名称并列一行，价格不够明显，希望可以和淘宝、京东等平台对标，将价格另起一行展示。
三、设计过程
前期分析并非定论，方案是在设计过程中一步步得到完善😉
三点一、购物车
购物车氛围
新页面将根据不同时期展示不同的氛围样式，分为“日常”和“大促”两种，大促图案可根据具体促销氛围（双11、周年庆等）进行配置。标题文案放大、居左，释放更多空间，让页面名称与倒计时更醒目。
购物车商品
新的设计放大了商品图区域，用趋势下的方图代替长图，并突出价格/活动标签的优惠氛围，根据产品策略移除了专场信息。所有元素采用圆角处理。
我们对商品信息尝试了重组，做了两个样式：价格继续与名称同行排列，以及价格另起一行、与上方左对齐。两样式各有优势：
考虑到价格确认对用户成功下单的影响，我们选择了左右结构，让视线寻找更明确。
赠品信息
作为附赠，赠品依赖其它商品存在，在概念上和用户主动加购的商品有区别，而当前并没有做明显的区分设计。新版中我们把所有赠品归为一类（底色区隔），文字图片均做了弱化处理，使信息优先级更明晰。
优惠券使用
在减少派发优惠券的策略安排下，需要减少用户“我有优惠券用吗”、“用了几张，是不是最优惠”的犹豫，加速下单。
新版将三个状态分开表示：无可用，已选择，有可用而未选择。当已选优惠券时，自动选择最优方案并显示“已选推荐优惠”，省去外露的券，少冗余。有可用未选择时，露出“x张可用”提示用户进入操作，比原先的“使用优惠券”按钮更具可视性。
三点二、结算页
收货信息
我们发现有多个收货信息的用户，很多情况是收货人相同、地址不同，也就是“寄到公司or寄到家里”的场景。即使选的收货人无误，地址也可能有误，因此详细地址可以帮用户更准确地确认信息。
因此，我们把省市区和详细地址分离，突出展示详细地址，收货人放在了地址下方。由于快递员尚未做到按用户想要的时间送货，我们去除了收货时间字段、以免引起不满。
视觉上从反色变为白底黑字，用邮寄、信封等符号来关联“地址”概念，表达更清晰、明快。
切换地址流程
当用户设置了默认地址，结算页会默认选中展示。然而，我们发现增加“设置默认地址”功能后，用户不会用或懒得用，常常需要切换地址的麻烦还是没解决。
因此，我们在切换地址中增加了逻辑：当频繁或连续跳转选中某一个地址时，询问用户“是否把它设为默认地址？”，让用户行为来触发对用户意图的推测，减少他们认知和操作的难度。
海淘支付人与支付方式
误填海淘支付人是通不过海关、造成退换的一大原因，有两方面造成：支付人身份证号与姓名不符，和支付方式不在支付人名下（支付人张学友，而用刘德华的银行卡支付）。前者我们可通过添加信息时的即时验证可以降低，改版企图减少后者的发生。
可以看到，原支付方式在应付金额下方，视觉动线需要经过总金额、唯品币、唯品卡的层层确认，最终落在支付方式的金额上。新版将支付方式提前到支付人下方，呼应支付人模块的文字说明，用位置的接近传达信息的相关性。
我们曾想要把修改符号统一为支付方式中的“…”，但海淘订单的清退风险需要引起用户足够重视，考虑到用户群体对可操作性的认知水平，最终我们保留了“更换”文字按钮。
目前支付方式有2种：在线支付和货到付款。策略上我们更推荐用户使用在线支付，原先箭头下拉的方式有些繁琐和占地方。新版改为了外露一种支付方式，点击卡片则弹出切换浮层，和其它模块保持一致。
唯品币/唯品卡抵扣
唯品卡、唯品币是会员购买的和浏览、下单等行为产生的代币形式，付款时可以抵用。当前这两个功能有一些需要改进之处：
- 未选中时，项目右端也显示金额，容易被误解为增加或扣除了款项；
- 金额计算优化后（见下方），唯品币唯品卡会在小计中再次出现，会让用户以为扣减了两次；
- 随着业务倾斜，唯品卡使用变得很少，而“添加唯品卡”按钮较明显，有时独占一行；
- “唯品币不可用”时未向用户解释原因。
因此，我们考虑了信息的易读性和有效性，将：
- 可抵扣的金额直接放在文案中，将“选择操作”与“明细清单”区分开；
- 简化文案表达，添加按钮放在一行内、减轻比重；
- 根据情景增加“帮助”按钮，解答用户疑惑。
金额明细
金额明细是信息结构中改动最大的部分了。
原来的应付金额包含了商品金额、运费、优惠券、活动优惠（满减等），唯品币和唯品卡抵扣放在下方，而在支付方式中展示了抵扣后的最终付款金额：
这样的金额其实计算了两次，总结了前页的小计后又核算了一次抵扣信息，“应付金额”并不是真正所付金额。
“如小票般清楚明晰”。确认了这样的原则后我们提前展示了唯品币、唯品卡的操作项，去除了应付金额标题，在其中合并了所有计入付款的款项，包括唯品币、唯品卡。原本需点击展开的信息也变为自动展开，让款项一目了然。
“实付款金额”脱离了付款方式，而是在提交按钮的上方突出显示，与即将发生的付款行为充分结合。
这样，用户最关心的金额核对做到了两点优化：金额统计和总结前后一致，信息表现简洁清晰。
支付成功
现有的支付成功页，点击左上角按钮或侧滑，统统返回唯品会首页，引导用户重新浏览挑选好物。
然而对于单商品的订单，如预约抢货和预付商品，用户选购、确认的时间更短，完成订单的速度更快，支付成功后更应回到下单前的页面，继续刚才的浏览，而非回到首页、中断刚刚的操作。因此我们在流程中增加了这一判断：
四、方案细化
卡片式风格
在改版初期，视觉风格并未确定：是延续通栏样式，还是将各个模块卡片化。
虽然整行打通能容纳更多文字、缩短页面的长度，但购物车、结算页的信息零碎，需要用户逐个确认，而拟物化的卡片让信息聚合度更高，更容易理解为可操作的整块区域。因此我们采用了右边的卡片形态。
上滑、刷新效果
改版前几乎所有页面的标题栏都是正常高度。新版的大标题在页面上滑后置顶就显得太过明显，妨碍信息阅读，因此我们让它上滑后渐隐，同时渐现正常高度的标题层：
同样，旧的刷新动效在标题栏下面出现，而新的标题和下方配送、通知不适合拆散，因此loading放在了整个页面的上方：
最终呈现
购物车、结算页是app第一块采用新视觉风格的部分，在一些组件的设计上替换了原有的设计规范，希望能为后面其它改版开一个好头。
感谢下单线大总管亚洲和耐心的视觉同事李鹤、爆爆、乐乐，在整个设计和开发跟进中付出了巨大努力，比心💓
