平面設(shè)計課堂：登錄頁面的設(shè)計技巧

時間：2023-10-06 09:24:01 | 來源：網(wǎng)站運營

時間：2023-10-06 09:24:01 來源：網(wǎng)站運營

平面設(shè)計課堂：登錄頁面的設(shè)計技巧：登錄頁面設(shè)計代表著用戶對產(chǎn)品的第一印象，如果這個頁面做的不好，那么很容易就會讓別人對我們的產(chǎn)品印象不好。登錄頁面設(shè)計應(yīng)該清楚的傳達產(chǎn)品調(diào)性，同時在視覺上幫助用戶完成登錄這樣的一個任務(wù)。

登錄頁應(yīng)該有醒目的標(biāo)識，經(jīng)常把企業(yè)形象與產(chǎn)品或服務(wù)相結(jié)合，提高用戶關(guān)注度，避免用戶注意力漂移，今天我們就來盤點一下目前市面上的產(chǎn)品里都做得挺不錯的登錄頁吧?。?！

背景類

看多了大多數(shù)的單調(diào)且簡潔的登錄頁，有著炫酷且多變的動態(tài)背景的登錄頁是不是會讓人眼前一亮，并且看的停不下來，先來說說幾個背景特別的APP吧！

1、蝦米音樂

蝦米音樂的登錄頁面最大的亮點在于他們的背景動圖背景都很好的點明了產(chǎn)品的核心，產(chǎn)品的形象鮮活了起來，如下圖所示：

這個我們在參考的時候可能需要考慮一下公司的產(chǎn)品特點，以及時間和成本的投入是否是公司能夠承擔(dān)的（這個是很現(xiàn)實的問題）。其次馬蜂窩還有一個小交互細節(jié)，值得注意一下，當(dāng)用戶開始輸入賬號的時候，背景的動圖就會變成高斯模糊，減少用戶在輸入時所受到的干擾，這雖然是一個小細節(jié)，但是在我們平時設(shè)計的時候是一定要考慮到的小細節(jié)。

2、毒&映客

如果第一種實現(xiàn)起來有些難度，也可以轉(zhuǎn)換一種難度系數(shù)不是很高的形式，如下圖所示：

毒和映客這兩款A(yù)PP ，他們的登錄頁面背景使用照片做成的背景墻動圖，會自動上滑，略微的圖片集錦上移也很酷，同時符合這兩款產(chǎn)品針對年輕人使用的調(diào)性。但是一般來說大背景的登錄頁面對圖片以及視頻的要求會很高，如果是做練習(xí)或者飛機稿并不是很建議大家選擇圖片背景（因為符合產(chǎn)品定位的圖片是真的很難找），如果大家依然想要大背景，可以繼續(xù)看下面兩種。

3、Lofter

Lofter的登錄注冊入口與引導(dǎo)頁相結(jié)合，用戶在登錄的時候能夠看到更多的產(chǎn)品信息，這種設(shè)計在是市面是比較少見的，如下圖所示：

這種比較適合想要做大背景的登錄頁面，但是沒有找到適合產(chǎn)品圖片的設(shè)計師來選擇。它的優(yōu)點是能夠介紹更多的產(chǎn)品信息，但是缺點也很明顯，因為登錄頁是個用戶目的性很強的功能操作頁面，因此很有可能就會被忽略過去。

4、快手電丸&FACEU

這兩種APP是將手機和第三方登錄都做成按鈕，同時搭配產(chǎn)品形象插畫，這么做的好處是可以將產(chǎn)品的想象更加突出，但是從操作上來說，如果用戶是手機登錄，還需要進入二級頁面，但背景的設(shè)計可以參考，容易出效果，同時又能快速符合產(chǎn)品調(diào)性。對于大背景設(shè)計的難度系數(shù)最低，新手設(shè)計師推薦優(yōu)先嘗試。

頂部圖片

1、最右&bilibili&快手漫畫

上圖中的三個產(chǎn)品都是產(chǎn)品有卡通形象的產(chǎn)品，同時還很有識別度，因此將有他們放在登錄界面頂部，有助于產(chǎn)品形象的深入化，同時當(dāng)用戶在輸入密碼的時候，卡通形象還會轉(zhuǎn)變成蒙上自己的眼睛或者別的動作，既有趣味性又給用戶安全感。以上三個都是不同類型的產(chǎn)品，但是采用了同一種登錄方式，但他們都有相對年輕化的用戶群體，以及卡通形象的產(chǎn)品，因此使用這種能夠更好的固定產(chǎn)品形象。

2、36氪&松果

36氪的頭部小背景讓整個登錄頁面不會顯得太平，視覺上也不會太過單一，我們可以來做個對比，如下圖所示：

上面兩種圖中有背景和沒有背景的登錄頁，我們能夠很明顯的發(fā)現(xiàn)沒有背景的從視覺上顯得很單一，并且沒有了識別度。想要做比較簡約但是又有點特別的登錄頁可以參考這類的頭圖，會讓你的登錄頁不那么單調(diào)還有識別度。

彈窗登錄

叨叨記賬&波洞

叨叨筆記使用的是一種類似彈窗同時帶有tab切換的登錄形式，但是只適合只有一種第三方的登錄形式，如果數(shù)量一多，就要改變形式或者去掉tab，但是這種表現(xiàn)形式也是挺特別的。作為騰訊旗下的波洞，設(shè)計風(fēng)格很鮮明，登錄直接使用的彈窗形式，應(yīng)該考慮到大多數(shù)用戶都喜歡直接用第三方登錄會比較方便，同時也是自己的產(chǎn)品，因此做成了彈窗形式。上面的兩種是不同形式的彈窗，小伙伴們可以根據(jù)自己公司產(chǎn)品支持哪幾種第三方登錄來決定選用哪種參考。

圖標(biāo)

陌陌

陌陌的登錄注冊頁可能大家看著覺得很普通，沒什么特別的，我剛開始也覺得很普通沒什么特別的，但是大家可以注意一下它的第三方登錄，如下圖所示

QQ和微信的icon都是自制的，與我們見到的大多數(shù)第三方的icon都不太一樣，所以這個點可以作為我們設(shè)計第三方登錄時參考的點。畢竟我們找參考并不是直接照抄頁面，只是可以選擇每個頁面優(yōu)秀的地方來成為我們學(xué)習(xí)的地方。

圖標(biāo)

音遇

音遇的號碼輸入框也是很優(yōu)秀的，如下圖所示：

音遇的賬戶輸入框是會隨著文字的增加減少而改變寬度，這樣可以讓用戶更專注于輸入賬號的輸入，以及及時確認自己的輸入是否有誤。

劃重點

變身成厲害的設(shè)計師之前總要做練習(xí)，做積累，而有一雙能夠辨別出好設(shè)計的雙眼能夠讓你事半功倍。很多人都會說因為我們審美不行，其實不好看的頁面也有值得借鑒的地方，好看的設(shè)計也不是所有的想法都適合我們，我們需要學(xué)會辨別，而積累僅僅是開始的第一步。 好啦，今天的平面設(shè)計課堂：登錄頁面的設(shè)計技巧就到這里了，歡迎大家關(guān)注我的后續(xù)更新~

文末福利就是最近的設(shè)計學(xué)習(xí)資源啦，點擊這里進入領(lǐng)取，希望對大家的學(xué)習(xí)有幫助！