說(shuō)起登錄頁(yè)面相信大家是最熟悉不過(guò)，現(xiàn)在我們上網(wǎng)聊天或者是上網(wǎng)辦理業(yè)務(wù)的時(shí)候，都是需要做一些賬號(hào)登錄的操作認(rèn)證，那么這個(gè)登錄頁(yè)面是怎么做的呢？今天就讓faceui給大家?guī)?lái)一下關(guān)于登錄頁(yè)ui設(shè)計(jì)知識(shí)。感興趣的朋友進(jìn)來(lái)看看吧。

　　UI其實(shí)是一個(gè)廣義的概念，《現(xiàn)代漢語(yǔ)詞典》將“界面”定義為：物體與物體之間的接觸面，泛指人和物（人造物、工具、機(jī)器）互動(dòng)過(guò)程中的界面（接口）。以車為例，方向盤、儀表盤、中控都屬于用戶界面。從字面上看由用戶與界面兩個(gè)部分組成，但實(shí)際上還包括用戶與界面之間的交互關(guān)系，所以可分為三個(gè)方向，用戶研究、交互設(shè)計(jì)、界面設(shè)計(jì)。

　　登錄頁(yè)ui設(shè)計(jì)指南攻略

　　一、注冊(cè)登錄方式

　　1.只使用第三方賬號(hào)注冊(cè)登錄

　　這種方式是最快捷的登錄方式，省去了手機(jī)注冊(cè)的繁瑣操作，幫用戶提高效率，節(jié)省時(shí)間。

　　2.只使用手機(jī)號(hào)注冊(cè)登錄

　　使用手機(jī)號(hào)+獲取驗(yàn)證碼是目前最常用的注冊(cè)登錄方式，通過(guò)發(fā)送短信獲取驗(yàn)證碼在60-90秒內(nèi)進(jìn)行注冊(cè)登錄，這么做是為了確認(rèn)用戶擁有該手機(jī)號(hào)的使用權(quán)。

　　手機(jī)號(hào)+驗(yàn)證碼是比較簡(jiǎn)便的登錄方式，手機(jī)號(hào)+密碼是比較常用的登錄方式。在輸入手機(jī)號(hào)后，為了讓用戶查看是否輸入正確，建議手機(jī)號(hào)顯示樣式為3-4-4模式(如186 3464 ****)

　　手機(jī)號(hào)也是商家進(jìn)行用戶維護(hù)的有效手段，可以在節(jié)假日發(fā)送祝?；蛘叽黉N短信，也可以在用戶長(zhǎng)期未使用產(chǎn)品時(shí)進(jìn)行短信提示，避免用戶將產(chǎn)品遺忘。

　　登錄頁(yè)ui

　　3.使用手機(jī)號(hào)+第三方賬號(hào)注冊(cè)登錄

　　這種樣式是上面兩種樣式的結(jié)合，一般這樣的組合方式是希望用戶使用手機(jī)號(hào)注冊(cè)，所以手機(jī)注冊(cè)登錄比較突出，第三方注冊(cè)會(huì)置于頁(yè)面底部弱化處理。

　　還有一類APP是希望用戶使用第三方登錄，弱化手機(jī)號(hào)注冊(cè)登錄。比如阿里旗下的閑魚、一淘、飛豬等，登錄時(shí)為了用戶數(shù)據(jù)之間的連接，會(huì)推薦用戶使用淘寶賬號(hào)進(jìn)行登錄，從而弱化了手機(jī)號(hào)注冊(cè)登錄，這是出于產(chǎn)品屬性方面的考慮。

　　4.使用郵箱注冊(cè)登錄

　　使用郵箱進(jìn)行注冊(cè)登錄是以前PC端常用的方式，一些又有移動(dòng)端又有PC端的產(chǎn)品會(huì)使用。

　　5.先體驗(yàn)后注冊(cè)登錄

　　一開始用戶可以游客狀態(tài)進(jìn)入使用產(chǎn)品，當(dāng)用到添加、收藏、關(guān)注、評(píng)論、購(gòu)買等功能就必須要進(jìn)行注冊(cè)登錄了，這種方式一般多用于閱讀類、游戲類或是電商類產(chǎn)品中。

　　這種方式對(duì)新用戶的產(chǎn)生有積極作用，很多用戶在不了解產(chǎn)品的情況下，可能只是想初步了解一下產(chǎn)品，又不想進(jìn)行手機(jī)注冊(cè)，所以會(huì)先進(jìn)入熟悉一下產(chǎn)品，待初步使用了解后，再通過(guò)引導(dǎo)讓用戶進(jìn)行手機(jī)號(hào)的綁定。

