如何在網(wǎng)頁(yè)上建立良好的視覺層次結(jié)構(gòu)？

網(wǎng)站設(shè)計(jì)塑造視覺層次感？在網(wǎng)頁(yè)設(shè)計(jì)中，良好的視覺水平非常必要。一方面，它有助于提高網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)的美感，使各種元素在視覺上更令人愉悅。另一方面，您可以建立清晰的信息級(jí)別，使網(wǎng)站的內(nèi)容更易于用戶理解。換句話說(shuō)，如果網(wǎng)站的視覺層次結(jié)構(gòu)合理，則用戶將能夠獲得更好的瀏覽體驗(yàn)，并且更有可能與網(wǎng)站互動(dòng)以產(chǎn)生購(gòu)買行為。但是，如何在網(wǎng)頁(yè)上建立良好的視覺層次結(jié)構(gòu)？

網(wǎng)站設(shè)計(jì)塑造視覺層次感？

1.確定基本設(shè)計(jì)目標(biāo)

網(wǎng)頁(yè)設(shè)計(jì)上的每個(gè)元素通常都有其目的和意義。通過構(gòu)建可視化級(jí)別，我們可以從這一方面開始，根據(jù)網(wǎng)頁(yè)元素的不同角色確定優(yōu)先級(jí)，然后構(gòu)建可視化級(jí)別。對(duì)于板栗而言，在購(gòu)物中心的網(wǎng)站上，產(chǎn)品的圖像是主要的視覺焦點(diǎn)，是吸引用戶瀏覽產(chǎn)品的第一個(gè)元素；標(biāo)題放在圖像之后，產(chǎn)品以文本形式描述；最后一個(gè)是CTA按鈕。向用戶提供購(gòu)買票。這樣，基本建立了網(wǎng)站可視化水平的主要框架，然后添加了文本和其他元素，并且可視化水平幾乎得以構(gòu)建。

2.考慮用戶的導(dǎo)航模式

用戶首次訪問該網(wǎng)站時(shí)，通常不會(huì)瀏覽所有內(nèi)容，而是會(huì)快速掃描以確定是否有他們感興趣的內(nèi)容。通過對(duì)實(shí)驗(yàn)眼球監(jiān)測(cè)數(shù)據(jù)的研究，我們發(fā)現(xiàn)用戶的導(dǎo)航模式可以概括為三種類型：古騰堡型，Z圖像模式和F圖像模式，其中該類型被廣泛使用。Gutenberg類型和圖像模式F。Gutenberg類型是指用戶注視以大字Z表示的網(wǎng)站內(nèi)容的視覺路徑。當(dāng)網(wǎng)站內(nèi)容較小時(shí)，用戶經(jīng)常使用導(dǎo)航模式在具有更多內(nèi)容項(xiàng)的頁(yè)面（例如博客，新聞平臺(tái)等）上，用戶更傾向于使用地圖模式F。地圖模式F意味著用戶將首先在頁(yè)面頂部查找信息。在水平方向上翻頁(yè)，然后在屏幕左側(cè)水平導(dǎo)航（水平導(dǎo)航路徑略短），最后在垂直方向?qū)Ш健?/p>

 用戶的瀏覽模式和視覺層次之間有什么關(guān)系？網(wǎng)頁(yè)設(shè)計(jì)視覺水平最終以用戶為導(dǎo)向，并致力于滿足您的需求。根據(jù)用戶的導(dǎo)航模型，我們可以有意識(shí)地將關(guān)鍵元素放置在用戶可能會(huì)更容易注意到的位置，例如將重要內(nèi)容放置在頁(yè)面頂部的標(biāo)題中。

 3.功能優(yōu)先

我們經(jīng)常會(huì)誤以為視覺水平是為了服務(wù)于網(wǎng)站設(shè)計(jì)的美觀性。實(shí)際上，視覺水平設(shè)計(jì)的功能更為重要。設(shè)計(jì)人員應(yīng)確保每個(gè)元素在構(gòu)建視覺層次結(jié)構(gòu)中發(fā)揮作用，例如為用戶提供清晰的導(dǎo)航菜單，可見的購(gòu)買路線等，然后考慮元素組合的界面是否美觀。這是因?yàn)楣δ苁且曈X設(shè)計(jì)的核心。網(wǎng)頁(yè)設(shè)計(jì)中如果網(wǎng)站界面干凈整潔，但內(nèi)容非?；靵y，則無(wú)法為用戶提供優(yōu)質(zhì)的體驗(yàn)。因此，在建立視覺水平時(shí)，我們必須考慮界面元素的功能，考慮它們?cè)谝龑?dǎo)用戶方面所起的作用，從而使構(gòu)造的視覺水平更加有效。未定義

