頁(yè)面設(shè)計(jì)的方法與要點(diǎn)

作者結(jié)合自身經(jīng)驗(yàn)并根據(jù)實(shí)例，總結(jié)了頁(yè)面設(shè)計(jì)的一些方法與要點(diǎn)，一起來(lái)學(xué)習(xí)吧~

上一篇文章中講到在用戶資金交易的過(guò)程中，設(shè)計(jì)師需要向用戶展示資金不同節(jié)點(diǎn)的明確狀態(tài)及資金去向，讓用戶時(shí)刻有掌控感。還要借用上篇文章中我使用競(jìng)品的案例：

案例一：在某平臺(tái)購(gòu)買(mǎi)了一筆定期產(chǎn)品

購(gòu)買(mǎi)成功后出現(xiàn)下圖的第一個(gè)頁(yè)面：

1、頁(yè)面顯示認(rèn)購(gòu)成功，但是具體起息日待定，待整個(gè)項(xiàng)目投滿后的下一天起息。那么，什么時(shí)候項(xiàng)目才能募集滿呢?不知道?？梢韵胂筮@樣的提示會(huì)給用戶帶來(lái)多大的疑慮。

2、回到“我的賬戶”頁(yè)面(中間的頁(yè)面)，2天內(nèi)這筆錢(qián)一直在“當(dāng)前資產(chǎn)價(jià)值”里面，沒(méi)有顯示在認(rèn)購(gòu)項(xiàng)目中。用戶一定會(huì)有疑慮，因?yàn)橛脩舨磺宄摴P資金什么時(shí)候才算投資到項(xiàng)目中開(kāi)始計(jì)息，如果用戶當(dāng)時(shí)在投資成功時(shí)沒(méi)有看到那一行“預(yù)計(jì)計(jì)息日項(xiàng)目投滿日+1”的灰字，根本查不到關(guān)于該筆資產(chǎn)的認(rèn)購(gòu)詳情，甚至懷疑自己有沒(méi)有做過(guò)投資的操作。在這個(gè)過(guò)程中，用戶沒(méi)有掌控感，對(duì)未來(lái)要發(fā)生的有疑慮，甚至產(chǎn)生恐懼。

3、再看第三個(gè)頁(yè)面，產(chǎn)品生息過(guò)程中，待回款項(xiàng)目中顯示“遇節(jié)假日，順延還款”，可是當(dāng)時(shí)支付成功的頁(yè)面(第一頁(yè))明明高亮顯示的是“遇節(jié)假日正常還款”。這樣嚴(yán)重的錯(cuò)誤是致命的，文案提示的一致性、產(chǎn)品規(guī)則的明確統(tǒng)一，都是用戶體驗(yàn)非常重要的一部分，交互設(shè)計(jì)師的工作絕不僅僅是考慮文案應(yīng)該如何顯眼。

案例二：在某平臺(tái)上購(gòu)買(mǎi)產(chǎn)品時(shí)，需要充值到賬戶

用交通銀行卡連續(xù)充值3次，都是跳轉(zhuǎn)至下圖的頁(yè)面：

為什么會(huì)失敗呢?這時(shí)我首先想到的是聯(lián)系客服。從在線客服那里了解到，平臺(tái)app端不支持交通銀行充值了，需要去PC端完成充值。于是我去PC端充值，出現(xiàn)以下頁(yè)面信息：

這時(shí)作為用戶就會(huì)懷疑，這個(gè)平臺(tái)怎么了，充值渠道都出問(wèn)題了，客服回答的也不對(duì)。

無(wú)奈，只能繼續(xù)聯(lián)系客服，客服回復(fù)說(shuō)，PC端充值時(shí)，交通銀行單筆只能充值3000元。于是我追問(wèn)：“還有什么其他的限制條件沒(méi)有說(shuō)清楚的嗎?”最后終于重新提交了一筆3000的充值訂單后才充值成功。

這是我比較喜歡的一家理財(cái)平臺(tái)，遇到像我這樣類(lèi)似的問(wèn)題的用戶應(yīng)該有很多。用戶在資金交易的過(guò)程遇到問(wèn)題時(shí)，會(huì)很恐慌，尤其是一些不符合用戶預(yù)期的問(wèn)題。其實(shí)以上這些問(wèn)題都是可以通過(guò)設(shè)計(jì)的技巧來(lái)避免的。

