最近做了一些复杂页面的优化重构工作，比如酒店预订+支付流程的重新设计，选择酒店和房型的流程设计，用户邮件模板的设计等，这类页面中包含许多繁杂的表单信息和数据展示，如何让布局更清晰、流程更简洁，减少用户提交过程中的困惑和痛苦，促进页面转化，帮助用户决策。在此记录一下思考的过程和成果。
原则
在阐述具体案例前先提炼出一些基本原则：
1.信息的架构是关键
IA(infomation architexture)帮助人们很容易的明白他们看到的是什么,并清楚为了实现目标我应该如何做。
因此，重构的第一步就应该梳理页面的信息架构，把属性相同的信息归纳整合，属性相似的信息放置在同一区域。
2.用网格系统布局减少无关信息干扰
将信息整理到一个统一的，有逻辑的grids里面会很大提升用户体验。使用合理的排版、区块划分和一致的对齐方式，会让页面清晰，也让用户更容易在其中找到需要的信息。
3.从用户的视角来考虑问题
一个数据设计的最佳实践就是，你的UI所表达的概念模型跟用户的实用时脑中的模型能够完全吻合。
在线上的体验、产品和服务通常都是某类一系列事件的交互，如果整个交互流程都与用户曾经遇到类似体验一致，他们会更容易接受。
4.用逐步展开的方法来管理复杂问题
将某种复杂流程设计为逐步展开可以使认知负担大量减少。
比如可以将非高频的操作隐藏在hover ，click，activated state之后，或者将原本在一页的大量表单划分为多个步骤，分步展示。
重要的是决定哪些操作是高频哪些是非高频，哪些信息可以被划分到一个区域或步骤。
实例
例1 酒店预定和支付
之前的预定全部都集中在一个页面，用户需要在这一个页面中填写大量信息，逻辑不清的堆砌表单会让用户失去耐心。
所以首先要做的是重新梳理信息结构，简单整理出目前很明显的体验问题：
pic1-AImindnode.png
这么多信息集中在一页显示，显然不合理，将新页面分为三步：
Screen Shot 2017-07-04 at 2.41.18 PM.png
房间信息包含的交互很多，比如增加房间，每增加一个房间，需要填相应的住客信息，住客还包含成人和儿童，如果儿童大于等于1，还会出现年龄等选项，所以单独做一个Part1填写房间信息；Part2是联系人信息，包含联系人和抵达时间；Part3不包含输入操作，只是让用户确认之前填写的信息无误以及展示酒店政策：如退款政策、儿童政策。提交订单后，选择支付方式和优惠券等。
优化后的结构如下：
flow
例2 用户邮件模板系统
当用户完成一些特定操作后（比如预定，支付，或者退款），需要给用户发邮件确认相关操作成功。
邮件流程图.png
通过整理用户操作流程，发现有四个时间点是需要触发邮件服务的：
- typeA：预定待支付
- typeB：完成支付
- typeC：临近出行
- typeD：申请退款
邮件的主要目的有三点：1.确认操作成功，呈现必要的信息。2.提供客服帮助入口。3.品牌营销和广告推广。所以邮件的共享模块包括「帮助中心」「品牌footer」。
而不同类型的邮件有不同的侧重点，比如typeA用户完成了预定，还未进行付款时，不仅需要展示预定信息，还需要优先呈现能促使用户完成付款的信息（用户评论之类）。又如typeC临近出行时，邮件需要提供一键保存订单详情的功能入口。
明确了四种类型的侧重，就可以明确每个模版的信息展示优先顺序。
以typeB邮件为例，需要包含以下信息：
typeB
typeB 邮件模版基本结构设计：
已支付邮件.png
以相同的思路，可以顺利的完成另外三种邮件模版。
以上。
网友评论