從註冊這點小事兒上看如果提升細節設計和使用者體驗，希望對一些新入行的童鞋有所幫助。
一、前言
互聯時代的產品都離不開：
直白點就是什麼樣的環境下？為哪些人？提供了哪些事情的解決方案？
場景
pc：室內的＋相對沉溺的＋長時間的
Mobile：隨時隨地的+碎片化的＋隨時轉身離開的
使用者
產品定位的受眾人群，可以是學生、孕婦、求職、買賣……，比如招聘類的目標受眾就是需要找工作的群體；房租中介類就是需要租賃、買賣房屋的群體等等。
任務
幫助這些受眾完成他們想要得到事務的一種邏輯流程。
比如我們可以在某寶上：搜尋想要的商品－鎖定－下單－收貨－評價，這就是一套購買流程，提供了使用者網路購買流程的解決方案。
這裡我們就使用者註冊這一場景，淺談設計任務及其背後對思維邏輯，然後去提升細節設計。
二、到達註冊頁面的途徑
使用者到達一個app的註冊頁面一般有4種渠道：
當網易音樂的第一批使用者從豆瓣平移過來之後，使用者就不再是大家的了。贏取一個新使用者比維護一個老使用者的成本要高很多，所以當使用者來到了註冊介面作為設計師就要儘可能到創造舒適的使用者體驗，儘可能多的幫助使用者註冊登入。
三、資訊構架及任務流程
資訊構架
就是包涵哪些資訊，這些資訊是怎樣穿插在一起的。
註冊模組概括來說由2部分組成：使用者資訊＋驗證。
使用者資訊包括但不限於：
手機號碼
郵箱
賬號
姓名
性別
興趣
……
然後再由不同產品的定位決定類別的從篩選到簡化。
驗證碼：是一種區分使用者是計算機還是人的公共全自動程式，防刷、防黑、防灌水之類的程式行為。
被廣泛採用的有：簡訊驗證碼、動態驗證碼組成。
任務流程
可以分為邏輯流和頁面流，邏輯流就是資料邏輯針對開發編寫，頁面流可理解為頁面的跳轉關係針對使用者。
簡單以去哪兒的註冊流程中的輸入手機號和驗證碼為例：
下面是我們呈現給使用者操作的頁面流
下面是介於頁面流的邏輯判斷
四、控制元件的狀態
註冊場景下涉及的控制元件一般是：輸入框、按鈕、驗證碼。
輸入框
供使用者輸入資訊，一般包含：提醒文案、正文、示措提醒
按鈕
引發即時操作，即當使用者點選後，觸發即時操作。作為基礎控制元件之一，按鈕廣泛應用於不同平臺的所有產品中。通常位於一個或一系列操作的底部或右方。
按鈕的一般狀態：
pc：normal、hover、down(pressed)、disabled
mobile：normal、onclick、disabled
這裡簡單說一下disabled，從去哪兒註冊的例舉可以看出，當input為空時，關聯按鈕為disabled的狀態，這是採用了放錯的原則：如當使用條件沒有滿足時，常常通過使功能失效來表示（一般按鈕會變為灰色無法點選），以避免誤按。
按鈕上的微互動
辯證法與相對論
學會用辯證法，去分析問題。在產品道路上同樣適用，比如一個龐大的產品就不宜使用過多的動效，一是因為動效會加重系統負擔，二是為了不斷延長其生命力需要不斷的版本迭代，很可能一些辛苦設計開發出來的動效隨著產品的發展方向而被很快淹沒。三是動效的增加會使原本複雜的頁面更加複雜化，對於使用者而言更難於找到頁面的重點內容而失去操作方向。那這個時候我們就可以在一些控制元件上做一些小而美的設計，比如按鈕上。這也就是遵循了相對論的原理：簡單的事物複雜化，複雜的事物簡單化。
下面我們來欣賞一組按鈕的動效
五、設計背後的邏輯思維
隨著時間流逝，科技發展，人們對事物認知不斷提高，註冊場景下的設計也不斷進步。揣摩變化，思考邏輯，提升細節設計。
pc互聯期（請忽略內容，僅觀察表現形式）
首先明確的是，註冊頁面被設計出來的目的是希望使用者能夠填寫資訊併成為我們的使用者。但是，當使用者看到這樣的一張資訊較多的頁面，視覺壓力和逃避心理就來了
除了視覺和心理壓力，我們還可能會被每一行的必輸提醒而吸引，不過行行必輸，行行提醒有點過，視覺干擾也就來了。
費茨(Fitts)定律告訴我們，當我們需要觀察的2個事物距離越遠時，所需要的時間就越長。
人眼閱讀的軌跡順序從1-8，這種排列方式受標題字元數的制約。
相對於上面的註冊資訊，這種拆解資訊的方式不管是視覺還是心理感受都會一些，而且對使用者必填資訊進行了提煉。這種方式後也被應用於移動端。但是拆解步驟不宜過長，否則使用者會失去耐心而中途放棄註冊，這是我們不願看到的。
移動互聯期
從人隨網走到網隨人動，使用者體驗收到前所未有的重視，湧現出大量的專業設計和體驗設計師。對於產品註冊資訊的提煉由多樣逐漸走向結構簡單、資訊簡潔，以使用者為中心的設計越來越被更多人接受。
下面來看下別人家的註冊頁面及設計思路。
淘寶的註冊流程相對來說是比較長的。必填項：手機號、驗證碼、會員名、密碼＊2，有防錯機制，有號碼&使用者名稱2次確認。但是第一次支付密碼輸入頁面沒有自動彈出鍵盤。不過整個跑下來還是挺輕鬆，複雜的事情簡單做，困難的事情分解做。
攜程的註冊流程較簡單，必輸項：手機號、驗證碼、密碼。無防錯機制。2/3中有已輸號碼再現，不過卻隱藏了中斷部分。揣測隱藏的號碼的目的是保護使用者資訊不受偷窺？不過以個人愚見，在註冊環境，保證使用者正確的輸入資訊，快速的完成註冊才是no.1的任務，所以這裡的防保護機制會有些買櫝還珠的感覺。
還有一點，啟用輸入頁面時，鍵盤都沒有彈出，需要點選input框調出鍵盤。
但是提示文案相比下引導性較強。
美團的註冊流程裡，在電話輸入上作了放錯，然後就後面就沒有然後了。有防刷機制，比如當連續輸入2次經系統檢測為已註冊的使用者時，會彈popup要求人or機驗證。對於輸入號碼有部分顯露。註冊第3部介面中的小尖頭有誤導使用者後面仍有流程的誤導。
去哪兒體驗是相對好的，必輸項：手機、驗證碼、密碼＊2，有防錯機制，有密碼6位數提示展示。
蘇寧的註冊流程，必須項：手機號、驗證碼、密碼，有防錯機制，但是允許你同樣的號碼再次註冊，代價就是抹掉所以資料，從v5變成v0。這樣來看，對於形同手機註冊的提示文案還是不夠的。
下面分享一下個人小案例及背後的思考，場景：註冊，輸入項：手機＋驗證碼＋註冊bt
當時的第一版就是左側的，也是比較保守的，不出錯的。視覺線：填寫手機號－看一眼驗證碼輸入框－點選驗證碼按鈕－回來輸入驗證碼－點選註冊。
在這個過程中，驗證碼輸入框被2次閱讀，當時覺得這是一種浪費，所以出了右邊的方案。視覺線是直了：輸入手機號－點選驗證碼－輸入驗證碼－點選註冊，但是從手機號到驗證碼跳了一行，思路會突然斷一下，再著一按鈕直接衝在最前嗎有點突兀。
那怎麼樣才能視覺線和思路保持一致呢？發現僅是一小步，將驗證碼按鈕上移到輸入手機一行，這樣在使用者輸完手機號碼時，看到驗證碼很自然就會點選，然後輸入完成操作。當然“除非有更好的選擇，否則就遵從標準”。
說到手機號碼，有意看了下蘋果在電話數字上的處理，雖然比起銀行卡只有11位的數字，還是在不同場景下都做了分段處理，不得不說蘋果的體驗越來越細膩。當然這是更多的為了識別他人的號碼。
雖然使用者輸錯自己號碼的機率是比較低的，但是一般來說，使用者輸入完畢後都會快速秒掃檢查號碼的正誤，如果我們採用了分段的現實方法，識錯上應該會容易些。
六、總結
看了這麼多案例，那麼我們在設計註冊頁面的時候怎麼去思考呢？
1、瞭解設計場景，設計目的。也許我們投入了很多資源做引流，當使用者到達這個頁面時，想盡辦法留住他們。
2、學會站在不同產品的立場分析別人的設計思路，而不僅僅是視覺表現。
3、視覺簡單，邏輯通暢。
4、目前大部分的註冊流程為分解的形式及一站式，結合產品實際場景選擇適合自己產品的，儘可能的簡化資訊、縮短流程，提升註冊達成率。
5、對於互動物件的多層次視覺呈現，比如文案提醒、示錯、驗證提醒，按鈕的響應反饋，都是提升使用者體驗的小細節。
6、在物件對齊及排列方式，學會依靠一些定律，法則，可以是我們在迷茫不定的時候，看輕方向。
7、不斷學習、思考、對比，提升自己對事務的認知。
只有理解設計背後的思緒才能提升細節設計，也只有明確了設計場景和設計目的才能在不同的設計方案中找到最合適的那個。
就像買一件衣服，我們總會盯著線頭、走線、針眼、鈕釦、鎖邊這些點以此來評價一件衣服的品質，介面已是如此。經得起推敲的設計才是好設計。
本文僅筆者觀點，不到之處歡迎大家溝通指正。
最後分享一下筆者在設計過程中的思考三步法則：
1、為什麼要做這個事情？
2、怎麼去做？
3、還有沒有更好的解決方法？