Lisa ：在今天這樣一個(gè)互聯(lián)網(wǎng)+時(shí)代，絕大多數(shù)企業(yè)都意識(shí)到通過(guò)線上資訊來(lái)吸引更多的潛在客戶是多么的重要。這些潛在客戶對(duì)你的公司及產(chǎn)品印象的好壞，很大程度上取決于你在網(wǎng)站設(shè)計(jì)上投入精力的多少。所以花時(shí)間構(gòu)思一個(gè)好的網(wǎng)站設(shè)計(jì)，特別是主頁(yè)部分的設(shè)計(jì)非常關(guān)鍵。
用戶點(diǎn)擊完搜索結(jié)果后首先跳轉(zhuǎn)到的頁(yè)面就是該網(wǎng)站的主頁(yè)，主頁(yè)直接影響到訪客對(duì)該公司及其產(chǎn)品的第一印象，所以必須把這個(gè)頁(yè)面盡可能設(shè)計(jì)得友好且抓人眼球。
在欣賞這20個(gè)優(yōu)秀的主頁(yè)設(shè)計(jì)之前，我們先來(lái)介紹一下現(xiàn)代主頁(yè)設(shè)計(jì)應(yīng)包含的基本要素。
有效介紹你的公司的能力
一個(gè)主頁(yè)最重要的部分在于它能否有效地吸引訪客的注意力。所以關(guān)鍵在于，你的主頁(yè)能否在幾秒鐘內(nèi)解答訪客心中的三大疑問：
1. 這是個(gè)什么性質(zhì)的公司?
2. 這個(gè)公司具體是做什么的?
3. 和競(jìng)爭(zhēng)對(duì)手比，你的優(yōu)勢(shì)在哪?
如果你的主頁(yè)能夠準(zhǔn)確清晰的回答這三個(gè)問題，那么訪問者就能在了解你的公司的基礎(chǔ)上有把握的購(gòu)買你的產(chǎn)品及服務(wù)。
許多企業(yè)有其獨(dú)特的標(biāo)語(yǔ)或簡(jiǎn)短的口號(hào)，用以凸顯其價(jià)值主張(UVP)。他們通過(guò)簡(jiǎn)練的語(yǔ)言傳達(dá)出公司理念，與訪客建立起一種聯(lián)系。所以這些標(biāo)語(yǔ)經(jīng)常出現(xiàn)在主頁(yè)上，并大量的用于公司的品牌營(yíng)銷策略。
自適應(yīng)、簡(jiǎn)約的設(shè)計(jì)
訪問者會(huì)通過(guò)PC、平板電腦或智能手機(jī)等設(shè)備登入你的網(wǎng)站。隨著全球移動(dòng)普及率的不斷提高，最新的數(shù)據(jù)顯示將近60%的網(wǎng)站流量是移動(dòng)設(shè)備提供的。
為了確保你的網(wǎng)站有更好的用戶體驗(yàn)，在頁(yè)面設(shè)計(jì)時(shí)考慮其自適應(yīng)性很關(guān)鍵。自適應(yīng)設(shè)計(jì)意味著無(wú)論通過(guò)什么設(shè)備接入你的網(wǎng)站，用戶的體驗(yàn)是相同的或非常相似的。首先，導(dǎo)航要設(shè)計(jì)的方便，使得用戶可以快速瀏覽不同的頁(yè)面;其次，功能需要類似，這樣用戶無(wú)需切換設(shè)備即可訪問網(wǎng)站的全部功能;最后，設(shè)計(jì)要簡(jiǎn)單，這樣才能確保你的設(shè)計(jì)在不同尺寸的屏幕上都可以清晰地傳達(dá)。
一個(gè)風(fēng)格一致且響應(yīng)及時(shí)的網(wǎng)站將有助于保持品牌的知名度，為訪問者跨平臺(tái)與公司保持聯(lián)系提供方便。
動(dòng)態(tài)感，互動(dòng)性和聯(lián)系性
人們更傾向于記住那些能調(diào)動(dòng)他們情緒的事情。將這個(gè)竅門應(yīng)用到你的主頁(yè)設(shè)計(jì)上可以為訪問者創(chuàng)造一種非凡的體驗(yàn)。
一個(gè)動(dòng)態(tài)主頁(yè)可以讓訪客保持心情愉悅，在使用的過(guò)程也更容易留下深刻的印象。而充分利用變化的插圖、動(dòng)畫、視頻或迷你游戲可以增強(qiáng)開發(fā)者和用戶之間的互動(dòng)性。在頁(yè)眉和頁(yè)腳加迷你動(dòng)畫這樣的小細(xì)節(jié)，也是提高用戶體驗(yàn)的不錯(cuò)選擇。
動(dòng)態(tài)布局可以讓訪客了解你的整體想法。虛擬現(xiàn)實(shí)或360°場(chǎng)景漫游頁(yè)面可以更立體地向用戶展示公司業(yè)務(wù)及其產(chǎn)品，達(dá)到鞏固其與品牌之間聯(lián)系的效果。
定期更新主頁(yè)內(nèi)容、及時(shí)反映客戶所需或分享公司的最新動(dòng)態(tài)，這些都是使網(wǎng)站保持活力并與訪客加強(qiáng)聯(lián)系的方式。http://IBM.com提供了很多動(dòng)態(tài)主頁(yè)布局的案例。
換言之，在設(shè)計(jì)和布局主頁(yè)時(shí)采用動(dòng)態(tài)方式可以加深你與用戶之間的合作，為他們提供有趣而又獨(dú)特的體驗(yàn)，這樣他們就會(huì)時(shí)不時(shí)地上你的網(wǎng)站逛逛啦!
簡(jiǎn)單、流暢的導(dǎo)航
整個(gè)網(wǎng)站的使用過(guò)程應(yīng)該是很流暢的。如果訪客在訪問網(wǎng)站過(guò)程中產(chǎn)生了挫敗感，那么這種負(fù)面情緒將會(huì)極大地影響你們之間的關(guān)系。
一個(gè)巧妙且直觀的主頁(yè)設(shè)計(jì)首先應(yīng)該使用簡(jiǎn)單的導(dǎo)航，通過(guò)顏色和對(duì)比度等視覺分隔手段來(lái)打造易于識(shí)別的菜單。其次，不同頁(yè)面標(biāo)簽之間應(yīng)具有合理的邏輯關(guān)系，這樣用戶才能快速找到導(dǎo)航選項(xiàng)卡或按鈕的位置。確保訪問者知道自己在網(wǎng)站所處的位置也是非常重要的，因此選定之后產(chǎn)生一些視覺變化(如：突出顯示，對(duì)比度或顏色更改)可以帶來(lái)不一樣的效果。一個(gè)優(yōu)秀的主頁(yè)設(shè)計(jì)可以使訪問者在不同頁(yè)面和分屏之間輕松游藝，時(shí)刻保持與用戶的緊密聯(lián)系，以激起他們繼續(xù)訪問的欲望。
適當(dāng)加入號(hào)召性用語(yǔ)
你的主頁(yè)有人訪問了!這是一個(gè)很好的開始，但你要怎么留住他們呢?許多現(xiàn)代主頁(yè)通過(guò)具體的號(hào)召性用語(yǔ)(CTA)吸引訪客注意，例如“立即注冊(cè)”、“加入我們”、“免費(fèi)試用”、“立即訂閱”等等，這里有一些可以增加點(diǎn)擊率的CTA示例
網(wǎng)頁(yè)應(yīng)該致力于吸引目標(biāo)用戶的注意力，引導(dǎo)其進(jìn)一步了解公司，找到自己想要的信息，留下聯(lián)系方式，或以其他方式與公司進(jìn)行聯(lián)系。恰到好處的CTA可以引導(dǎo)訪問者在你預(yù)期的路徑上瀏覽，這樣原本只起到宣傳手冊(cè)作用的主頁(yè)將變?yōu)閺?qiáng)有力的銷售引擎。
和時(shí)代標(biāo)準(zhǔn)保持一致
就在不久之前，設(shè)計(jì)的世界還是相當(dāng)平靜、封閉和對(duì)稱的。隨著平面設(shè)計(jì)技術(shù)的日趨成熟，設(shè)計(jì)師們變得越來(lái)越大膽，開始挑戰(zhàn)既有規(guī)則并采用創(chuàng)新性更強(qiáng)的設(shè)計(jì)。
現(xiàn)在，我們已經(jīng)看到越來(lái)越多的不對(duì)稱的網(wǎng)站布局，因?yàn)樵O(shè)計(jì)師們已厭倦完美平衡的世界，那有時(shí)意味著單調(diào)、無(wú)聊和教條。采用極簡(jiǎn)主義手段構(gòu)建框架，并在定位元素和色板選擇上加入更多創(chuàng)意，設(shè)計(jì)師們通過(guò)玩轉(zhuǎn)設(shè)計(jì)創(chuàng)造振奮人心的新標(biāo)準(zhǔn)。
盡管如此，大多數(shù)現(xiàn)代網(wǎng)站通常還是由以下部分組成：
創(chuàng)意的布局
相關(guān)CTA用語(yǔ)
巧妙運(yùn)用的留白
令人愉悅的配色
合適的字體元素
高互動(dòng)性、大片式用戶體驗(yàn)
悅耳的背景音樂
總的來(lái)說(shuō)，主頁(yè)關(guān)系到訪問者對(duì)你公司的第一印象，所以它必須能有效地介紹你的公司及產(chǎn)品。你還需要考慮到設(shè)計(jì)的適應(yīng)性，同時(shí)確保該頁(yè)面是動(dòng)態(tài)的、有吸引力的、易于瀏覽地，這樣用戶才會(huì)更愿意去注冊(cè)。根據(jù)需要更新你的主頁(yè)和網(wǎng)站，保持你線上內(nèi)容的話題性和有效性，這樣你的網(wǎng)站一定會(huì)有很高的回訪率!
介紹完一個(gè)優(yōu)秀的主頁(yè)所需的理論部分，下面讓我們來(lái)看看20個(gè)頂級(jí)的首頁(yè)設(shè)計(jì)實(shí)例，分析這些理論在實(shí)踐中是如何進(jìn)行運(yùn)作的。
這個(gè)設(shè)計(jì)好在哪?
資料豐富，但簡(jiǎn)潔。利用視頻和滑動(dòng)客戶推薦頁(yè)等互動(dòng)方式，利用最少的文字成功描述了產(chǎn)品的內(nèi)容。
通過(guò)以內(nèi)容為主的方式讓用戶獲取產(chǎn)品的具體信息，如這款產(chǎn)品可以在哪里使用、如何使用以及如何開始使用。
用戶提示語(yǔ)的合理放置。頁(yè)面設(shè)計(jì)和布局不僅適用于新用戶，也為想添加更多設(shè)備的老用戶提供方便。
這個(gè)設(shè)計(jì)好在哪?
簡(jiǎn)單的主頁(yè)，豐富的口號(hào)。
沒有不必要的動(dòng)畫或過(guò)分裝飾分散用戶的注意力。消息清楚且切中要害。
整體設(shè)計(jì)與應(yīng)用程序的外觀保持一致，使整個(gè)品牌具有連續(xù)性。
即使有很多的內(nèi)容，導(dǎo)航依舊清晰簡(jiǎn)單。
這個(gè)設(shè)計(jì)好在哪?
干凈、簡(jiǎn)單的設(shè)計(jì)，變幻多端的布局。
吸引人的搞笑手繪，有效推銷產(chǎn)品的語(yǔ)言。
一個(gè)強(qiáng)有力的標(biāo)語(yǔ)，充分描述了產(chǎn)品功能：“隨時(shí)隨地，與人分享”。
小貼士：Dropbox是一個(gè)著名的品牌，該公司目前主要致力于推廣他們新的文檔創(chuàng)建工具Paper 。Paper的主頁(yè)被分割成三個(gè)色塊，分別代表的產(chǎn)品的三個(gè)不同部分：業(yè)務(wù)解決方案，文檔工具和經(jīng)典應(yīng)用。簡(jiǎn)約、清晰的設(shè)計(jì)與Dropbox的其他品牌相一致，但功能強(qiáng)大到獨(dú)樹一幟。
這個(gè)設(shè)計(jì)好在哪?
現(xiàn)代元素設(shè)計(jì)和易于操作的導(dǎo)航。
將其功能清楚地展示在首頁(yè)，便于訪客了解。
通過(guò)毫無(wú)違和感的動(dòng)畫體現(xiàn)其特性。
文字伴隨流暢的動(dòng)畫效果出現(xiàn)和消失，讓訪客產(chǎn)生一種參與感，想繼續(xù)往下瀏覽。
這個(gè)設(shè)計(jì)好在哪?
背景視頻有兩個(gè)目的：吸引訪客的注意力，創(chuàng)造有趣的體驗(yàn)。
餐廳在主頁(yè)設(shè)置了這樣的一個(gè)主人公角色，成功取悅了用戶，與用戶建立起緊密的情感聯(lián)系，讓他們有進(jìn)一步探索的欲望。
柔和的顏色和簡(jiǎn)單的字體讓訪客產(chǎn)生一種好像在與主人公交談的感覺。
友好的設(shè)計(jì)和簡(jiǎn)單的導(dǎo)航與背景視頻融為一體。
點(diǎn)擊菜單欄時(shí)，屏幕會(huì)分割成兩部分。這樣訪客在瀏覽相關(guān)信息的時(shí)，視頻也在屏幕另一邊同步播放。
主頁(yè)設(shè)計(jì)讓人充滿積極的能量，并自然而然地產(chǎn)生一種“內(nèi)部”視角。
這個(gè)設(shè)計(jì)好在哪?
主頁(yè)設(shè)計(jì)使用戶一步步沉浸到游戲世界。
有一套優(yōu)秀的字體與之完美配合。
沖擊劍的音效渲染了整體氛圍。
與用戶的微交互遵循著簡(jiǎn)單的規(guī)則：觸發(fā) -> 規(guī)則 ->反饋 ->循環(huán)模型。微交互是一個(gè)無(wú)休止的循環(huán)。
這個(gè)設(shè)計(jì)好在哪?
簡(jiǎn)約、明亮、醒目的設(shè)計(jì)。
合適的字體組合。
清晰可視化的操作按鈕在體現(xiàn)品牌特性的同時(shí)，與用戶形成互動(dòng)。
在不影響整體風(fēng)格、保持品牌認(rèn)知度的前提下，每個(gè)頁(yè)面通過(guò)個(gè)性化方式向用戶展示不一樣的東西。
這個(gè)設(shè)計(jì)好在哪?
主頁(yè)設(shè)計(jì)明確指出Trello不同于那些老掉牙的任務(wù)管理程序。
給出一個(gè)強(qiáng)有力的口號(hào)：“讓你的事情井井有條”，并通過(guò)簡(jiǎn)短的圖文解釋Trello是如何做到這一點(diǎn)的。
時(shí)尚的圖標(biāo)元素(如萌萌的哈士奇)讓用戶對(duì)該品牌有一個(gè)好的印象 。
風(fēng)格化logo提示相應(yīng)的服務(wù)。這些小細(xì)節(jié)會(huì)給訪問者留下深刻的印象。
明亮的顏色組合巧妙地傳達(dá)出他們提供的服務(wù)兼具趣味性和專業(yè)性。
這個(gè)設(shè)計(jì)好在哪?
個(gè)性、明亮、大膽的頁(yè)面設(shè)計(jì)。
以跳躍的顏色突出關(guān)鍵元素，提示訪客注意。
通過(guò)單一的主頁(yè)就能同時(shí)吸引到作曲家和聽眾的注意。
簡(jiǎn)短但準(zhǔn)確的口號(hào)反映該應(yīng)用的宗旨。
訪問者不用離開頁(yè)面就可以體驗(yàn)相應(yīng)的服務(wù)，享受頂級(jí)音樂帶來(lái)的樂趣。
這個(gè)設(shè)計(jì)好在哪?
該網(wǎng)站有著明亮的顏色和簡(jiǎn)單的形式。
簡(jiǎn)約的布局和難以置信的排版將用戶目光輕松鎖定在關(guān)鍵位置。
主屏的背景動(dòng)畫帶動(dòng)了情緒，在展現(xiàn)公司成就的同時(shí)，讓訪客注意到該公司的業(yè)務(wù)能力。
放置在頁(yè)面的一角的小巧獎(jiǎng)杯圖標(biāo)展示了其獲得的榮譽(yù)，在增加價(jià)值和信任感的同時(shí)，激發(fā)訪客的好奇心。
動(dòng)畫流暢，響應(yīng)及時(shí)。
時(shí)尚的視差滾動(dòng)效果與充滿現(xiàn)代感的分屏畫面完美契合。
加載動(dòng)畫保持該公司的風(fēng)格。
這個(gè)設(shè)計(jì)好在哪?
這是最具創(chuàng)意的主頁(yè)設(shè)計(jì)之一，通過(guò)靈活的導(dǎo)航選項(xiàng)卡展現(xiàn)在線網(wǎng)絡(luò)攝像機(jī)拍攝的特性。你可以隨意點(diǎn)擊地板上或標(biāo)語(yǔ)上的任何元素。
你可以觀察現(xiàn)在辦公室里的人在做什么。
導(dǎo)航標(biāo)簽字體美觀，頁(yè)腳中也出現(xiàn)了相應(yīng)的導(dǎo)航。
時(shí)下最流行的長(zhǎng)滾動(dòng)頁(yè)面。
該公司大膽地展示了一個(gè)容易記住的標(biāo)志&，這與他們的品牌相吻合，也與行業(yè)相關(guān)。
這個(gè)設(shè)計(jì)好在哪?
使用低面設(shè)計(jì)產(chǎn)生視差。
在按鈕、文本、窗口彈出方式等細(xì)節(jié)處使用動(dòng)畫效果。
互動(dòng)感十足的主頁(yè)搭配著夢(mèng)幻般的音樂。
干凈的設(shè)計(jì)，沒有一點(diǎn)冗余元素。
光標(biāo)的移動(dòng)帶來(lái)意想不到的效果。
易操作的導(dǎo)航。
這個(gè)設(shè)計(jì)好在哪?
給人留下深刻視覺印象的360°交互式設(shè)計(jì)。
直觀、逼真的界面。
強(qiáng)大的視覺效果激起訪客進(jìn)一步探索的好奇心。
讓訪客沉浸于未來(lái)世界的背景音樂。
視頻和圖形的巧妙運(yùn)用抓人眼球，使訪客流連忘返。
這個(gè)設(shè)計(jì)好在哪?
所有相關(guān)服務(wù)都在主頁(yè)上突出顯示。
充滿流行元素且契合主題的視頻。
時(shí)尚的配色。
滾動(dòng)頁(yè)面配合吸引人的標(biāo)題以及合適的CTA按鈕。
角落中突出顯示的“注冊(cè)”按鈕可以輕松找到。將重點(diǎn)放在社交網(wǎng)絡(luò)上，讓粉絲有機(jī)會(huì)和他們最喜愛的樂隊(duì)零距離交流。
這個(gè)設(shè)計(jì)好在哪?
優(yōu)雅、輕盈、干凈的設(shè)計(jì)。
絕佳的配色和字體組合(Playfair Display和Montserrat字體)。
公司使命及其優(yōu)勢(shì)清晰展示。
簡(jiǎn)單時(shí)尚的菜單欄被突出顯示。
這個(gè)設(shè)計(jì)好在哪?
首先映入眼簾的一個(gè)簡(jiǎn)單到不能再簡(jiǎn)單的口號(hào)，卻以絕對(duì)的力量描述了該公司的是做什么的。
所有導(dǎo)航標(biāo)簽都配合著超贊的動(dòng)畫。
突出顯示的CTA按鈕被靜態(tài)地放置在右上角，這樣無(wú)論用戶處在什么頁(yè)面，都能快速的完成注冊(cè)。
用戶友好，導(dǎo)航簡(jiǎn)單。
這個(gè)設(shè)計(jì)好在哪?
明亮的設(shè)計(jì)，淡出的動(dòng)畫捕捉用戶的注意力。
產(chǎn)品及其主要特點(diǎn)一目了然。
創(chuàng)意的加載頁(yè)面。
簡(jiǎn)單、精致的導(dǎo)航。
這個(gè)設(shè)計(jì)好在哪?
這是一個(gè)極具時(shí)尚感的不對(duì)稱平面顏色設(shè)計(jì)案例。
大號(hào)、加粗的字體和易于閱讀的排版使導(dǎo)航菜單更清晰、有效，同時(shí)也有助于填補(bǔ)空間。
簡(jiǎn)單卻用心的動(dòng)畫。
導(dǎo)航標(biāo)簽別致的放置方式。
對(duì)公司使命和優(yōu)勢(shì)的清晰描述。
這個(gè)設(shè)計(jì)好在哪?
它有著非常靈活的設(shè)計(jì)結(jié)構(gòu)，訪問者可以在主頁(yè)瀏覽很久。
大量的動(dòng)畫元素吸引著用戶。
以游戲形式進(jìn)行互動(dòng)。
令人愉悅的柔和配色。
這個(gè)設(shè)計(jì)好在哪?
這個(gè)樂隊(duì)的網(wǎng)站導(dǎo)航很不一般。
俏皮的配色。
標(biāo)示著新專輯的按鈕放置在右上角，一系列的滾動(dòng)頁(yè)面勾起你的興趣，這個(gè)方案簡(jiǎn)直太贊了!
頁(yè)面底部的訂閱表單是一個(gè)迷人而有趣的動(dòng)畫。
該網(wǎng)站有一個(gè)標(biāo)志性的網(wǎng)格設(shè)計(jì)，和動(dòng)畫效果完美配合。通過(guò)這樣的方式將信息呈現(xiàn)，訪客會(huì)產(chǎn)生想進(jìn)一步了解這個(gè)樂隊(duì)的欲望。
以上就是上海網(wǎng)站制作公司——海淘科技為你推出《網(wǎng)頁(yè)落地頁(yè)設(shè)計(jì)案例和優(yōu)點(diǎn)分析》的全部?jī)?nèi)容。想看更多的內(nèi)容，可點(diǎn)擊：SEO研究報(bào)道，于此同時(shí)，海淘科技還提供了網(wǎng)站建設(shè)案例，可點(diǎn)擊：滿點(diǎn)餐飲網(wǎng)站制作案例
