轉(zhuǎn)自:非類設(shè)計

中文:steelkiwi

譯者:徐瑩

在當(dāng)今互聯(lián)網(wǎng)加時代，大多數(shù)企業(yè)意識到通過在線信息吸引更多潛在客戶的重要性。這些潛在客戶對你的公司和產(chǎn)品的印象，很大程度上取決于你在網(wǎng)站設(shè)計上投入了多少精力。因此，花時間構(gòu)思一個好的網(wǎng)站設(shè)計，尤其是主頁的設(shè)計是非常重要的。

用戶點擊搜索結(jié)果后跳轉(zhuǎn)到的第一個頁面是網(wǎng)站的首頁，直接影響到訪問者對公司及其產(chǎn)品的第一印象，所以這個頁面一定要設(shè)計得盡可能友好醒目。

在欣賞這20個優(yōu)秀的網(wǎng)頁設(shè)計之前，我們先來介紹一下現(xiàn)代網(wǎng)頁設(shè)計的基本要素。

有效介紹貴公司的能力

一個主頁最重要的部分是能否有效吸引訪問者的注意力。所以關(guān)鍵是你的主頁能否在幾秒鐘內(nèi)回答出訪問者心中的三個問題:

1.這是一家怎樣的公司？

2.這家公司到底是做什么的？

3.與競爭對手相比，你的優(yōu)勢是什么？

如果你的主頁能準確清晰地回答這三個問題，訪問者就能在了解你公司的基礎(chǔ)上，放心購買你的產(chǎn)品和服務(wù)。

許多企業(yè)有自己獨特的口號或簡短的口號來突出他們的價值主張(UVP)。他們通過簡潔的語言傳達公司的理念，并與來訪者建立聯(lián)系。因此，這些口號經(jīng)常出現(xiàn)在主頁上，并廣泛應(yīng)用于公司的品牌營銷策略中。

適應(yīng)性和簡單的設(shè)計

訪問者將通過電腦、平板電腦或智能手機等設(shè)備登錄您的網(wǎng)站。隨著全球移動普及率不斷提高，最新數(shù)據(jù)顯示，近60%的網(wǎng)站流量由移動設(shè)備提供。

為了確保您的網(wǎng)站有更好的用戶體驗，在設(shè)計頁面時考慮其適應(yīng)性是至關(guān)重要的。適應(yīng)性設(shè)計意味著無論你用什么設(shè)備訪問你的網(wǎng)站，用戶體驗都是一樣的或者非常相似的。首先，導(dǎo)航要設(shè)計方便，讓用戶快速瀏覽不同頁面；其次，功能需要相似，讓用戶無需切換設(shè)備即可訪問網(wǎng)站的所有功能；最后，設(shè)計要簡單，這樣才能保證你的設(shè)計能在不同尺寸的屏幕上清晰傳達。

風(fēng)格一致、反應(yīng)及時的網(wǎng)站將有助于保持品牌的知名度，并為訪問者提供跨平臺與公司保持聯(lián)系的便利。

動態(tài)、互動和互聯(lián)

人們傾向于記住能引起他們情緒的事情。將這個技巧應(yīng)用到你的主頁設(shè)計中，可以為訪問者創(chuàng)造一種非凡的體驗。

一個動態(tài)的主頁可以讓訪問者保持愉快，在使用過程中更容易留下深刻的印象。充分利用各種插圖、動畫、視頻或迷你游戲，可以增強開發(fā)人員和用戶之間的互動。在頁眉和頁腳添加迷你動畫也是改善用戶體驗的好選擇。

動態(tài)布局可以讓游客了解你的整個想法。虛擬現(xiàn)實或360度場景漫游頁面可以更立體地向用戶展示公司的業(yè)務(wù)及其產(chǎn)品，達到鞏固其與品牌聯(lián)系的效果。

定期更新主頁、及時反映客戶需求或分享公司最新動態(tài)，都是保持網(wǎng)站活力、加強與訪客聯(lián)系的途徑。IBM.com提供了許多動態(tài)主頁布局的例子。

換句話說，在設(shè)計和布局主頁時采用動態(tài)的方法，可以加深你和用戶之間的合作，為他們提供有趣和獨特的體驗，讓他們不時地訪問你的網(wǎng)站！

簡單流暢的導(dǎo)航

整個網(wǎng)站的使用應(yīng)該很流暢。如果訪問者在訪問網(wǎng)站時感到沮喪，這種負面情緒會極大地影響你們的關(guān)系。

