拒絕平庸——淺談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後臺登錄頁面採用適當的投影，灰色的巧妙運用，以及出錯的抖動提示，讓整個登錄頁面簡約而不簡單，堪稱典範。