近期正好在做IOS版本的改版谊惭，第一項(xiàng)就是注冊(cè)登錄頁(yè)，正好借此機(jī)會(huì)收集整理一些相關(guān)知識(shí)明场，加上自己實(shí)踐時(shí)的感悟汽摹。
1、注冊(cè)的目的
對(duì)于企業(yè)苦锨，比較類似：將訪客轉(zhuǎn)化為用戶逼泣，有助于獲得用戶畫(huà)像和各種數(shù)據(jù)，從而方便后續(xù)改進(jìn)舟舒，以及針對(duì)用戶的個(gè)性化服務(wù)拉庶。
對(duì)于個(gè)人，則根據(jù)APP的不同可以獲得不同的便利：比如內(nèi)容類的可以收藏秃励，保存歷史記錄氏仗。社交類的可以提供個(gè)性身份。因此夺鲜，根據(jù)不同的目的皆尔，需要設(shè)計(jì)不同的注冊(cè)登錄前頁(yè)和完成后跳轉(zhuǎn)頁(yè)，比如币励，內(nèi)容類的會(huì)在注冊(cè)后讓你選擇感興趣的版塊慷蠕、運(yùn)動(dòng)類的會(huì)詢問(wèn)你的一些個(gè)人情況等等。（影響注冊(cè)登陸前后頁(yè)流程的因素還有其他食呻，后續(xù)會(huì)講到）流炕。
2澎现、注冊(cè)登錄的流程
2.1 整體流程
整體來(lái)說(shuō)，可以分為跳轉(zhuǎn)前頁(yè)——輸入注冊(cè)/登錄——跳轉(zhuǎn)后頁(yè)
首先每辟，根據(jù)APP的定位可分為三種形式：
新用戶是否登錄典型特點(diǎn)定位
A-強(qiáng)制微信剑辫、支付寶打開(kāi)APP必須登錄基于用戶的各項(xiàng)功能，一般為必備型APP渠欺，簡(jiǎn)單粗暴的強(qiáng)制登錄
B-主推Lofter妹蔽、keep引導(dǎo)頁(yè)/啟動(dòng)頁(yè)與注冊(cè)頁(yè)相結(jié)合APP風(fēng)格強(qiáng)烈，用戶群年輕前衛(wèi)峻堰，用引導(dǎo)頁(yè)/啟動(dòng)頁(yè)的風(fēng)格給用戶代入感讹开，從而促進(jìn)注冊(cè)登錄
C-無(wú)要求今日頭條、美團(tuán)捐名、淘寶用戶進(jìn)入APP可正常使用旦万，只有涉及相關(guān)功能（如支付）時(shí)才會(huì)要求登錄以內(nèi)容瀏覽為主(社交/平臺(tái)/工具類等）
新用戶是否登錄用戶信息需求量跳轉(zhuǎn)前頁(yè)跳轉(zhuǎn)后頁(yè)
A-強(qiáng)制中等無(wú)(APP打開(kāi)首頁(yè)）應(yīng)用首頁(yè)
B-主推大無(wú)/功能頁(yè)用戶信息相關(guān)填寫(xiě)或勾選/回功能頁(yè)
C-無(wú)要求少功能頁(yè)/內(nèi)容頁(yè)回功能頁(yè)/內(nèi)容頁(yè)
對(duì)于各個(gè)不同的APP，有時(shí)并沒(méi)有很具體的分類镶蹋。比如淘寶屬于上述的A+C成艘，初次進(jìn)入時(shí)可以在首頁(yè)瀏覽，而一旦點(diǎn)擊“我的”贺归，則會(huì)進(jìn)入強(qiáng)制登錄頁(yè)（無(wú)法返回）淆两。而Lofter偏向于B+C類，給用戶提供了一個(gè)“隨便看看”的選項(xiàng)拂酣。
2.2 輸入流程
脫離場(chǎng)景談流程都是耍流氓秋冰，而場(chǎng)景中影響用戶行為的因素比較多，比如在地鐵上站立時(shí)婶熬，單手操作手機(jī)登錄剑勾，這時(shí)周圍環(huán)境，使用時(shí)間等等都是影響因素赵颅。但實(shí)際分析時(shí)虽另，需要找到關(guān)鍵因素。由于手機(jī)上APP較多饺谬，用戶來(lái)到登錄頁(yè)面時(shí)可能不記得自己是否注冊(cè)過(guò)捂刺，因此用戶是否記得自己賬號(hào)密碼的情況就是一個(gè)關(guān)鍵因素。在此對(duì)公司現(xiàn)有的APP嘗
試進(jìn)行分析募寨。
用戶注冊(cè)過(guò)認(rèn)為自己有賬號(hào)認(rèn)為自己有密碼實(shí)際有密碼輸入密碼用戶行為設(shè)計(jì)策略
1用戶名用戶名/手機(jī)號(hào)是是正確用戶名登錄
2用戶名用戶名/手機(jī)號(hào)是是錯(cuò)誤再次輸入密碼第一次提示密碼錯(cuò)誤族展，第二次提示找回密碼
3用戶名否
注冊(cè)/第三方登錄未綁定手機(jī)提示綁定手機(jī)，已綁定手機(jī)提示已有賬號(hào)去綁定賬號(hào)
4用戶名/手機(jī)號(hào)手機(jī)號(hào)碼否
驗(yàn)證碼登錄
5手機(jī)號(hào)用戶名是否錯(cuò)誤其他登錄/注冊(cè)提示用戶名不存在拔鹰，請(qǐng)其他登錄或注冊(cè)
6手機(jī)號(hào)手機(jī)號(hào)碼是是正確手機(jī)號(hào)登錄
7手機(jī)號(hào)手機(jī)號(hào)碼是是錯(cuò)誤再次輸入密碼第一次提示密碼錯(cuò)誤仪缸，第二次提示找回密碼
8手機(jī)號(hào)否
注冊(cè)/第三方登錄提示已有賬號(hào)去登陸
9否用戶名是否錯(cuò)誤輸入密碼提示用戶名不存在，請(qǐng)其他登錄或注冊(cè)
10否手機(jī)號(hào)碼是否錯(cuò)誤輸入密碼提示用戶名不存在格郁，請(qǐng)其他登錄或注冊(cè)
11否手機(jī)號(hào)碼否
手機(jī)驗(yàn)證登錄跳轉(zhuǎn)注冊(cè)
12否否
注冊(cè)
新注冊(cè)只有手機(jī)注冊(cè)這一種方式，即新用戶沒(méi)有賬號(hào)，用戶名是手機(jī)號(hào)例书。而賬號(hào)是之前老用戶的锣尉，老用戶一個(gè)手機(jī)號(hào)可綁定多個(gè)賬號(hào)，并設(shè)置一個(gè)默認(rèn)賬號(hào)决采。
3自沧、頁(yè)面元素與布局
一般來(lái)說(shuō)，注冊(cè)登錄頁(yè)涉及的元素有：注冊(cè)按鈕树瞭、登錄按鈕拇厢、找回密碼、輸入框晒喷，第三方登錄孝偎，驗(yàn)證碼登錄，游客跳過(guò)按鈕凉敲，產(chǎn)品LOGO衣盾。當(dāng)然也會(huì)有一些獨(dú)特的元素，如支付寶的刷臉登錄爷抓，語(yǔ)言切換等势决。根據(jù)2.1中對(duì)APP類型的劃分，以及各APP自己的情況蓝撇，可以舍去其中某些元素果复。
APP現(xiàn)版頁(yè)面，以賬號(hào)登錄為主
4渤昌、視覺(jué)樣式
視覺(jué)樣式主要是契合APP本身的特點(diǎn)和風(fēng)格虽抄，也因此可以按照2.1中的分類進(jìn)行粗略的劃分。
A類（基于用戶的各項(xiàng)功能耘沼，一般為必備型APP极颓，簡(jiǎn)單粗暴的強(qiáng)制登錄）
一般風(fēng)格以簡(jiǎn)潔為主，同時(shí)會(huì)配以產(chǎn)品LOGO群嗤。由于是在打開(kāi)APP后直接出現(xiàn)菠隆，因此背景可全屏，不受制于導(dǎo)航欄狂秘。如下圖骇径。
B類（APP風(fēng)格強(qiáng)烈，用戶群年輕前衛(wèi)者春，用引導(dǎo)頁(yè)/啟動(dòng)頁(yè)的風(fēng)格給用戶代入感）
一般不配輸入框破衔，僅提供注冊(cè)登錄的按鈕。背景采用全屏/半屏圖片钱烟，有時(shí)配以宣傳語(yǔ)晰筛。圖片選取時(shí)如果是為了喚起共鳴嫡丙，盡量選擇帶人物的，甚至可以采用小視頻的形式（如keep）读第。而如果采用半屏圖片曙博，注意打破間隔來(lái)避免死板，如下圖
C類（只有涉及相關(guān)功能（如支付）時(shí)才會(huì)要求登錄怜瞒，一般是內(nèi)容瀏覽父泳、工具類等APP）
該類注冊(cè)登錄頁(yè)由于是在用戶使用APP過(guò)程中跳出，所以大部分會(huì)盡量滿足APP內(nèi)的一致性（一般意味著保留導(dǎo)航欄吴汪，采用淺白色底色）惠窄。也可以采用類似B類的全屏登錄頁(yè)。還有一些會(huì)采取彈窗模態(tài)的形式漾橙，（如今日頭條杆融，微博）
注意點(diǎn)：若輸入框在屏幕中處于較低的位置，要考慮輸入框彈起后擋住的情況近刘，采取如將頁(yè)面上移等方法擒贸。
2.區(qū)分空狀態(tài)（未輸入）與錯(cuò)誤。校驗(yàn)報(bào)錯(cuò)有三種種事件觉渴，一是邊輸入邊檢驗(yàn)（前端）介劫；一是輸入框失去焦點(diǎn)（完成該項(xiàng)進(jìn)入下一項(xiàng)），另一種是全部完成案淋，點(diǎn)擊最終的確認(rèn)按鈕座韵。常規(guī)錯(cuò)誤應(yīng)該在前兩者發(fā)生時(shí)檢驗(yàn)，而空狀態(tài)應(yīng)該在最后確認(rèn)時(shí)時(shí)檢驗(yàn)踢京，避免用戶在整個(gè)輸入流程中過(guò)多干擾誉碴。
3.逐項(xiàng)提示錯(cuò)誤。多條錯(cuò)誤同時(shí)提示干擾性過(guò)強(qiáng)瓣距，同時(shí)打擊用戶黔帕，不利于引導(dǎo)〉竿瑁可以逐條報(bào)錯(cuò)成黄，引導(dǎo)用戶逐條更改。
4梳理出規(guī)范性的文檔逻杖，同步給設(shè)計(jì)奋岁、開(kāi)發(fā)和測(cè)試，以便更好地把控細(xì)節(jié)荸百。
二闻伶、輸入框提示文字
輸入框的提示文字的目的：1.告訴用戶此處要輸入什么（用戶名/密碼）2.告訴用戶怎么輸入（格式/字?jǐn)?shù)限制）。
對(duì)于第一個(gè)目的够话，現(xiàn)有的表現(xiàn)形式有多種蓝翰。弱提示文字（開(kāi)始輸入后消失）光绕，icon+弱提示文字，強(qiáng)提示文字（直接注明“用戶名”）+弱提示文字畜份。
而對(duì)于第二個(gè)目的奇钞，可以用弱提示文字，或底部提示文字漂坏。
另外，在輸入框獲取焦點(diǎn)時(shí)媒至，可以引入一些動(dòng)效顶别。
三、整體UI樣式
首先拒啰，根據(jù)APP的定位可分為兩種形式驯绎，一種以瀏覽為主，用戶未登錄也可以正常瀏覽谋旦，只有在進(jìn)行購(gòu)買等具體操作時(shí)才會(huì)彈出登錄頁(yè)（如浸今日頭條剩失，美團(tuán)，淘寶等）册着。對(duì)應(yīng)的登錄頁(yè)一般比較簡(jiǎn)單另一種
三拴孤、其他
設(shè)計(jì)要講究實(shí)用性，不要過(guò)度細(xì)節(jié)鉆牛角尖甲捏。京東的PC端就
