今天正好有同學過來找我問到相關的問題,那我們就來探討一下。
看起來簡單的登錄註冊頁面,卻蘊含了大大的學問。
對於一開始做的UI、UE,可以跟隨行業裡最好的例子並加以實戰實踐練習。
熟悉普遍模式,摸清用戶想法。
看起來就幾個框,但是思考邏輯過程並不簡單,每一個位置、文字、大小、顏色、跳轉、動效,都涉及了一個具體的基礎心理學內容。
在這個過程,我們可能需要先去分析產品本身的功能、定位。看它是否需要硬性登錄,比如工具類的相機、地圖、翻譯器等等就不需要硬性登錄。
一旦讓用戶登錄了,我們就該想到,每一步的跳轉流程,這個時候就需要用到流程圖了。具體的在這裡就不多說了。
最後,我們應該生成一個能讓用戶興奮的界面,而不是一個令他們沮喪的。
一個優秀的登錄界面,大概需要具備以下幾項特質:
包含文本輸入字段
如果你的app設定是,使用就必須登錄。那首先我們需要顯示輸入框中的提示語,如:輸入手機號碼,輸入驗證碼。
提示語需清楚可視,並且不需要用戶到處尋找。
記住用戶的數據,這樣用戶就不需要每次輸入信息。
“註冊”和“登陸”儘量不放在一起。
很多時候,我們看到註冊和登陸按鈕挨的很近,但是這可能會對用戶產生反作用。
同樣長度的兩個非常相似的詞,會混淆用戶的選擇。一旦點錯反覆幾次,他們可能會感到沮喪並且離開。
好的界面設計一般不會讓用戶有“暫停”和“思考”的時間。
so,儘量分開這注冊和登陸,並且使差別清晰可見。
通常情況下登錄和註冊部分有相同數量的輸入框(用戶名/郵箱/手機號,密碼)。
為了防止新用戶嘗試直接登錄,在這裡,登錄和註冊可以用不同的輸入字提示。
密碼可見切換
因為用戶經常在公共場合使用app,所以在輸入密碼時,安全起見會被打碼/小星星,也就會導致一部分用戶頻繁輸錯密碼。
正確做法:在密碼輸入框內/旁,放一個“顯示/隱藏密碼”的小圖標。
全部刪除
鍵盤小,手指大,用戶經常會遇到輸出字符需要退格的情況,退一次,輸入法自帶,如果需要全部刪除重新輸入,記得在輸入框內再適當加上一個全部刪除小icon,又需保證不和顯示/隱藏密碼衝突。
讓用戶知道自己錯在哪
如果後臺判斷用戶名密碼組合錯誤,但是沒有明確的報告給用戶問題到底是什麼,用戶可能會在多次嘗試後,無奈氣憤退出應用。
比如“你的用戶名密碼不匹配”,“該用戶名不存在”,“該賬號存在異常,請聯繫客服010-88888888”。
儘量避免用戶名登錄
經常是用戶隨意起的,日後再登錄,很難想起這個臨時起意的用戶名。無甚意義。
用戶名必須是唯一的,就需要用戶一次一次的去填寫、去試,這個用戶名可不可用。
可使用郵箱/手機號等常用賬號。
另一個事情可以促進登錄,是提供給用戶幾個登錄選項,並且給他們機會來選擇和嘗試用戶名而不會沮喪。在這過程中強迫的一部分是允許他們使用郵箱地址和密碼來註冊。
忘記密碼
對於一大部分記憶力不好的人,忘記密碼可以說是相當貼心的一個功能。
在輸入框或者登陸按鈕下添加”忘記密碼”的跳轉鏈接,並能通過郵箱或手機短信驗證碼來重新設置密碼或直接登陸。
登錄樣式靈感
設計好,也就吸引人來填寫信息,有了手機號等信息,其實也是一種資源、一種財富。
設計師和開發人員也漸漸意識到登錄表單的重要性。
當設計師為一個APP應用或移動站設計這個元素時,會花很多時間精力,使它既好看又好用。
我們一起來看一些參考欣賞。
小結
對用戶來說,登陸已經很困難了,所以我們應該讓這個流程做到最大限度的簡化。
避免不熟悉的形式,讓輸入字符簡單可視。
不僅節省了用戶的時間,還為其提供了一個非常好的使用感受。
閱讀更多 PSUI設計教程 的文章