優秀網頁UI設計深度解析

在今天這樣一個互聯網+時代，絕大多數企業都意識到通過線上資訊來吸引更多的潛在客戶是多麼的重要。這些潛在客戶對你的公司及產品印象的好壞，很大程度上取決於你在網站設計上投入精力的多少。所以花時間構思一個好的網站設計，特別是主頁部分的設計非常關鍵。

用戶點擊完搜索結果後首先跳轉到的頁面就是該網站的主頁，主頁直接影響到訪客對該公司及其產品的第一印象，所以必須把這個頁面儘可能設計得友好且抓人眼球。

在欣賞這20個優秀的主頁設計之前，我們先來介紹一下現代主頁設計應包含的基本要素。

有效介紹你的公司的能力

一個主頁最重要的部分在於它能否有效地吸引訪客的注意力。所以關鍵在於，你的主頁能否在幾秒鐘內解答訪客心中的三大疑問：

• 1.這是個什麼性質的公司？
• 2.這個公司具體是做什麼的？
• 3.和競爭對手比，你的優勢在哪？

如果你的主頁能夠準確清晰地回答這三個問題，那麼訪問者就能在了解你的公司的基礎上有把握地購買你的產品及服務。

許多企業有其獨特的標語或簡短的口號，用以凸顯其價值主張（UVP）。他們通過簡練的語言傳達出公司理念，與訪客建立起一種聯繫。所以這些標語經常出現在主頁上，並大量地用於公司的品牌營銷策略。

自適應、簡約的設計

訪問者會通過PC、平板電腦或智能手機等設備登入你的網站。隨著全球移動普及率的不斷提高，最新的數據顯示將近60％的網站流量是移動設備提供的。

為了確保你的網站有更好的用戶體驗，在頁面設計時考慮其自適應性很關鍵。自適應設計意味著無論通過什麼設備接入你的網站，用戶的體驗是相同的或非常相似的。首先，導航要設計的方便，使得用戶可以快速瀏覽不同的頁面；其次，功能需要類似，這樣用戶無需切換設備即可訪問網站的全部功能；最後，設計要簡單，這樣才能確保你的設計在不同尺寸的屏幕上都可以清晰地傳達。

一個風格一致且響應及時的網站將有助於保持品牌的知名度，為訪問者跨平台與公司保持聯繫提供方便。

動態感，互動性和聯繫性

人們更傾向於記住那些能調動他們情緒的事情。將這個竅門應用到你的主頁設計上可以為訪問者創造一種非凡的體驗。

一個動態主頁可以讓訪客保持心情愉悅，在使用的過程也更容易留下深刻的印象。而充分利用變化的插圖、動畫、視頻或迷你遊戲可以增強開發者和用戶之間的互動性。在頁眉和頁腳加迷你動畫這樣的小細節，也是提高用戶體驗的不錯選擇。

動態布局可以讓訪客了解你的整體想法。虛擬現實或360°場景漫遊頁面可以更立體地向用戶展示公司業務及其產品，達到鞏固其與品牌之間聯繫的效果。

定期更新主頁內容、及時反映客戶所需或分享公司的最新動態，這些都是使網站保持活力並與訪客加強聯繫的方式。http://IBM.com提供了很多動態主頁布局的案例。

換言之，在設計和布局主頁時採用動態方式可以加深你與用戶之間的合作，為他們提供有趣而又獨特的體驗，這樣他們就會時不時地上你的網站逛逛啦！

簡單、流暢的導航

整個網站的使用過程應該是很流暢的。如果訪客在訪問網站過程中產生了挫敗感，那麼這種負面情緒將會極大地影響你們之間的關係。

一個巧妙且直觀的主頁設計首先應該使用簡單的導航，通過顏色和對比度等視覺分隔手段來打造易於識別的菜單。其次，不同頁面標籤之間應具有合理的邏輯關係，這樣用戶才能快速找到導航選項卡或按鈕的位置。確保訪問者知道自己在網站所處的位置也是非常重要的，因此選定之後產生一些視覺變化（如：突出顯示，對比度或顏色更改）可以帶來不一樣的效果。一個優秀的主頁設計可以使訪問者在不同頁面和分屏之間輕鬆遊藝，時刻保持與用戶的緊密聯繫，以激起他們繼續訪問的慾望。

適當加入號召性用語

你的主頁有人訪問了！這是一個很好的開始，但你要怎麼留住他們呢？許多現代主頁通過具體的號召性用語（CTA）吸引訪客注意，例如「立即註冊」、「加入我們」、「免費試用」、「立即訂閱」等等，這裡有一些可以增加點擊率的CTA示例

網頁應該致力於吸引目標用戶的注意力，引導其進一步了解公司，找到自己想要的信息，留下聯繫方式，或以其他方式與公司進行聯繫。恰到好處的CTA可以引導訪問者在你預期的路徑上瀏覽，這樣原本只起到宣傳手冊作用的主頁將從變為強有力的銷售引擎。

和時代標準保持一致