一個巧妙直觀的主頁設(shè)計首先應(yīng)該使用簡單的導(dǎo)航，通過顏色和對比度等視覺分離的方式創(chuàng)建一個易于識別的菜單。其次，不同頁面標簽之間要有合理的邏輯關(guān)系，讓用戶快速找到導(dǎo)航標簽或按鈕的位置。確保訪問者知道自己在網(wǎng)站上的位置也很重要，所以選擇后的一些視覺變化(比如高亮、對比度或顏色變化)可以帶來不同的效果。一個優(yōu)秀的主頁設(shè)計，可以讓訪問者在不同的頁面和分屏之間輕松地玩，時刻與用戶保持密切聯(lián)系，激發(fā)他們繼續(xù)訪問的欲望。

根據(jù)需要添加呼叫語言

您的主頁已被訪問！這是一個好的開始，但是你如何保持它們呢？許多現(xiàn)代主頁通過特定的呼叫術(shù)語(CTA)吸引訪問者的注意力，如“立即注冊”、“加入我們”、“免費試用”、“立即訂閱”等。下面是一些可以提高點擊率的CTA例子。

網(wǎng)頁要重點吸引目標用戶的注意力，引導(dǎo)他們對公司有更多的了解，找到自己想要的信息，留下聯(lián)系方式，或者通過其他方式聯(lián)系公司。一個合適的CTA可以引導(dǎo)訪問者沿著你所期待的路徑進行瀏覽，讓僅僅作為宣傳冊的首頁從一個強大的銷售引擎轉(zhuǎn)變過來。

符合時代標準

不久前，設(shè)計的世界還相當(dāng)平靜，封閉，對稱。隨著平面設(shè)計技術(shù)的發(fā)展，設(shè)計師越來越大膽，開始挑戰(zhàn)現(xiàn)有的規(guī)則，采用更具創(chuàng)新性的設(shè)計。

現(xiàn)在，我們看到越來越多不對稱的網(wǎng)站布局，因為設(shè)計師厭倦了完美平衡的世界，這有時意味著單調(diào)、無聊和教條。設(shè)計師運用極簡主義的手段構(gòu)建框架，在定位元素和調(diào)色板選擇上增加更多的創(chuàng)造力，通過玩設(shè)計創(chuàng)造令人興奮的新標準。

然而，大多數(shù)現(xiàn)代網(wǎng)站通常由以下部分組成:

創(chuàng)意布局

相關(guān)CTA條款

空格的巧妙運用

愉快的配色

合適的字體元素

高度互動的大規(guī)模用戶體驗

甜美的背景音樂

一般來說，首頁關(guān)系到訪問者對貴公司的第一印象，所以它必須能夠有效地介紹貴公司和產(chǎn)品。你還需要考慮設(shè)計的適應(yīng)性，保證頁面的動態(tài)性、吸引力和易于瀏覽，這樣用戶才會更愿意注冊。根據(jù)需要更新你的主頁和網(wǎng)站，保持你的在線內(nèi)容的主題性和有效性，這樣你的網(wǎng)站就會有很高的回訪率！

在介紹了一個優(yōu)秀主頁的理論部分之后，讓我們來看看20個頂級主頁設(shè)計的例子，并分析這些理論在實踐中是如何工作的。

1.叢。電視

這個設(shè)計哪里好？

信息豐富，但簡潔。利用視頻、滑動客戶推薦頁面等交互方式，用最少的文字成功描述了產(chǎn)品的內(nèi)容。

基于內(nèi)容的方法允許用戶獲得產(chǎn)品的特定信息，例如該產(chǎn)品可以在哪里使用、如何使用以及如何開始使用。

用戶提示的合理放置。頁面設(shè)計和布局不僅適合新用戶，也方便了想要添加更多設(shè)備的老用戶。

訪問網(wǎng)站:Plex.tv

2.不緊的

這個設(shè)計哪里好？

簡單的主頁，豐富的口號。

沒有不必要的動畫或過度的裝飾來分散用戶的注意力。這個消息清晰而切中要害。

整體設(shè)計與應(yīng)用的外觀一致，使整個品牌具有延續(xù)性。

即使有很多內(nèi)容，導(dǎo)航依然清晰簡單。

訪問網(wǎng)站:Slack.com

3.收納盒

這個設(shè)計哪里好？

簡潔，設(shè)計簡潔，布局多變。

吸引人的搞笑手繪，銷售產(chǎn)品的有效語言。

一句有力的口號充分描述了產(chǎn)品功能:“隨時隨地與他人分享”。

