什么是視覺層次結(jié)構(gòu)？ 

高效，智能的網(wǎng)頁設(shè)計(jì)需要凝聚力清晰的視覺輔助工具，以便訪問者可以快速輕松地訪問他們所尋找的內(nèi)容。網(wǎng)頁設(shè)計(jì)中的視覺層次結(jié)構(gòu)是指元素的排列或表示方式，它暗示著重要性并影響人眼感知所見事物的順序。其背后的理論是，人腦具有“先天組織的趨勢，將單個元素，形狀或形式構(gòu)造成一個連貫的，有組織的整體。”

重要的是要注意，在網(wǎng)頁設(shè)計(jì)中，視覺層次結(jié)構(gòu)需要與功能結(jié)合使用。換句話說，形式和功能需要完美協(xié)調(diào)。如果網(wǎng)站僅具有美觀的外觀，但缺乏功能，則訪問者將無法回答CTA或購買產(chǎn)品，而是會轉(zhuǎn)到符合其需求的競爭對手的網(wǎng)站。 

1991年8月6日，第一個網(wǎng)頁上線。該網(wǎng)頁由英國科學(xué)家蒂姆·伯納斯·李（Tim Berners-Lee）創(chuàng)建，致力于萬維網(wǎng)項(xiàng)目，“旨在使人們能夠廣泛訪問大量文檔。”單個頁面由文本行和藍(lán)色超鏈接組成。  

在整個1990年代，許多公司開始使用各種顏色，超鏈接和Flash動畫創(chuàng)建自己的手工編碼HTML網(wǎng)站。強(qiáng)烈希望在頁面上添加盡可能多的信息，而不會在設(shè)計(jì)布局中添加任何押韻或理由。這些早期的網(wǎng)站以競爭圖像，不匹配的顏色，字體和內(nèi)容的拼貼為背景。不連貫的設(shè)計(jì)缺乏視覺層次感，使訪客不確定首先要看的地方！   

F模式 

當(dāng)我們的眼睛掃描網(wǎng)站時，層次結(jié)構(gòu)頂部的圖像和內(nèi)容首先引起了我們的注意。研究表明，我們在互聯(lián)網(wǎng)上以F形掃描模式閱讀。我們傾向于選擇阻力最小的路徑，因此我們快速查看圖像和內(nèi)容以獲得所需的信息。執(zhí)行此操作時，我們的眼睛從網(wǎng)頁的左上方掃描，然后向右移動，然后從左側(cè)向下搜索以尋找視覺提示，然后再次向右，但是我們在右側(cè)看到的內(nèi)容少了一點(diǎn)每次我們向下掃描頁面時。執(zhí)行良好的Web設(shè)計(jì)會將最重要的信息放在F模式中，使讀者可以在幾秒鐘內(nèi)掃描圖像并捕獲關(guān)鍵字。 

設(shè)計(jì)中包含了執(zhí)行良好的F形掃描圖案的示例。此主頁無縫地指導(dǎo)觀眾使用層次結(jié)構(gòu)頂部中的清晰溝通和關(guān)鍵字。

英雄形象

視覺層次結(jié)構(gòu)的另一種流行而有效的用法是在折疊上方放置一個大圖像，稱為“英雄圖像”。該名稱來源于電影界中使用的“ 英雄道具 ”一詞，是指打算由主要演員持有或使用的任何物體。網(wǎng)頁設(shè)計(jì)界開始使用“英雄”這個名字，隨之而來的是“英雄形象”，它的受歡迎程度和規(guī)模都在增長-它會占用很多首頁房地產(chǎn)。這是訪問者看到的第一個視覺元素，顯示了網(wǎng)站最重要內(nèi)容的清晰概述。

盡管英雄形象席卷了網(wǎng)站設(shè)計(jì)界，但有趣的是，它與傳統(tǒng)報紙版式的相似之處也很有趣。想想報紙的頭版。它通常具有高對比度的圖像，帶有引人注意的大標(biāo)題，后面是故事。英雄形象設(shè)計(jì)遵循了使用了多個世紀(jì)的視覺層次。  

合并視覺層次結(jié)構(gòu)的6個技巧 ，設(shè)計(jì)網(wǎng)站時，以下是遵循視覺層次結(jié)構(gòu)時要考慮的關(guān)鍵元素：

（1）尺寸 –大元素吸引眼球

（2）顏色 –鮮艷的色彩吸引眼球 

（3）對比 -強(qiáng)烈對比的色彩很容易吸引眼球

（4）對齊 –元素之間的空間吸引了更多關(guān)注

（5）空格 -眼睛被周圍具有更多空間的元素所吸引

（6）紋理和樣式 –豐富的紋理比平坦的紋理吸引更多關(guān)注

由于設(shè)計(jì)趨勢似乎總是在回退，我們是否會回到90年代的混亂網(wǎng)頁設(shè)計(jì)？讓我們不要希望！許多早期站點(diǎn)的圖像或演示文稿都沒有連貫，清晰的安排。觀察Web設(shè)計(jì)的發(fā)展以及在創(chuàng)建好壞設(shè)計(jì)之間視覺層次結(jié)構(gòu)的重要性。