從注冊(cè)這點(diǎn)小事兒上看如何提升細(xì)節(jié)設(shè)計(jì)和用戶(hù)體驗(yàn)，希望對(duì)一些新入行的童鞋有所幫助。

互聯(lián)時(shí)代的產(chǎn)品都離不開(kāi)：

直白點(diǎn)就是什么樣的環(huán)境下？為哪些人？提供了哪些事情的解決方案？

場(chǎng)景

PC：室內(nèi)的＋相對(duì)沉溺的＋長(zhǎng)時(shí)間的

Mobile：隨時(shí)隨地的+碎片化的＋隨時(shí)轉(zhuǎn)身離開(kāi)的

用戶(hù)

產(chǎn)品定位的受眾人群，可以是學(xué)生、孕婦、求職、買(mǎi)賣(mài)……，比如招聘類(lèi)的目標(biāo)受眾就是需要找工作的群體；房租中介類(lèi)就是需要租賃、買(mǎi)賣(mài)房屋的群體等等。

任務(wù)

幫助這些受眾完成他們想要得到事務(wù)的一種邏輯流程。

比如我們可以在某寶上：搜索想要的商品－鎖定－下單－收貨－評(píng)價(jià)，這就是一套購(gòu)買(mǎi)流程，提供了用戶(hù)網(wǎng)絡(luò)購(gòu)買(mǎi)流程的解決方案。

這里我們就用戶(hù)注冊(cè)這一場(chǎng)景，淺談設(shè)計(jì)任務(wù)及其背后對(duì)思維邏輯，然后去提升細(xì)節(jié)設(shè)計(jì)。

到達(dá)注冊(cè)頁(yè)面的途徑

用戶(hù)到達(dá)一個(gè)app的注冊(cè)頁(yè)面一般有4種渠道：

當(dāng)網(wǎng)易音樂(lè)的第一批用戶(hù)從豆瓣平移過(guò)來(lái)之后，用戶(hù)就不再是大家的了。贏取一個(gè)新用戶(hù)比維護(hù)一個(gè)老用戶(hù)的成本要高很多，所以當(dāng)用戶(hù)來(lái)到了注冊(cè)界面作為設(shè)計(jì)師就要盡可能到創(chuàng)造舒適的用戶(hù)體驗(yàn)，盡可能多的幫助用戶(hù)注冊(cè)登錄。

信息構(gòu)架及任務(wù)流程

信息構(gòu)架

就是包涵哪些信息，這些信息是怎樣穿插在一起的。

注冊(cè)模塊概括來(lái)說(shuō)由2部分組成：用戶(hù)信息＋驗(yàn)證。用戶(hù)信息包括但不限于：

• 手機(jī)號(hào)碼
• 郵箱
• 賬號(hào)
• 姓名
• 性別
• 興趣

……

然后再由不同產(chǎn)品的定位決定類(lèi)別的從篩選到簡(jiǎn)化。

驗(yàn)證碼：是一種區(qū)分用戶(hù)是計(jì)算機(jī)還是人的公共全自動(dòng)程序，防刷、防黑、防灌水之類(lèi)的程序行為。

被廣泛采用的有：短信驗(yàn)證碼、動(dòng)態(tài)驗(yàn)證碼組成。

任務(wù)流程

可以分為邏輯流和頁(yè)面流，邏輯流就是數(shù)據(jù)邏輯針對(duì)開(kāi)發(fā)編寫(xiě)，頁(yè)面流可理解為頁(yè)面的跳轉(zhuǎn)關(guān)系針對(duì)用戶(hù)。

簡(jiǎn)單以去哪兒的注冊(cè)流程中的輸入手機(jī)號(hào)和驗(yàn)證碼為例：

下面是我們呈現(xiàn)給用戶(hù)操作的頁(yè)面流

下面是介于頁(yè)面流的邏輯判斷

控件的狀態(tài)

注冊(cè)場(chǎng)景下涉及的控件一般是：輸入框、按鈕、驗(yàn)證碼。

輸入框

供用戶(hù)輸入信息，一般包含：提醒文案、正文、示措提醒

按鈕

引發(fā)即時(shí)操作，即當(dāng)用戶(hù)點(diǎn)擊后，觸發(fā)即時(shí)操作。作為基礎(chǔ)控件之一，按鈕廣泛應(yīng)用于不同平臺(tái)的所有產(chǎn)品中。通常位于一個(gè)或一系列操作的底部或右方。

按鈕的一般狀態(tài)：

PC：normal、hover、down(pressed)、disabled

Mobile：normal、onclick、disabled

