UI界面設(shè)計(jì) 登錄頁(yè)面設(shè)計(jì)

登錄頁(yè)面設(shè)計(jì)匯報(bào)人：某某某匯報(bào)時(shí)間：2025.X.X010203040506前言登錄頁(yè)面包含元素APP登錄頁(yè)面方式APP登錄頁(yè)面四種形式登錄頁(yè)面視覺設(shè)計(jì)登錄頁(yè)面交互思考0102移動(dòng)端產(chǎn)品(APP)的設(shè)計(jì)包含許多頁(yè)面，雖然每個(gè)產(chǎn)品的定位不同，功能也不同。但大部分產(chǎn)品都會(huì)有一些共同的頁(yè)面，比如注冊(cè)登錄頁(yè)，或者是閃屏，引導(dǎo)頁(yè)之類的。一、登錄頁(yè)面web端還是APP，登錄注冊(cè)頁(yè)面都是非常重要的。它是采集用戶信息，收集用戶資料的必經(jīng)之路。所以在看上去極簡(jiǎn)單的一個(gè)頁(yè)面里，隱藏著復(fù)雜的交互。我們一眼看上去的登錄頁(yè)面給到的信息無非是用戶名、密碼、驗(yàn)證碼、登錄按鈕等幾大元素。有的更簡(jiǎn)潔的甚至只有用戶名、密碼、及登錄按鈕。做得完整一些，它還包括用戶名、郵箱登錄、手機(jī)登錄、第三方登錄，其中第三方登錄又包括QQ、微博、微信等等。其實(shí)這些不同的登錄方式，都有一個(gè)共同的目的，就是收集用戶的信息資料。這些登錄方式的取舍，可根據(jù)需求而定。首先考慮功能的完整性，其次再考慮頁(yè)面的美觀度！二是登錄注冊(cè)界面放在個(gè)人中心,只有需要使用某些功能時(shí)才登錄一是剛進(jìn)入APP的時(shí)候，就提示用戶要進(jìn)行注冊(cè)或是登錄二、登錄注冊(cè)界面的元素登錄注冊(cè)界面要分為兩個(gè)界面來分析（以手機(jī)號(hào)登錄注冊(cè)為例）：1、登錄界面：返回、輸入手機(jī)號(hào)、輸入密碼、忘記密碼、登錄、注冊(cè)、第三方登錄......2、注冊(cè)頁(yè)面：返回、輸入手機(jī)號(hào)、獲取驗(yàn)證碼、輸入驗(yàn)證碼、設(shè)置密碼、同意注冊(cè)協(xié)議、注冊(cè)、登錄......Part.01常見登錄頁(yè)面案例根據(jù)APP的種類，可以分為無需登錄、非強(qiáng)制登錄、強(qiáng)制登錄三種。無需登錄：純工具類的應(yīng)用就無需注冊(cè)登錄，因?yàn)榇祟惞ぞ邚?qiáng)調(diào)的是易用性，不依賴用戶留存?，F(xiàn)在市面上的工具類應(yīng)用大都作為手機(jī)內(nèi)置應(yīng)用，比如IPHONE內(nèi)置的計(jì)算器、日歷等，很少有公司愿意開發(fā)這類應(yīng)用，畢竟很難有盈利的途徑。三、APP登錄方式非強(qiáng)制性登錄：可選擇是否登錄，但不登錄時(shí)限制使用部分功能。市面上大部分的APP都是這種類型，這是比較討用戶喜歡的一種方式，絕大多數(shù)人在不了解這個(gè)APP的前提下，希望先瀏覽產(chǎn)品的內(nèi)容在來決定要不要注冊(cè)登錄。這類產(chǎn)品主要是滿足人們?nèi)粘Ｐ枨蟮囊恍┥铑怉PP，比如音樂類，新聞?lì)悜?yīng)用。強(qiáng)制性登錄：這類應(yīng)用一般很依賴個(gè)人隱私和數(shù)據(jù)安全。比如社交類應(yīng)用，你必須注冊(cè)登錄才能夠產(chǎn)生與人的交流。還有比如支付寶等依賴支付功能類應(yīng)用。一句話總結(jié)就是：依賴用戶的數(shù)據(jù)來實(shí)現(xiàn)功能應(yīng)用的APP都必須強(qiáng)制性登錄，因?yàn)橛脩魯?shù)據(jù)是使用這類APP的根本，換句話說如果你不注冊(cè)登錄那么你將無法使用其核心功能。四、APP登錄頁(yè)面方式四種形式注冊(cè)登錄有四種形式:手機(jī)驗(yàn)證碼登錄、賬號(hào)密碼登錄、第三方賬戶登錄、混合登錄。目前很主流的注冊(cè)登錄方式，操作便捷，只需要輸入手機(jī)號(hào)和驗(yàn)證碼即可登錄。后續(xù)可以根據(jù)個(gè)人需求在資料頁(yè)面填寫密碼，以保障用戶資料安全。手機(jī)驗(yàn)證碼登錄賬號(hào)密碼登錄一般通過手機(jī)或者郵箱注冊(cè)登錄，由于注冊(cè)和登錄是分開的所以過程十分繁瑣。這是目前最方便的登錄方式了，不需要進(jìn)行任何的輸入操作，只需要兩次點(diǎn)擊按鈕即可注冊(cè)登錄成功。一般都是通過第三方社交賬戶，比如微信、QQ等，當(dāng)然缺點(diǎn)也很明顯，用戶數(shù)據(jù)安全無法保障。所以一些依賴用戶數(shù)據(jù)安全的應(yīng)用一般不會(huì)采用這種方式。第三方賬戶登錄混合登錄此類登錄方式一般是由上面三種方式兩兩組合而成，目的是為了給用戶更多的選擇。雖說選擇越多用戶體驗(yàn)越不好，但這也是沒辦法的事情。企業(yè)想保障用戶數(shù)據(jù)安全，只能通過注冊(cè)登錄自己平臺(tái)的賬號(hào)來完成，但往往這一過程非常繁瑣，很多用戶就會(huì)因此而流失。所以選擇混合登錄的方式，實(shí)屬無奈之舉。注冊(cè)登錄頁(yè)面由三個(gè)模塊組成:背景模塊、LOGO模塊、注冊(cè)登錄模塊。不考慮交互的話，視覺上的差異主要是由背景和注冊(cè)登錄模塊這兩個(gè)部分決定的。而頁(yè)面的風(fēng)格主要是由于背景的差異造成的。五、注冊(cè)登錄頁(yè)面視覺設(shè)計(jì)一般背景有五種形式:純色、漸變、照片、插畫、混合。具體使用哪種形式應(yīng)該根據(jù)產(chǎn)品的調(diào)性，用戶人群的特征等來選擇。1、背景模塊3.注冊(cè)登錄模塊注冊(cè)登錄模塊根據(jù)不同的形式包含的內(nèi)容也不同比如手機(jī)驗(yàn)證碼登陸包含手機(jī)號(hào)、驗(yàn)證碼、登錄按鈕；賬號(hào)密碼登陸包含賬號(hào)、密碼、登錄按鈕、注冊(cè)、忘記密碼等;第三方登錄一般只顯示多個(gè)社交賬號(hào);混合登錄則基本包含上面所有信息內(nèi)容。從包含信息內(nèi)容的多少也可以看出其方便的程度。2.LOGO模塊六、注冊(cè)登錄頁(yè)面思考●

