網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單

2014-1-6    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   m.sillybuy.com  )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)

來(lái)源:http://www.uisdc.com/100-things-you-should-know-about-design

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

藍(lán)藍(lán)設(shè)計(jì)從Dribbble收集了20個(gè)漂亮的ui設(shè)計(jì)登陸表單設(shè)計(jì) 案例和ipad界面設(shè)計(jì)案例。希望你看后能從中受益,并對(duì)你以后的登陸表單設(shè)計(jì)有幫助。設(shè)計(jì)一個(gè)登陸表單看上去非常容易,但大多設(shè)計(jì)都很糟糕、毫無(wú)亮點(diǎn)。無(wú)論如何,這篇Dribbble案例集錦絕對(duì)走的是另一個(gè)極端。希望它們能贏得你的青睞!為用戶提供更好的ui設(shè)計(jì)服務(wù),來(lái)一起欣賞吧:)

相關(guān)資源推薦:
《5款精美搜索框PSD免費(fèi)下載》
《65個(gè)免費(fèi)新鮮的下拉選擇框PSD下載》

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

Login Form

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

我相當(dāng)喜歡這個(gè)表單,因?yàn)樗@然是頁(yè)面的視覺(jué)中心,再?zèng)]有其他東西分散我的注意力。當(dāng)然,還有l(wèi)ogo和邀請(qǐng)注冊(cè)鏈接,不過(guò)它們?cè)谀睦锒紵o(wú)法蓋過(guò)巨大的登陸界面。與暗調(diào)處理的背景圖相對(duì)比,明亮的輸入框吸引力注意力,讓你立馬就去登陸。


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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


網(wǎng)頁(yè)與App中那些優(yōu)美的登陸表單

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

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