4.善用空白

空白或負(fù)空間不僅是界面元素中的空白區(qū)域，而且還是視覺層次結(jié)構(gòu)的中心元素之一。在視覺級(jí)設(shè)計(jì)中，空白可用于連接或區(qū)分不同的內(nèi)容元素以創(chuàng)建獨(dú)特的設(shè)計(jì)。另一方面，它也可以幫助強(qiáng)調(diào)關(guān)鍵要素并給予更多關(guān)注。

5.使用黃金分割

黃金標(biāo)準(zhǔn)主要是指1:1.618頁(yè)的比例，該比例被認(rèn)為是最美的，并且在自然，日常生活和舞臺(tái)設(shè)計(jì)等許多方面都有不同的應(yīng)用。另外，黃金分割率經(jīng)常與螺旋曲線結(jié)合。網(wǎng)頁(yè)設(shè)計(jì)使用可視化級(jí)別設(shè)計(jì)中的黃金部分，您可以將幾個(gè)界面元素放置在正確的位置，以向用戶提供最佳的視覺效果，因此許多設(shè)計(jì)師都喜歡這種設(shè)計(jì)方法。

6.使用網(wǎng)格

網(wǎng)格是設(shè)計(jì)師控制設(shè)計(jì)的關(guān)鍵工具之一。它在網(wǎng)頁(yè)設(shè)計(jì)的各個(gè)階段都發(fā)揮著作用，視覺水平的構(gòu)建階段也不例外。將網(wǎng)格應(yīng)用于網(wǎng)站有助于組織界面元素，并允許以正確的大小和比例表示各種元素。另外，由于網(wǎng)格可以準(zhǔn)確顯示每個(gè)元素的比例，因此在組織空白區(qū)域時(shí)也可以提供大量參考。

7.添加顏色

色彩在網(wǎng)頁(yè)設(shè)計(jì)視覺層次中也發(fā)揮著不可替代的作用：它們可以幫助用戶區(qū)分核心元素和非核心元素。不同顏色通常在用戶心中有不同的影響力，比如明亮大膽的紅色和橘色就比白色和米色要更加顯眼，更能吸引用戶視線，這也是為什么設(shè)計(jì)師經(jīng)常將紅色或橘色來(lái)強(qiáng)調(diào)某個(gè)元素或創(chuàng)造強(qiáng)烈的對(duì)比。除此以外，在不同的元素上使用同一種顏色，還能夠體現(xiàn)這些元素內(nèi)在的聯(lián)系。

8.字體排版層級(jí)

視覺層次的架構(gòu)還涉及到一個(gè)關(guān)鍵的分支，那就是排版層級(jí)。排版層級(jí)是指通過不同字體的組合，旨在突出重要文本元素和普通文本信息的對(duì)比。這樣的對(duì)比一般是通過改變字體大小、顏色、類型、對(duì)齊方式等來(lái)實(shí)現(xiàn)的，不同的字體可以將內(nèi)容元素分為多個(gè)層次。不過，網(wǎng)頁(yè)設(shè)計(jì)中網(wǎng)站的字體類型也不能太多，最好不要超過3種，因?yàn)樘嗟淖煮w類型會(huì)讓網(wǎng)站看上去雜亂無(wú)章，讓整個(gè)設(shè)計(jì)顯得不和諧。

9.Web三層級(jí)和手機(jī)二層級(jí)

一般來(lái)說(shuō)，網(wǎng)站的排版層級(jí)應(yīng)該分為3種：第一、第二和第三層級(jí)。第一層級(jí)包括最醒目的元素類型，旨在吸引用戶對(duì)于核心元素的關(guān)注；第二層級(jí)是一些易于瀏覽的文本內(nèi)容，旨在幫助用戶更好的通讀全文，第三層級(jí)是主體文本以及一些額外的數(shù)據(jù)，它們?cè)诔尸F(xiàn)時(shí)相對(duì)要沒那么醒目。在特定的內(nèi)容級(jí)別控制中，PC端和移動(dòng)端具有不同的要求。在PC相對(duì)較大的一側(cè)，網(wǎng)頁(yè)設(shè)計(jì)建議使用3個(gè)級(jí)別的設(shè)計(jì)，因?yàn)樗哂凶銐虻目臻g來(lái)顯示大量?jī)?nèi)容，并且多個(gè)級(jí)別也可以反映頁(yè)面的豐富性。在手機(jī)方面，通常建議僅顯示兩個(gè)級(jí)別，因?yàn)樾∑聊缓茈y傳輸三個(gè)級(jí)別，因此我們可以丟棄第二個(gè)級(jí)別的內(nèi)容元素（例如字幕等）以允許界面移動(dòng)設(shè)備上載更加整潔。