打造超完美主頁(yè)？20個(gè)主頁(yè)設(shè)計(jì)技能你不容錯(cuò)過(guò)

維基百科將主頁(yè)定義為網(wǎng)站的初始頁(yè)或主要網(wǎng)頁(yè)。我想，“初始”和“主要”這兩個(gè)詞已經(jīng)傳達(dá)了足夠的分量。然而現(xiàn)實(shí)情況卻往往差強(qiáng)人意，設(shè)計(jì)師想破腦袋也難以理解為何什么用戶會(huì)毫無(wú)留念地離開(kāi)，卻殊不知用戶在第一眼就已失去了興趣。設(shè)計(jì)師和用戶之間的橋梁似乎斷開(kāi)了。本文中，我總結(jié)出了 20 個(gè)主頁(yè)設(shè)計(jì)實(shí)用技巧，助您打造超完美主頁(yè)。

首先，我們需要明確，主頁(yè)的主要功能是什么?一旦確立了目標(biāo)，行動(dòng)就會(huì)變得明確。

1)吸引訪客;

2)留住訪客并讓他們探索網(wǎng)站更多的內(nèi)容;

3)促成商業(yè)和合作;

那么，如何設(shè)計(jì)一個(gè)完美主頁(yè)?

1.明確展示“身份“ - 你是誰(shuí)?為用戶提供什么?

不要企圖和用戶玩捉迷藏，用戶不會(huì)花時(shí)間去探索你的業(yè)務(wù)。使用簡(jiǎn)明的文本(標(biāo)題和小標(biāo)題)并結(jié)合視覺(jué)要素(圖片或標(biāo)識(shí)表記標(biāo)幟)來(lái)清楚地顯示你的身份。主頁(yè)應(yīng)該以最直接的方式使訪客第一眼就能明白他們是否找對(duì)了地方。制造迷惑意味用戶流失。

2. 找準(zhǔn)目標(biāo)用戶

你的目標(biāo)用戶才是你應(yīng)該關(guān)注的對(duì)象，那些偶然來(lái)到你的主面的訪客終會(huì)離開(kāi)。不要嘗試將所有拜候者吸引到你的網(wǎng)站，這不會(huì)持久，反而會(huì)讓用戶轉(zhuǎn)向你的競(jìng)爭(zhēng)對(duì)手。因此，你需要鎖定你的目標(biāo)用戶，好比選擇相應(yīng)的界面語(yǔ)言， 貼切你的主要用戶群。

3.設(shè)置鏈接和按鈕

鏈接可供用戶獲取相關(guān)信息，而CTAs則有助于引導(dǎo)用戶進(jìn)行下一步操作。你可以考慮諸如“免費(fèi)試用”，“注冊(cè)”，“立即購(gòu)買(mǎi)”，“免費(fèi)下載”或“了解更多”等按鈕。而且，最好將CTAs置于首屏。

4.多終端適應(yīng)

你是不是經(jīng)常在手機(jī)上上網(wǎng)沖浪呢?我們?cè)缫堰m應(yīng)了移動(dòng)端的世界，你的主頁(yè)不但要在桌面瀏覽器上完美呈現(xiàn)，在差別的移動(dòng)端屏幕上也要連結(jié)精細(xì)有序的狀態(tài)。響應(yīng)式設(shè)計(jì)非常須要。

5. 不停更新

吸引用戶的主頁(yè)絕不是一成不亂的，基于用戶反饋，，需求傳達(dá)以及自身的產(chǎn)品信息更替等等，一個(gè)優(yōu)秀的主頁(yè)永遠(yuǎn)是連結(jié)著最新鮮的狀態(tài)。無(wú)論是文本，圖像，動(dòng)態(tài)，任何最細(xì)微的元素都應(yīng)該是最新的狀態(tài)。這也是建立信任的好措施。

6.使用高質(zhì)量和相匹配的圖像

