網站首頁如何設計

一、網站首頁的重要性

作為網站全貌及重要資訊、産品的展示頁，以及流量的入口頁，企業網站首頁的設計好壞一般決定了使用者對網站的第一印象。

人機互動學博士Jakob Nielsen說過：“見到什麼比記得什麼更容易”。

其實，無論是人還是系統工具，都看顔值。漂亮的排版布局、精緻的首頁可以讓人眼前一亮，可以提升網站的設計感；粗糙的排版、簡陋的首頁則會降低人們的心理預期。

是以，做好網站的首頁設計，有利于增加使用者的好感度，進而有興趣繼續浏覽，也是以增強使用者粘性，為形成良好的使用者轉化做鋪墊。

二、網站首頁的設計要點

1、讓使用者在10秒内知道你是做什麼的

“我是誰？”“我要做什麼？”不隻是哲學問題，也是做網站必須要考慮的問題。

使用者通常在搜尋引擎中是通過搜尋關鍵詞來檢索資訊的，是以使用者的目的通常很明确。

如果使用者點進網站首頁看完都還沒看明白你的網站是做什麼的，那大機率是不會進行下一步的深度浏覽，更别提提高使用者粘性和轉化了。

說到增強使用者對網站記憶點，就不得不提網站智語，一個好的網站slogan或産品賣點也可以起到事半功倍的作用。

2、優先展示「新品」

使用者都是喜新厭舊的，如果是産品展示網站，記得優先展示新上架的産品。試想一下，如果你是賣服裝的，使用者點進去發現首頁展示的都是去年的舊款，會不會潛意識覺得，你這個網站快要黃了，是以才沒有新品？

3、選擇合适的布局方式

首頁布局設計要根據資訊量和頁面類型選擇合适的布局方式，給重要資訊賦予更多空間，展現内容間的主次關系，引導使用者的視線流。

如，門戶網站的首頁由于具有海量的資訊，一般較多采用三欄式布局；

品牌官網的首頁重點是展示企業實力及業務方向，資訊較少，一般采用垂直和水準均居中的布局方式。

新聞網站，新聞内容才是使用者最關注的，是以适合采用新聞内容為主的兩欄式布局。

4、通過視覺區分，保持頁面的通透性

頁面設計不規範，容易導緻各版塊比例不一緻，在視覺上給使用者淩亂的感覺。

要想保持頁面的通透性，可以統一各版塊間的比例，通過線條、顔色等視覺元素增加個欄間的區分度，以此倆增加使用者閱讀的流暢性和舒适性。

5、根據使用者浏覽習慣安排内容

根據眼動試驗結果，使用者的注意力往往呈現F形，是以在頁面布局設計時，應該盡量将重點内容放置在頁面的左上角，右側放置次要内容。

6、統一布局，提升專業度

如果網站首頁選擇了合适的頁面布局，那麼同一類型或同一層級的頁面，盡量使用相同的布局方式，避免分欄方式的不同或分欄比例上的差異，進而保持網站的統一性和規範性，使網站更加專業。

三、首頁布局的基本方法

網站頁面的布局方式決定了該網站頁面給浏覽者的視覺感受和可用性，是以，網站的首頁設計要首先并且着重考慮頁面布局。力求将豐富多彩的頁面内容在有限的空間裡更好的展示出來。

頁面布局的構成原則：協調、一緻、流動、均衡、強調等。

将網站中的每一個構成要素有效的結合起來，給浏覽者美觀、實用的網站首頁界面。

網站整個頁面的構成部分要保持統一風格，使其在視覺上整齊、一緻。

網頁布局的設計能夠讓浏覽者憑着自己的感覺走，并且頁面的功能能夠根據浏覽者的興趣連結到其感興趣的内容上。

将頁面中的每個要素有序的排列，并且保持頁面的穩定性，适當加強頁面的可用性。

把頁面中想要突出展示的内容在不影響整體設計的情況下，用色彩間的搭配或留白的方式将其最大限度的展現出來。

四、頁面視覺布局種類

有些網站在設計布局時會根據網站的性質考慮網站的普遍性，一般使用者會根據自己的喜好浏覽網站頁面。但是，如果想要自己的網站更有創意、更與衆不同，一般不用從頭到尾一直兼顧網站的普遍性，隻要讓浏覽者感覺實用性強并且美觀大方即可。

網站首頁常用的布局方式是滿屏式布局、兩欄式布局、水準和垂直居中式布局。

1、滿屏式布局

滿屏式布局結構簡單，視覺流程清晰，便于使用者快速定位。

采用滿屏式布局的首頁，資訊展示集中，重點突出，通常使用大幅精美的圖檔或者互動式的動畫效果來實作強烈的視覺沖擊效果，進而給使用者留下深刻的印象，提升品牌效果，吸引使用者進一步浏覽。

但是由于頁面排版方式限制，更适用于資訊量小，目的比較集中的網站。是以常用于小型網站首頁。

2、兩欄式布局

兩欄式布局是最常見的布局方式之一，這種布局方式兼具滿屏式布局和三欄式布局的優點。

根據占比不同，可以左窄右寬、左寬右窄、左右均等3種。這三種表面上看是比例和位置不同，但實際上影響的是使用者浏覽的視線以及頁面的整體重點。

左窄右寬

這類布局通常采用左側導航，右側内容的設定。使用者的浏覽習慣通常是從左至右、從上至下，采用這類布局更符合理性的操作流程。适用于内容豐富、導航分類清晰的網站。

左寬右窄

這類頁面通常内容在左，導航在右。結構明顯突出了内容的主導地位，引導使用者将視覺焦點放在内容上。在使用者閱讀内容的同時或者之後，才引導其關注更多的相關資訊。

左右均衡

是指兩側的比例相差很小，甚至完全一緻。運用此類布局的網站較少，适用于兩邊資訊的重要程度相對較均衡的情況。

3、水準和垂直居中的頁面布局

這類布局是指将頁面的橫向和縱向設計成100%的布局架構，使頁面的内容無論在什麼大小的分辨率下，都在浏覽器的正中間顯示。

考慮到計算機顯示器的分辨率不同，我們在設計時一般以1024px×768px的分辨率為标準。在1280px×800x的分辨率下，頁面的周圍肯定要比分辨率為1024px×768px要多出很多空白區域。

以1024px×768px為标準，在設計時如果想要使頁面變得最大并且不會出現滾動條的話，橫向需設定在1007x之内，縱向則需要設定在566x之内但是這不是固定不變的，考慮到頁面的使用空間，也可以适當選擇使用其他的數值。