用戶活躍度是檢驗(yàn)產(chǎn)品成功與否的重要指標(biāo)之一，傳統(tǒng)行業(yè)的商家極為重視門(mén)面的裝潢，因?yàn)橐粋€(gè)好的門(mén)面可以聚集人氣，招攬更多的顧客。古時(shí)候的大戶人家院子門(mén)口的石獅子或其他的擺件的擺放極為講究，有一定的風(fēng)水學(xué)說(shuō)道理，更能彰顯主人家的身份地位.由此可見(jiàn)，“門(mén)面’就如人的臉面之于人的形象一樣重要，而 WEB 的登錄頁(yè)面就相當(dāng)傳統(tǒng)的“門(mén)面”。

　　現(xiàn)在越來(lái)越多的大型網(wǎng)站把登錄和首頁(yè)放在一起設(shè)計(jì)，由此可見(jiàn)登錄頁(yè)面的重要性，一個(gè)出彩的登錄界面，將提升產(chǎn)品的品質(zhì)，賦予產(chǎn)品獨(dú)特的氣質(zhì)，登錄界面也是一個(gè)發(fā)揮情感化設(shè)計(jì)，提升用戶體驗(yàn)，拉近與用戶之間距離的兵家必爭(zhēng)之地，本文不談趨勢(shì)，不講交互大道理，不涉及技術(shù)，就侃侃用戶登錄頁(yè)面的一些設(shè)計(jì)表現(xiàn)形式。希望這些設(shè)計(jì)表現(xiàn)手法能給大家?guī)?lái)一些啟發(fā)和靈感。

　　優(yōu)雅大方

　　如果說(shuō) iPad 是介于傳統(tǒng)電腦和手機(jī)之間的產(chǎn)品，那么 tumblr 則是介于 blog 和 twitter 之間的服務(wù)。相比 twitter，它的功能更復(fù)雜、內(nèi)容展示性更強(qiáng)、更加重視多媒體的應(yīng)用。Tumblr 做為輕博客的鼻祖，帶來(lái)一種全新的視覺(jué)體驗(yàn)， 安東尼·德·圣-埃克蘇佩里曾說(shuō)過(guò)，“完美就是多一點(diǎn)則太多，少一點(diǎn)則太少。” Tumblr 的登錄頁(yè)面沒(méi)有過(guò)多的視覺(jué)干擾，優(yōu)雅大方，一切元素的存在都是為了用戶更好的登錄，登錄過(guò)程非常流暢。

　　精致的質(zhì)感表現(xiàn)

　　iCloud 是蘋(píng)果公司所提供的云端同步服務(wù)，用戶有 5GB 的免費(fèi)存儲(chǔ)空間。 負(fù)責(zé) Macintosh 用戶界面設(shè)計(jì)的柯戴爾·瑞茨拉夫回憶說(shuō)：“喬布斯會(huì)一個(gè)像素一個(gè)像素地檢查屏幕上的每個(gè)細(xì)節(jié)，確保相關(guān)的圖像準(zhǔn)確對(duì)齊。他非常重視細(xì)節(jié)，細(xì)致程度居然達(dá)到了像素的層面。如果發(fā)現(xiàn)問(wèn)題，喬布斯就會(huì)立即沖著某個(gè)工程師大吼起來(lái)。”iCloud 登錄頁(yè)面的設(shè)計(jì)繼承了蘋(píng)果公司對(duì)細(xì)節(jié)的苛求， 細(xì)致的紋理，微妙的陰影，精致的質(zhì)感，完美的細(xì)節(jié)，金屬光澤可以隨著鼠標(biāo)指針移動(dòng)，底部的圖標(biāo)可以隨著分辨率的大小自適應(yīng)，改變排列方式，確保用戶的瀏覽體驗(yàn)。

　　iCloud 給我們上了很好的一課，有句大家都聽(tīng)過(guò)卻未必做到的話——細(xì)節(jié)決定成敗，豐富的細(xì)節(jié)可以提升設(shè)計(jì)的價(jià)值，也是判斷一個(gè)設(shè)計(jì)高下的一條很重要的標(biāo)準(zhǔn)之一，精致舒適的質(zhì)感紋理，給用戶一種沉浸式，充滿驚喜的登錄體驗(yàn)，是一種很棒的表現(xiàn)方式。

　　小清新的插圖

　　在網(wǎng)頁(yè)設(shè)計(jì)中，插圖非常具有表現(xiàn)力，它與繪畫(huà)藝術(shù)關(guān)系密切。所以大部分設(shè)計(jì)職位，對(duì)手繪能力出眾者格外青睞，許多表現(xiàn)技法都是借鑒了繪畫(huà)藝術(shù)的表現(xiàn)技法。插畫(huà)藝術(shù)與網(wǎng)頁(yè)設(shè)計(jì)的的結(jié)合，具有獨(dú)特的藝術(shù)魅力，從而更具表現(xiàn)力。越來(lái)越多的設(shè)計(jì)師，將插畫(huà)運(yùn)用到網(wǎng)頁(yè)設(shè)計(jì)中來(lái)，生動(dòng)有趣溫情的清新插圖，能迅速的抓住用戶的眼球，讓登錄界面的更加具有親和力，

