網(wǎng)站建設(shè)|網(wǎng)站首頁(yè)這么設(shè)計(jì)，用戶體驗(yàn)更好

時(shí)間：2023-10-12 02:36:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-12 02:36:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)站建設(shè)|網(wǎng)站首頁(yè)這么設(shè)計(jì)，用戶體驗(yàn)更好：這是【建站百科】專(zhuān)欄第18篇原創(chuàng)內(nèi)容，由我在建站行業(yè)從業(yè)10年、給上萬(wàn)公司搭建過(guò)網(wǎng)站的經(jīng)驗(yàn)總結(jié)而來(lái)。




hello，艾瑞巴蒂，大夢(mèng)又來(lái)了，今天要說(shuō)的是作為網(wǎng)站“門(mén)面”的網(wǎng)站首頁(yè)設(shè)計(jì)。

一、 網(wǎng)站首頁(yè)的重要性

作為網(wǎng)站全貌及重要信息、產(chǎn)品的展示頁(yè)，以及流量的入口頁(yè)，企業(yè)網(wǎng)站首頁(yè)的設(shè)計(jì)好壞一般決定了用戶對(duì)網(wǎng)站的第一印象。

人機(jī)交互學(xué)博士Jakob Nielsen說(shuō)過(guò)：“見(jiàn)到什么比記得什么更容易”。

其實(shí)，無(wú)論是人還是系統(tǒng)工具，都看顏值。漂亮的排版布局、精致的首頁(yè)可以讓人眼前一亮，可以提升網(wǎng)站的設(shè)計(jì)感；粗糙的排版、簡(jiǎn)陋的首頁(yè)則會(huì)降低人們的心理預(yù)期。

所以，做好網(wǎng)站的首頁(yè)設(shè)計(jì)，有利于增加用戶的好感度，從而有興趣繼續(xù)瀏覽，也因此增強(qiáng)用戶粘性，為形成良好的用戶轉(zhuǎn)化做鋪墊。

二、網(wǎng)站首頁(yè)的設(shè)計(jì)要點(diǎn)

1、讓用戶在10秒內(nèi)知道你是做什么的

“我是誰(shuí)？”“我要做什么？”不只是哲學(xué)問(wèn)題，也是做網(wǎng)站必須要考慮的問(wèn)題。

用戶通常在搜索引擎中是通過(guò)搜索關(guān)鍵詞來(lái)檢索信息的，所以用戶的目的通常很明確。

如果用戶點(diǎn)進(jìn)網(wǎng)站首頁(yè)看完都還沒(méi)看明白你的網(wǎng)站是做什么的，那大概率是不會(huì)進(jìn)行下一步的深度瀏覽，更別提提高用戶粘性和轉(zhuǎn)化了。

說(shuō)到增強(qiáng)用戶對(duì)網(wǎng)站記憶點(diǎn)，就不得不提網(wǎng)站標(biāo)語(yǔ)，一個(gè)好的網(wǎng)站slogan或產(chǎn)品賣(mài)點(diǎn)也可以起到事半功倍的作用。

如這個(gè)網(wǎng)站，首頁(yè)圖片是一張電吹風(fēng)，配上文字「你的下一臺(tái)電吹風(fēng)，必須是告訴電吹風(fēng)」。用戶一眼就明白，這個(gè)網(wǎng)站是電吹風(fēng)網(wǎng)站。




2、優(yōu)先展示「新品」

用戶都是喜新厭舊的，如果是產(chǎn)品展示網(wǎng)站，記得優(yōu)先展示新上架的產(chǎn)品。試想一下，如果你是賣(mài)服裝的，用戶點(diǎn)進(jìn)去發(fā)現(xiàn)首頁(yè)展示的都是去年的舊款，會(huì)不會(huì)潛意識(shí)覺(jué)得，你這個(gè)網(wǎng)站快要黃了，所以才沒(méi)有新品？




3、選擇合適的布局方式

