如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

 

本次分享闡述了我關(guān)于理財(cái)APP注冊(cè)流程的視覺及結(jié)構(gòu)上的改進(jìn)，分為理論闡述、競(jìng)品分析、改版實(shí)踐三個(gè)部分。

主要向大家講解一下當(dāng)一個(gè)UI設(shè)計(jì)師在做UI設(shè)計(jì)改版的時(shí)候，他在思考什么，他做出這一步設(shè)計(jì)的原因是什么。同時(shí)在大家的討論反饋中，我作為一個(gè)UI設(shè)計(jì)師，也能更好的明白產(chǎn)品看待一個(gè)界面設(shè)計(jì)的角度。

一、關(guān)于注冊(cè)

一旦用戶體驗(yàn)時(shí)涉及到資金進(jìn)出，留言互動(dòng)以及定制個(gè)人信息等內(nèi)容，那么就會(huì)觸發(fā)注冊(cè)或者登錄環(huán)節(jié)。

目前，手機(jī)已經(jīng)成了移動(dòng)互聯(lián)網(wǎng)時(shí)代的天然身份證，而且可以實(shí)時(shí)驗(yàn)證。這也是互聯(lián)網(wǎng)金融領(lǐng)域基本都采用的注冊(cè)方法。

手機(jī)注冊(cè)都是通過手機(jī)短信獲得驗(yàn)證碼，注冊(cè)效率極高。好的注冊(cè)頁(yè)，就是“簡(jiǎn)約而不簡(jiǎn)單”，做到體驗(yàn)流暢又抓住了核心。

二、設(shè)計(jì)中“5w+1H”原則的實(shí)踐

1.WHAT（目標(biāo)）：

石投金融移動(dòng)端注冊(cè)流程+視覺的優(yōu)化

現(xiàn)版本石投金融移動(dòng)端的注冊(cè)截圖

其實(shí)光從視覺上，我們的APP其實(shí)屬于市面較大眾的類型，沒有追求設(shè)計(jì)趨勢(shì)，但是中規(guī)中矩，在很多網(wǎng)貸APP中都能見到。但是我們應(yīng)該思考的是，注冊(cè)作為吸引新用戶的重要一環(huán)，我們能否做的更好？

2.WHY（優(yōu)化原因）：

石投金融目標(biāo)用戶為40歲的中年人，我對(duì)此設(shè)定其實(shí)是不太同意的，使用過程中我注意到其實(shí)對(duì)于產(chǎn)品的結(jié)構(gòu)流程來說，

3.WHO（目標(biāo)用戶）：

中凈值用戶（年齡結(jié)構(gòu)為30-45歲之間，對(duì)互聯(lián)網(wǎng)新事物有開放性心態(tài)，對(duì)APP的設(shè)計(jì)水平有一定要求，并且操作流程不可像PC端一樣交互繁瑣死板。產(chǎn)品偏好：安全保障三件套（風(fēng)險(xiǎn)準(zhǔn)備經(jīng)+陽(yáng)光保險(xiǎn)+資金托管）+高收益，運(yùn)營(yíng)拉新策略：促銷+再促銷+拉好友+再拉好友）

4.WHERE（使用場(chǎng)景）：

互聯(lián)網(wǎng)金融領(lǐng)域方向的移動(dòng)端APP。用戶、需求和場(chǎng)景是產(chǎn)品設(shè)計(jì)前必須要考慮的三大核心要素，只有能滿足目標(biāo)用戶在特定場(chǎng)景下特定需求的產(chǎn)品，才有可能成長(zhǎng)為獨(dú)角獸產(chǎn)品。

5.WHEN（何時(shí)使用）：

用戶體驗(yàn)時(shí)涉及到資金進(jìn)出及個(gè)人信息等內(nèi)容。

6.HOW：

后文闡述。

三、產(chǎn)品的注冊(cè)流程

定了這個(gè)研究主題之后，我著手研究了APP的注冊(cè)流程。用戶點(diǎn)擊【我的】icon之后，彈出登錄頁(yè)面，注冊(cè)按鈕位于次要按鈕區(qū)域，用戶需要點(diǎn)擊之后才能進(jìn)行注冊(cè)。首先我考慮的是，對(duì)于一個(gè)剛下載APP的用戶來說，登錄是比注冊(cè)更高優(yōu)先級(jí)的交互嗎？從第一步開始，我們的流程就在消耗用戶的手指點(diǎn)擊次數(shù)。點(diǎn)擊次數(shù)越少，用戶使用產(chǎn)品感受越舒適流暢，注冊(cè)轉(zhuǎn)化率越高。

