每款app都會有一個登陸頁面，除軟件閃屏之外，登陸頁是用戶在使用一款App時遇到的第一個操作頁面，也是第一個傳遞信息給用戶的媒介，由此可見登陸頁UI設計非常重要。隻有美觀、實用的app登陸頁才能留住用戶，從而提高用戶轉化率。本文，Pixso將於大傢分享app登陸頁面的優秀示例，以及探討登陸頁UI設計技巧。
1. 登陸頁的主要UI設計樣式有哪些
登陸頁功能點梳理
在進行設計樣式的分析之前，我們需要先瞭解的UI登陸頁的功能點，以幫助我們規劃UI登陸頁面的相關內容以及明白為什麼要放置這些內容的原因。
- 登陸註冊流程：第三方登陸、驗證碼登陸/註冊、密碼登陸、找回密碼。
- 賬戶體系配套：關鍵點引導綁定手機、關鍵點強制綁定手機、驗證碼驗證賬號、賬號相互綁定。
常見的登陸頁UI設計樣式
- 品牌圖片/LOGO：
運用產品符號或是品牌符號來作為設計主要元素，一是可以傳遞產品的品牌感，二是可以渲染產品行業屬性特征，設計中將兩個特征同時兼顧，可以以超強視覺沖擊力和氛圍渲染力給予用戶視覺和感官的刺激。
- 填充圖片
這種設計的氛圍感更強，畫面感更加突出，也更容易讓用戶感知到內容，並對產品初步產生一些認識和理解，是當下較為流行的UI設計樣式！因為圖片比顏色的視覺沖擊力更強，也比較容易感知到產品的用途，所以運用品牌行業相關的圖片來設計登陸頁面也是一種實用的方法，在此基礎上，加上常規的登陸路徑和輔助登陸路徑即可。
- 歡迎標語
歡迎語有利於打破產品與用戶初次見面的冰冷感，讓用戶有種賓至如歸的感覺。一般可分為兩種場景，一是用戶初次下載未註冊時，與用戶寒暄；二是歡迎已有賬號的用戶回來。
提示：以上示例均可在Pixso資源社區的中找到，設計師可一鍵復制，免費使用。Pixso內置騰訊、阿裡、字節、今日頭條、螞蟻設計等優秀設計規范，提供海量設計模板和素材，本地化字體資源，供設計師參考和使用。
2. UI登陸頁的設計技巧
登陸（或註冊）操作會占用用戶的註意力，給用戶帶來“負擔”，因此我們要另用戶在登陸頁面上花費的時間越少越好，最好將信息內容保持在頁面中央，讓用戶一眼看到所有信息，用簡潔的語言指導用戶在特定步驟中明確需要做什麼（那些幽默但復雜的行話、專業術語和華麗的語言在登陸體驗中是不實用的），提供給用戶清晰的路徑，使他們能夠方便高效地找到所需的內容，減輕用戶的思考。
焦點設計
突出CTA按鈕是焦點設計的好方法。CTA按鈕的目的是吸引用戶的註意力，提高轉化率。因此，按鈕越大，用戶越有可能找到並點擊它，但它不宜太大，以避免破壞視覺組合和佈局層次結構。
最佳按鈕應根據頁面比例進行設計，以便用戶更好地識別它們。使用產品的主題色，可以讓登陸動作的CTA按鈕突出，聚焦用戶的目光，促成用戶行動。
移動端社交軟件設計素材
明確反饋並提供幫助
在登陸過程的每個階段，用戶都可能會失敗。比如錯誤的輸入電子郵件地址，密碼和網絡問題等，所有這些都可能導致登陸意圖直線下降。因此，登陸頁面最好以合適的方式回應用戶，清晰、及時地反饋錯誤消息。
設置輸入框提示語是方法之一，措詞需要簡潔，大部分的做法是點擊輸入框後，提示語會自動消失。賬號後綴關聯的提示也能減輕用戶負擔，如示例中針對使用郵箱註冊，比如說在用戶填寫賬戶名輸入@ 的同時，關聯出@qq.com、@163.com 等，可以減少用戶的輸入，體驗也會更好。
WeUI 微信小程序組件庫（淺色）
Toast提示一般用於告知狀態以及有錯誤發生的情況下，比如賬號不存在、賬號已被占用、密碼錯誤、驗證碼錯誤等，及時的反饋給用戶註冊登陸不成功的地方在哪裡，以免用戶摸不著頭腦，失去耐心而離開應用。
提供靈活的多種登陸方法
在登陸頁面的設計上，我們最好提供兩種至三種登陸方法供用戶選擇（添加過多方法容易讓頁面顯得混亂，反而有可能降低用戶登陸意圖，因此限制在三種左右是比較合適的）。
登陸方法通常有電話號碼登陸、電子郵箱登陸、第三方社交賬號登陸（如微信、微博、QQ等）以及人臉、指紋生物識別等，在登陸方法的選擇上，需要先對平臺的特點以及目標用戶進行必要的摸查瞭解。適當的個性化可以促進用戶的好感，例如: 如果用戶是通過電子郵件跳轉來的，則提供帶一次性鏈接選項的一鍵電子郵箱登陸。
恰當的安全和保密提醒
登陸涉及用戶輸入敏感的個人數據，例如電子郵件、密碼和電話號碼，當用戶選擇以個人的數據來交換產品的使時，就代表用戶還相信設計人員和開發人員所能實現的功能，足以抵禦數據攻擊。為瞭不辜負用戶的選擇和信任，用戶體驗設計師可以通過諸如鼓勵用戶選擇更強的密碼，並提醒用戶避免在網上發佈過多個人信息等功能，來增強安全性。
如上述示例，在用戶註冊賬號時會給出密碼強度的參考，如“弱”、“中等”、“強”等提示。為瞭好記，大多數用戶密碼強度到中等就不加以復雜化瞭，但有瞭提醒後，許多用戶會為瞭安全盡量選擇更“強”的密碼。此外，登陸賬號時，采用星號或圓點的形式來顯示，讓用戶得到我的密碼不會被人看到的心理暗示，也能予以用戶安全感，提高對產品的信任度。
3. 小結
綜上所述，登陸頁面發展至今已經有瞭較為成熟的設計規范，UI元素相對固定。但往往正因為登陸頁面看似很簡單，導致容易受到設計師忽視，實際上它的地位是不可忽視的，登陸頁的交互方式和細微之處還需要我們多多思考，不同的產品需要根據自己的屬性來選擇符合自己的方式。
看到這裡，相信你對登陸頁已經有瞭自己的想法，打開Pixso試試看吧！