本文作者根據(jù)宜新首選兩年的產(chǎn)品案例推導(dǎo)出兩種用戶體驗(yàn)設(shè)計(jì)方案。享受?

當(dāng)您遇到多個(gè)跳轉(zhuǎn)邏輯和豐富的信息級(jí)UX任務(wù)時(shí)，請(qǐng)不要驚慌，深呼吸并向下看。

功能邏輯梳理

梳理業(yè)務(wù)和產(chǎn)品邏輯對(duì)于復(fù)雜的流程接口至關(guān)重要，然后再進(jìn)行框架設(shè)計(jì)，添加，減少，相乘和劃分類似的項(xiàng)目。

讓我們舉一個(gè)例子來(lái)說(shuō)明問題。例如，該產(chǎn)品被稱為“鑫鑫首選2年”，這是一種P2P財(cái)務(wù)整合產(chǎn)品。

這是產(chǎn)品的在線流程頁(yè)面

結(jié)合購(gòu)買流程的相關(guān)頁(yè)面，我們可以根據(jù)用戶的情況將產(chǎn)品使用邏輯分為兩類：

在這里我們可以總結(jié)產(chǎn)品實(shí)際購(gòu)買過(guò)程中的兩個(gè)核心功能操作（購(gòu)買金額輸入+支付）和核心功能操作反饋（支付狀態(tài)），3個(gè)輔助功能（銀行卡選擇，優(yōu)惠券選擇）選擇付款方式）。

根據(jù)流程設(shè)計(jì)中的時(shí)間軸設(shè)計(jì)方法，我們根據(jù)用戶流程的時(shí)間順序進(jìn)行分類。用戶的順序心理訂購(gòu)應(yīng)該是：確認(rèn)產(chǎn)品信息——輸入購(gòu)買金額——看看預(yù)期的回報(bào)金額— —是否有優(yōu)惠券可用——付錢——付款是否成功——應(yīng)付款項(xiàng)將返還的地方——好吧，我確認(rèn)一下。

通過(guò)這種方式，我們可以推導(dǎo)出兩種UX設(shè)計(jì)。

框架設(shè)計(jì)A聚合

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

這樣做的好處是信息顯示效率高，頁(yè)面操作跳得少。

此外，子頁(yè)面框架被設(shè)計(jì)為彈出窗口樣式，這增強(qiáng)了頁(yè)面連接并降低了頁(yè)面跳轉(zhuǎn)感。

這種經(jīng)過(guò)深思熟慮的框架設(shè)計(jì)是設(shè)計(jì)中許多產(chǎn)品的保險(xiǎn)選擇，但事實(shí)上，隨著用戶的挑剔使用的增加，以及越來(lái)越高效和快節(jié)奏的生活節(jié)奏，也許我們可以嘗試更多框架設(shè)計(jì)。突破。

方案B-split

如果我們拆分核心業(yè)務(wù)，我們可以獲得一個(gè)全新的解決方案。 3個(gè)核心頁(yè)面（金額輸入+付款+付款結(jié)果）+ 1個(gè)觸發(fā)子頁(yè)面（優(yōu)惠券）。

這種拆分設(shè)計(jì)應(yīng)該是更好的用戶體驗(yàn)，清除購(gòu)買流程，最大化核心功能，并為購(gòu)買流程添加一系列操作。

但是，這種看起來(lái)像用戶體驗(yàn)的流程設(shè)計(jì)具有一定的業(yè)務(wù)轉(zhuǎn)換率問題。這些產(chǎn)品最令人擔(dān)心的是，有些用戶在這個(gè)額外的購(gòu)買步驟中迷失了，具體的數(shù)據(jù)變化反饋了我們?？赡苓€從百度財(cái)務(wù)管理的變化中猜到，分裂設(shè)計(jì)在商業(yè)設(shè)計(jì)的目標(biāo)中被打敗了。

以上是百度財(cái)務(wù)修訂前后支付購(gòu)買流程的變化。

層次結(jié)構(gòu)