為什么案例一中交互設(shè)計(jì)師有時(shí)候會(huì)遺漏展示頁(yè)面的狀態(tài)呢?我認(rèn)為是設(shè)計(jì)師在設(shè)計(jì)的過(guò)程中，沒(méi)有真正置身真實(shí)的場(chǎng)景中，沒(méi)有仔細(xì)打磨用戶任務(wù)流中的每一個(gè)環(huán)節(jié)可能出現(xiàn)的問(wèn)題并及時(shí)給出相應(yīng)反饋。設(shè)計(jì)順暢的標(biāo)準(zhǔn)流程，對(duì)交互設(shè)計(jì)師來(lái)講并不難，難就難在置身真實(shí)使用場(chǎng)景，發(fā)現(xiàn)和處理異常的情況。比如用戶購(gòu)買(mǎi)成功后，不是設(shè)計(jì)一個(gè)認(rèn)購(gòu)結(jié)束頁(yè)面就可以了。再進(jìn)一步想，接下來(lái)用戶會(huì)去哪里，最關(guān)心的是什么。

《交互設(shè)計(jì)精髓》一書(shū)中提到，在從需求到明確的設(shè)計(jì)方案過(guò)程要經(jīng)過(guò)以下步驟：

其中設(shè)計(jì)師可能需要在步驟3和步驟5之間重復(fù)多次，直至需求穩(wěn)定，產(chǎn)出明確的設(shè)計(jì)方案。

我們以用戶購(gòu)買(mǎi)定期產(chǎn)品后的持有資產(chǎn)詳情頁(yè)為例，討論如何來(lái)設(shè)計(jì)一個(gè)頁(yè)面。

如何設(shè)計(jì)一個(gè)頁(yè)面

當(dāng)設(shè)計(jì)一個(gè)頁(yè)面時(shí)，我們需要考慮什么：

頁(yè)面的目標(biāo)

用戶角色，用戶進(jìn)入頁(yè)面的場(chǎng)景

用戶詳細(xì)的任務(wù)流程

用戶進(jìn)入當(dāng)前頁(yè)面的預(yù)期

所有的功能，所有的信息字段，所有按鈕狀態(tài)及所有交互效果

針對(duì)持有資產(chǎn)詳情頁(yè)面的，需要考慮如下：

頁(yè)面目標(biāo)：

向用戶提供明確的資產(chǎn)當(dāng)前狀態(tài)及資金將來(lái)的去向

用戶角色：

完成投資支付的用戶

用戶進(jìn)入頁(yè)面的場(chǎng)景：

場(chǎng)景一：用戶投資申請(qǐng)?zhí)峤怀晒?，但還在審核中

場(chǎng)景二：用戶投資成功，等待計(jì)息，但未開(kāi)始計(jì)息

場(chǎng)景三：產(chǎn)品計(jì)息中

場(chǎng)景四：產(chǎn)品即將到期

場(chǎng)景五：產(chǎn)品正在還款中

場(chǎng)景六：產(chǎn)品已還款成功

任務(wù)流程和當(dāng)前頁(yè)面預(yù)期：

投資申請(qǐng)?zhí)峤弧顿Y成功：查看項(xiàng)目是否投資成立，計(jì)息規(guī)則(查看產(chǎn)品詳情頁(yè))

投資成功，等待計(jì)息——開(kāi)始計(jì)息：確認(rèn)投資金額，預(yù)期收益，產(chǎn)品計(jì)息時(shí)間

計(jì)息中——即將到期：投資剩余天數(shù)，產(chǎn)品到期日

即將到期——待還款：產(chǎn)品到期日，還款日，還款規(guī)則

待回款——還款成功：還款規(guī)則，是否還款成功

所有的功能和信息字段：

項(xiàng)目產(chǎn)品名稱及詳情

投資金額

預(yù)期(或到賬)收益

起息時(shí)間

到期時(shí)間

資產(chǎn)基本信息：年化收益率、投資期限、投資日期、起息日期、到期日期、還款日期、還款規(guī)則