然后用戶點(diǎn)擊注冊(cè)之后，會(huì)讓他輸入手機(jī)號(hào)。這時(shí)又涉及到一個(gè)小的交互缺陷，就是用戶需要再次點(diǎn)擊輸入框才會(huì)彈出鍵盤開始輸入，又消耗占用了一次用戶的手指點(diǎn)擊次數(shù)，屬于無(wú)效交互。

下面我們終于到了輸入手機(jī)號(hào)的環(huán)節(jié)，用戶輸入手機(jī)號(hào)，如果用戶早就注冊(cè)了我們的產(chǎn)品，但是忘記了，輸入了已經(jīng)注冊(cè)的手機(jī)號(hào)之后，我們產(chǎn)品現(xiàn)版本的流程是【彈窗告知用戶“您的手機(jī)號(hào)已注冊(cè)”】，需要用戶點(diǎn)擊“確認(rèn)”才能關(guān)閉這個(gè)彈窗，然后就什么操作都沒有，停留在這個(gè)輸入手機(jī)號(hào)的頁(yè)面。用戶需要手動(dòng)點(diǎn)擊“登錄”文字按鈕才能切換到登錄界面。如果是一個(gè)40歲的中年人，他的使用APP經(jīng)驗(yàn)不多，他可能會(huì)適應(yīng)這個(gè)硬中斷的過程，反應(yīng)一下確實(shí)是自己操作問題，是自己的過錯(cuò)，而乖乖的去點(diǎn)擊“登錄”按鈕，但是如果是一個(gè)30歲左右的年輕人，在各種APP如親媽一般的母愛關(guān)懷下，他可能就很不舒服，對(duì)APP的印象不好從而流失。

現(xiàn)版本注冊(cè)錯(cuò)誤的界面交互

四、相關(guān)理論——分步注冊(cè)

1.分步注冊(cè)適合移動(dòng)端設(shè)計(jì)：移動(dòng)端屏幕小、加上彈出鍵盤，假設(shè)將多個(gè)輸入項(xiàng)放在一個(gè)頁(yè)面，會(huì)給用戶造成擁擠感，然而分步注冊(cè)則可以較好地解決該問題。

2.分步注冊(cè)可減少用戶點(diǎn)擊輸入框的次數(shù)：幾乎所有的注冊(cè)關(guān)鍵步驟中都有：輸入手機(jī)號(hào)、獲取驗(yàn)證碼、設(shè)定密碼這3個(gè)步驟。如果這三個(gè)步驟在同一個(gè)頁(yè)面，則需要用戶手動(dòng)點(diǎn)擊輸入框呼出對(duì)應(yīng)鍵盤來填寫這些信息。如果遵循分步注冊(cè)，分成三個(gè)頁(yè)面的話，進(jìn)入每個(gè)頁(yè)面都會(huì)自動(dòng)置入焦點(diǎn)并彈出鍵盤，將減少用戶手動(dòng)點(diǎn)擊輸入框的次數(shù)。

3.分步注冊(cè)在一定程度上可以提高轉(zhuǎn)化率：Facebook曾經(jīng)針對(duì)分步注冊(cè)與非分步注冊(cè)做過A/B Test，其結(jié)果指出分步注冊(cè)的轉(zhuǎn)化率遠(yuǎn)高于非分步注冊(cè)。由此可見，非分步注冊(cè)強(qiáng)行減少注冊(cè)頁(yè)面倒不如拉長(zhǎng)戰(zhàn)線，給用戶輕負(fù)荷的操作，讓用戶在不知不覺中完成注冊(cè)流程。