提示:Dropbox是一個著名的品牌，公司主要致力于推廣他們新的文檔創(chuàng)建工具，Paper。Paper的主頁分為三個色塊，分別代表產(chǎn)品的三個不同部分:業(yè)務(wù)解決方案、文檔工具和經(jīng)典應(yīng)用。簡潔明了的設(shè)計與其他Dropbox品牌一致，但功能強大且獨具特色。

訪問網(wǎng)站:Dropbox.com

4.STORYTRAIL

這個設(shè)計哪里好？

現(xiàn)代元素設(shè)計，輕松導(dǎo)航。

它的功能清晰地顯示在首頁，便于訪問者理解。

通過動畫體現(xiàn)其特點，沒有任何違和感。

文字以流暢的動畫效果出現(xiàn)又消失，讓訪客有參與感，想繼續(xù)瀏覽。

訪問網(wǎng)站:Storytrail.co

5.會見希臘人

這個設(shè)計哪里好？

背景視頻有兩個目的:吸引游客的注意力，創(chuàng)造有趣的體驗。

餐廳在其主頁上設(shè)置了這樣一個主角，成功取悅了用戶，并與他們建立了密切的情感聯(lián)系，讓他們有了進一步探索的欲望。

柔和的顏色和簡單的字體讓游客感覺好像在和英雄說話。

友好的設(shè)計和簡單的導(dǎo)航與背景視頻相結(jié)合。

當(dāng)你點擊菜單欄時，屏幕會分成兩部分。這樣，當(dāng)訪問者瀏覽相關(guān)信息時，視頻會在屏幕的另一側(cè)同步播放。

首頁設(shè)計充滿正能量，自然產(chǎn)生“內(nèi)在”視角。

訪問網(wǎng)站:Meetthegreek.com

6.FORHONOR

這個設(shè)計哪里好？

主頁設(shè)計讓用戶一步步沉浸在游戲世界中。

有一套優(yōu)秀的字體與之完美搭配。

沖擊劍的音效渲染整個氛圍。

與用戶的微交互遵循一個簡單的規(guī)則:觸發(fā)器->:規(guī)則->:反饋->:循環(huán)模型。微交互是一個無止境的循環(huán)。

訪問網(wǎng)站:Forhonor.com

7.享受——AIIA

這個設(shè)計哪里好？

簡潔明亮醒目的設(shè)計。

合適的字體組合。

清晰可視的操作按鈕，既體現(xiàn)品牌特色，又能與用戶互動。

在不影響整體風(fēng)格和保持品牌知名度的前提下，每個頁面以個性化的方式向用戶展示不同的東西。

訪問網(wǎng)站:Enjoy-aiia.com

8 TRELLO

這個設(shè)計哪里好？

主頁設(shè)計明確指出Trello不同于那些老的任務(wù)管理程序。

給出一個強有力的口號:“保持你的事務(wù)井然有序”，并通過簡短的圖片和文字解釋特雷洛是如何做到這一點的。

時尚的圖標元素(如萌萌中的哈士奇)給用戶留下了良好的品牌印象。

風(fēng)格化的logo提示相應(yīng)的服務(wù)。這些小細節(jié)會給來訪者留下深刻的印象。

明亮的顏色組合微妙地傳達出他們提供的服務(wù)既有趣又專業(yè)。

訪問網(wǎng)站:Trello.com

9.云錄制

這個設(shè)計哪里好？

個性化、明亮、大膽的頁面設(shè)計。

突出跳躍顏色的關(guān)鍵元素，以提醒游客。

一個單獨的主頁可以吸引作曲家和聽眾的注意力。

簡短但準確的標語反映了申請的目的。

訪客無需離開頁面即可體驗相應(yīng)的服務(wù)，享受頂級音樂的樂趣。

訪問網(wǎng)站:Soundcloud.com

10.IGEGROUP

這個設(shè)計哪里好？

網(wǎng)站色彩鮮艷，形式簡單。

簡單的布局和不可思議的排版很容易將用戶的目光鎖定在關(guān)鍵位置。

主屏背景動畫帶動情緒，展示公司業(yè)績，讓訪客關(guān)注公司業(yè)務(wù)能力。

放在頁面角落的小獎杯圖標顯示了它的榮譽，不僅增加了價值和信任，也激發(fā)了游客的好奇心。

動畫流暢，反應(yīng)及時。

時尚的視差滾動效果與充滿現(xiàn)代感的分屏畫面完美搭配。

載入動畫保持公司風(fēng)格。

訪問網(wǎng)站:Igegroup.com

11.SAGMEISTERWALSH

這個設(shè)計哪里好？

