淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單發(fā)布者：本站     時(shí)間：2021-12-21 14:12:56

我從Dribbble收集了20個(gè)漂亮的登陸表單案例。希望你看后能從中受益，并對你以后的登陸表單設計有幫助。設計一個(gè)登陸表單看上去非常容易，但大多設計都很糟糕、毫無(wú)亮點(diǎn)。無(wú)論如何，這篇Dribbble案例集錦絕對走的是另一個(gè)極端。希望它們能贏(yíng)得你的青睞!來(lái)一起欣賞吧。

繼承了iOS7的精髓，這件登陸界面作品將iOS7微妙的動(dòng)畫(huà)背景上升到一個(gè)新的層面。此處的背景完全是一張動(dòng)畫(huà)圖片——甚至可能是GIF。盡管這背景事實(shí)上沒(méi)有那么精致，但這一定是你平時(shí)不常見(jiàn)的設計。你幾乎很難見(jiàn)到這樣的APP，還有如此賣(mài)弄的首屏設計。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

同樣秉承著(zhù)iOS7的精神，這個(gè)登陸界面和它的附屬界面采用了彩色模糊背景，令一切都保持絕對簡(jiǎn)潔。我得說(shuō)這兩個(gè)界面都相當極簡(jiǎn)化，實(shí)際的輸入框被細線(xiàn)所取代。不過(guò)美妙的多彩背景增添了個(gè)性化色彩，令作品親切美觀(guān)。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

如果說(shuō)有令人愉悅的設計，那這一件就是了。藍色背景圖與明快的白色LOGO、文字和輸入框形成強烈對比。綠色按鈕看起來(lái)像個(gè)真實(shí)的按鈕——盡管界面的其余部分都是扁平的——色調也與藍色搭配地非常好。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

真是醒目的配色!當然，它是從另一個(gè)角度思考登錄框的產(chǎn)物。這不是一個(gè)通常意義上的登錄窗，因為它在易用性方面仍存在瑕疵。但是在設計方面，我們盡可以跳出條條框框來(lái)思考登陸界面。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

與之前那些相比，這件相當平靜和簡(jiǎn)潔。顏色選得非常棒。頁(yè)面也很切中要害，它沒(méi)有任何不必要(甚至擾亂注意力)的小把戲，任何一個(gè)登陸界面都不應該有。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

這又是一款大膽的登陸界面設計。深色的登陸界面、深色模糊背景、明亮柔滑的纖細字體，營(yíng)造出了神秘氣息與魔力。有了迷人的登陸界面，就別無(wú)他求了。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

現在呈現的是一款深色登陸界面，還有非比尋常的紅色文字與按鈕。我不確定這么多紅色是否合適，不過(guò)我們暫且繼續——這是非比尋常的大膽設計，值得喝彩。我覺(jué)得自己對于紅色的忌憚是沒(méi)道理的，因為決定用戶(hù)反應的，是紅色按鈕所處的環(huán)境，而非紅色本身。我可以肯定，沒(méi)有人會(huì )在按下這個(gè)登陸按鈕時(shí)感到崩潰。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

這件作品絕對是本文中我的最?lèi)?ài)之一，因為它夠簡(jiǎn)潔，卻不單調。它的配色相當驚艷，幾種顏色完美結合。而且，它看上去真的很贊!確實(shí)是個(gè)打造簡(jiǎn)潔美觀(guān)登錄界面的好辦法。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

這是個(gè)稍微復雜些的登陸界面。像如今大部分平臺一樣，你可以已有賬號來(lái)登陸，比如Google、Twitter或者Facebook，而不必在每個(gè)新網(wǎng)站上創(chuàng )建新的賬號。不過(guò)如果你想的話(huà)，你也可以注冊自己的賬號。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