上頁(yè)我們講述了【分步注冊(cè)】的理論，結(jié)合這個(gè)理論我們來看APP的第二步——輸入驗(yàn)證碼及輸入密碼。屬于非分步流程。雖然看似減少了用戶的操作步驟，但是使用過程中用戶需要經(jīng)過等待驗(yàn)證碼——點(diǎn)擊喚出數(shù)字鍵盤——輸入驗(yàn)證碼——點(diǎn)擊喚出英文鍵盤——輸入密碼——點(diǎn)擊注冊(cè)（如果驗(yàn)證碼或者密碼有一項(xiàng)錯(cuò)誤，便會(huì)彈出錯(cuò)誤提示之后停留在此頁(yè)面等待用戶重新點(diǎn)擊輸入框自己刪除輸入的數(shù)據(jù)然后重新填寫）這樣的流程。寫到這里我的頭有點(diǎn)疼，所以不做過多闡述，大家可以自己體會(huì)。

五、競(jìng)品分析

由于市面上網(wǎng)貸APP數(shù)量太多，但是注冊(cè)流程都一致為【輸入手機(jī)號(hào)】-【輸入驗(yàn)證碼】-【輸入密碼】這類三要素流程，所以我選取了A級(jí)網(wǎng)貸產(chǎn)品微貸網(wǎng)、翼龍貸、拍拍貸及支付寶（副參考）作為分析對(duì)象。由于我沒有可用于注冊(cè)的多余手機(jī)號(hào)，所以很多流程沒有進(jìn)入輸入驗(yàn)證碼之后的下一步，但是已經(jīng)足夠看出一個(gè)APP關(guān)于注冊(cè)流程的優(yōu)化思路。

拍拍貸

拍拍貸的流程其實(shí)跟我們產(chǎn)品的比較一致，最后一步屬于非分布流程。但是第一步的注冊(cè)登錄判定以及設(shè)計(jì)上的通過字號(hào)對(duì)比讓用戶明確自己所處的位置這樣的iOS11設(shè)計(jì)理念值得我們參考學(xué)習(xí)。拍拍貸的最后一步點(diǎn)擊完成注冊(cè)之后如果輸入有誤的體驗(yàn)也不好。我還有不滿意的地方是拍拍貸的整體界面設(shè)計(jì)偏簡(jiǎn)潔清晰、以內(nèi)容為主，而作為最重要的頁(yè)面之一的登錄注冊(cè)頁(yè)顏色大面積的使用了他們產(chǎn)品不怎么突出強(qiáng)調(diào)的藍(lán)色，視覺觀感非常的沉重，跟整個(gè)產(chǎn)品的基調(diào)嚴(yán)重不符。

微貸網(wǎng)

前不久剛發(fā)布版本——“七年微貸”的微貸網(wǎng)的注冊(cè)流程是與我的改版方向高度一致的，這點(diǎn)我感到很榮幸。它從用戶頁(yè)面就開始合并登錄和注冊(cè)的判定。用戶點(diǎn)擊【登錄/注冊(cè)】按鈕之后自動(dòng)彈出數(shù)字鍵盤，用戶輸入手機(jī)號(hào)之后系統(tǒng)判定是否注冊(cè)，如果已注冊(cè)，引導(dǎo)用戶進(jìn)入登錄界面，自動(dòng)彈出英文鍵盤填寫登錄密碼，如果沒有注冊(cè)，引導(dǎo)用戶填寫自動(dòng)發(fā)送的驗(yàn)證碼并跟隨頁(yè)面切換自動(dòng)彈出數(shù)字鍵盤，減少用戶的點(diǎn)擊次數(shù)，優(yōu)化產(chǎn)品使用體驗(yàn)。

翼龍貸

翼龍貸的注冊(cè)流程中規(guī)中矩，從注冊(cè)中就讓用戶感受到自己是傳統(tǒng)金融企業(yè)的這個(gè)概念。它有很多可取之處，包括注冊(cè)首頁(yè)的活動(dòng)拉新（但是做成入口圖形式會(huì)讓用戶一直想點(diǎn)擊并且分散其它信息的注意力）、通過主色調(diào)紅色的步驟進(jìn)度條讓用戶明確流程總共幾步和自己所處的位置，最后的獎(jiǎng)勵(lì)回饋，還有開通存管賬戶的適當(dāng)引導(dǎo)都是我可以從中學(xué)習(xí)到的一些設(shè)計(jì)思路，跟我們的產(chǎn)品理念也非常一致。