這是最有創(chuàng)意的主頁設(shè)計之一，通過靈活的導(dǎo)航標簽展示了網(wǎng)絡(luò)攝像頭拍攝的特點。你可以隨意點擊地板上的任何元素或標語。

你可以觀察辦公室的人現(xiàn)在在做什么。

導(dǎo)航標簽字體美觀，頁腳出現(xiàn)相應(yīng)的導(dǎo)航。

當(dāng)今最流行的長卷頁面。

該公司大膽展示了一個易于記憶的標志&與他們的品牌一致，與行業(yè)相關(guān)。

訪問網(wǎng)站:Sagmeisterwalsh.com

12.波特莫爾

這個設(shè)計哪里好？

視差采用低端設(shè)計生成。

在細節(jié)中使用動畫效果，例如按鈕、文本和窗口的彈出模式。

互動主頁配有美妙的音樂。

干凈的設(shè)計，沒有任何多余的元素。

光標的移動帶來意想不到的效果。

容易導(dǎo)航。

訪問網(wǎng)站:Pottermore.com

13.2050.地球

這個設(shè)計哪里好？

360互動設(shè)計，給人深刻的視覺印象。

直觀逼真的界面。

強大的視覺效果激發(fā)了游客進一步探索的好奇心。

讓游客沉浸在未來世界的背景音樂中。

視頻和圖形的巧妙運用吸引了人們的目光，讓游客流連忘返。

訪問網(wǎng)站:2050.earth

14.TIPCOW

這個設(shè)計哪里好？

所有相關(guān)服務(wù)都在主頁上突出顯示。

充滿流行元素，符合主題的視頻。

時尚配色。

滾動帶有吸引人的標題和適當(dāng)CTA按鈕的頁面。

角落突出顯示的“注冊”按鈕很容易找到。關(guān)注社交網(wǎng)絡(luò)，給粉絲一個和喜歡的樂隊交流的機會。

訪問網(wǎng)站:Tipcow.me

15.日本抹茶

這個設(shè)計哪里好？

優(yōu)雅、輕盈、干凈的設(shè)計。

出色的配色和字體組合(Playfair Display和蒙特塞拉特字體)。

公司的使命和優(yōu)勢都展現(xiàn)的很清楚。

簡單時尚的菜單欄突出顯示。

訪問網(wǎng)站:Matcha.com

16.SUBSIGN

這個設(shè)計哪里好？

第一個出現(xiàn)的口號太簡單了，無法描述該公司憑借絕對權(quán)力做了什么。

所有導(dǎo)航標簽都配有出色的動畫。

高亮顯示的CTA按鈕靜態(tài)放置在右上角，這樣無論用戶在哪個頁面，都可以快速完成注冊。

用戶友好且易于導(dǎo)航。

訪問網(wǎng)站:Subsign.co

17.ILIKETOFU

這個設(shè)計哪里好？

明亮的設(shè)計和褪色的動畫吸引了用戶的注意力。

產(chǎn)品及其主要特點一目了然。

創(chuàng)意加載頁面。

導(dǎo)航簡單精致。

訪問網(wǎng)站:Iliketofu.eu

18.STUDIOLOVELOCK

這個設(shè)計哪里好？

這是不對稱平面色彩設(shè)計的一個時尚案例。

大而粗的字體和易讀的排版使導(dǎo)航菜單更清晰有效，有助于填補空之間的空白。

簡單但用心的動畫。

導(dǎo)航標簽的獨特位置。

明確描述公司的使命和優(yōu)勢。

訪問網(wǎng)站:Studiolovelock.com

19.JACQUICO

這個設(shè)計哪里好？

它的設(shè)計結(jié)構(gòu)非常靈活，訪問者可以長時間瀏覽主頁。

大量動畫元素吸引用戶。

以游戲的形式互動。

令人愉悅的柔和配色。

訪問網(wǎng)站:Jacquico.com

20.VALAIRE

這個設(shè)計哪里好？

樂隊的網(wǎng)站導(dǎo)航很不一般。

機智的配色。

標有新專輯的按鈕放在右上角，一系列滾動頁面引起你的興趣。這個方案簡直太神奇了！

頁面底部的訂閱表單是一個迷人而有趣的動畫。

該網(wǎng)站有一個標志性的網(wǎng)格設(shè)計，完美匹配動畫效果。通過以這種方式展示信息，游客將有更多了解樂隊的愿望。

訪問網(wǎng)站:Valaire.mu

從今天開始設(shè)計一個優(yōu)秀的主頁！

關(guān)注《網(wǎng)頁設(shè)計精選》

閱讀更多精選網(wǎng)頁設(shè)計文章

↓↓↓