先是石碑，紙莎草紙和紙，然后是電腦屏幕和電子平板電腦。隨著
網(wǎng)站設(shè)計(jì)的發(fā)展，設(shè)計(jì)師的工作仍然是清楚地安排內(nèi)容。但最好的方法是什么？簡而言之，視覺層次結(jié)構(gòu)。
這是視覺層次結(jié)構(gòu)的定義：視覺層次結(jié)構(gòu)是設(shè)計(jì)中圖形元素按每個(gè)元素的重要性排列的排列。視覺權(quán)重定義了元素在設(shè)計(jì)層次結(jié)構(gòu)中的重要性，向觀眾的眼睛傳達(dá)了要關(guān)注的內(nèi)容和順序。
這是一個(gè)越來越重要的問題，因?yàn)轫憫?yīng)式框架迫使設(shè)計(jì)人員同時(shí)考慮許多不同的頁面。面對密集的文本和短暫的注意力，設(shè)計(jì)師們制定了6條原則來引導(dǎo)讀者注意最重要的信息。
尚略
上海網(wǎng)站設(shè)計(jì)公司整理的“視覺層次結(jié)構(gòu)的6個(gè)原則”將幫助您設(shè)計(jì)從小冊子到應(yīng)用程序的所有內(nèi)容，確保為最終用戶提供積極的閱讀體驗(yàn)。
左：粘土片（通過 維基百科）; 正確的iPad（通過 apple.com）
1.閱讀模式
所有的文字都從上到下閱讀，大多數(shù)文字從左到右閱讀。但是，雖然這些知識(shí)對頁面設(shè)計(jì)很重要，但設(shè)計(jì)人員知道任務(wù)要復(fù)雜得多。
最近的研究表明，在進(jìn)行閱讀之前，人們首先掃描一頁以了解他們是否感興趣。掃描圖案傾向于采用“F”和“Z”兩種形狀中的一種，您可以在設(shè)計(jì)中利用這一點(diǎn)。
F-模式
F模式適用于傳統(tǒng)的，文本密集的頁面，如文章或博客文章。讀者向下掃描頁面左側(cè)，在左對齊標(biāo)題或初始主題句中尋找有趣的關(guān)鍵詞，然后在他或她遇到有趣的東西時(shí)停止并閱讀（向右）。結(jié)果看起來像F（或E，或具有更多水平條的東西;但“F”術(shù)語已卡?。?。
視覺層次頁面掃描模式，來自尼爾森諾曼集團(tuán)的熱圖
你怎么能利用這個(gè)？將您的重要信息與左對齊，并使用簡短粗體標(biāo)題，項(xiàng)目符號(hào)和其他此類注意力集中來打破段落塊。
Z-模式
視覺層次結(jié)構(gòu)中的Z模式
Z模式適用于其他類型的頁面，例如廣告或網(wǎng)站，其中信息不一定以塊段落形式呈現(xiàn)。讀者的眼睛首先掃描頁面的頂部，可能會(huì)找到重要的信息，然后向下射到對角的對角線，并在頁面的下半部分做同樣的事情。
Web設(shè)計(jì)人員通常構(gòu)造其頁面以明確地符合此行為，將最重要的信息放在角落中，并沿頂部和底部條形并連接對角線定向其他重要信息。
在2010年Build大會(huì)的以下設(shè)計(jì)中，重要元素包括徽標(biāo)（左上角），“立即注冊”按鈕（右上角）和揚(yáng)聲器列表（橫跨底部），所有這些都策略性地放置在Z模式。
在構(gòu)建網(wǎng)站采用了Z-模式
2.尺寸很重要
使用字體大小的視覺層次結(jié)構(gòu)
Rebecca Foster的這張海報(bào)使用不同的字體大小來創(chuàng)建視覺層次結(jié)構(gòu)。有趣的是，這種趨勢實(shí)際上足以超越自上而下的規(guī)則。在上面的圖像中，“敏捷”覆蓋了“行動(dòng)時(shí)間”，因?yàn)樗却笥窒蜃螅ㄋ詮淖蟮接业囊?guī)則伸出援助之手）。
但是在2012年年度報(bào)告：人權(quán)運(yùn)動(dòng)（由Five Five Media設(shè)計(jì)）的下一頁中，我們在其正上方的文字“2012年選舉”中閱讀了大量的“爭取競選活動(dòng)中的平等”。
第五欄的年度報(bào)告
“2012年選舉”是最高級(jí)別的信息順序：它告訴我們以下信息屬于的一般主題。但是設(shè)計(jì)師認(rèn)為文章標(biāo)題對于讀者來說更有趣，因此首先要閱讀它的大小。
3.空間和紋理
吸引注意力的另一種方式是給予內(nèi)容充足的呼吸空間。如果按鈕周圍留有大量負(fù)空間，則讀者可以更容易地看到這些元素。
如下圖所示（DrawtoClick的網(wǎng)站的一部分），間距可以是一個(gè)優(yōu)雅的替代或使用大小的補(bǔ)充。在這里，賣點(diǎn)“Notre agence vous......”是一種非常小的字體，但它被一個(gè)過剩的白色空間所包圍，這標(biāo)志著它的重要性。下面，“Le Compendre”，“LeRéaliser”和“Le Partager”等詞語通過與周圍空間隔離而得到額外的重視。
視覺層次結(jié)構(gòu)示例，Draw to Click的網(wǎng)站
當(dāng)人們談?wù)撘曈X層次的“紋理”時(shí)，他們并不是指圖形紋理效果。相反，這種“紋理”指的是頁面上的空間，文本和其他細(xì)節(jié)的整體布置或圖案。Bright Pink的這個(gè)例子很好地說明了這個(gè)概念。
體育海報(bào)
在第一張圖片中，“體育”一詞在層次結(jié)構(gòu)中比“羽毛球”更高，因?yàn)樗?，更大，更大膽。在第二張圖片中，由于黑色矩形突出了“羽毛球”并將其置于自己的空間中，因此這兩個(gè)詞大致相同。在第三張圖片中，背景涂鴉中斷了“體育”而不是“羽毛球”的空間，因此導(dǎo)致了“羽毛球”在等級(jí)中最高的逆轉(zhuǎn)。這種進(jìn)展很難預(yù)測，因此設(shè)計(jì)師經(jīng)常將其歸結(jié)為整體的“質(zhì)感”感。
4.字體重量和配對
字體選擇對于建立視覺層次結(jié)構(gòu)至關(guān)重要。在字體中最重要的屬性是重量， 構(gòu)成字母的筆畫的寬度和樣式，如serif和sans serif。其他修改如斜體也可以發(fā)揮作用。
請注意字體如何影響茶廠下面網(wǎng)頁設(shè)計(jì)中單詞的層次順序：“保持溫暖的完美茶”是焦點(diǎn)，但除了單詞放置之外，類型重量和斜體的差異會(huì)產(chǎn)生更具動(dòng)感，線性度更低的閱讀體驗(yàn)。由于尺寸和間距的原因，“請參閱我們的選擇”，行動(dòng)呼吁比上面的文字更強(qiáng)調(diào)。
茶廠品牌
在某些情況下，目標(biāo)是提供同樣緊急的各種信息。將它們設(shè)置為相同的大小和重量將實(shí)現(xiàn)等效，但也會(huì)使其單調(diào)。區(qū)分字體是避免這種情況的一種方法，如下面的Trendi雜志封面。
在這里，頁面周邊的五個(gè)teases在層次結(jié)構(gòu)上都是相同的，但通過在兩個(gè)配對良好的字體之間改變來實(shí)現(xiàn)多樣化， 一個(gè)是中等重量的襯線，另一個(gè)是輕量級(jí)但很高的無襯線字體。
5.顏色和色調(diào)
這是另一個(gè)明智的選擇：明亮的色彩從柔和的色彩或灰度中脫穎而出，而較淺的色調(diào)看起來更“遙遠(yuǎn)”，因此在層次結(jié)構(gòu)上比較濃，較暗的色彩低。Where They At的網(wǎng)站將熒光筆黃色和彩色照明與黑白網(wǎng)格形成對比，達(dá)到驚人的效果：
古根海姆博物館的網(wǎng)站用于視覺層次結(jié)構(gòu)的顏色
古根海姆網(wǎng)站使用顏色來突出重要信息，如位置選擇，目前正在觀看的展覽清單以及特殊展覽的鏈接。
另一方面，惠特尼博物館的網(wǎng)站通過使用色調(diào)（指的是將白色添加到基色調(diào)，使其更輕）在單一字體，重量和色調(diào)（黑色）內(nèi)建立等級(jí)。“Cory Arcangel on Pop Culture”顯然位于視覺層次上的“New on Whitney Stories”之下，不僅因?yàn)樗环胖玫酶?，而且因?yàn)樗纳{(diào)更輕，使其在白色背景下不那么引人注目。
惠特尼美國藝術(shù)博物館網(wǎng)站
顏色在移動(dòng)應(yīng)用程序設(shè)計(jì)中尤為重要，因?yàn)樾∑聊怀叽缦拗屏四褂闷渌呗裕ㄈ绯叽绮町惡蛯掗g距）的能力。在Grainger Industrial Supply的應(yīng)用程序中，“繼續(xù)結(jié)賬”按鈕顯示為紅色，使其從出現(xiàn)的任何頁面中脫穎而出。相比之下，“縮小搜索結(jié)果”欄是灰色的，使其在層次結(jié)構(gòu)上與搜索欄和產(chǎn)品鏈接等其他元素大致相同。
Grainger的應(yīng)用程序設(shè)計(jì)
6.方向
頁面布局通常根據(jù)垂直和水平線網(wǎng)格設(shè)計(jì)，按照慣例，因?yàn)檫@是最易讀的格式。在這樣的系統(tǒng)中，出現(xiàn)了建立層次結(jié)構(gòu)的新方法：打破網(wǎng)格。
排列在曲線或?qū)蔷€上的文本將自動(dòng)脫離周圍的網(wǎng)格鎖定文本，成為中心舞臺(tái)。這一直是Frost Design下面的公共汽車站海報(bào)廣告的有效策略。
本篇文章由上海尚略品牌策劃網(wǎng)站設(shè)計(jì)公司分享。