我們的注冊(cè)完成獎(jiǎng)勵(lì)反饋提示。作為小白用戶以及30歲左右的目標(biāo)人群的我來說，我看懵了，反應(yīng)不過來這些獎(jiǎng)勵(lì)對(duì)我來說意味著什么，我不知道積分是啥概念，我也不知道投標(biāo)本金是什么概念，而且關(guān)閉或者開通存管賬戶之后我也不知道這些獎(jiǎng)勵(lì)具體去哪里找和使用。但是這個(gè)不屬于注冊(cè)流程的優(yōu)化，所以我只做了部分改動(dòng)，具體可能會(huì)在以后分析改進(jìn)。

支付寶

爸爸的APP，不想多夸。采用了分步注冊(cè)設(shè)計(jì)保證了用戶每步操作的視覺焦點(diǎn)都在自己要輸入的內(nèi)容上。輸入4位驗(yàn)證碼之后自動(dòng)判定驗(yàn)證碼是否正確，如果不正確，清空所有驗(yàn)證碼并且配合手機(jī)震動(dòng)和錯(cuò)誤提示紅字抖動(dòng)告訴用戶輸入錯(cuò)誤，減少?gòu)棿按驍?，降低錯(cuò)誤反饋造成用戶心里的不愉快。之所以賬號(hào)已經(jīng)注冊(cè)的提示放在輸入驗(yàn)證碼之后，是因?yàn)橛脩酎c(diǎn)擊【立即登錄】的話，會(huì)直接登錄，而驗(yàn)證碼就自動(dòng)變?yōu)榈卿浶枰邮盏尿?yàn)證碼，這點(diǎn)也是做得挺出乎意料的。

六、最終改版結(jié)果

首先，我對(duì)產(chǎn)品做了一個(gè)視覺上的改版。采用了iOS11大對(duì)比的設(shè)計(jì)理念。首先分析頁(yè)面信息優(yōu)先級(jí)，將頁(yè)面信息按權(quán)重排序，依次為核心步驟層、內(nèi)容輸入層、輔助信息層，還有包含可點(diǎn)擊交互操作的操作引導(dǎo)層。然后通過字號(hào)、字色與字重拉開信息層級(jí)間的差距，最終將用戶聚焦到核心信息上來。

a.核心步驟層：是指用戶在短暫時(shí)間內(nèi)瀏覽頁(yè)面時(shí)，能讓其一目了然的獲知當(dāng)下應(yīng)該操作的某個(gè)步驟。例如“輸入手機(jī)號(hào)碼”是這個(gè)頁(yè)面的重點(diǎn)核心內(nèi)容，其設(shè)計(jì)需要重點(diǎn)突出，且精煉文字。

b.內(nèi)容輸入層：是指用戶被核心步驟層吸引后，需要進(jìn)行相關(guān)內(nèi)容的輸入，例如昵稱和密碼的輸入等等。其設(shè)計(jì)需要引導(dǎo)用戶進(jìn)行輸入操作，并且在輸入中給用戶帶來便捷性。例如包括密碼明文／暗文的切換，以及輸入驗(yàn)證碼到最后一位后直接進(jìn)入下一步，來確保便捷性。

c.輔助信息層：是指用戶理解了以上兩個(gè)信息層后，輔助信息層會(huì)有更多信息讓感興趣的用戶去了解。這里往往提供更多說明或者跳轉(zhuǎn)鏈接，例如使用條款和隱私政策等。

我在視覺上使用了CR設(shè)計(jì)語(yǔ)言（iOS11的設(shè)計(jì)風(fēng)格）。Complexion Reduction設(shè)計(jì)語(yǔ)言是指使用更加簡(jiǎn)化的界面顏色，更大更突出的標(biāo)題字體，以及簡(jiǎn)潔的圖標(biāo)，來拉開頁(yè)面信息層級(jí)，突出頁(yè)面主要功能。作為用戶體驗(yàn)設(shè)計(jì)師應(yīng)該進(jìn)行“最小化設(shè)計(jì)”和“逐步簡(jiǎn)化”的設(shè)計(jì)模式，毫不留情的砍掉“沒有重要功能的元素”，使用戶快速關(guān)注到信息的本質(zhì)。

改版前：

改版后：

1.簡(jiǎn)單且突出的告知用戶在頁(yè)面中需要做的唯一一件事

2.減少零碎信息的展現(xiàn)，最大限度的精簡(jiǎn)文案

3.各類信息分組，拉大信息戰(zhàn)線層級(jí)