這里簡(jiǎn)單說(shuō)一下disabled。從去哪兒注冊(cè)的例舉可以看出，當(dāng)input為空時(shí)，關(guān)聯(lián)按鈕為disabled的狀態(tài)，這是采用了放錯(cuò)的原則：如當(dāng)使用條件沒(méi)有滿(mǎn)足時(shí)，常常通過(guò)使功能失效來(lái)表示（一般按鈕會(huì)變?yōu)榛疑珶o(wú)法點(diǎn)擊），以避免誤按。

產(chǎn)品中的辯證法與相對(duì)論

學(xué)會(huì)用辯證法，去分析問(wèn)題。在產(chǎn)品道路上同樣適用，有時(shí)候得到就意味著失去，用辯證法的方法看問(wèn)題，利于分析事情的二面性，衡量其利弊，進(jìn)而找到真正適合自己產(chǎn)品的合適的方案。

拿動(dòng)效舉個(gè)例子，動(dòng)效本身并沒(méi)有錯(cuò)，但是一個(gè)龐大的產(chǎn)品就不宜使用過(guò)多的動(dòng)效，原因：

1. 因?yàn)閯?dòng)效會(huì)加重系統(tǒng)負(fù)擔(dān)；
2. 為了不斷延長(zhǎng)其生命力需要不斷的版本迭代，很可能一些辛苦設(shè)計(jì)開(kāi)發(fā)出來(lái)的動(dòng)效隨著產(chǎn)品的發(fā)展方向而被很快淹沒(méi)；
3. 最為重要的一點(diǎn)，對(duì)于用戶(hù)而言動(dòng)態(tài)的更易于吸引注視，動(dòng)效的增加會(huì)使原本復(fù)雜的頁(yè)面更加復(fù)雜化，更難于找到頁(yè)面的重點(diǎn)內(nèi)容而失去操作方向，事實(shí)上這個(gè)時(shí)候動(dòng)效已經(jīng)轉(zhuǎn)變?yōu)橐环N打擾。

很遺憾，這個(gè)觀(guān)點(diǎn)沒(méi)有找到合適的案例進(jìn)行分析，淘寶、京東、美團(tuán)等在動(dòng)效方面都表現(xiàn)得比較安靜。

下面是一個(gè)天氣app的頁(yè)面，因?yàn)閍pp本身很簡(jiǎn)單，就是展示天氣而已，動(dòng)效的增加不僅動(dòng)態(tài)的解釋了天氣的狀況也讓原本單調(diào)的頁(yè)面多了一絲趣味，而用戶(hù)也并不會(huì)因?yàn)閯?dòng)效的加入而迷失。這就是相對(duì)論，簡(jiǎn)單的事務(wù)可以做些復(fù)雜的處理。

同樣是列表，淘寶為什么在頁(yè)面中沒(méi)有采用一些動(dòng)態(tài)的展示or特效，設(shè)計(jì)欠缺？開(kāi)發(fā)不夠？答案是否定的。淘寶營(yíng)造的購(gòu)物場(chǎng)景應(yīng)該是盡量沉溺于頁(yè)面流中的，盡快的找到用戶(hù)想要的商品，順利的轉(zhuǎn)化購(gòu)買(mǎi)，相信這也是作為電商的本質(zhì)目的。復(fù)雜的事情簡(jiǎn)單化。

下面我們來(lái)欣賞一些按鈕的微交互

設(shè)計(jì)背后的邏輯思維

隨著時(shí)間流逝，科技發(fā)展，人們對(duì)事物認(rèn)知不斷提高，注冊(cè)場(chǎng)景下的設(shè)計(jì)也不斷進(jìn)步。揣摩變化，思考邏輯，提升細(xì)節(jié)設(shè)計(jì)。

PC互聯(lián)期

（請(qǐng)忽略?xún)?nèi)容，僅觀(guān)察表現(xiàn)形式）

首先明確的是，注冊(cè)頁(yè)面被設(shè)計(jì)出來(lái)的目的是希望用戶(hù)能夠填寫(xiě)信息并成為我們的用戶(hù)。但是，當(dāng)用戶(hù)看到這樣的一張信息較多的頁(yè)面，視覺(jué)壓力和逃避心理就來(lái)了。

除了視覺(jué)和心理壓力，我們還可能會(huì)被每一行的必輸提醒而吸引，不過(guò)行行必輸，行行提醒有點(diǎn)過(guò)，視覺(jué)干擾也就來(lái)了。

費(fèi)茨(Fitts)定律告訴我們，當(dāng)我們需要觀(guān)察的2個(gè)事物距離越遠(yuǎn)時(shí)，所需要的時(shí)間就越長(zhǎng)。