這個(gè)界面很有創(chuàng )意——手寫(xiě)風(fēng)格的注釋與箭頭，給界面增添了一些個(gè)性，配色也很棒，與常見(jiàn)的藍色和銀灰色有所區別。同時(shí)，不像時(shí)下大多數登陸頁(yè)面，它的背景圖并不是視覺(jué)焦點(diǎn)，它就是一個(gè)輕巧的登陸/注冊頁(yè)面。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

我非常欣賞這件自由散漫的設計。沒(méi)有分散注意力的導航，也沒(méi)有煩人的其他內容。用戶(hù)的操作與目標同樣簡(jiǎn)單：選擇Platform或Opentag，然后登陸。如果是首次打開(kāi)，你可以試試底部的”注冊賬號”鏈接。我覺(jué)得這真是個(gè)組織良好且執行到位的登陸界面。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

這也是我最?lèi)?ài)之一，我著(zhù)迷于它的扁平設計。它也沒(méi)有多少分散注意力的東西，重點(diǎn)就是登陸。簡(jiǎn)明的logo效果非凡，如果你沒(méi)有賬號，也能在這注冊一個(gè)。除此之外，所選的顏色也緊密結合，表現良好。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

我非常喜歡這件設計，因為東西都足夠大，登陸按鈕很大，按鈕上的文字很大，圖標也很大?，F在你應該有所體會(huì )了。另外，登陸按鈕是明亮的橙紅色，你不會(huì )忽略它。它不會(huì )與周遭環(huán)境混為一談，所有需要強調的操作都該如此。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

我不確定自己是否贊同輸入框背景和文字的顏色，不過(guò)除此之外，這仍然是件優(yōu)秀的單色表單設計。我喜歡這兩個(gè)輸入框彼此結合的方式，因為他們顯然就是一體的。我也喜歡那個(gè)醒目的登陸按鈕。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

在你注銷(xiāo)登陸前，網(wǎng)站會(huì )記住你是誰(shuí)，這點(diǎn)太贊了。從外觀(guān)來(lái)看，它想營(yíng)造安全登錄的感覺(jué)，事實(shí)也確實(shí)如此，這得益于下面的兩個(gè)logo——McAfee和VeriSign。我還喜歡它滑稽的頭像，使得整個(gè)界面體驗如此愉悅，雖然它其實(shí)很?chē)烂C。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

這是我第三喜愛(ài)的作品，因為它好玩的配色。是的，這是扁平設計。如此基本的樣式，本應該很單調，它卻沒(méi)有。我發(fā)現精心挑選過(guò)顏色的扁平設計常常能成功，因為充滿(mǎn)了親切感和個(gè)人色彩，這件登陸界面就是如此!我很希望在自己經(jīng)常使用的app和網(wǎng)站中見(jiàn)到更多這類(lèi)設計。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

啊，又是一個(gè)藍色的界面!我對此處使用的綠色持懷疑態(tài)度，不過(guò)本作品中微妙變化的藍色，與白色文字結合地很好——確實(shí)非常好。非正式的小寫(xiě)字體也給整個(gè)界面增添了幾分個(gè)性。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

我相當喜歡這個(gè)表單，因為它顯然是頁(yè)面的視覺(jué)中心，再沒(méi)有其他東西分散我的注意力。當然，還有logo和邀請注冊鏈接，不過(guò)它們在哪里都無(wú)法蓋過(guò)巨大的登陸界面。與暗調處理的背景圖相對比，明亮的輸入框吸引力注意力，讓你立馬就去登陸。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

這是一件擬物化與扁平結合的UI作品。你怎么想?我覺(jué)得它處理的非常好。不用嘲笑擬物元素的陰影效果，它們并沒(méi)有影響整個(gè)設計，此處的設計相當聰明，節制地使用擬物化元素，字體的選擇和色彩搭配鑄就了這件作品。

淺談網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單,PS教程,

又是一件迷人的登陸界面。它內容比本文中很多設計都更豐富，不過(guò)配色選得很好，讓界面漂亮地結合成一個(gè)整體。