设计驱动｜移动端电商发票中心的分析与设计

苏宁专属商城丨版本2.23

移动端发票管理项目丨Designer Hubo

经业务反馈，客户在发票开票过程中，希望专属app可以支持发票中心管理功能

Location: BEI JING

地址：中国，北京，慈云寺苏宁生活广场

任务分析

—

经业务反馈，部分客户希望专属app可以支持发票中心管理功能。

通过对专属商城客户实际走访发现以及与业务方的沟通，较多公司都有相同的需求，除了因公司内外网进行物理隔离无法及时开具发票的普遍因素外，还存在着诸多问题... 1. 周围环境较乱，扰乱填写繁琐的文字内容以及网络较差时，已填好相关内容却无法进行下一步操作； 2. 开具发票本身需要确认或填写的内容过多，由于移动设备电子屏的限制，却导致了开具发票的过程效率降低； 3. 部分客户有开具增值税发票的需求，根据政策，商城需对该企业及账号进行资质认证，如果通过企业部门配合交涉或PC认证，又加大了时间成本；

设计目标

—

为客户展现自助合并开票、查看开票记录和发票核对等基本功能以外，我们还应该为客户做更多。

1.提升开票填写效率，合理安排填写内容； 2.操作流程标准化，实现功能流程最优解； 3.建立容错机制，及时反馈当前问题及原因，并引导用户解决当前问题；

设计产出

—

► 提升开票填写效率，合理安排填写内容

既然需求是发票中心的功能实现，那么一定不能脱离用户对于发票的传统认知。

可以看出传统发票中的排列方式无法借鉴，不适用在移动端的设计当中。这时，让我想起了在香港的购物体验，在香港的购物发票与大陆的样式不太一样，这给我带来了一些思路。

如下图，纸质发票从上至下，分别罗列了发票中反馈的信息。虽然纸质发票是设定好的模版，最后机器进行打印的信息基本都是错位的，但是港版纸质发票的结构给了我很多启发。

清晰的信息层级，能够从视觉上降低用户的识别和认知负担。通过对纸质发票的分析，进行拆解和归类，梳理出了三个层级的服务项；

回归线上，与实际业务进行结合。通过合理的信息层级和文案颜色区分以及模块间的区域间隔，确保信息层级清晰易可识别。这里还可以做到强化用户对产品的统一认知，同时也为未来场景奠定扩展基础。

当我们的用户在填写过程中，由于必填项相比较多于先填项，所以我采用了隐藏星号标记。主要是为了，减少视觉噪音，增强在填写过程中的易读性。

对于一些常用的号码字段，可以采用实际通用的数字组合规律帮助用户阅读和记忆，例如电话号码，或者银行卡号。

苏宁专属里的纳税人识别号较为特殊，国家税务总局下达的纳税人代码为15位，其中：1—2位为省、市代码，3—6位为地区代码，7—8位为经济性质代码，9—10位行业代码，11—15位为各地自设的顺序码。这里同样可以使用实际通用的规律来提高用户填写。空格在数字呈现处的应用虽然细微，但是在长数字的阅读场景中仍能给用户带来识别便利。