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

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

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

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

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

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