ui設(shè)計是當下最火的一種設(shè)計,而ui設(shè)計最考驗?zāi)芰图夹g(shù)的就是界面設(shè)計。ui界面設(shè)計內(nèi)容很多,今天就讓小編為大家先介紹ui登錄界面設(shè)計的相關(guān)內(nèi)容,幫大家弄清楚什么是ui登錄界面設(shè)計。
ui登錄界面設(shè)計是怎么回事
1、文本輸入框需增加提示
如果用戶使用你的服務(wù)必須登錄,那么輸入框中的提示語(如:輸入手機號碼,輸入驗證碼)必須要增加。使這些字段清楚可見,并且不要讓用戶到處尋找,或花更多的步驟進到App。
提示:相比于使用常見的“登錄”“登陸”的按鈕,可以更富有創(chuàng)造性,并要包含可直接輸入?yún)^(qū)域。確保記住用戶的數(shù)據(jù),這樣他們就不需要每次輸入信息。
2、在登錄和注冊部分,增加不同的輸入字段
除了動詞“登入”之外,另一個另用戶感到困惑的是,登錄和注冊部分通常有相同數(shù)量的輸入框(用戶名,密碼,和郵箱)。為了更好的區(qū)分,最小化新用戶嘗試直接登錄的機會。應(yīng)用不同的輸入字段。讓用戶知道哪里錯了,如果應(yīng)用監(jiān)測到一個錯誤的密碼組合,或用戶名,但是沒有明確的報告給用戶哪里錯了,用戶可能會多次嘗試后,很生氣的退出應(yīng)用。所以你應(yīng)該考慮回復(fù)哪里出錯了(例如“你的密碼或郵箱不符合”),并且給他們立馬回復(fù)怎么解決這個問題。

ui登錄界面設(shè)計(圖片來自網(wǎng)絡(luò))
ui登錄界面設(shè)計中登錄頁的設(shè)計指南
一、注冊登錄方式
1、只使用第三方賬號注冊登錄
這種方式是最快捷的登錄方式,省去了手機注冊的繁瑣操作,幫用戶提高效率,節(jié)省時間。
這里沒有找到參考案例,可能現(xiàn)在用這種方式的APP已經(jīng)很少了。
2、只使用手機號注冊登錄
使用手機號+獲取驗證碼是目前最常用的注冊登錄方式,通過發(fā)送短信獲取驗證碼在60-90秒內(nèi)進行注冊登錄,這么做是為了確認用戶擁有該手機號的使用權(quán)。
手機號+驗證碼是比較簡便的登錄方式,手機號+密碼是比較常用的登錄方式。在輸入手機號后,為了讓用戶查看是否輸入正確,建議手機號顯示樣式為3-4-4模式(如186 3464 ****)
手機號也是商家進行用戶維護的有效手段,可以在節(jié)假日發(fā)送祝?;蛘叽黉N短信,也可以在用戶長期未使用產(chǎn)品時進行短信提示,避免用戶將產(chǎn)品遺忘。
3、使用手機號+第三方賬號注冊登錄
這種樣式是上面兩種樣式的結(jié)合,一般這樣的組合方式是希望用戶使用手機號注冊,所以手機注冊登錄比較突出,第三方注冊會置于頁面底部弱化處理。
還有一類APP是希望用戶使用第三方登錄,弱化手機號注冊登錄。比如阿里旗下的閑魚、一淘、飛豬等,登錄時為了用戶數(shù)據(jù)之間的連接,會推薦用戶使用淘寶賬號進行登錄,從而弱化了手機號注冊登錄,這是出于產(chǎn)品屬性方面的考慮。
4、使用郵箱注冊登錄
使用郵箱進行注冊登錄是以前PC端常用的方式,一些又有移動端又有PC端的產(chǎn)品會使用。
5、先體驗后注冊登錄
一開始用戶可以游客狀態(tài)進入使用產(chǎn)品,當用到添加、收藏、關(guān)注、評論、購買等功能就必須要進行注冊登錄了,這種方式一般多用于閱讀類、游戲類或是電商類產(chǎn)品中。
這種方式對新用戶的產(chǎn)生有積極作用,很多用戶在不了解產(chǎn)品的情況下,可能只是想初步了解一下產(chǎn)品,又不想進行手機注冊,所以會先進入熟悉一下產(chǎn)品,待初步使用了解后,再通過引導(dǎo)讓用戶進行手機號的綁定。
二、注冊登錄頁面設(shè)計要點
1、分步驟注冊登錄
先輸入手機號,UI設(shè)計中登錄頁的設(shè)計指南點擊“下一步”的同時,系統(tǒng)查詢該手機號是否可以注冊,通過的話則進入輸入驗證碼頁面,這樣做的好處是可以及時反饋給用戶,避免用戶在輸完手機號和驗證碼之后出現(xiàn)錯誤toast的情況。
需要注意的是步驟不宜過多,建議3步以內(nèi)。
2、注冊登錄合二為一
這種方式是將注冊和登錄合到一起,如果是第一次使用,只要輸入手機號再填寫驗證碼就相當于注冊成功了。
3、彈窗登錄
在用戶使用必須要登錄才能用的功能時會跳出彈窗登錄界面。