首頁(yè)布局設(shè)計(jì)要根據(jù)信息量和頁(yè)面類(lèi)型選擇合適的布局方式，給重要信息賦予更多空間，體現(xiàn)內(nèi)容間的主次關(guān)系，引導(dǎo)用戶的視線流。

如，門(mén)戶網(wǎng)站的首頁(yè)由于具有海量的信息，一般較多采用三欄式布局；

品牌官網(wǎng)的首頁(yè)重點(diǎn)是展示企業(yè)實(shí)力及業(yè)務(wù)方向，信息較少，一般采用垂直和水平均居中的布局方式。

新聞網(wǎng)站，新聞內(nèi)容才是用戶最關(guān)注的，所以適合采用新聞內(nèi)容為主的兩欄式布局。

4、通過(guò)視覺(jué)區(qū)分，保持頁(yè)面的通透性
頁(yè)面設(shè)計(jì)不規(guī)范，容易導(dǎo)致各版塊比例不一致，在視覺(jué)上給用戶凌亂的感覺(jué)。

要想保持頁(yè)面的通透性，可以統(tǒng)一各版塊間的比例，通過(guò)線條、顏色等視覺(jué)元素增加個(gè)欄間的區(qū)分度，以此倆增加用戶閱讀的流暢性和舒適性。




5、根據(jù)用戶瀏覽習(xí)慣安排內(nèi)容
根據(jù)眼動(dòng)試驗(yàn)結(jié)果，用戶的注意力往往呈現(xiàn)F形，因此在頁(yè)面布局設(shè)計(jì)時(shí)，應(yīng)該盡量將重點(diǎn)內(nèi)容放置在頁(yè)面的左上角，右側(cè)放置次要內(nèi)容。

6、統(tǒng)一布局，提升專(zhuān)業(yè)度
如果網(wǎng)站首頁(yè)選擇了合適的頁(yè)面布局，那么同一類(lèi)型或同一層級(jí)的頁(yè)面，盡量使用相同的布局方式，避免分欄方式的不同或分欄比例上的差異，從而保持網(wǎng)站的統(tǒng)一性和規(guī)范性，使網(wǎng)站更加專(zhuān)業(yè)。

三、首頁(yè)布局的基本方法

網(wǎng)站頁(yè)面的布局方式?jīng)Q定了該網(wǎng)站頁(yè)面給瀏覽者的視覺(jué)感受和可用性，因此，網(wǎng)站的首頁(yè)設(shè)計(jì)要首先并且著重考慮頁(yè)面布局。力求將豐富多彩的頁(yè)面內(nèi)容在有限的空間里更好的展示出來(lái)。

頁(yè)面布局的構(gòu)成原則：協(xié)調(diào)、一致、流動(dòng)、均衡、強(qiáng)調(diào)等。

將網(wǎng)站中的每一個(gè)構(gòu)成要素有效的結(jié)合起來(lái)，給瀏覽者美觀、實(shí)用的網(wǎng)站首頁(yè)界面。
網(wǎng)站整個(gè)頁(yè)面的構(gòu)成部分要保持統(tǒng)一風(fēng)格，使其在視覺(jué)上整齊、一致。
網(wǎng)頁(yè)布局的設(shè)計(jì)能夠讓瀏覽者憑著自己的感覺(jué)走，并且頁(yè)面的功能能夠根據(jù)瀏覽者的興趣鏈接到其感興趣的內(nèi)容上。
將頁(yè)面中的每個(gè)要素有序的排列，并且保持頁(yè)面的穩(wěn)定性，適當(dāng)加強(qiáng)頁(yè)面的可用性。
把頁(yè)面中想要突出展示的內(nèi)容在不影響整體設(shè)計(jì)的情況下，用色彩間的搭配或留白的方式將其最大限度的展現(xiàn)出來(lái)。

四、頁(yè)面視覺(jué)布局種類(lèi)