就在不久之前，設計的世界還是相當平靜、封閉和對稱的。隨著平面設計技術的日趨成熟，設計師們變得越來越大膽，開始挑戰既有規則並採用創新性更強的設計。

現在，我們已經看到越來越多的不對稱的網站布局，因為設計師們已厭倦完美平衡的世界，那有時意味著單調、無聊和教條。採用極簡主義手段構建框架，並在定位元素和色板選擇上加入更多創意，設計師們通過玩轉設計創造振奮人心的新標準。

儘管如此，大多數現代網站通常還是由以下部分組成：

• 創意的布局
• 相關CTA用語
• 巧妙運用的留白
• 令人愉悅的配色
• 合適的字體元素
• 高互動性、大片式用戶體驗
• 悅耳的背景音樂

總的來說，主頁關係到訪問者對你公司的第一印象，所以它必須能有效地介紹你的公司及產品。你還需要考慮到設計的適應性，同時確保該頁面是動態的、有吸引力的、易於瀏覽地，這樣用戶才會更願意去註冊。根據需要更新你的主頁和網站，保持你線上內容的話題性和有效性，這樣你的網站一定會有很高的回訪率！

介紹完一個優秀的主頁所需的理論部分，下面讓我們來看看20個頂級的首頁設計實例，分析這些理論在實踐中是如何進行運作的。

http://1.PLEX.TV

這個設計好在哪？

• 資料豐富，但簡潔。利用視頻和滑動客戶推薦頁等互動方式，利用最少的文字成功描述了產品的內容。
• 通過以內容為主的方式讓用戶獲取產品的具體信息，如這款產品可以在哪裡使用、如何使用以及如何開始使用。
• 用戶提示語的合理放置。頁面設計和布局不僅適用於新用戶，也為想添加更多設備的老用戶提供方便。

UI設計

2.SLACK

這個設計好在哪？

• 簡單的主頁，豐富的口號。
• 沒有不必要的動畫或過分裝飾分散用戶的注意力。消息清楚且切中要害。
• 整體設計與應用程序的外觀保持一致，使整個品牌具有連續性。
• 即使有很多的內容，導航依舊清晰簡單。

UI設計

3.Dropbox

這個設計好在哪？

• 乾淨、簡單的設計，變幻多端的布局。
• 吸引人的搞笑手繪，有效推銷產品的語言。
• 一個強有力的標語，充分描述了產品功能：「隨時隨地，與人分享」。

小貼士：Dropbox是一個著名的品牌，該公司目前主要致力於推廣他們新的文檔創建工具Paper 。Paper的主頁被分割成三個色塊，分別代表的產品的三個不同部分：業務解決方案，文檔工具和經典應用。簡約、清晰的設計與Dropbox的其他品牌相一致，但功能強大到獨樹一幟。

UI設計

4.STORYTRAIL

這個設計好在哪？

• 現代元素設計和易於操作的導航。
• 將其功能清楚地展示在首頁，便於訪客了解。
• 通過毫無違和感的動畫體現其特性。
• 文字伴隨流暢的動畫效果出現和消失，讓訪客產生一種參與感，想繼續往下瀏覽。

UI設計

5.MEETTHEGREEK

這個設計好在哪？

背景視頻有兩個目的：吸引訪客的注意力，創造有趣的體驗。

• 餐廳在主頁設置了這樣的一個主人公角色，成功取悅了用戶，與用戶建立起緊密的情感聯繫，讓他們有進一步探索的慾望。
• 柔和的顏色和簡單的字體讓訪客產生一種好像在與主人公交談的感覺。
• 友好的設計和簡單的導航與背景視頻融為一體。
• 點擊菜單欄時，屏幕會分割成兩部分。這樣訪客在瀏覽相關信息的時，視頻也在屏幕另一邊同步播放。
• 主頁設計讓人充滿積極的能量，並自然而然地產生一種「內部」視角。

UI設計

6.FORHONOR

這個設計好在哪？

• 主頁設計使用戶一步步沉浸到遊戲世界。
• 有一套優秀的字體與之完美配合。
• 衝擊劍的音效渲染了整體氛圍。
• 與用戶的微交互遵循著簡單的規則：觸發 -> 規則 ->反饋 ->循環模型。微交互是一個無休止的循環。

UI設計

7.ENJOY-AIIA

這個設計好在哪？

• 簡約、明亮、醒目的設計。
• 合適的字體組合。
• 清晰可視化的操作按鈕在體現品牌特性的同時，與用戶形成互動。
• 在不影響整體風格、保持品牌認知度的前提下，每個頁面通過個性化方式向用戶展示不一樣的東西。

UI設計

8 TRELLO

這個設計好在哪？

• 主頁設計明確指出Trello不同於那些老掉牙的任務管理程序。
• 給出一個強有力的口號：「讓你的事情井井有條」，並通過簡短的圖文解釋Trello是如何做到這一點的。
• 時尚的圖標元素（如萌萌的哈士奇）讓用戶對該品牌有一個好的印象 。
• 風格化logo提示相應的服務。這些小細節會給訪問者留下深刻的印象。
• 明亮的顏色組合巧妙地傳達出他們提供的服務兼具趣味性和專業性。

