您的位置: 首頁 > 藝術設計 > 設計理論 > 淺談WEB登錄頁面設計
Windows 8設計指南翻譯 回到列表 如何才是一個好的LOGO?
 淺談WEB登錄頁面設計

作者:CDCer 時間: 2012-02-06 文檔類型:合作網站提供 來自:Tencent CDC Blog

用戶活躍度是檢驗產品成功與否的重要指標之一,傳統行業的商家極為重視門面的裝潢,因為一個好的門面可以聚集人氣,招攬更多的顧客。古時候的大戶人家院子門口的石獅子或其他的擺件的擺放極為講究,有一定的風水學說道理,更能彰顯主人家的身份地位.由此可見,“門面’就如人的臉面之于人的形象一樣重要,而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,創造獨特的風格和視覺感受, 好了,今天就先侃到這,作為用戶使用的入口,希望這篇小文可以讓大家對登錄頁面重視起來,設計出更多精彩的登錄頁面。

原文:http://cdc.tencent.com/?p=5037

本文鏈接:http://www.ditdrb.tw/design/doc/2012/8744.asp 

出處:Tencent CDC Blog
責任編輯:bluehearts

作者文章
情感化設計中的手繪應用表現
圖形化設計:內涵容不得牽強
Q+ Web 改版設計小結
icon小教程之圖標細節的繪制
熱門搜索:CSS Fireworks 設計比賽 網頁制作 web標準 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點最新 站點最新列表
周大福“敬•自然”設計大賽開啟
國際體驗設計大會7月將在京舉行
中國國防科技信息中心標志征集
云計算如何讓安全問題可控
云計算是多數企業唯一擁抱互聯網的機會
阿里行云
云手機年終巨獻,送禮標配299起
阿里巴巴CTO王堅的"云和互聯網觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機主題設計大賽
欄目最新 欄目最新列表
國外創意名片設計欣賞
情感化界面
線下項目工作流程(歸納篇)
線下項目工作流程(分析篇)
簡約而不簡單-Practise平面設計
培養用戶的使用習慣
優秀名片設計
專題頭圖的秘密武器
別讓UED忽悠你(2):多少錢一斤
別讓UED忽悠你(1):天生的矛盾
分享按鈕

藍色理想版權申明:除部分特別聲明不要轉載,或者授權我站獨家播發的文章外,大家可以自由轉載我站點的原創文章,但原作者和來自我站的鏈接必須保留(非我站原創的,按照原來自一節,自行鏈接)。文章版權歸我站和作者共有。

轉載要求:轉載之圖片、文件,鏈接請不要盜鏈到本站,且不準打上各自站點的水印,亦不能抹去我站點水印。

特別注意:本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯系,版權歸原作者所有,文章若有侵犯作者版權,請與我們聯系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內容無關的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網上道德,遵守中華人民共和國的各項有關法律法規
·承擔一切因您的行為而直接或間接導致的民事或刑事法律責任
·本站評論管理人員有權保留或刪除其管轄評論中的任意內容
·您在本站發表的作品,本站有權在網站內轉載或引用
·參與本評論即表明您已經閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業書推薦 更多內容
網站可用性測試及優化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網站UI 設計之道
《Flex 4.0 RIA開發寶典》
《贏在設計》
犀利開發—jQuery內核詳解與實踐
作品集 更多內容

雜⑦雜⑧ Gold NORMANA V2
公式规律一波中特