WEB登陸頁面設計技巧:登陸介面表現形式

來源:互聯網
上載者:User

文章描述:拒絕平庸:優秀WEB登入頁面設計。

關於登陸估計大家每天使用的都很頻繁了,每次上網都會習慣性登陸下微博,淘寶,郵箱,空間等,在每天進進出出無數門戶的時候有誰又曾在密碼不錯誤的情況下停留在WEB登陸頁面看一眼呢?下面就談談這道不起眼的門。

從公用平台的角度看

使用者活躍度是檢驗產品成功與否的重要指標之一,傳統行業的商家極為重視門面的裝潢,因為一個好的門面可以聚集人氣,招攬更多的顧客。古時候的大戶人家院子門口的石獅子或其他的擺件的擺放極為講究,有一定的風水學說道理,更能彰顯主人家的身份地位.由此可見,“門面’就如人的臉面之於人的形象一樣重要,而WEB的登入頁面就相當傳統的“門面”。

從個人部落格的角度看

個人登陸頁面一般只有自己會用到,所以別人基本是看不到的,但也不排除像我一樣無聊什麼都好奇的人存在,什麼都想看看,什麼都想改改的。那麼個人登陸頁面的設計就完全是抒發個人情感,體現自身個性的一個地方,你完全不需要在乎它的互動是否友好等問題。你的地盤你做主。

各大網站的WEB登陸

現在越來越多的大型網站把登入和首頁放在一起設計,由此可見登入頁面的重要性,一個出彩的登入介面,將提升產品的品質,賦予產品獨特的氣質,登入介面也是一個發揮情感化設計,提升使用者體驗,拉近與使用者之間距離的兵家必爭之地,本文不談趨勢,不講互動大道理,不涉及技術,就侃侃使用者登入頁面的一些設計表現形式。希望這些設計表現手法能給大家帶來一些啟發和靈感。

優雅大方

如果說iPad是介於傳統電腦和手機之間的產品,那麼tumblr則是介於blog和twitter之間的服務。相比twitter,它的功能更複雜、內容展示性更強、更加重視多媒體的應用。Tumblr做為輕部落格的鼻祖,帶來一種全新的視覺體驗, 安東尼·德·聖-埃克蘇佩裡曾說過,“完美就是多一點則太多,少一點則太少。” Tumblr的登入頁面沒有過多的視覺幹擾,優雅大方,一切元素的存在都是為了使用者更好的登入,登入過程非常流暢。

精緻的質感表現

iCloud是蘋果公司所提供的雲端同步服務,使用者有5GB的免費儲存空間。 負責Macintosh使用者介面設計的柯戴爾·瑞茨拉夫回憶說:“喬布斯會一個像素一個像素地檢查螢幕上的每個細節,確保相關的映像準確對齊。他非常重視細節,細緻程度居然達到了像素的層面。如果發現問題,喬布斯就會立即衝著某個工程師大吼起來。”iCloud登入頁面的設計繼承了蘋果公司對細節的苛求, 細緻的紋理,微妙的陰影,精緻的質感,完美的細節,金屬光澤可以隨著滑鼠指標移動,底部的表徵圖可以隨著解析度的大小自適應,改變相片順序,確保使用者的瀏覽體驗。

iCloud給我們上了很好的一課,有句大家都聽過卻未必做到的話——細節決定成敗,豐富的細節可以提升設計的價值,也是判斷一個設計高下的一條很重要的標準之一,精緻舒適的質感紋理,給使用者一種沈浸式,充滿驚喜的登入體驗,是一種很棒的表現方式。

小清新的插圖

在網頁設計中,插圖非常具有表現力,它與繪畫藝術關係密切。所以大部分設計職位,對手繪能力出眾者格外青睞,許多表現技法都是借鑒了繪畫藝術的表現技法。插畫藝術與網頁設計的的結合,具有獨特的藝術魅力,從而更具表現力。越來越多的設計師,將插畫運用到網頁設計中來,生動有趣溫情的清新插圖,能迅速的抓住使用者的眼球,讓登入介面的更加具有親和力,

163郵箱的登入頁面就採用了大幅的插圖,小郵差很快喚醒了80後等待來信的記憶,有故事的插圖與使用者建立情感的聯絡,喚起使用者的心靈共鳴,讓使用者更有歸屬感。

Vimeo是一家提供高清視頻存放服務的網站,在這裡可以找到很多來自世界各地非常有創意的設計師。相信登入過Vimeo的朋友都對Vimeo的登陸頁面記憶深刻。

天貓和淘寶的話做為中國最大的線上交易平台的話,也是非常注重登陸頁面的設計,而且還在登陸視窗下面設定了一個 ”登入頁面”改進建議 按鈕,可以看出淘寶是非常注重使用者體驗設計的.天貓的話就更多注重品牌化.


人文關懷的品牌傳達

設計以人為本,以人為本的設計不僅能提高產品的品質,還能提高設計的藝術水平,而登入頁面是體現人文關懷,傳播品牌理念的絕佳位置。

QQ郵箱登陸頁面每一次重新整理都能看到不同的內容,或用海子的詩,或用邁克爾.傑克遜的歌詞,喚起使用者的共鳴,設計手法簡潔,主體資訊突出,引導清晰,並沒有多餘的元素,介面中最重要的操作“登入”按鈕使用了交通中通行的綠色,而沒有使用常用的藍色,細節設計非常考究,對每個細節都注入人文的關懷。

新浪微博將登入框設計成一條圍脖的樣式,使用者的每一次登入都是一次品牌傳達的過程,切合新浪力推的圍脖品牌理念,織圍脖的概念深入人心。不過如今新浪開始走營銷路線,就連登陸頁面也不忘加個廣告位.讓你每一次進入都感覺像是登陸了最大的營銷平台.

越來越大的登入框

越來越大的輸入框設計,讓使用者輸入起來感到心情舒暢,登入過程非常愉悅,在顯示器越來越大的今天,mailchimp大輸入框顯的霸氣十足,並且一反常態的可以看到自己的密碼,第一次在WEB登入框裡見到這種設計,非常貼心.正是這種不拘一格的設計,讓mailchimp從一個內部項目蛻變成一個該公司最成功的商業產品。

簡約而不簡單

WEB設計的風格越來越趨向於簡潔,登入頁面大量地使用留白可以讓登入框更加突出。最大程度的減少使用者分心,從視覺的角度來看,簡約的設計是平靜的,砍掉了多餘的元素,顏色,形狀和紋理,不能使用讓人眼前一亮的設計項目,只能靠空白去做視覺吸引力。布局的權衡及簡化設計做的不到位的話很容易變的單調乏味,wordpress後台登陸頁面採用適當的投影,灰色的巧妙運用,以及出錯的抖動提示,讓整個登入頁面簡約而不簡單.堪稱典範。

隨著互連網的高速發展,移動互連網的到來,WEB設計越來越呈現多元化。儘管一個好的設計並代表產品就一定會成功,但卻能為產品加分,為產品注入設計DNA,創造獨特的風格和視覺感受, 好了,今天就先侃到這,作為使用者使用的入口,希望這篇小文可以讓大家對登入頁面重視起來,設計出更多精彩的登入頁面。

對於個人來說我也不忘貼出自己的登陸頁面展示下,抒發下個人情感。

至於表達的是什麼就大家自己體會吧,一幅美麗的蒲公英,在黑夜的月光下隨風飄蕩.看似自由自在,但卻身不由己.每一次登陸部落格都能提醒著我.




相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。