前言
注冊&登錄叼屠，是每個產(chǎn)品設(shè)計中最基本，最重要同時也是最繁瑣的一環(huán)绞铃【涤辏看似簡單，卻與相當(dāng)多的產(chǎn)品功能用戶使用場景交織在一起儿捧，受到產(chǎn)品類型荚坞、用戶定位、業(yè)務(wù)邏輯菲盾、使用場景颓影、用戶操作等不同因素影響。絕大多數(shù)的網(wǎng)站已經(jīng)放棄了復(fù)雜懒鉴、繁復(fù)的注冊流程诡挂，將用戶可能會遭遇障礙、引起用戶反感和煩躁的部分去除临谱，盡可能簡單的讓用戶完成注冊和登錄流程咆畏。當(dāng)用戶完成注冊之后，可以選擇性地提供額外的信息吴裤，而這些信息可能會給給用戶帶來更加定制化的用戶體驗旧找。
設(shè)計一個好的登錄注冊系統(tǒng)并不是很輕松。
申明:這篇文章是借鑒的優(yōu)設(shè)和人人都是產(chǎn)品經(jīng)理的相關(guān)文章麦牺，很多經(jīng)驗并非原創(chuàng)钮蛛，再次向原作者表示感謝。
今天就從4個方面來說說登陸注冊頁面：
登陸注冊頁面出現(xiàn)在哪里剖膳？
登陸注冊頁界面的元素有哪些魏颓？
登陸注冊分為哪幾種情況？
登錄注冊頁面應(yīng)該注意哪些交互細節(jié)?
那廢話少說吱晒，開始總結(jié)吧甸饱！
登陸注冊頁面出現(xiàn)在哪里？
登錄注冊界面一般來說會出現(xiàn)在兩種地方。
一是叹话，剛進入APP的時候偷遗，就提示用戶要進行注冊或是登錄（如簡書，MONO,Keep等）
二是驼壶，登錄注冊界面放在個人中心氏豌，用戶進入APP的時候并不會提示登錄或是注冊，只有當(dāng)用戶使用到某些功能時才會提示登錄或注冊热凹，當(dāng)然用戶也可以選擇在這里進行登錄或注冊泵喘。（如淘寶，京東般妙，蘑菇街等）
第一種方式顯然沒有第二種用戶體驗好纪铺，登錄和注冊畢竟是個麻煩事，如果必須要登錄或注冊才能使用APP碟渺，等于給用戶設(shè)定了一個門檻霹陡，必然會導(dǎo)致用戶的流失或卸載，所以如果APP采用這種方式的時候止状，都會有一個選項就是不注冊先進app體驗一番烹棉。某些內(nèi)部管理型APP，必須登錄才能使用的除外怯疤。
登陸注冊頁界面的元素有哪些浆洗？
登錄注冊界面要分為兩個界面來分析（以手機號登錄注冊為例）：
1、登錄界面：返回集峦、輸入手機號伏社、輸入密碼、忘記密碼塔淤、登錄摘昌、注冊、第三方登錄高蜂。聪黎。。
2备恤、注冊頁面：返回稿饰、輸入手機號、獲取驗證碼露泊、輸入驗證碼喉镰、設(shè)置密碼、同意注冊協(xié)議惭笑、注冊侣姆、登錄生真。。捺宗。
登陸注冊分為哪幾種情況柱蟀？
APP的注冊登錄有四種情況:
1.不需要注冊登錄
常見于系統(tǒng)自帶的工具類APP，像經(jīng)常使用的鬧鐘偿凭、日歷、計算器等等派歌；一些簡單的第三方APP：樂流弯囊，榫卯等。
這些APP的特點都是功能相對單一胶果，比較“輕”匾嘱，不需要記錄用戶信息或行為歷史。
2.第三方賬號登錄
用戶不需要輸入注冊登錄信息早抠，直接選擇第三方賬號就能完成登錄霎烙。國內(nèi)常見的第三方賬號有微博、微信蕊连、QQ悬垃、豆瓣、人人等甘苍，國外常見的第三方賬號有Facebook尝蠕，Twitter，Google等≡赝ィ現(xiàn)在國內(nèi)除了超級APP之外的APP基本都支持第三方賬號登錄看彼，這樣能簡化用戶注冊登錄的流程，提高APP的用戶轉(zhuǎn)化率囚聚。
3.郵箱注冊
最開始的時候注冊登錄是基于PC的靖榕，也就是基于網(wǎng)頁，PC時代的互聯(lián)網(wǎng)產(chǎn)品多使用郵箱作為唯一ID顽铸。所以郵箱注冊成為主流茁计，而且注冊過程中需要驗證郵箱也很方便，用戶直接在PC端就可以完成所有操作谓松。
4.手機注冊
隨著移動互聯(lián)網(wǎng)的到來簸淀，人們觸網(wǎng)的主要設(shè)備已經(jīng)從PC逐漸轉(zhuǎn)移到智能手機。加上手機號碼的實名制毒返、全球通業(yè)務(wù)的普及租幕，使得手機號碼也具有了唯一標(biāo)示性。而且在移動互聯(lián)網(wǎng)時代拧簸，用手機號碼作為登錄ID劲绪，并用短信驗證碼的形式來驗證ID，這些操作流程都基于手機端。所以手機號碼逐漸取代郵箱成為APP注冊登錄的主流方式贾富。
登錄注冊頁面應(yīng)該注意哪些交互細節(jié)?
關(guān)于提示語
一種是輸入框中的提示語句歉眷，如在用戶名、密碼輸入框等處颤枪。這種提示語句在信息層級上較為弱化汗捡，且在點擊輸入框或是輸入內(nèi)容時會消失。這樣小小的細節(jié)傳達給客戶比較清晰的信息畏纲，給客戶舒適的體驗扇住。
另一種提示語句為輸入后的反饋提示，如提示密碼不正確盗胀、用戶名有誤等艘蹋。可以彈出警告對話框提示票灰，或是直接在原先界面上提示女阀。
關(guān)于獲取驗證碼
看以下三種獲取驗證碼的放置位置
A:放置在驗證碼輸入框右側(cè)屑迂，這也是很多app常用的方式浸策。用戶先看到輸入框，然后再點擊獲取驗證碼惹盼，再回來輸入驗證碼的榛，驗證碼輸入框用戶看了兩次；
B：獲取驗證碼放在了左側(cè)逻锐，操作流程上很流暢夫晌，但是按鈕放在這里視覺上會顯得很突兀，驗證碼輸入框與上面的輸入框的聯(lián)系好像被打斷了昧诱。
C：這種方式晓淀，操作流程很直，是一條線盏档，而且也保證了上下兩個輸入框直接的視覺聯(lián)系凶掰。
現(xiàn)在的手機一般會在頂部短時間顯示收到的短信內(nèi)容，所以用戶可以不跳出APP就能看到驗證碼進行填寫蜈亩，而且有些APP還會彈出獲取讀取短信的請求懦窘，如果你同意，APP會自動讀取驗證碼并填上稚配，非常方便畅涂。如果出現(xiàn)了需要跳出APP去看驗證碼短信的情況，則用戶再次進入APP時道川，必須是剛才填輸入驗證碼的界面午衰。
關(guān)于按鈕狀態(tài)的反饋
默認狀態(tài)下立宜，登錄按鈕狀態(tài)是不可點擊狀態(tài)，只有當(dāng)用戶輸入了有效的信息才會變成可點擊狀態(tài)臊岸。這里的有效信息并不是指正確信息橙数，而是從信息的類型和長度來判斷。如APP要求的密碼必須是大于或是等于6位數(shù)帅戒，則當(dāng)用戶的輸入字符長度少于六位時灯帮，登錄按鈕還是不可點擊狀態(tài)，只有當(dāng)輸入字符長度等于或是超過6位數(shù)時逻住，按鈕狀態(tài)才變成可點擊狀態(tài)钟哥。
關(guān)于手機號的顯示——對手機號碼進行3 4 4的分布。
這個規(guī)則不僅適用于手機號碼鄙信，包括銀行賬號瞪醋、轉(zhuǎn)賬金額等等忿晕。這是因為人的短期記憶是有限的装诡，即一次只能記住有限的東西，如果強制記住很長的東西践盼，短期記憶就很容易出錯鸦采。
所以將數(shù)字以4或者3為單位分組，有利于用戶閱讀咕幻、編輯渔伯、校對手機號碼。
用顯示/隱藏icon代替輸入兩遍密碼
為了確保密碼輸入正確肄程，很多APP需要用戶輸入兩遍密碼來確定密碼輸入無誤锣吼，但這無疑增加了用戶的工作量。替代方案是在密碼輸入框右側(cè)增加一個“顯示/隱藏icon”蓝厌，讓用戶在輸入完一遍密碼后可以選擇點開“顯示/隱藏icon”來確保密碼輸入無誤玄叠，減少用戶的工作量。
彈出相對應(yīng)的輸入鍵盤
點開郵箱輸入框拓提，彈出帶有@的英文輸入鍵盤读恃。
點開手機號輸入框，彈出九宮格數(shù)字輸入鍵盤代态。
點開密碼輸入框寺惫，彈出英文輸入鍵盤。
這是很小的細節(jié)蹦疑，雖然用戶可能不知道哪里不對西雀，但是他能體會到好不好用。一個APP注意了這點歉摧，那用戶就會覺得這個APP好用蒋搜。而另一個APP沒有做到這點篡撵，無論點擊哪個輸入框彈出的都是九宮格中文輸入鍵盤，用戶就會覺得這個APP不太好用豆挽。
作為設(shè)計師育谬，要知道用戶覺得不好用的原因是什么，這樣才能對癥下藥帮哈，改善用戶體驗膛檀。
登錄時增加一鍵清空icon
在登錄的時候偶爾會出現(xiàn)輸入錯誤，如果沒有這個清除的icon娘侍，用戶只能按鍵盤中的清除按鈕咖刃，需要一直按住直到輸入框為空。
一個是只需要點一次就能清空憾筏，一個需要長按一段時間或者連續(xù)按多次才能清空嚎杨，孰優(yōu)孰劣可想而知。
清晰的錯誤反饋
當(dāng)用戶輸入錯誤信息時氧腰，最好利用臨時框的形式提示用戶枫浙。而不是不做反應(yīng)讓用戶自己去猜到底是怎么回事。
臨時框也有兩種形式古拴，一種是左邊的對話框形式箩帚，這需要用戶點擊確認才能進行下一步操作。一種是右邊toast的形式黄痪，彈出一兩秒后自動消失紧帕。
對于好多的小的細節(jié)還沒有總結(jié)，如：忘記密碼桅打、用戶協(xié)議等等
以下是自己之前的臨氖鞘取：
作品的優(yōu)點：比較完整的一套登錄注冊，不僅做了界面的設(shè)計挺尾，還做了線框圖鹅搪。
作品的缺點：界面設(shè)計色彩單一，小的細節(jié)用顯示/隱藏icon代替輸入兩遍密碼的小圖標(biāo)未表現(xiàn)出來等潦嘶。
寫在后面的話
你所遇到的問題涩嚣，以后都會變成你的能力！
加油掂僵！