ui登錄界面設(shè)計(圖片來自網(wǎng)絡(luò))
三、注冊登錄頁面常用背景樣式
注冊登錄頁面常用背景樣式可分為以下六大類:白色背景、輕裝飾背景、純色背景、全屏大圖背景、半屏圖片背景、插畫背景。
1、白色背景
使用白色背景是目前較為常見的設(shè)計樣式。頁面以信息錄入為主,不做過多裝飾。多用于體量比較大的APP中,主要目的是提高登錄頁面的操作效率,所以沒有多余的點綴。
2、輕裝飾背景
輕裝飾背景會添加一些品牌設(shè)計元素或裝飾來體現(xiàn)界面細節(jié),增加產(chǎn)品品牌感。輕裝飾背景常見的有以下幾種處理方式:
?。?)取產(chǎn)品相關(guān)元素進行裝飾。
?。?)背景做模糊處理增加界面層次感。
(3)加入意向類的圖片。
?。?)添加幾何元素進行裝飾。
3、純色背景
純色背景多采用品牌色,也可搭配Logo進行設(shè)計,體現(xiàn)品牌感。該方式多用在登錄信息簡單或者以第三方登錄為主的界面中,在不干擾用戶視線的基礎(chǔ)上豐富頁面。
4、全屏大圖背景
全屏大圖背景就是在登錄信息下方平鋪一張與產(chǎn)品相關(guān)的圖片。
優(yōu)點:圖片更容易吸引人的注意力,視覺上更有沖擊力,也能提前給用戶一個心理預(yù)期。
缺點:信息和背景融合較高,視覺干擾比較大,多用在垂直類的APP中,對于一些體量較大的產(chǎn)品不太適合。
5、半屏圖片背景
半屏圖片和全屏圖片有些類似, 都是通過意向圖片傳遞產(chǎn)品品牌感,不過半屏圖片重點是以登錄信息為主。
6、插畫背景
插畫背景就是自己繪制品牌識別元素或者和品牌相關(guān)的元素作為背景。
優(yōu)點:插畫更有親和力,更能與用戶產(chǎn)生情感共鳴。
缺點:繪制成本較高,比較費時間。
以上就是小編為大家介紹的關(guān)于ui登錄界面設(shè)計的相關(guān)內(nèi)容。ui登錄界面設(shè)計是怎么回事,現(xiàn)在大家清楚了嗎?對ui登錄界面設(shè)計登錄頁需要的相關(guān)內(nèi)容大家掌握清楚了嗎?


在微信中搜索faceui