人眼閱讀的軌跡順序從1-8，這種排列方式受標(biāo)題字符數(shù)的制約。有了排序參考，大家就可以考試是不是還有其他更好的排列方式？

相對(duì)于上面的注冊(cè)信息，這種拆解信息的方式不管是視覺(jué)還是心理感受都會(huì)一些，而且對(duì)用戶(hù)必填信息進(jìn)行了提煉。這種方式后也被應(yīng)用于移動(dòng)端。但是拆解步驟不宜過(guò)長(zhǎng)，否則用戶(hù)會(huì)失去耐心而中途放棄注冊(cè)，這是我們不愿看到的。

移動(dòng)互聯(lián)期

從人隨網(wǎng)走到網(wǎng)隨人動(dòng)，用戶(hù)體驗(yàn)收到前所未有的重視，涌現(xiàn)出大量的專(zhuān)業(yè)設(shè)計(jì)和體驗(yàn)設(shè)計(jì)師。對(duì)于產(chǎn)品注冊(cè)信息的提煉由多樣逐漸走向結(jié)構(gòu)簡(jiǎn)單、信息簡(jiǎn)潔，以用戶(hù)為中心的設(shè)計(jì)越來(lái)越被更多人接受。

下面來(lái)看下別人家的注冊(cè)頁(yè)面及設(shè)計(jì)思路。

淘寶的注冊(cè)流程相對(duì)來(lái)說(shuō)是比較長(zhǎng)的。必填項(xiàng)：手機(jī)號(hào)、驗(yàn)證碼、會(huì)員名、密碼＊2，有防錯(cuò)機(jī)制，有號(hào)碼&用戶(hù)名2次確認(rèn)。但是第一次支付密碼輸入頁(yè)面沒(méi)有自動(dòng)彈出鍵盤(pán)。不過(guò)整個(gè)跑下來(lái)還是挺輕松，復(fù)雜的事情簡(jiǎn)單做，困難的事情分解做。

攜程的注冊(cè)流程較簡(jiǎn)單，必輸項(xiàng)：手機(jī)號(hào)、驗(yàn)證碼、密碼。無(wú)防錯(cuò)機(jī)制。2/3中有已輸號(hào)碼再現(xiàn)，不過(guò)卻隱藏了中斷部分。揣測(cè)隱藏的號(hào)碼的目的是保護(hù)用戶(hù)信息不受偷窺？不過(guò)以個(gè)人愚見(jiàn)，在注冊(cè)環(huán)境，保證用戶(hù)正確的輸入信息，快速的完成注冊(cè)才是NO.1的任務(wù)，所以這里的防保護(hù)機(jī)制會(huì)有些買(mǎi)櫝還珠的感覺(jué)。

還有一點(diǎn)，激活輸入頁(yè)面時(shí)，鍵盤(pán)都沒(méi)有彈出，需要點(diǎn)擊input框調(diào)出鍵盤(pán)。

但是提示文案相比下引導(dǎo)性較強(qiáng)。

美團(tuán)的注冊(cè)流程里，在電話(huà)輸入上作了放錯(cuò)，然后就后面就沒(méi)有然后了。有防刷機(jī)制，比如當(dāng)連續(xù)輸入2次經(jīng)系統(tǒng)檢測(cè)為已注冊(cè)的用戶(hù)時(shí)，會(huì)彈popup要求人or機(jī)驗(yàn)證。對(duì)于輸入號(hào)碼有部分顯露。注冊(cè)第3部界面中的小尖頭有誤導(dǎo)用戶(hù)后面仍有流程的誤導(dǎo)。

去哪兒體驗(yàn)是相對(duì)好的，必輸項(xiàng)：手機(jī)、驗(yàn)證碼、密碼＊2，有防錯(cuò)機(jī)制，有密碼6位數(shù)提示展示。

蘇寧的注冊(cè)流程，必須項(xiàng)：手機(jī)號(hào)、驗(yàn)證碼、密碼，有防錯(cuò)機(jī)制，但是允許你同樣的號(hào)碼再次注冊(cè)，代價(jià)就是抹掉所以數(shù)據(jù)，從v5變成v0。這樣來(lái)看，對(duì)于形同手機(jī)注冊(cè)的提示文案還是不夠的。

下面分享一下個(gè)人小案例及背后的思考，場(chǎng)景：注冊(cè)；輸入項(xiàng)：手機(jī)＋驗(yàn)證碼＋注冊(cè)btn

