什么是視覺層次結構？ 

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

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

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

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

F模式 

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

設計中包含了執(zhí)行良好的F形掃描圖案的示例。此主頁無縫地指導觀眾使用層次結構頂部中的清晰溝通和關鍵字。

英雄形象

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

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

合并視覺層次結構的6個技巧 ，設計網(wǎng)站時，以下是遵循視覺層次結構時要考慮的關鍵元素：

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

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

（3）對比 -強烈對比的色彩很容易吸引眼球

（4）對齊 –元素之間的空間吸引了更多關注

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

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

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