本文作者以“宜信優(yōu)選2年期”為產(chǎn)品案例，推導(dǎo)出2個UX設(shè)計方案。enjoy~

遇到多重跳轉(zhuǎn)邏輯與豐富信息層級的UX任務(wù)別慌別亂，深吸一口氣，往下看。

功能邏輯梳理

在做框架設(shè)計與加減乘除合并同類項之前，梳理業(yè)務(wù)與產(chǎn)品邏輯對于復(fù)雜的流程界面來說是至關(guān)重要的。

我們舉個例子來說明問題，舉例的這個產(chǎn)品叫做“宜信優(yōu)選2年期”，是個P2P理財固收產(chǎn)品。

這是產(chǎn)品的線上流程頁面

結(jié)合購買流程相關(guān)頁面，我們可以把產(chǎn)品使用邏輯梳理按用戶情況分為以下2種：

這里我們可以歸納出在該產(chǎn)品的實際購買流程中涉及到2個核心功能操作（買入金額輸入+支付）和核心功能操作反饋（支付狀態(tài)），3個輔助功能（銀行卡選擇、優(yōu)惠券選擇與回款方式選擇）。

其中我們按照流程設(shè)計中的timeline設(shè)計法，依據(jù)用戶使用的流程時間順序歸類，用戶依次操作心理排序應(yīng)為：確認產(chǎn)品信息——輸入購買金額——看看預(yù)期回報金額——是否有優(yōu)惠券可用——去支付——支付是否成功——到期錢會回到哪里——好，我確認。

這樣分析下來，我們可以推導(dǎo)出2個UX設(shè)計方案。

框架設(shè)計

方案A-聚合

依據(jù)線上的界面設(shè)計，完全可以看出產(chǎn)品原型還原度很高，簡單粗暴的以2個核心頁（購買流程+支付結(jié)果）+2個觸發(fā)子頁面（支付方式+優(yōu)惠券）+完成產(chǎn)品購買。

這樣做的好處是信息展示效率高，頁面操作跳轉(zhuǎn)少。

另外子頁面框架設(shè)計為彈窗樣式，增強頁面聯(lián)系，減少頁面跳轉(zhuǎn)迷失感。

這樣中規(guī)中矩的框架設(shè)計，是很多產(chǎn)品在設(shè)計中的保險選擇，但事實上隨著用戶使用挑剔度的提升，以及越來越高效快速的生活節(jié)奏，也許我們在框架設(shè)計上也可以更多嘗試與突破。

方案B-拆分

把核心操作進行一個拆分的話，我們就可以得到一個全新的方案。3個核心頁（金額輸入+支付+支付結(jié)果）+1個觸發(fā)子頁面（優(yōu)惠券）。

這樣的一個拆分設(shè)計應(yīng)該是更好的用戶使用體驗的，將購買流程清晰化，核心功能最大化突出，使購買過程變加一條線操作。

但這樣一個看上去用戶體驗極佳的流程設(shè)計卻有著一定的商業(yè)轉(zhuǎn)換率問題，產(chǎn)品們最害怕的事情便是一部分用戶在多出來的這一個購買步驟中流失了，而具體數(shù)據(jù)的變化反饋我們大概也能從百度理財?shù)淖兓胁鲁鰜?，拆分設(shè)計在商業(yè)設(shè)計的目標中戰(zhàn)敗了。

以上是百度理財改版前后的支付購買流程變化

層級劃分

其實個人認為可以把設(shè)計上的層級劃分理解為一個合并同類項+排序的過程。秉承”don’t make me think”的用戶體驗原則，從界面視覺表達上簡化繁雜信息更利于用戶高效獲得重要信息，進而促成”買單“行為。

而這個簡化信息的處理不僅僅只是做加法與減法，更多的在于信息的合并與折疊。

我們回到之前舉例的這個產(chǎn)品，對于線上的界面設(shè)計來說，所有的信息都是平鋪的方式展現(xiàn)，并沒有進行信息的層級劃分。分析以后我們可以將頁面信息合并分為3大塊：出借金額與收益、支付方式、優(yōu)惠券。

出借金額與預(yù)期收益應(yīng)該是屬于相關(guān)聯(lián)的信息，因此劃分在一個模塊。

支付方式中與充值操作結(jié)果對于用戶購買來說是沒有區(qū)別的，可以折疊在一個子頁面模塊展示：2種支付方式（我的余額OR銀行卡）

優(yōu)惠券與紅包屬于同概念功能，也完全可以合并展示。

再進行優(yōu)先級的排序后，頁面的模塊展示依次為：出借金額與收益、優(yōu)惠券、支付方式。

視覺優(yōu)化

1. 減線立面

在之前的文章（新項目設(shè)計0-1的正確開啟方式）里也有提及過，分割線框架設(shè)計的優(yōu)劣點，分割線設(shè)計更適合信息密集且強調(diào)信息展示效率的產(chǎn)品，但會對界面帶來很強的割裂感，從而干擾閱讀。

在這里，我們可以利用模塊化面與面間的間隔替代一部分分割線，達到雙贏的效果。

2. 設(shè)計符號化

合理運用符號設(shè)計可以增強用戶對特定功能的識別與認知，例如輸入金額前的人民幣符號、優(yōu)惠券前的小圖標以及支付方式中銀行前的LOGO，都比直白的文字描述更具識別性。

在信息繁多的列表中突出特定功能的符號化表達，也有助于拉開信息差距，提升用戶使用效率。

3. 半擬物化設(shè)計

支付購買流程界面設(shè)計，我們有2個需要注意的點：

1. 設(shè)計中會遇到許多與線下實品相結(jié)合的使用場景；
2. 用戶在該流程的流失率較高。

那么秉承商業(yè)設(shè)計的核心精髓，在支付購買流程盡可能通過用戶體驗技巧留住用戶，可以通過半擬物化增強現(xiàn)實場景還原感，增強用戶信任度，簡化流程操作，化繁為簡。

原創(chuàng)的2個半擬物化場景還原設(shè)計樣例

優(yōu)化對比

最后給大家po出方案A與線上舊版本的前后對比：

購買詳情列表

支付選擇

優(yōu)惠券選擇新增銀行卡

作者：Nana，滴滴資深UX設(shè)計師，微信公眾號「早安左小姐」

本文由 @Nana 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議