APP登入介面設計經驗分享 - ITW01
文章推薦指數: 80 %
... 是ui設計師,建議看看這次經驗文章,附上了大量案例,也許能助你未來更好的去設計一個使用者體驗友好的app登入介面下面通過幾個關於登入介面的u.
ITW01
數碼
技術
安全
科技
設計
UI中國
2018-06-2816:42:48
頻道:用戶界面設計
文章摘要:如果使用使用者名稱登入給文字輸入框增加提示如果使用者使用你的服務必須登入
用戶界面設計.
APP登入介面設計經驗分享
.
【南京UI培訓UI設計乾貨】關於手機APP使用者登入介面設計的經驗談
科技.
新型惡意軟體-Catelites-Bot:偽裝-2200-多家銀行-APP-登入介面進行「螢幕覆蓋攻擊」
不要小看一個登入介面,它內裡包含很多細微的東西,除去外觀視覺,更多要注意的是互動的操作體驗,比如一些動畫、一些文案提示等細節都要注意,如果你是UI設計師,建議看看這次經驗文章,附上了大量案例,也許能助你未來更好的去設計一個使用者體驗友好的APP登入介面。
下面通過幾個關於登入介面的UX策略指南,讓你更好的應用和實踐。
給文字輸入框增加提示
如果使用者使用你的服務必須登入,那麼資訊欄位是你必須要做的主要功能(即輸入框中的提示語,如:輸入手機號碼,輸入驗證碼。
)
使這些欄位清楚可視,並且不要強迫使用者到處尋找,或花更多的步驟進到App.一旦他們進到App,登入介面是他們所應當見到的第一個事情。
獎勵提示:相比於使用常見的「登入」「登陸」的按鈕,可以更富有創造性,並要包含可直接輸入區域。
確保記住使用者的資料,這樣他們就不需要每次輸入資訊。
「註冊」和「登陸」不應該放在一起。
更多地時候,我們看到註冊和登陸按鈕被放置的靠近彼此,但是這會對使用者產生反作用。
這兩個動作都包含了相同的動詞,並且看起來也很相似,所以他們會混淆使用者的選擇。
在有限的時間內進入問題,他們可能會感到沮喪並且離開。
基本上,任何介面上不應該有使使用者「暫停」和「思考」的元素。
如果你想讓他們的體驗完美無瑕,分開這注冊和登陸兩個區域,並且使差別清晰可見。
另外,你可以使用不同的動詞或者簡單解釋不同的欄位是什麼。
在登入和註冊部分,增加不同的輸入欄位。
除了動詞「Sign」是事實之外,另一個另使用者感到困惑的是,登入和註冊部分通常有相同數量的輸入框(使用者名稱,密碼,和郵箱)。
爲了完全地區分,最小化新使用者嘗試直接登入的機會。
用不同的輸入欄位。
讓密碼可被看到
當大多數使用者的密碼由於安保原因被打了馬賽克,使用者頻繁遇見的另一個問題是打錯他們的密碼。
這甚至會發生在很有經驗的打字員身上,特別是當他們在移動裝置上登入的時候。
防止這種情況發生的做法是:在密碼字元旁邊包含一個「顯示密碼」的單選框或圖示。
讓他們知道什麼是錯誤的
如果應用監測到一個錯誤的密碼組合,和使用者名稱,但是沒有明確的報告給使用者問題是什麼,使用者可能會多次嘗試後,很生氣的退出應用。
這是為什麼你應該考慮通用的回覆(例如「你的密碼或郵箱不符合」),並且給他們立馬回覆怎麼解決這個問題。
問下郵箱地址或電話號碼,而不是唯一的使用者名稱
為什麼人們登入時人們很少記住「使用者名稱」?如果使用使用者名稱登入,你會面對很多可避免的困難:使用者名稱必須是一個唯一的,這意味著人們會重複嘗試輸入一個系統裡目前還沒有的使用者名稱,或者最終使用其真實姓名。
過了一會兒,使用者想出了一個唯一的登入名,但是隻過了一小會兒就忘記了,因為這個使用者名稱對他沒有任何的意義。
另一個事情可以促進登入,是提供給使用者幾個登入選項,並且給他們機會來選擇和嘗試使用者名稱而不會沮喪。
在這過程中強迫的一部分是允許他們使用郵箱地址和密碼來註冊。
需要一個「忘記你的密碼」的流程
忘記密碼發生在所有人身上,這也是為什麼,你急迫的給到使用者一個機會來恢復密碼,那麼就直接在登入介面這麼做吧。
所要做的就是,在輸入框下增加一個「忘記你的密碼」的連結,並讓系統能給使用者的郵箱或電話號碼傳送驗證碼。
不要鎖了使用者的賬號而不告知他們
爲了避免強迫進入和暴力攻擊,許多網頁和應用在一系列的錯誤嘗試之後關閉賬戶。
安全第一,但是你至少要嘗試告訴使用者,在多少次嘗試後,在關閉賬戶前,他們必須離開。
你也可以分享更多的細節,例如,在試錯後的十分鐘纔可以再次嘗試的事實。
登入樣式靈感
如果在過去,都是在用相同的無風格和定製化的登入頁。
現如今,給你的應用,創造一個獨特的登入頁設計是非常重要的事情,尤其是你想要圍繞你的應用和服務來創造品牌。
設計師和開發人員也有承認意識到登入表單的重要性。
這是事實,特別對於移動環境下,用戶界面相比於「桌面」網站,扮演了更重要的角色。
當爲一個應用和移動站設計這個元素的時候,設計師花很多的精力,使它既好用又美觀。
在這篇文章裡,你會看到很多移動端用戶界面設計的案例靈感,關於一個移動端登陸頁面應被設計成什麼樣,給你一些線索。
RoostioLoginScreen
LoginScreen
JobBoard–CompanyProfile/Login
Shoppingapp
Parts–logindarkside
DailyUIDay001
SkypeRedesign
加微訊號hl9700712,領取更多UI設計軟體等資料 僅限10個名額哦~~
結尾思考
對使用者來說,登陸已經很困難了,所以,使之變得更復雜,對你的產品來說並不是一個很聰明的決定。
避免更大的和不熟悉的形式,並且讓輸入字元簡單可視。
這些只是一些爲了節省使用者時間可以考慮的技巧,並且幫助他們享受你所提供的服務。
文章來源:UI中国
相關頻道:移動設計用戶界面設計
分享到Facebook
相關文章
app開發介面設計iOS和Android有所不同
UI教程-從零開始做APP系列介面設計
淺析網站登入介面設計:設計與互動體驗的平衡之美
雅設計與俗設計有什麼區別?
表單設計:如何規避錯誤,構造出彩的用戶界面?
APP介面設計就該那麼美妙!
網商銀行(MYbank)APP介面設計及LOGO線上設計
APPnbspUI介面設計外包需要多少錢
最熱門文章
最新文章
搜尋
延伸文章資訊
- 1Ui設計手機app登入註冊界面圖片素材 - Lovepik
Lovepik提供免費的可編輯ui設計手機app登入註冊界面模板下載。 此模板格式為,lovepik编號為401125647,類別為UI設計,大小為458.2 KB。 支持個人和商業用途。
- 2koding.com — login UI - 設計大舌頭
這幾天koding 很夯,因為一周要狂送250TB ,所以筆者也就去註冊一下,就在login 時,我注意到了登入欄的placeholder 有著小小的用心,到底是什麼呢?
- 3【好文翻譯】登入/註冊流程的UX設計 - 蕨類的UI筆記
Designing UX Login Form and Process 登入/註冊流程的UX設計 by Nick Babich(翻譯:蕨類) 雖然登錄頁面(要求使用者必須先註冊或登入,才能使用A...
- 4UI/UX|註冊登入流程.超完整的深入教學(上) - H.Ching ...
在研究登入與註冊流程的UI/UX 過程中,發現大部分文章都只探討流程設計(例如:應該分多步驟、用圖片增加吸引力、可以加社群登入…
- 5Ui設計web登入界面圖片素材 - Lovepik
Ui設計web登入界面圖片免費下載,圖片格式,圖片尺寸1000 × 695px,圖片大小4.8 MB,圖片編號401178328,圖片發佈時間25/04/2019.