圖像可以直接反應(yīng)你是誰(shuí)，可以為用戶提供什么。最好使用本身并世無(wú)雙的圖像，這樣就絕不會(huì)和競(jìng)爭(zhēng)對(duì)手有所雷同。對(duì)于一個(gè)online shopping的網(wǎng)站，建議你使用產(chǎn)品的原圖，可以適當(dāng)美化。此外，圖像應(yīng)該與整體配景顏色協(xié)調(diào)。

7.采用平衡配色方案

色彩運(yùn)用是視覺(jué)效果的最主要元素，也是訪客對(duì)頁(yè)面的最直接的感受。顏色的選擇也是很有講究的，好比說(shuō)，對(duì)于一個(gè)社交網(wǎng)站，藍(lán)色是不錯(cuò)的選擇，如果你的網(wǎng)站用戶群體集中在女性，那么建議你使用比較受女性歡迎的顏色，好比如藍(lán)色，紫色和綠色。了解更多關(guān)于顏色的信息，請(qǐng)查看《UI設(shè)計(jì)師-為量身打造的配色技巧》。

8.連結(jié)頁(yè)面清爽，留白是關(guān)鍵

丟掉那些不須要的雜亂或炫目的圖片，視頻，照片和顏色。堅(jiān)持高品質(zhì)，保存空白。這非但不是對(duì)頁(yè)面的浪費(fèi)，反而可以強(qiáng)調(diào)核心信息，并連結(jié)平衡的設(shè)計(jì)， 讓你地主頁(yè)看起來(lái)高端大氣。

9.放棄側(cè)邊欄

如今，許多現(xiàn)代主頁(yè)的設(shè)計(jì)都是已經(jīng)舍棄了使用側(cè)邊欄?；瑝K也一樣，漸漸退出了主頁(yè)設(shè)計(jì)的舞臺(tái)。曾經(jīng)因?yàn)榭梢酝斗糯罅啃畔ⅲ瑐?cè)邊欄和滑塊的使用備受青睞，而如今，用戶漸漸感到迷惑不解，不但沒(méi)完沒(méi)了的信息讓人疲累，頁(yè)面混亂，視覺(jué)體驗(yàn)欠安，還容易分散主要信息。建議使用鏈接和按鈕跳轉(zhuǎn)到相關(guān)內(nèi)容和頁(yè)面。

10.加入精選視頻

視頻可以是您的主頁(yè)的一個(gè)很好的增補(bǔ)。比起平乏的文本，人們往往比較傾向于動(dòng)態(tài)的東西，特別是標(biāo)致精致且簡(jiǎn)潔的動(dòng)畫(huà)視頻。僅僅分鐘內(nèi)，你就可以向用戶介紹本身，一目了然，又富有吸引力。但視頻和動(dòng)畫(huà)的設(shè)置要取決于你的網(wǎng)站類(lèi)型。前提還要連結(jié)頁(yè)面干凈。

11.展示社交認(rèn)同和用戶反饋

這可以是建立信任的一個(gè)很好的方法，讓你的訪客知道你是可靠和負(fù)責(zé)的。使用logo來(lái)展示你的合作伙伴或者相關(guān)媒體，也可以添加須要的客戶案例，客戶保舉或反饋，以及專(zhuān)業(yè)認(rèn)證來(lái)增強(qiáng)信任。這些不建議放在首屏，可以考慮排版后放在頁(yè)末。

12.限制文本數(shù)量

連結(jié)頁(yè)面干凈，文本具有可讀性，最好的是能夠一目了然。句子或段落最多應(yīng)限于兩行或三行。文本贅述過(guò)多會(huì)使頁(yè)面看起來(lái)變得混亂，可讀性也將大大減弱。

13.添加一個(gè)搜索框

搜索框不是一個(gè)不成或缺的元素，但最好添加。搜索框可以幫手拜候者快速找到網(wǎng)站上他想要的相關(guān)內(nèi)容。

14. 標(biāo)注博客

標(biāo)簽：烏魯木齊 九江 東營(yíng) 鹽城 林芝