有些網(wǎng)站在設(shè)計(jì)布局時(shí)會(huì)根據(jù)網(wǎng)站的性質(zhì)考慮網(wǎng)站的普遍性，一般用戶會(huì)根據(jù)自己的喜好瀏覽網(wǎng)站頁(yè)面。但是，如果想要自己的網(wǎng)站更有創(chuàng)意、更與眾不同，一般不用從頭到尾一直兼顧網(wǎng)站的普遍性，只要讓瀏覽者感覺(jué)實(shí)用性強(qiáng)并且美觀大方即可。

網(wǎng)站首頁(yè)常用的布局方式是滿屏式布局、兩欄式布局、水平和垂直居中式布局。

1、滿屏式布局

滿屏式布局結(jié)構(gòu)簡(jiǎn)單，視覺(jué)流程清晰，便于用戶快速定位。

采用滿屏式布局的首頁(yè)，信息展示集中，重點(diǎn)突出，通常使用大幅精美的圖片或者交互式的動(dòng)畫(huà)效果來(lái)實(shí)現(xiàn)強(qiáng)烈的視覺(jué)沖擊效果，從而給用戶留下深刻的印象，提升品牌效果，吸引用戶進(jìn)一步瀏覽。

但是由于頁(yè)面排版方式限制，更適用于信息量小，目的比較集中的網(wǎng)站。因此常用于小型網(wǎng)站首頁(yè)。

2、兩欄式布局

兩欄式布局是最常見(jiàn)的布局方式之一，這種布局方式兼具滿屏式布局和三欄式布局的優(yōu)點(diǎn)。

根據(jù)占比不同，可以左窄右寬、左寬右窄、左右均等3種。這三種表面上看是比例和位置不同，但實(shí)際上影響的是用戶瀏覽的視線以及頁(yè)面的整體重點(diǎn)。

①左窄右寬：這類(lèi)布局通常采用左側(cè)導(dǎo)航，右側(cè)內(nèi)容的設(shè)置。用戶的瀏覽習(xí)慣通常是從左至右、從上至下，采用這類(lèi)布局更符合理性的操作流程。適用于內(nèi)容豐富、導(dǎo)航分類(lèi)清晰的網(wǎng)站。

②左寬右窄：這類(lèi)頁(yè)面通常內(nèi)容在左，導(dǎo)航在右。結(jié)構(gòu)明顯突出了內(nèi)容的主導(dǎo)地位，引導(dǎo)用戶將視覺(jué)焦點(diǎn)放在內(nèi)容上。在用戶閱讀內(nèi)容的同時(shí)或者之后，才引導(dǎo)其關(guān)注更多的相關(guān)信息。

③左右均衡：是指兩側(cè)的比例相差很小，甚至完全一致。運(yùn)用此類(lèi)布局的網(wǎng)站較少，適用于兩邊信息的重要程度相對(duì)較均衡的情況。




3、水平和垂直居中的頁(yè)面布局

這類(lèi)布局是指將頁(yè)面的橫向和縱向設(shè)計(jì)成100%的布局框架，使頁(yè)面的內(nèi)容無(wú)論在什么大小的分辨率下，都在瀏覽器的正中間顯示。




考慮到計(jì)算機(jī)顯示器的分辨率不同，我們?cè)谠O(shè)計(jì)時(shí)一般以1024px×768px的分辨率為標(biāo)準(zhǔn)。在1280px×800x的分辨率下，頁(yè)面的周?chē)隙ㄒ确直媛蕿?024px×768px要多出很多空白區(qū)域。

以1024px×768px為標(biāo)準(zhǔn)，在設(shè)計(jì)時(shí)如果想要使頁(yè)面變得最大并且不會(huì)出現(xiàn)滾動(dòng)條的話，橫向需設(shè)置在1007x之內(nèi)，縱向則需要設(shè)置在566x之內(nèi)但是這不是固定不變的，考慮到頁(yè)面的使用空間，也可以適當(dāng)選擇使用其他的數(shù)值。







好啦，今天的建站小課堂到這里就結(jié)束啦。

如果你有建站需求，可以聯(lián)系大夢(mèng)哦~

記得點(diǎn)贊+收藏+關(guān)注 @云夢(mèng)智能 讓我看到你的熱情哦