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

苏宁专属商城丨版本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位为各地自设的顺序码。这里同样可以使用实际通用的规律来提高用户填写。空格在数字呈现处的应用虽然细微，但是在长数字的阅读场景中仍能给用户带来识别便利

► 操作流程标准化，实现功能流程最优解

以认证增票资质的流程举例，需求初期我模拟了手动输入认证流程

分析手动填写信息所花费的时间较长，大约5分钟左右，虽然资质只需一次认证，但对于整个发票管理项目来说，这却是加大了用户的心理负担，出于这方面的考虑，我主动与开发进行了沟通取得支持。以缩短体验路径，缩短录入时长为首要目的，通过上传照片的方式读取营业执照上的信息，并且保证企业信息的安全。

通过识别上传营业执照照片，可快速完成审核，并且避免了手动填写带来的错误还需二次审核。

尽量避免产生引导用户离开当前页面的填写，跳转页面很容易打断用户固有的行为轨迹。因此运用浮层是填写表单过程中最佳的辅助采集信息体验流程

► 建立容错机制，及时反馈当前问题及原因，并引导用户解决当前问题

• 错误补偿

出于发票管理流程的特殊性，填写表单过长，填写内容繁琐等因素，如果在把所有内容都填写完成后再提示错误项重新填写，这时用户心理已经产生了抵抗心理，所以对于错误的步骤有合理的引导以及及时的提示，使其回归正确，并且提示用户及时修改，以免影响后续流程。

• 情绪安抚

当面临不可逆的错误时，有效的情绪安抚也是至关重要的。当用户在填写表单的过程中，突然遇到了网络问题，最在乎的应该是刚刚自己费尽填写好的内容是不是会受到影响，所以面对这样的突发情况，我选择了弹窗提醒样式，这样既可以提醒用户不必担心填写的内容消失了，又可以用文字的魅力安抚用户的情绪。

• 品牌信息传达

为了降低用户在填写表单过程中会出现烦躁不安的心情，在框架信息整合的基础上，减弱表单填写页冰冷感，将品牌功能化，辅助产品以深化品牌用户心中形成立体感知。

当然品牌功能化的融入也需要有所限制，此次我们主要从氛围、控件、操作、提示这四个方面展开，在不影响表单主要信息呈现的基础上，遵循适度、适量两个原则。

—

为了验证上线后的体验是否达标。我们做了一份系统可用性量表(SUS)进行评估。从数据来看，评分达到80分左右，用户体验达到了合格的标准，完成了需求初期制定的任务。

—

2019年中旬我接手专属商城项目，发票管理是个临时需求，需求上线周期非常紧张。但绝不影响我在专业能力上的努力。

用户体验的提升往往需要依靠像发票管理这样一个个微小的需求作为突破点，来影响整个产品设计。在设计过程中，我都在尽最大的努力通过思考每个细节来完善用户体验。

← Back to projects