一、功能邏輯梳理在做框架設計與加減乘除合併同類項之前，梳理業務與產品邏輯對於複雜的流程介面來說是至關重要的。
我們舉個例子來說明問題，舉例的這個產品叫做「宜信優選 2 年期」，是個 p2p 理財固收產品。
結合購買流程相關頁面，我們可以把產品使用邏輯梳理按使用者情況分為以下 2 種：
這裡我們可以歸納出在該產品的實際購買流程中涉及到 2 個核心功能操作（**金額輸入+支付）和核心功能操作反饋（支付狀態）， 3 個輔助功能（銀行卡選擇、優惠券選擇與回款方式選擇）。
其中我們按照流程設計中的 timeline 設計法，依據使用者使用的流程時間順序歸類，使用者依次操作心理排序應為：確認產品資訊——輸入購買金額——看看預期回報金額——是否有優惠券可用——去支付——支付是否成功——程式設計客棧到期錢會回到**——好，我確認。
這樣分析下來，我們可以推導出 2 個 ux 設計方案。
二、框架設計方案a：聚合
依據線上的介面設計，完全可以看出產品原型還原度很高，簡單粗暴的以 2 個核心頁（購買流程+支付結果）+ 2 個觸發子頁面（支付方式+優惠券）+完成產品購買。
這樣做的好處是資訊展示效率高，頁面操作跳轉少。
另外子頁面框架設計為彈窗樣式，增強頁面聯絡，減少頁面跳轉迷失感。
這樣中規中矩的框架設計，是很多產品在設計中的保險選擇，但事實上隨著使用者使用挑剔度的提公升，以及越來越高效快速的生活節奏，也許我們在框架設計上也可以更多嘗試與突破。
方案b：拆分
把核心操作進行乙個拆分的話，我們就可以得到乙個全新的方案。 3 個核心頁（金額輸入+支付+支付結果）+ 1 個觸發子頁面（優惠券）。
這樣的乙個拆分設計應該會更好的提公升使用者體驗，將購買流程清晰化，核心功能最大化突出，使購買過程一條線操作。
但這樣乙個看上去使用者體驗極佳的流程設計卻有著一定的商業轉換率問題，產品們最害怕的事情便是一部分使用者在多出來的這乙個購買步驟中流失了，而具體資料的變化反饋我們大概也能從百度理財的變化中猜出來，拆分設計在商業設計的目標中戰敗了。
以上是百度理財改版前後的支付購買流程變化。
三、層級劃分我們可以把設計上的層級劃分理解為乙個合併同類項+排序的過程。秉承「don』t make me think」的使用者體驗原則，從wtjsgdlvqm介面視覺表達上簡化繁雜資訊更利於使用者高效獲得重要資訊，進而促成「買單」行為。
而這個簡化資訊的處理不僅僅只是做加法與減法，更多的在於資訊的合併與摺疊。
我們回到之前舉例的這個產品，對於線上的介面設計來說，所有的資訊都是平鋪的方式展現，並沒有進行資訊的層級劃分。分析以後我們可以將頁面資訊合併分為 3 大塊：出借金額與收益、支付方式、優惠券。
出借金額與預期收益應該是屬於相關聯的資訊，因此劃分在乙個模組。
支付方式中與充值操作結果對於使用者購買來說是沒有區別的，可以摺疊在乙個子頁面模組展示： 2 種支付方式（我的餘額 or 銀行卡）
優惠券與紅包屬於同概念功能，也完全可以合併展示。
再進行優先順序的排序後，頁面的模組展示依次為：出借金額與收益、優惠券、支付方式。
四、視覺優化1. 減線立面
分割線設計更適合資訊密集且強調資訊展示效率的產品，但會對介面帶來很強的割裂感，從而干擾閱讀。
在這裡我們可以利用模組化面與面間的間隔替代一部分分割線，達到雙贏的效果。
2. 設計符號化
合理運用符號設計可以增強使用者對特定功能的識別與認知，例如輸入金額前的人民幣符號、優惠券前的小圖示以及支付方式中銀行前的 logo，都比直白的文字描述更具識別性。
在資訊繁多的列表中突出特定功能的符號wtjsgdlvqm化表達，也有助於拉開資訊差距，提公升使用者使用效率。
3. 半擬物化設計
支付購買流程介面設計，我們有 2 個需要注意的點：
那麼秉承商業設計的核心精髓，在支付購買流程盡可能通過使用者體驗技巧留住使用者，可以通過半擬物化增強現實場景還原感，增強使用者信任度，簡化流程操作，化繁為簡。
△ 原創的 2 個半www.cppcns.com擬物化場景還原設計樣例
五、優化對比最後給大家 powww.cppcns.com 出方案a 與線上舊版本的前後對比。
1. 購買詳情列表
2. 支付選擇
3. 優惠券選擇
4. 新增銀行卡
素材作者：piko rizky dwinanto
本文標題: 如何設計支付購買流程？來看這份超全面的ux優化方案
本文位址:
如何做出使用者不反感的錯誤提示？來看這篇總結！
相信在日常生活中，很多人都曾經在各家銀行的網上銀行或者直銷銀行中買過理財產品。各家銀行的理財產品購買流程都是大同小異的 選擇合適的理財產品 輸入購買金額 確認專案資訊 返回操作結果。我們假設乙個情況，當使用者輸入的購買金額超過賬戶餘額時，我們應該怎麼給使用者一程式設計客棧個錯誤提示？以寧波銀行直銷銀...
購買流程之購物車產品設計
購買流程對於每乙個電商 都是至關重要的，好的購買流程就意味著高轉化率。本文將分析下購物車的設計思路。如何設計出好的購物車？需要先了解使用者的使用情景及遇到的問題。1 使用者使用情景 2 使用者使用問題 購物車環節，使用者諮詢 投訴最多的問題是 我加入購物車的商品去哪了？分析這個問題，發現原因如下 了...
UI設計流程是什麼 來看看UI設計完整的設計流程吧
ui設計和我們的生活聯絡越來越緊密，精緻美觀的介面總能讓使用者賞心悅目，很多人已經開始學習ui設計的知識，希望自己也能加入ui設計師的行列，成為走在潮流前端的科技人才，那麼你一定要知道，乙個優秀作品都進行了怎樣的ui設計流程。ui設計師們每天都在幹什麼，熟悉ui設計流程，助你早日成為ui設計達人。上...