轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   sillybuy.com  )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，   請點(diǎn)這里　

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

 

網(wǎng)站與APP中的登陸表單

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

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

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

真是醒目的配色！當(dāng)然，它是從另一個角度思考登錄框的產(chǎn)物。這不是一個通常意義上的登錄窗，因?yàn)樗谝子眯苑矫嫒源嬖阼Υ?。但是在設(shè)計(jì)方面，我們盡可以跳出條條框框來思考登陸界面。

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

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

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

這件作品絕對是本文中我的最愛之一，因?yàn)樗鼔蚝啙?，卻不單調(diào)。它的配色相當(dāng)驚艷，幾種顏色完美結(jié)合。而且，它看上去真的很贊！確實(shí)是個打造簡潔美觀登錄界面的好辦法。

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

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

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

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

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

我不確定自己是否贊同輸入框背景和文字的顏色，不過除此之外，這仍然是件優(yōu)秀的單色表單設(shè)計(jì)。我喜歡這兩個輸入框彼此結(jié)合的方式，因?yàn)樗麄冿@然就是一體的。我也喜歡那個醒目的登陸按鈕。

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

這是我第三喜愛的作品，因?yàn)樗猛娴呐渖?。是的，這是扁平設(shè)計(jì)。如此基本的樣式，本應(yīng)該很單調(diào)，它卻沒有。我發(fā)現(xiàn)精心挑選過顏色的扁平設(shè)計(jì)常常能成功，因?yàn)槌錆M了親切感和個人色彩，這件登陸界面就是如此！我很希望在自己經(jīng)常使用的app和網(wǎng)站中見到更多這類設(shè)計(jì)。

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

我相當(dāng)喜歡這個表單，因?yàn)樗@然是頁面的視覺中心，再沒有其他東西分散我的注意力。當(dāng)然，還有l(wèi)ogo和邀請注冊鏈接，不過它們在哪里都無法蓋過巨大的登陸界面。與暗調(diào)處理的背景圖相對比，明亮的輸入框吸引力注意力，讓你立馬就去登陸。

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

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