在輸入框內(nèi)提示要輸入的內(nèi)容確保用戶能夠不需要思考而進(jìn)行準(zhǔn)確無誤的操作。在輸入框內(nèi)提示要輸入的內(nèi)容，比如手機(jī)驗(yàn)證碼登錄分別在兩個(gè)輸入框內(nèi)提示手機(jī)號(hào)還有驗(yàn)證碼字樣，當(dāng)進(jìn)行輸入時(shí)提示字樣消失。●用顯示/隱藏icon檢查密碼是否正確。為了確保密碼輸入正確，使用顯示/隱藏icon進(jìn)行密碼確認(rèn)。當(dāng)然現(xiàn)在一般的做法都是通過輸入兩遍密碼來確保輸入正確（注冊(cè)狀態(tài)）。設(shè)置顯示/隱藏icon雖然方便但是用戶使用他的概率卻很低，如果出現(xiàn)密碼錯(cuò)誤，用戶只會(huì)責(zé)怪產(chǎn)品。但在特定的情況下顯示/隱藏icon還是很有必要的。比如輸入密碼一直不正確時(shí)，這時(shí)按鈕可用來檢查是否輸入錯(cuò)誤?！褫斎氩煌愋畔r(shí)，彈出相對(duì)應(yīng)的輸入鍵盤。點(diǎn)開郵箱輸入框，彈出帶有@的英文輸入鍵盤。點(diǎn)開手機(jī)號(hào)輸入框，彈出九宮格數(shù)字輸入鍵盤。點(diǎn)開密碼輸入框，彈出英文輸入鍵盤。當(dāng)一個(gè)產(chǎn)品能做到輸入不同類信息彈出相對(duì)應(yīng)的輸入鍵盤時(shí)，也許用戶不能夠馬上察覺到。但是這一過程會(huì)顯得格外順暢隱形的提升了用戶體驗(yàn)。好的用戶體驗(yàn)都是透明的、不易察覺到的?！?/p>

輸入郵箱時(shí)，自動(dòng)跳出多種郵箱后綴供用戶選擇。點(diǎn)開郵箱輸入框，輸入第一個(gè)數(shù)字開始提供自動(dòng)完成字段。如下圖?！褫斎胧謾C(jī)號(hào)時(shí)，采用344分布。著名的7士2法則指出人的短期記憶力廣度大約為7個(gè)單位(阿拉伯?dāng)?shù)字、字母單詞等)，即每次只能處理5-9件事情。所以我們記號(hào)碼一般把它分成3組數(shù)字:138xxxxxxxx。這個(gè)規(guī)則同樣適用于銀行號(hào)碼、轉(zhuǎn)賬的金額等?！?/p>

清晰的錯(cuò)誤反饋當(dāng)用戶輸入錯(cuò)誤信息時(shí)，應(yīng)該彈出臨時(shí)框清晰的提示用戶錯(cuò)誤的地方。臨時(shí)框有兩種形式，一種是需要用戶點(diǎn)擊確認(rèn)才能進(jìn)行下一步操作。另一種是彈出一兩秒后自動(dòng)隱藏。個(gè)人更傾向于第二種形式，因?yàn)榈谝环N形式相當(dāng)于強(qiáng)制中斷了用戶的操作，用戶需要點(diǎn)擊確認(rèn)(多一步操作)才能回到原來的操作流程?！?/p>

輸入時(shí)增加一鍵清空icon在輸入信息時(shí)難免會(huì)出現(xiàn)輸入錯(cuò)誤，如果沒有一鍵清空的ic