當(dāng)時(shí)的第一版就是左側(cè)的，也是比較保守的，不出錯(cuò)的。視覺(jué)線(xiàn)：填寫(xiě)手機(jī)號(hào)－看一眼驗(yàn)證碼輸入框－點(diǎn)擊驗(yàn)證碼按鈕－回來(lái)輸入驗(yàn)證碼－點(diǎn)擊注冊(cè)。在這個(gè)過(guò)程中，驗(yàn)證碼輸入框被2次閱讀，當(dāng)時(shí)覺(jué)得這是一種浪費(fèi)，所以出了右邊的方案。視覺(jué)線(xiàn)是直了：輸入手機(jī)號(hào)－點(diǎn)擊驗(yàn)證碼－輸入驗(yàn)證碼－點(diǎn)擊注冊(cè)，但是從手機(jī)號(hào)到驗(yàn)證碼跳了一行，思路會(huì)突然斷一下，再著一按鈕直接沖在最前嗎有點(diǎn)突兀。

那怎么樣才能視覺(jué)線(xiàn)和思路保持一致呢？發(fā)現(xiàn)僅是一小步，將驗(yàn)證碼按鈕上移到輸入手機(jī)一行，這樣在用戶(hù)輸完手機(jī)號(hào)碼時(shí)，看到驗(yàn)證碼很自然就會(huì)點(diǎn)擊，然后輸入完成操作。當(dāng)然“除非有更好的選擇，否則就遵從標(biāo)準(zhǔn)”。

說(shuō)到手機(jī)號(hào)碼，有意看了下蘋(píng)果在電話(huà)數(shù)字上的處理，雖然比起銀行卡只有11位的數(shù)字，還是在不同場(chǎng)景下都做了分段處理，不得不說(shuō)蘋(píng)果的體驗(yàn)越來(lái)越細(xì)膩。當(dāng)然這是更多的為了識(shí)別他人的號(hào)碼。

雖然用戶(hù)輸錯(cuò)自己號(hào)碼的幾率是比較低的，但是一般來(lái)說(shuō)，用戶(hù)輸入完畢后都會(huì)快速秒掃檢查號(hào)碼的正誤，如果我們采用了分段的現(xiàn)實(shí)方法，識(shí)錯(cuò)上應(yīng)該會(huì)容易些。

總結(jié)

看了這么多案例，那么我們?cè)谠O(shè)計(jì)注冊(cè)頁(yè)面的時(shí)候怎么去思考呢？

1. 了解設(shè)計(jì)場(chǎng)景，設(shè)計(jì)目的。也許我們投入了很多資源做引流，當(dāng)用戶(hù)到達(dá)這個(gè)頁(yè)面時(shí)，想盡辦法留住他們。
2. 學(xué)會(huì)站在不同產(chǎn)品的立場(chǎng)分析別人的設(shè)計(jì)思路，而不僅僅是視覺(jué)表現(xiàn)。
3. 視覺(jué)簡(jiǎn)單，邏輯通暢。
4. 目前大部分的注冊(cè)流程為分解的形式及一站式，結(jié)合產(chǎn)品實(shí)際場(chǎng)景選擇適合自己產(chǎn)品的，盡可能的簡(jiǎn)化信息、縮短流程，提升注冊(cè)達(dá)成率。
5. 對(duì)于交互對(duì)象的多層次視覺(jué)呈現(xiàn)，比如文案提醒、示錯(cuò)、驗(yàn)證提醒，按鈕的響應(yīng)反饋，都是提升用戶(hù)體驗(yàn)的小細(xì)節(jié)。
6. 在對(duì)象對(duì)齊及排列方式，學(xué)會(huì)依靠一些定律，法則，可以是我們?cè)诿悦２欢ǖ臅r(shí)候，看輕方向。
7. 不斷學(xué)習(xí)、思考、對(duì)比，提升自己對(duì)事務(wù)的認(rèn)知。

只有理解設(shè)計(jì)背后的思緒才能提升細(xì)節(jié)設(shè)計(jì)，也只有明確了設(shè)計(jì)場(chǎng)景和設(shè)計(jì)目的才能在不同的設(shè)計(jì)方案中找到最合適的那個(gè)。

就像買(mǎi)一件衣服，我們總會(huì)盯著線(xiàn)頭、走線(xiàn)、針眼、紐扣、鎖邊這些點(diǎn)以此來(lái)評(píng)價(jià)一件衣服的品質(zhì)，界面已是如此。經(jīng)得起推敲的設(shè)計(jì)才是好設(shè)計(jì)。

本文僅筆者觀(guān)點(diǎn)，不到之處歡迎大家溝通指正。

最后分享一下筆者在設(shè)計(jì)過(guò)程中的思考三步法則：

1. 為什么要做這個(gè)事情？
2. 怎么去做？
3. 還有沒(méi)有更好的解決方法？

“小是最偉大的關(guān)懷”2016和大家共勉。

作者：湖湖 ?途牛UED

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