一、功能邏輯梳理
在做框架設計與加減乘除合并同類項之前，梳理業務與產品邏輯對于復雜的流程界面來說是至關重要的。
我們舉個例子來說明問題，舉例的這個產品叫做「宜信優選2年期」，是個 P2P 理財固收產品。
結合購買流程相關頁面，我們可以把產品使用邏輯梳理按用戶情況分為以下2種：
這里我們可以歸納出在該產品的實際購買流程中涉及到2個核心功能操作（買入金額輸入+支付）和核心功能操作反饋（支付狀態），3個輔助功能（銀行卡選擇、優惠券選擇與回款方式選擇）。
其中我們按照流程設計中的 timeline 設計法，依據用戶使用的流程時間順序歸類，用戶依次操作心理排序應為：確認產品信息——輸入購買金額——看看預期回報金額——是否有優惠券可用——去支付——支付是否成功——到期錢會回到哪里——好，我確認。
這樣分析下來，我們可以推導出2個 UX 設計方案。
二、框架設計
方案A：聚合
依據線上的界面設計，完全可以看出產品原型還原度很高，簡單粗暴的以2個核心頁（購買流程+支付結果）+2個觸發子頁面（支付方式+優惠券）+完成產品購買。
這樣做的好處是信息展示效率高，頁面操作跳轉少。
另外子頁面框架設計為彈窗樣式，增強頁面聯系，減少頁面跳轉迷失感。
這樣中規中矩的框架設計，是很多產品在設計中的保險選擇，但事實上隨著用戶使用挑剔度的提升，以及越來越高效快速的生活節奏，也許我們在框架設計上也可以更多嘗試與突破。
方案B：拆分
把核心操作進行一個拆分的話，我們就可以得到一個全新的方案。3個核心頁（金額輸入+支付+支付結果）+1個觸發子頁面（優惠券）。
這樣的一個拆分設計應該會更好的提升用戶體驗，將購買流程清晰化，核心功能最大化突出，使購買過程一條線操作。
但這樣一個看上去用戶體驗極佳的流程設計卻有著一定的商業轉換率問題，產品們最害怕的事情便是一部分用戶在多出來的這一個購買步驟中流失了，而具體數據的變化反饋我們大概也能從百度理財的變化中猜出來，拆分設計在商業設計的目標中戰敗了。
以上是百度理財改版前后的支付購買流程變化。
三、層級劃分
我們可以把設計上的層級劃分理解為一個合并同類項+排序的過程。秉承「don't make me think」的用戶體驗原則，從界面視覺表達上簡化繁雜信息更利于用戶高效獲得重要信息，進而促成「買單」行為。
而這個簡化信息的處理不僅僅只是做加法與減法，更多的在于信息的合并與折疊。
我們回到之前舉例的這個產品，對于線上的界面設計來說，所有的信息都是平鋪的方式展現，并沒有進行信息的層級劃分。分析以后我們可以將頁面信息合并分為3大塊：出借金額與收益、支付方式、優惠券。
出借金額與預期收益應該是屬于相關聯的信息，因此劃分在一個模塊。
支付方式中與充值操作結果對于用戶購買來說是沒有區別的，可以折疊在一個子頁面模塊展示：2種支付方式（我的余額 OR 銀行卡）
優惠券與紅包屬于同概念功能，也完全可以合并展示。
再進行優先級的排序后，頁面的模塊展示依次為：出借金額與收益、優惠券、支付方式。
四、視覺優化
1. 減線立面
分割線設計更適合信息密集且強調信息展示效率的產品，但會對界面帶來很強的割裂感，從而干擾閱讀。
在這里我們可以利用模塊化面與面間的間隔替代一部分分割線，達到雙贏的效果。
2. 設計符號化
合理運用符號設計可以增強用戶對特定功能的識別與認知，例如輸入金額前的人民幣符號、優惠券前的小圖標以及支付方式中銀行前的 LOGO，都比直白的文字描述更具識別性。
在信息繁多的列表中突出特定功能的符號化表達，也有助于拉開信息差距，提升用戶使用效率。
3. 半擬物化設計
支付購買流程界面設計，我們有2個需要注意的點：
- 設計中會遇到許多與線下實品相結合的使用場景；
- 用戶在該流程的流失率較高。
那么秉承商業設計的核心精髓，在支付購買流程盡可能通過用戶體驗技巧留住用戶，可以通過半擬物化增強現實場景還原感，增強用戶信任度，簡化流程操作，化繁為簡。
△ 原創的2個半擬物化場景還原設計樣例
五、優化對比
最后給大家 po 出方案A 與線上舊版本的前后對比。
1. 購買詳情列表
2. 支付選擇
3. 優惠券選擇
4. 新增銀行卡
歡迎關注作者微信公眾號：「Nana的設計錦囊」
圖片素材作者：Piko Rizky Dwinanto
「優秀團隊的改版設計流程」
================明星欄目推薦================
優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。
設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 1 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