什么是視覺層次?
 
在設計原則中通常稱為層次結構,視覺層次結構是一種在視覺上對設計元素進行排名的方法。它基于視覺重要性的順序,而不是美學或設計風格。好的設計會以特定的順序引導眼睛穿過每個區域,從而通過在設計中使用對象內的對比度,平衡,強調和/或縮放來影響對象的感知方式。一個好的經驗法則是,您最重要的元素應該是最突出的。
 
為什么視覺層次結構很重要?
 
視覺層次結構一目了然地對您的對象進行排名。沒有明顯的層次結構,用戶的眼睛將遵循可預測的路徑,該路徑可以輕松跳過最重要的對象。這些可預測的路徑在文化上受到影響;雖然所有文化都是從上至下閱讀的,但有些是從左至右閱讀的,有些是從右至左閱讀的。西方世界從左到右,從上到下閱讀。這將創建兩條常見路徑:一條為Z形,一條為F形。作為設計師,您可以針對這些閱讀模式優化設計,從而創建有效的視覺層次結構,將用戶準確地引導到您想要的位置。如果您不承認這些常見的模式,則很難獲得并保持用戶的注意力。

F形圖案

F形圖案
 
F形圖案是2006年由Nielsen Norman Group識別的,最常用于信息密集的Web內容。有時,它在熱量映射中表現為F或E,但F“品牌”已經流行。通常,用戶在水平方向(通常跨內容的頂部)閱讀,該內容構成F的頂部欄。然后,他們垂直向下移動頁面,然后再次水平移動,創建F的第二個欄。他們繼續垂直掃描向下,形成F的最后一部分
 
什么是F模式重要的?
 
當您意識到這種偏見時,您可以確保最重要的信息是粗體的,并與設計的左側對齊,以引起用戶的注意。同樣,文本的第一行通常比頁面右側的元素具有更多的粗略瀏覽效果。這意味著,如果左側有引人注目的引導將它們推向右側,則副本和重要信息(例如CTA)可能會有更好的機會被閱讀或采取行動。
 
用戶為什么以F模式瀏覽內容?
 
當用戶第一次查看您網站上的內容時,他們不確定是否要閱讀每個單詞。因此,他們會略讀或瀏覽。正如尼爾森·諾曼集團(Nielsen Norman Group)所說:
 
“當所有這三個元素都存在時,人們以F形掃描:
 
1.頁面或頁面的一部分包含的文本很少或沒有用于網絡的格式。例如,它具有“文本墻”,但沒有粗體,項目符號或副標題。
2.用戶正試圖在該頁上發揮最大的效率。
3.用戶對閱讀每個單詞的興趣或興趣不足。”
 
通過利用用戶自然的F模式閱讀趨勢,可以創建有效的層次結構和設計。

z形圖案

Z形圖案
 
在內容密度較小的網站中(例如產品頁面,結帳頁面,主頁等),Z形模式更為常見。用戶的眼睛將在頁面頂部移動,然后斜向回到屏幕的另一側,然后再次水平移動。為了吸引用戶,通常會在網頁設計中導航頂部,左側標題和介紹頁。
 
用戶為什么以Z模式瀏覽?
 
與F形圖案相似,用戶在承諾完全閱讀內容之前先對其進行掃描。兩者之間差異的原因取決于內容,而不是用戶。使用Z模式而不是F模式的主要原因是:
 
1.該頁面的內容較少,設計更具吸引力。
2.用戶沒有足夠的決心或興趣足以閱讀每個單詞。
3.該設計施加了使用戶遵循Z模式的意愿。
Z形圖案的設計非常有效,這就是為什么它或多或少地成為最佳實踐的原因。
 
內聚視覺 層次的組合
 
除了利用常見的瀏覽模式之外,您還可以使用元素創建強大的視覺層次。以下配對特別有效,但可以使用任何組合來創建具有凝聚力的設計。

設計的大小和規模
 
設計的大小和規模
 
尺度是元素的大小或測量的標準。它可以和其他的設計原則一起使用,比如強調,把觀眾吸引到一個焦點上。如果按比例繪制某物,它將顯示具有精確大小的對象(盡管它可以從實際大小中縮小或放大)。你可以把物體描繪成比生命更大的物體,或者把它放在一張紙上。
 
設計中的質感和風格
 
設計中的質感和風格

即使視覺層次結構更多地是要優先考慮內容而不是美觀,但在工作中添加紋理或設計樣式也會影響層次結構。
 
與尺寸或比例一樣,紋理和樣式可以幫助吸引用戶對設計的某些部分的注意。紋理可以產生深度和有趣的形狀,但變化很快就會變得太過輕浮。過度紋理化的設計會分散注意力,使閱讀和理解變得繁瑣。
 
風格或設計的美感可以幫助實現主題并吸引用戶。樣式可以包括從排版,顏色到間距的所有內容。一些流行的風格是扁平的,有機的,最小的,擬形的,復古的或插圖的。使您的內容更加有效的一個好方法是將設計樣式與內容相匹配。例如,如果內容是用于復古主題的活動,則可以使用復古樣式將內容和設計聯系起來。

設計中的質感和風格

顏色和對比度
 
設計中兩個或多個對象之間的差異稱為對比度。物體的區別可能是明暗,薄而厚,小而大,明亮而暗淡,彩色和黑白。列表是無止境的。通過使用粗體或對比色,您可以創建一個使元素脫穎而出的設計。一個很好的例子是白灰色背景上的紫色按鈕:您正在使用顏色和對比度使該元素成為頁面上最引人注目的元素。

顏色和對比度

平衡與對齊
 
設計中的物體就像在物理世界中一樣承受著重量:這稱為視覺重量。物體相對于其他物體的對齊可以改變其重量。如果對象是單獨的或向左對齊,則該元素將吸引用戶的注意;乍一看,其他對象將融合在一起。設計的視覺重量需要平衡。平衡可以通過大小、形狀,甚至對比度來暗示。雖然它可以利用對稱或平等,但也可以通過不對稱實現平衡。把不對稱看作鏡像的反面:你看到的不是反射,而是均勻分布元素的東西。

鄰近和空白

鄰近和空白
 
白色空間或接近元素,也是一個有效的方式來建立一個有效的層次結構。如果元素有足夠的呼吸空間,它可以使用戶更容易地閱讀和消化它們。大面積的空間也可以使對象顯得更生動,感覺更重要。另一方面,沒有足夠的空白會使元素更難閱讀和消化。