　　163郵箱的登錄頁(yè)面就采用了大幅的插圖，小郵差很快喚醒了 80 后等待來(lái)信的記憶，有故事的插圖與用戶建立情感的聯(lián)系，喚起用戶的心靈共鳴，讓用戶更有歸屬感。

　　Vimeo 是一家提供高清視頻存放服務(wù)的網(wǎng)站，在這里可以找到很多來(lái)自世界各地非常有創(chuàng)意的設(shè)計(jì)師。相信登錄過(guò) Vimeo 的朋友都對(duì) Vimeo 的登陸頁(yè)面記憶深刻。

　　人文關(guān)懷的品牌傳達(dá)

　　設(shè)計(jì)以人為本，以人為本的設(shè)計(jì)不僅能提高產(chǎn)品的品質(zhì)，還能提高設(shè)計(jì)的藝術(shù)水平，而登錄頁(yè)面是體現(xiàn)人文關(guān)懷，傳播品牌理念的絕佳位置。

　　QQ 郵箱登陸頁(yè)面每一次刷新都能看到不同的內(nèi)容，或用海子的詩(shī)，或用邁克爾·杰克遜的歌詞，喚起用戶的共鳴，設(shè)計(jì)手法簡(jiǎn)潔，主體信息突出，引導(dǎo)清晰，并沒(méi)有多余的元素，界面中最重要的操作“登錄”按鈕使用了交通中通行的綠色，而沒(méi)有使用常用的藍(lán)色，細(xì)節(jié)設(shè)計(jì)非常考究，對(duì)每個(gè)細(xì)節(jié)都注入人文的關(guān)懷。

　　新浪微博將登錄框設(shè)計(jì)成一條圍脖的樣式，用戶的每一次登錄都是一次品牌傳達(dá)的過(guò)程，切合新浪力推的圍脖品牌理念，織圍脖的概念深入人心。

　　越來(lái)越大的登錄框

　　越來(lái)越大的輸入框設(shè)計(jì)，讓用戶輸入起來(lái)感到心情舒暢，登錄過(guò)程非常愉悅，在顯示器越來(lái)越大的今天，mailchimp 大輸入框顯的霸氣十足，并且一反常態(tài)的可以看到自己的密碼，第一次在 WEB 登錄框里見(jiàn)到這種設(shè)計(jì)，非常貼心。正是這種不拘一格的設(shè)計(jì)，讓 mailchimp 從一個(gè)內(nèi)部項(xiàng)目蛻變成一個(gè)該公司最成功的商業(yè)產(chǎn)品。

　　簡(jiǎn)約而不簡(jiǎn)單

　　WEB 設(shè)計(jì)的風(fēng)格越來(lái)越趨向于簡(jiǎn)潔，登錄頁(yè)面大量地使用留白可以讓登錄框更加突出。最大程度的減少用戶分心，從視覺(jué)的角度來(lái)看，簡(jiǎn)約的設(shè)計(jì)是平靜的，砍掉了多余的元素、顏色、形狀和紋理，不能使用讓人眼前一亮的設(shè)計(jì)元素，只能靠空白去做視覺(jué)吸引力。布局的權(quán)衡及簡(jiǎn)化設(shè)計(jì)做的不到位的話很容易變的單調(diào)乏味，wordpress 后臺(tái)登陸頁(yè)面采用適當(dāng)?shù)耐队埃疑那擅钸\(yùn)用，以及出錯(cuò)的抖動(dòng)提示，讓整個(gè)登錄頁(yè)面簡(jiǎn)約而不簡(jiǎn)單，堪稱(chēng)典范。

　　隨著互聯(lián)網(wǎng)的高速發(fā)展，移動(dòng)互聯(lián)網(wǎng)的到來(lái)，WEB 設(shè)計(jì)越來(lái)越呈現(xiàn)多元化。盡管一個(gè)好的設(shè)計(jì)并代表產(chǎn)品就一定會(huì)成功，但卻能為產(chǎn)品加分，為產(chǎn)品注入設(shè)計(jì) DNA，創(chuàng)造獨(dú)特的風(fēng)格和視覺(jué)感受。好了，今天就先侃到這，作為用戶使用的入口，希望這篇小文可以讓大家對(duì)登錄頁(yè)面重視起來(lái)，設(shè)計(jì)出更多精彩的登錄頁(yè)面。

it知識(shí)庫(kù)：拒絕平庸——淺談WEB登錄頁(yè)面設(shè)計(jì)，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。