　　二、注冊(cè)登錄頁(yè)面設(shè)計(jì)要點(diǎn)

　　1.分步驟注冊(cè)登錄

　　先輸入手機(jī)號(hào)，UI設(shè)計(jì)中登錄頁(yè)的設(shè)計(jì)指南點(diǎn)擊“下一步”的同時(shí)，系統(tǒng)查詢?cè)撌謾C(jī)號(hào)是否可以注冊(cè)，通過(guò)的話則進(jìn)入輸入驗(yàn)證碼頁(yè)面，這樣做的好處是可以及時(shí)反饋給用戶，避免用戶在輸完手機(jī)號(hào)和驗(yàn)證碼之后出現(xiàn)錯(cuò)誤toast的情況。

　　需要注意的是步驟不宜過(guò)多，建議3步以內(nèi)。

　　2.注冊(cè)登錄合二為一

　　這種方式是將注冊(cè)和登錄合到一起，如果是第一次使用，只要輸入手機(jī)號(hào)再填寫驗(yàn)證碼就相當(dāng)于注冊(cè)成功了。

　　3.彈窗登錄

　　在用戶使用必須要登錄才能用的功能時(shí)會(huì)跳出彈窗登錄界面。

　　三、注冊(cè)登錄頁(yè)面常用背景樣式

　　注冊(cè)登錄頁(yè)面常用背景樣式可分為以下六大類：白色背景、輕裝飾背景、純色背景、全屏大圖背景、半屏圖片背景、插畫背景。

　　1、白色背景

　　使用白色背景是目前較為常見(jiàn)的設(shè)計(jì)樣式。頁(yè)面以信息錄入為主，不做過(guò)多裝飾。

　　多用于體量比較大的APP中，主要目的是提高登錄頁(yè)面的操作效率，所以沒(méi)有多余的點(diǎn)綴。如下圖所示：

　　2、輕裝飾背景

　　輕裝飾背景會(huì)添加一些品牌設(shè)計(jì)元素或裝飾來(lái)體現(xiàn)界面細(xì)節(jié)，增加產(chǎn)品品牌感。

　　輕裝飾背景常見(jiàn)的有以下幾種處理方式：

　　1、取產(chǎn)品相關(guān)元素進(jìn)行裝飾。

　　2 背景做模糊處理增加界面層次感。

　　3、加入意向類的圖片。

　　4、 添加幾何元素進(jìn)行裝飾。

　　3、純色背景

　　純色背景多采用品牌色，也可搭配Logo進(jìn)行設(shè)計(jì)，體現(xiàn)品牌感。

　　該方式多用在登錄信息簡(jiǎn)單或者以第三方登錄為主的界面中，在不干擾用戶視線的基礎(chǔ)上豐富頁(yè)面，采用品牌色進(jìn)行設(shè)計(jì)，同時(shí)可以看出他們的登錄信息都較少，在視覺(jué)設(shè)計(jì)上也較為簡(jiǎn)潔。

　　4、全屏大圖背景

　　全屏大圖背景就是在登錄信息下方平鋪一張與產(chǎn)品相關(guān)的圖片。

　　優(yōu)點(diǎn)：圖片更容易吸引人的注意力，視覺(jué)上更有沖擊力，也能提前給用戶一個(gè)心理預(yù)期。

　　缺點(diǎn)：信息和背景融合較高，視覺(jué)干擾比較大，多用在垂直類的APP中，對(duì)于一些體量較大的產(chǎn)品不太適合。

　　登錄頁(yè)ui

　　5、半屏圖片背景

　　半屏圖片和全屏圖片有些類似， 都是通過(guò)意向圖片傳遞產(chǎn)品品牌感，不過(guò)半屏圖片重點(diǎn)是以登錄信息為主。

　　6、插畫背景

　　插畫背景就是自己繪制品牌識(shí)別元素或者和品牌相關(guān)的元素作為背景。

　　優(yōu)點(diǎn)：插畫更有親和力，更能與用戶產(chǎn)生情感共鳴。

　　缺點(diǎn)：繪制成本較高，比較費(fèi)時(shí)間。

　　以上就是faceui給大家?guī)?lái)了關(guān)于登錄頁(yè)ui設(shè)計(jì)的一些基本知識(shí)，看完后，相信各位朋友都應(yīng)該清楚的了解到企業(yè)做UI設(shè)計(jì)中登錄頁(yè)是非常重要，這也是為了讓企業(yè)能夠擁有在自己的行業(yè)中脫穎而出。