最近做了一些復(fù)雜頁面的優(yōu)化重構(gòu)工作站粟，比如酒店預(yù)訂+支付流程的重新設(shè)計(jì)反肋，選擇酒店和房型的流程設(shè)計(jì)七咧，用戶郵件模板的設(shè)計(jì)等摘仅，這類頁面中包含許多繁雜的表單信息和數(shù)據(jù)展示靶庙，如何讓布局更清晰、流程更簡(jiǎn)潔娃属，減少用戶提交過程中的困惑和痛苦惶洲，促進(jìn)頁面轉(zhuǎn)化，幫助用戶決策膳犹。在此記錄一下思考的過程和成果恬吕。
原則
在闡述具體案例前先提煉出一些基本原則：
1.信息的架構(gòu)是關(guān)鍵
IA(infomation architexture)幫助人們很容易的明白他們看到的是什么,并清楚為了實(shí)現(xiàn)目標(biāo)我應(yīng)該如何做。
因此须床，重構(gòu)的第一步就應(yīng)該梳理頁面的信息架構(gòu)铐料，把屬性相同的信息歸納整合，屬性相似的信息放置在同一區(qū)域豺旬。
2.用網(wǎng)格系統(tǒng)布局減少無關(guān)信息干擾
將信息整理到一個(gè)統(tǒng)一的钠惩，有邏輯的grids里面會(huì)很大提升用戶體驗(yàn)。使用合理的排版族阅、區(qū)塊劃分和一致的對(duì)齊方式篓跛，會(huì)讓頁面清晰，也讓用戶更容易在其中找到需要的信息坦刀。
3.從用戶的視角來考慮問題
一個(gè)數(shù)據(jù)設(shè)計(jì)的最佳實(shí)踐就是愧沟，你的UI所表達(dá)的概念模型跟用戶的實(shí)用時(shí)腦中的模型能夠完全吻合。
在線上的體驗(yàn)鲤遥、產(chǎn)品和服務(wù)通常都是某類一系列事件的交互沐寺，如果整個(gè)交互流程都與用戶曾經(jīng)遇到類似體驗(yàn)一致，他們會(huì)更容易接受盖奈。
4.用逐步展開的方法來管理復(fù)雜問題
將某種復(fù)雜流程設(shè)計(jì)為逐步展開可以使認(rèn)知負(fù)擔(dān)大量減少混坞。
比如可以將非高頻的操作隱藏在hover ，click，activated state之后究孕，或者將原本在一頁的大量表單劃分為多個(gè)步驟啥酱，分步展示。
重要的是決定哪些操作是高頻哪些是非高頻厨诸，哪些信息可以被劃分到一個(gè)區(qū)域或步驟懈涛。
實(shí)例
例1 酒店預(yù)定和支付
之前的預(yù)定全部都集中在一個(gè)頁面，用戶需要在這一個(gè)頁面中填寫大量信息泳猬，邏輯不清的堆砌表單會(huì)讓用戶失去耐心批钠。
所以首先要做的是重新梳理信息結(jié)構(gòu)，簡(jiǎn)單整理出目前很明顯的體驗(yàn)問題：
這么多信息集中在一頁顯示得封，顯然不合理埋心，將新頁面分為三步：
房間信息包含的交互很多，比如增加房間忙上，每增加一個(gè)房間拷呆，需要填相應(yīng)的住客信息，住客還包含成人和兒童疫粥，如果兒童大于等于1茬斧，還會(huì)出現(xiàn)年齡等選項(xiàng)，所以單獨(dú)做一個(gè)Part1填寫房間信息梗逮；Part2是聯(lián)系人信息项秉，包含聯(lián)系人和抵達(dá)時(shí)間；Part3不包含輸入操作慷彤，只是讓用戶確認(rèn)之前填寫的信息無誤以及展示酒店政策：如退款政策娄蔼、兒童政策。提交訂單后底哗，選擇支付方式和優(yōu)惠券等岁诉。
優(yōu)化后的結(jié)構(gòu)如下：
例2 用戶郵件模板系統(tǒng)
當(dāng)用戶完成一些特定操作后（比如預(yù)定，支付跋选，或者退款）涕癣，需要給用戶發(fā)郵件確認(rèn)相關(guān)操作成功。
通過整理用戶操作流程前标，發(fā)現(xiàn)有四個(gè)時(shí)間點(diǎn)是需要觸發(fā)郵件服務(wù)的：
- typeA：預(yù)定待支付
- typeB：完成支付
- typeC：臨近出行
- typeD：申請(qǐng)退款
郵件的主要目的有三點(diǎn)：1.確認(rèn)操作成功坠韩，呈現(xiàn)必要的信息。2.提供客服幫助入口候生。3.品牌營(yíng)銷和廣告推廣同眯。所以郵件的共享模塊包括「幫助中心」「品牌footer」。
而不同類型的郵件有不同的側(cè)重點(diǎn)唯鸭，比如typeA用戶完成了預(yù)定，還未進(jìn)行付款時(shí)硅确，不僅需要展示預(yù)定信息目溉，還需要優(yōu)先呈現(xiàn)能促使用戶完成付款的信息（用戶評(píng)論之類）明肮。又如typeC臨近出行時(shí)，郵件需要提供一鍵保存訂單詳情的功能入口缭付。
明確了四種類型的側(cè)重，就可以明確每個(gè)模版的信息展示優(yōu)先順序。
以typeB郵件為例泼返，需要包含以下信息：
typeB 郵件模版基本結(jié)構(gòu)設(shè)計(jì)：
以相同的思路瑰步，可以順利的完成另外三種郵件模版。
以上绣檬。