事實(shí)上，我個(gè)人認(rèn)為設(shè)計(jì)的等級(jí)劃分可以理解為組合相似項(xiàng)目+排序的過(guò)程。堅(jiān)持“不讓我思考”的用戶體驗(yàn)原則，從界面的視覺表達(dá)中簡(jiǎn)化復(fù)雜信息更有利于用戶有效獲取重要信息，從而有助于“購(gòu)買”行為。

這種簡(jiǎn)化信息的處理不僅是加法和減法，還包括信息的合并和折疊。

我們回到上一個(gè)產(chǎn)品的例子。對(duì)于在線界面設(shè)計(jì)，所有信息都以平鋪方式顯示，并且沒有分層信息分區(qū)。經(jīng)過(guò)分析，我們可以將頁(yè)面信息組合成三大塊：貸款金額和收入，付款方式和優(yōu)惠券。

貸款金額和預(yù)期收益應(yīng)該是相關(guān)信息，因此它分為一個(gè)模塊。

付款方式與用戶購(gòu)買的充值操作結(jié)果沒有區(qū)別，可以在子頁(yè)面模塊中顯示：2種付款方式（余額或銀行卡）

優(yōu)惠券和紅包具有相同的概念，可以組合和顯示。

優(yōu)先級(jí)排序后，頁(yè)面的模塊顯示為：貸款金額和收入，優(yōu)惠券，付款方式。

視覺優(yōu)化1.減少線條立面

在前一篇文章中（正確的方式打開新項(xiàng)目設(shè)計(jì)0-1），分割線框架設(shè)計(jì)的優(yōu)缺點(diǎn)，分割線設(shè)計(jì)更適合信息密集且強(qiáng)調(diào)信息顯示效率的產(chǎn)品，但是界面將帶來(lái)強(qiáng)烈的分裂感，這會(huì)干擾閱讀。

在這里，我們可以用模塊化面和面之間的間距替換一些分界線，以實(shí)現(xiàn)雙贏效果。

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

合理使用符號(hào)設(shè)計(jì)可以增強(qiáng)用戶對(duì)特定功能的識(shí)別和識(shí)別，例如輸入金額前的人民幣符號(hào)，優(yōu)惠券前的小圖標(biāo)，以及支付方式中銀行前的LOGO，這些功能比直截了當(dāng)?shù)奈淖终f(shuō)明。 。

突出顯示廣泛信息列表中特定功能的符號(hào)表示也有助于打開信息差距并提高用戶效率。

3.半藝術(shù)設(shè)計(jì)

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

在設(shè)計(jì)中，將遇到許多與離線產(chǎn)品結(jié)合的使用場(chǎng)景;用戶在此過(guò)程中具有高損失率。

因此秉承商業(yè)設(shè)計(jì)的核心精髓，在支付購(gòu)買過(guò)程中盡可能通過(guò)用戶體驗(yàn)技能留住用戶，可以通過(guò)半實(shí)現(xiàn)的增強(qiáng)現(xiàn)實(shí)場(chǎng)景降低用戶信心感，簡(jiǎn)化用戶操作，簡(jiǎn)化流程操作，并簡(jiǎn)化。

原2個(gè)半物化場(chǎng)景修復(fù)設(shè)計(jì)實(shí)例

優(yōu)化比較

最后，我將給你一個(gè)程序A和舊版本的在線比較：

購(gòu)買詳情列表

付款選項(xiàng)

優(yōu)惠券選擇添加銀行卡

作者：娜娜，高級(jí)用戶體驗(yàn)設(shè)計(jì)師作品，微信公眾號(hào)，“早安，小姐離開”。

本文最初由@Nana發(fā)布。未經(jīng)許可，禁止復(fù)制。

該地圖來(lái)自Unsplash，基于CC0協(xié)議

« 網(wǎng)站優(yōu)化沒有深刻的思考，您的網(wǎng)站最好只排名 | 到達(dá)和離開分析:抓住訪客的入口并退出 »