詳細解析網(wǎng)頁(yè)設計優(yōu)秀WEB登錄頁(yè)面設計技巧發(fā)布者：本站     時(shí)間：2021-12-20 11:12:40

關(guān)于登陸估計大家每天使用的都很頻繁了，每次上網(wǎng)都會(huì )習慣性登陸下微博，淘寶，郵箱，空間等，在每天進(jìn)進(jìn)出出無(wú)數門(mén)戶(hù)的時(shí)候有誰(shuí)又曾在密碼不錯誤的情況下停留在WEB登陸頁(yè)面看一眼呢?下面就談?wù)勥@道不起眼的門(mén)。

從公共平臺的角度看

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

從個(gè)人博客的角度看

個(gè)人登陸頁(yè)面一般只有自己會(huì )用到，所以別人基本是看不到的，但也不排除像我一樣無(wú)聊什么都好奇的人存在，什么都想看看，什么都想改改的。那么個(gè)人登陸頁(yè)面的設計就完全是抒發(fā)個(gè)人情感，體現自身個(gè)性的一個(gè)地方，你完全不需要在乎它的交互是否友好等問(wèn)題。你的地盤(pán)你做主。

各大網(wǎng)站的WEB登陸

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

優(yōu)雅大方

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

詳細解析優(yōu)秀WEB登錄頁(yè)面設計技巧,PS教程,

精致的質(zhì)感表現

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

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

詳細解析優(yōu)秀WEB登錄頁(yè)面設計技巧,PS教程,

小清新的插圖

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

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

詳細解析優(yōu)秀WEB登錄頁(yè)面設計技巧,PS教程,

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

詳細解析優(yōu)秀WEB登錄頁(yè)面設計技巧,PS教程,

天貓和淘寶的話(huà)做為中國最大的在線(xiàn)交易平臺的話(huà)，也是非常注重登陸頁(yè)面的設計，而且還在登陸窗口下面設置了一個(gè) ”登錄頁(yè)面”改進(jìn)建議 按鈕，可以看出淘寶是非常注重用戶(hù)體驗設計的.天貓的話(huà)就更多注重品牌化.

詳細解析優(yōu)秀WEB登錄頁(yè)面設計技巧,PS教程,

詳細解析優(yōu)秀WEB登錄頁(yè)面設計技巧,PS教程,

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

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

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

詳細解析優(yōu)秀WEB登錄頁(yè)面設計技巧,PS教程,

新浪微博將登錄框設計成一條圍脖的樣式，用戶(hù)的每一次登錄都是一次品牌傳達的過(guò)程，切合新浪力推的圍脖品牌理念，織圍脖的概念深入人心。不過(guò)如今新浪開(kāi)始走營(yíng)銷(xiāo)路線(xiàn)，就連登陸頁(yè)面也不忘加個(gè)廣告位.讓你每一次進(jìn)入都感覺(jué)像是登陸了最大的營(yíng)銷(xiāo)平臺.

詳細解析優(yōu)秀WEB登錄頁(yè)面設計技巧,PS教程,

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

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

詳細解析優(yōu)秀WEB登錄頁(yè)面設計技巧,PS教程,

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

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

詳細解析優(yōu)秀WEB登錄頁(yè)面設計技巧,PS教程,

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

對于個(gè)人來(lái)說(shuō)我也不忘貼出自己的登陸頁(yè)面展示下，抒發(fā)下個(gè)人情感。

至于表達的是什么就大家自己體會(huì )吧，一幅美麗的蒲公英，在黑夜的月光下隨風(fēng)飄蕩.看似自由自在，但卻身不由己.每一次登陸博客都能提醒著(zhù)我.