UI設計

9.SOUNDCLOUD

這個設計好在哪？

• 個性、明亮、大膽的頁面設計。
• 以跳躍的顏色突出關鍵元素，提示訪客注意。
• 通過單一的主頁就能同時吸引到作曲家和聽眾的注意。
• 簡短但準確的口號反映該應用的宗旨。
• 訪問者不用離開頁面就可以體驗相應的服務，享受頂級音樂帶來的樂趣。

UI設計

10.IGEGROUP

這個設計好在哪？

• 該網站有著明亮的顏色和簡單的形式。
• 簡約的布局和難以置信的排版將用戶目光輕鬆鎖定在關鍵位置。
• 主屏的背景動畫帶動了情緒，在展現公司成就的同時，讓訪客注意到該公司的業務能力。
• 放置在頁面的一角的小巧獎盃圖標展示了其獲得的榮譽，在增加價值和信任感的同時，激發訪客的好奇心。
• 動畫流暢，響應及時。
• 時尚的視差滾動效果與充滿現代感的分屏畫面完美契合。
• 載入動畫保持該公司的風格。

UI設計

11.SAGMEISTERWALSH

這個設計好在哪？

• 這是最具創意的主頁設計之一，通過靈活的導航選項卡展現在線網路攝像機拍攝的特性。你可以隨意點擊地板上或標語上的任何元素。
• 你可以觀察現在辦公室里的人在做什麼。
• 導航標籤字體美觀，頁腳中也出現了相應的導航。
• 時下最流行的長滾動頁面。
• 該公司大膽地展示了一個容易記住的標誌＆，這與他們的品牌相吻合，也與行業相關。

UI設計

12.POTTERMORE

這個設計好在哪？

• 使用低面設計產生視差。
• 在按鈕、文本、窗口彈出方式等細節處使用動畫效果。
• 互動感十足的主頁搭配著夢幻般的音樂。
• 乾淨的設計，沒有一點冗餘元素。
• 游標的移動帶來意想不到的效果。
• 易操作的導航。

UI設計

13. 2050.EARTH

這個設計好在哪？

• 給人留下深刻視覺印象的360°互動式設計。
• 直觀、逼真的界面。
• 強大的視覺效果激起訪客進一步探索的好奇心。
• 讓訪客沉浸於未來世界的背景音樂。
• 視頻和圖形的巧妙運用抓人眼球，使訪客流連忘返。

UI設計

14.TIPCOW

這個設計好在哪？

• 所有相關服務都在主頁上突出顯示。
• 充滿流行元素且契合主題的視頻。
• 時尚的配色。
• 滾動頁面配合吸引人的標題以及合適的的CTA按鈕。
• 角落中突出顯示的「註冊」按鈕可以輕鬆找到。將重點放在社交網路上，讓粉絲有機會和他們最喜愛的樂隊零距離交流。

UI設計

15.MATCHA

這個設計好在哪？

• 優雅、輕盈、乾淨的設計。
• 絕佳的配色和字體組合（Playfair Display和Montserrat字體）。
• 公司使命及其優勢清晰展示。
• 簡單時尚的菜單欄被突出顯示。

UI設計

16.SUBSIGN

這個設計好在哪？

• 首先映入眼帘的一個簡單到不能再簡單的口號，卻以絕對的力量描述了該公司的是做什麼的。
• 所有導航標籤都配合著超贊的動畫。
• 突出顯示的CTA按鈕被靜態地放置在右上角，這樣無論用戶處在什麼頁面，都能快速的完成註冊。
• 用戶友好，導航簡單。

UI設計

17.ILIKETOFU

這個設計好在哪？

• 明亮的設計，淡出的動畫捕捉用戶的注意力。
• 產品及其主要特點一目了然。
• 創意的載入頁面。
• 簡單、精緻的導航。

UI設計

18.STUDIOLOVELOCK

這個設計好在哪？

• 這是一個極具時尚感的不對稱平面顏色設計案例。
• 大號、加粗的字體和易於閱讀的排版使導航菜單更清晰、有效，同時也有助於填補空間。
• 簡單卻用心的動畫。
• 導航標籤別緻的放置方式。
• 對公司使命和優勢的清晰描述。

19.JACQUICO

這個設計好在哪？

• 它有著非常靈活的設計結構，訪問者可以在主頁瀏覽很久。
• 大量的動畫元素吸引著用戶。
• 以遊戲形式進行互動。
• 令人愉悅的柔和配色。

20.VALAIRE

這個設計好在哪？

• 這個樂隊的網站導航很不一般。
• 俏皮的配色。
• 標示著新專輯的按鈕放置在右上角，一系列的滾動頁面勾起你的興趣，這個方案簡直太贊了！
• 頁面底部的訂閱表單是一個迷人而有趣的動畫。
• 該網站有一個標誌性的網格設計，和動畫效果完美配合。通過這樣的方式將信息呈現，訪客會產生想進一步了解這個樂隊的慾望。

開始著手設計一個優秀的主頁吧，就今天！

閱讀全文