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

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

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

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

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

F模式 

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

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

英雄形象

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

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

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

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

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

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

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

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

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

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