所有的狀態(tài)及所有交互效果

投資當(dāng)前狀態(tài)包括：待起息、起息中、即將到期、到期還款中、已還款。

對(duì)于起息中和即將到期，考慮到用戶真正在意的還是產(chǎn)品剩余多少天到期，我們同意顯示為剩余X天。

未到期還款時(shí)，收益狀態(tài)為預(yù)期收益

到期還款后，收益狀態(tài)為到賬收益

這一過(guò)程體現(xiàn)在頁(yè)面設(shè)計(jì)中如下：

案例一中的問(wèn)題就是出在投資成功，等待計(jì)息——開(kāi)始計(jì)息這一階段。即使用戶的投資項(xiàng)目沒(méi)有募集滿，還不能計(jì)息，也應(yīng)該向用戶展示出資金處理中的狀態(tài)，否則用戶會(huì)產(chǎn)生焦慮。

下圖為資產(chǎn)詳情頁(yè)在四個(gè)場(chǎng)景下的不同狀態(tài)(場(chǎng)景一目前我們平臺(tái)沒(méi)有這種情況，沒(méi)有做相應(yīng)設(shè)計(jì))

運(yùn)用上面的方法，那么案例二中的問(wèn)題也很容易解決了。

充值頁(yè)面設(shè)計(jì)：

頁(yè)面目標(biāo)：引導(dǎo)用戶充值符合銀行卡限額及個(gè)人充值上下限額的金額

用戶角色：完成實(shí)名認(rèn)證及綁卡的用戶

用戶進(jìn)入頁(yè)面的場(chǎng)景：

場(chǎng)景一：主動(dòng)點(diǎn)擊充值入口充值

場(chǎng)景二：投資時(shí)賬戶余額不足被動(dòng)充值

任務(wù)流程和當(dāng)前頁(yè)面預(yù)期：

主動(dòng)充值：用哪張銀行卡充值;限額多少;

投資時(shí)被動(dòng)充值：當(dāng)前賬戶余額有多少、用哪張卡充值、限額多少

所有的功能和信息字段：

認(rèn)證綁卡信息

充值金額

平臺(tái)充值上下限額

銀行卡充值限額

充值按鈕

根據(jù)以往的經(jīng)驗(yàn)，采用認(rèn)證支付支持多家銀行時(shí)，很容易出現(xiàn)某一家或者幾家銀行充值服務(wù)暫停的情況，并且是隨時(shí)都有可能發(fā)生的。因此可以在前端頁(yè)面增加公告欄功能，當(dāng)有支付渠道問(wèn)題或是節(jié)假日銀行不支持交易時(shí)，后臺(tái)人員可以直接配消息內(nèi)容直接顯示在前端頁(yè)面，而不需要遇到時(shí)緊急發(fā)版或客服電話被打爆了。所以，還應(yīng)增加消息公告功能，由后臺(tái)配置。沒(méi)有公告時(shí)，該區(qū)域可以隱藏不顯示。

所有的狀態(tài)及所有交互效果 ：

羅列出的所有信息字段不一定都要以文字的形式展示在前端，有些信息需要在用戶操作前就展示出來(lái)，有些信息可以隱藏，在用戶操作犯錯(cuò)誤時(shí)及時(shí)進(jìn)行提示，如下圖的上限金額。

總結(jié)

交互設(shè)計(jì)是一個(gè)細(xì)活，需要反復(fù)的推敲和挖掘用戶在使用過(guò)程中可能遇到的問(wèn)題和當(dāng)下最想了解的信息，而不是想當(dāng)然的去設(shè)計(jì)一個(gè)順暢的交易流程就結(jié)束了。如果你的平臺(tái)很安全，請(qǐng)不要因?yàn)槟愕脑O(shè)計(jì)而讓用戶感受到不安全感。

本文標(biāo)題：頁(yè)面設(shè)計(jì)的方法與要點(diǎn)
標(biāo)題URL：http://www.muchs.cn/news29/161629.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、網(wǎng)站內(nèi)鏈、靜態(tài)網(wǎng)站、面包屑導(dǎo)航、標(biāo)簽優(yōu)化、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)