七、具體改動(dòng)內(nèi)容

1.增大了輸入內(nèi)容的字號(hào)，簡(jiǎn)單清晰明了。延續(xù)舊版本，對(duì)手機(jī)號(hào)碼進(jìn)行344的分布

2.增加一鍵清空icon

在輸入時(shí)偶爾會(huì)出現(xiàn)輸入錯(cuò)誤，如果沒有清除的icon，用戶只能一直按鍵盤中的清除按鈕，需要一直按住直到輸入框?yàn)榭?。點(diǎn)擊注冊(cè)時(shí)候，注冊(cè)按鈕變?yōu)榧虞d狀態(tài)，清空icon與鍵盤同時(shí)消失/收起。

3.優(yōu)化了不可點(diǎn)擊狀態(tài)的按鈕狀態(tài)表達(dá)

舊版本不可點(diǎn)擊狀態(tài)為灰色，比較老舊過時(shí)，并且顏色的視覺層次不高。

4.手機(jī)號(hào)位數(shù)不對(duì)/格式錯(cuò)誤時(shí)，按鈕為不可點(diǎn)擊狀態(tài)

當(dāng)input為空時(shí)，關(guān)聯(lián)按鈕為disabled的狀態(tài)，這是采用了防錯(cuò)的原則：如當(dāng)使用條件沒有滿足時(shí)，常常通過使功能失效來表示（一般按鈕會(huì)變?yōu)榛疑珶o(wú)法點(diǎn)擊），以避免誤按，這是在提交之前的視覺驗(yàn)證輸入的另一種方式。

5.修改了按鈕上按鈕的名稱

表單按鈕應(yīng)該準(zhǔn)確描述用戶正在執(zhí)行的任務(wù)——?jiǎng)?chuàng)建帳戶或登錄等。

另外，我還優(yōu)化了文字的顯示層級(jí)，共分為五類

涉及到文字/色彩規(guī)范是一個(gè)很大的工程，我們的理財(cái)APP在這點(diǎn)做的不是很好，因?yàn)檫@次改版設(shè)計(jì)是私下在做，所以我便做得隨心所欲了一點(diǎn)，甚至重新定義了品牌色：）。

關(guān)于負(fù)反饋的處理

所謂負(fù)反饋，指用戶行為出現(xiàn)問題時(shí)出現(xiàn)，比如投資金額小于可投金額，或者密碼不正確等等。雖然負(fù)反饋在產(chǎn)品交互設(shè)計(jì)中對(duì)于警示用戶不該做的行為或者是該行為會(huì)導(dǎo)致不良后果的可能時(shí)起到了不可或缺的作用。但是顯然更多的時(shí)候人們不愿意收到負(fù)反饋，任何用戶在得到負(fù)反饋的時(shí)候都會(huì)感到沮喪，因此盡量減少通過特定的反饋頁(yè)面來進(jìn)行負(fù)反饋。

1.盡量減少用戶犯錯(cuò)的機(jī)會(huì)，包括突出的標(biāo)題及重要文字，清晰的文案，分步輸入等

2.輸入驗(yàn)證碼步驟中，如果用戶輸入的驗(yàn)證碼有誤，驗(yàn)證碼自動(dòng)清空并且輸入欄返回第一個(gè)，降低用戶操作及點(diǎn)擊數(shù)。

3.采用了手機(jī)振動(dòng)+文字震動(dòng)加文字標(biāo)紅的方式提示用戶的輸入錯(cuò)誤，用比較輕量化的反饋來弱化。

1.優(yōu)化文案

·將會(huì)讓用戶看暈的獎(jiǎng)勵(lì)文案整合至【我的獎(jiǎng)勵(lì)】中，方便后續(xù)查看。

·增加了銀行存管的解釋文案，使強(qiáng)突出按鈕更有指向性，也更好的引導(dǎo)用戶去開通銀行存管。

2.優(yōu)化主輔按鈕表達(dá)

這里我參考了翼龍貸的設(shè)計(jì)思路，但是做了一個(gè)優(yōu)化，將主按鈕調(diào)整到右側(cè)。大數(shù)據(jù)表明，一般將傾向于用戶點(diǎn)擊的按鈕放在右側(cè)，點(diǎn)擊率更高。

七、最終成果動(dòng)效展示

 

藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)