Web設計中的(de)視覺層次結構是什(shén)麽？

什(shén)麽是視覺層次結構？ 

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

重要的(de)是要注意，在網頁設計中，視覺層次結構需要與功能結合使用(yòng)。換句話(huà)說，形式和(hé)功能需要完美(měi)協調。如果網站僅具有美(měi)觀的(de)外觀，但缺乏功能，則訪問者将無法回答(dá)CTA或購(gòu)買産品，而是會轉到符合其需求的(de)競争對(duì)手的(de)網站。 

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

在整個(gè)1990年代，許多(duō)公司開始使用(yòng)各種顔色，超鏈接和(hé)Flash動畫(huà)創建自己的(de)手工編碼HTML網站。強烈希望在頁面上添加盡可(kě)能多(duō)的(de)信息，而不會在設計布局中添加任何押韻或理(lǐ)由。這(zhè)些早期的(de)網站以競争圖像，不匹配的(de)顔色，字體和(hé)内容的(de)拼貼爲背景。不連貫的(de)設計缺乏視覺層次感，使訪客不确定首先要看的(de)地方！   

F模式 

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

設計中包含了(le)執行良好的(de)F形掃描圖案的(de)示例。此主頁無縫地指導觀衆使用(yòng)層次結構頂部中的(de)清晰溝通(tōng)和(hé)關鍵字。

英雄形象

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

盡管英雄形象席卷了(le)網站設計界，但有趣的(de)是，它與傳統報紙版式的(de)相似之處也(yě)很有趣。想想報紙的(de)頭版。它通(tōng)常具有高(gāo)對(duì)比度的(de)圖像，帶有引人(rén)注意的(de)大(dà)标題，後面是故事。英雄形象設計遵循了(le)使用(yòng)了(le)多(duō)個(gè)世紀的(de)視覺層次。  

合并視覺層次結構的(de)6個(gè)技巧 ，設計網站時(shí)，以下(xià)是遵循視覺層次結構時(shí)要考慮的(de)關鍵元素：

（1）尺寸 –大(dà)元素吸引眼球

（2）顔色 –鮮豔的(de)色彩吸引眼球 

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

（4）對(duì)齊 –元素之間的(de)空間吸引了(le)更多(duō)關注

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

（6）紋理(lǐ)和(hé)樣式 –豐富的(de)紋理(lǐ)比平坦的(de)紋理(lǐ)吸引更多(duō)關注

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