最近做了一些復雜頁面的優(yōu)化重構工作，比如酒店預訂+支付流程的重新設計，選擇酒店和房型的流程設計，用戶郵件模板的設計等，這類頁面中包含許多繁雜的表單信息和數(shù)據(jù)展示，如何讓布局更清晰、流程更簡潔，減少用戶提交過程中的困惑和痛苦，促進頁面轉化，幫助用戶決策。在此記錄一下思考的過程和成果。
原則
在闡述具體案例前先提煉出一些基本原則：
1.信息的架構是關鍵
IA(infomation architexture)幫助人們很容易的明白他們看到的是什么,并清楚為了實現(xiàn)目標我應該如何做。
因此，重構的第一步就應該梳理頁面的信息架構，把屬性相同的信息歸納整合，屬性相似的信息放置在同一區(qū)域。
2.用網(wǎng)格系統(tǒng)布局減少無關信息干擾
將信息整理到一個統(tǒng)一的，有邏輯的grids里面會很大提升用戶體驗。使用合理的排版、區(qū)塊劃分和一致的對齊方式，會讓頁面清晰，也讓用戶更容易在其中找到需要的信息。
3.從用戶的視角來考慮問題
一個數(shù)據(jù)設計的最佳實踐就是，你的UI所表達的概念模型跟用戶的實用時腦中的模型能夠完全吻合。
在線上的體驗、產(chǎn)品和服務通常都是某類一系列事件的交互，如果整個交互流程都與用戶曾經(jīng)遇到類似體驗一致，他們會更容易接受。
4.用逐步展開的方法來管理復雜問題
將某種復雜流程設計為逐步展開可以使認知負擔大量減少。
比如可以將非高頻的操作隱藏在hover ，click，activated state之后，或者將原本在一頁的大量表單劃分為多個步驟，分步展示。
重要的是決定哪些操作是高頻哪些是非高頻，哪些信息可以被劃分到一個區(qū)域或步驟。
實例
例1 酒店預定和支付
之前的預定全部都集中在一個頁面，用戶需要在這一個頁面中填寫大量信息，邏輯不清的堆砌表單會讓用戶失去耐心。
所以首先要做的是重新梳理信息結構，簡單整理出目前很明顯的體驗問題：
這么多信息集中在一頁顯示，顯然不合理，將新頁面分為三步：
房間信息包含的交互很多，比如增加房間，每增加一個房間，需要填相應的住客信息，住客還包含成人和兒童，如果兒童大于等于1，還會出現(xiàn)年齡等選項，所以單獨做一個Part1填寫房間信息；Part2是聯(lián)系人信息，包含聯(lián)系人和抵達時間；Part3不包含輸入操作，只是讓用戶確認之前填寫的信息無誤以及展示酒店政策：如退款政策、兒童政策。提交訂單后，選擇支付方式和優(yōu)惠券等。
優(yōu)化后的結構如下：
例2 用戶郵件模板系統(tǒng)
當用戶完成一些特定操作后（比如預定，支付，或者退款），需要給用戶發(fā)郵件確認相關操作成功。
通過整理用戶操作流程，發(fā)現(xiàn)有四個時間點是需要觸發(fā)郵件服務的：
- typeA：預定待支付
- typeB：完成支付
- typeC：臨近出行
- typeD：申請退款
郵件的主要目的有三點：1.確認操作成功，呈現(xiàn)必要的信息。2.提供客服幫助入口。3.品牌營銷和廣告推廣。所以郵件的共享模塊包括「幫助中心」「品牌footer」。
而不同類型的郵件有不同的側重點，比如typeA用戶完成了預定，還未進行付款時，不僅需要展示預定信息，還需要優(yōu)先呈現(xiàn)能促使用戶完成付款的信息（用戶評論之類）。又如typeC臨近出行時，郵件需要提供一鍵保存訂單詳情的功能入口。
明確了四種類型的側重，就可以明確每個模版的信息展示優(yōu)先順序。
以typeB郵件為例，需要包含以下信息：
typeB 郵件模版基本結構設計：
以相同的思路，可以順利的完成另外三種郵件模版。
以上。
