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

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

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

場景

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

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

用戶

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

任務(wù)

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

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

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

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

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

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

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

信息構(gòu)架

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

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

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

……

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

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

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

任務(wù)流程

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

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

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

下面是介于頁面流的邏輯判斷

控件的狀態(tài)

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

輸入框

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

按鈕

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

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

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

Mobile：normal、onclick、disabled

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

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

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

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

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

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

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

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

下面我們來欣賞一些按鈕的微交互

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

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

PC互聯(lián)期

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

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

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

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

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

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

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

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

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

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

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

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

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

美團(tuán)的注冊(cè)流程里，在電話輸入上作了放錯(cuò)，然后就后面就沒有然后了。有防刷機(jī)制，比如當(dāng)連續(xù)輸入2次經(jīng)系統(tǒng)檢測為已注冊(cè)的用戶時(shí)，會(huì)彈popup要求人or機(jī)驗(yàn)證。對(duì)于輸入號(hào)碼有部分顯露。注冊(cè)第3部界面中的小尖頭有誤導(dǎo)用戶后面仍有流程的誤導(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。這樣來看，對(duì)于形同手機(jī)注冊(cè)的提示文案還是不夠的。

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

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

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

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

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

總結(jié)

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

1. 了解設(shè)計(jì)場景，設(shè)計(jì)目的。也許我們投入了很多資源做引流，當(dāng)用戶到達(dá)這個(gè)頁面時(shí)，想盡辦法留住他們。
2. 學(xué)會(huì)站在不同產(chǎn)品的立場分析別人的設(shè)計(jì)思路，而不僅僅是視覺表現(xiàn)。
3. 視覺簡單，邏輯通暢。
4. 目前大部分的注冊(cè)流程為分解的形式及一站式，結(jié)合產(chǎn)品實(shí)際場景選擇適合自己產(chǎn)品的，盡可能的簡化信息、縮短流程，提升注冊(cè)達(dá)成率。
5. 對(duì)于交互對(duì)象的多層次視覺呈現(xiàn)，比如文案提醒、示錯(cuò)、驗(yàn)證提醒，按鈕的響應(yīng)反饋，都是提升用戶體驗(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ì)場景和設(shè)計(jì)目的才能在不同的設(shè)計(jì)方案中找到最合適的那個(gè)。

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

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

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

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

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

作者：湖湖 ?途牛UED

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