一、功能邏輯梳理

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

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

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

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

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

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

二、框架設(shè)計(jì)

方案A：聚合

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

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

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

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

方案B：拆分

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

這樣的一個(gè)拆分設(shè)計(jì)應(yīng)該會(huì)更好的提升用戶體驗(yàn)，將購(gòu)買流程清晰化，核心功能最大化突出，使購(gòu)買過程一條線操作。

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

以上是百度理財(cái)改版前后的支付購(gòu)買流程變化。

三、層級(jí)劃分

我們可以把設(shè)計(jì)上的層級(jí)劃分理解為一個(gè)合并同類項(xiàng)+排序的過程。秉承「don't make me think」的用戶體驗(yàn)原則，從界面視覺表達(dá)上簡(jiǎn)化繁雜信息更利于用戶高效獲得重要信息，進(jìn)而促成「買單」行為。

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

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

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

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

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

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

四、視覺優(yōu)化

1. 減線立面

分割線設(shè)計(jì)更適合信息密集且強(qiáng)調(diào)信息展示效率的產(chǎn)品，但會(huì)對(duì)界面帶來很強(qiáng)的割裂感，從而干擾閱讀。

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

2. 設(shè)計(jì)符號(hào)化

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

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

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

支付購(gòu)買流程界面設(shè)計(jì)，我們有2個(gè)需要注意的點(diǎn)：

• 設(shè)計(jì)中會(huì)遇到許多與線下實(shí)品相結(jié)合的使用場(chǎng)景；
• 用戶在該流程的流失率較高。

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

△ 原創(chuàng)的2個(gè)半擬物化場(chǎng)景還原設(shè)計(jì)樣例

五、優(yōu)化對(duì)比

最后給大家 po 出方案A 與線上舊版本的前后對(duì)比。

1. 購(gòu)買詳情列表

2. 支付選擇

3. 優(yōu)惠券選擇

4. 新增銀行卡

歡迎關(guān)注作者微信公眾號(hào)：「Nana的設(shè)計(jì)錦囊」

圖片素材作者：Piko Rizky Dwinanto

「優(yōu)秀團(tuán)隊(duì)的改版設(shè)計(jì)流程」

• 《上億人使用的泛娛樂微信店，是如何做改版設(shè)計(jì)的？》
• 《設(shè)計(jì)實(shí)戰(zhàn)案例！談?wù)劸W(wǎng)易嚴(yán)選企業(yè)購(gòu)的交互設(shè)計(jì)》
• 《從上億人使用的阿里收藏夾迭代過程，總結(jié)視覺設(shè)計(jì)師應(yīng)該擁有的體驗(yàn)思維》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com