甚么是視覺條理?
 
在設想準繩中凡是稱為條理布局,視覺條理布局是一種在視覺上對設想元素停止排名的體例。它基于視覺首要性的挨次,而不是美學或設想氣概。好的設想會以特定的挨次指導眼睛穿過每一個地區,從而經由進程在設想中操縱工具內的對照度,均衡,夸大和/或縮放來影響工具的感知體例。一個好的經歷法例是,您最首要的元素應當是最凸起的。
 
為甚么視覺條理布局很首要?
 
視覺條理布局一目明了地對您的工具停止排名。不較著的條理布局,用戶的眼睛將遵守可展望的途徑,該途徑能夠輕松跳過最首要的工具。這些可展望的途徑在文明上遭到影響;固然一切文明都是從上至下瀏覽的,但有些是從左至右瀏覽的,有些是從右至左瀏覽的。東方天下從左到右,從上到下瀏覽。這將成立兩條罕見途徑:一條為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形圖案的設想很是有用,這便是為甚么它或多或少地成為最好理論的緣由。
 
內聚視覺 條理的組合
 
除操縱罕見的瀏覽形式以外,您還能夠操縱元素成立壯大的視覺條理。以下配對出格有用,但能夠操縱任何組合來成立具備凝集力的設想。

設想的巨細和規模
 
設想的巨細和規模
 
規范是元素的巨細或丈量的規范。它能夠和其余的設想準繩一路操縱,比方夸大,把觀眾吸收到一個核心上。若是按比例繪制某物,它將顯現具備切確巨細的工具(固然它能夠從現實巨細中減少或縮小)。你能夠把物體描畫成比性命更大的物體,或把它放在一張紙上。
 
設想中的質感和氣概
 
設想中的質感和氣概

即便視覺條理布局更多地是要優先斟酌內容而不是雅觀,但在任務中增加紋理或設想款式也會影響條理布局。
 
與尺寸或比例一樣,紋理和款式能夠贊助吸收用戶對設想的某些局部的注重。紋理能夠發生深度和風趣的外形,但變更很快就會變得過分輕佻。過分紋理化的設想會分離注重力,使瀏覽和懂得變得煩瑣。
 
氣概或設想的美感能夠贊助完成主題并吸收用戶。款式能夠包含從排版,色采到間距的一切內容。一些風行的氣概是扁平的,無機的,最小的,擬形的,復舊的或插圖的。使您的內容加倍有用的一個好體例是將設想款式與內容相婚配。比方,若是內容是用于復舊主題的勾當,則能夠操縱復舊款式將內容和設想接洽起來。

設想中的質感和氣概

色采和對照度
 
設想中兩個或多個工具之間的差別稱為對照度。物體的區分能夠是明暗,薄而厚,小而大,敞亮而陰暗,黑色和口角。列表是無盡頭的。經由進程操縱粗體或對照色,您能夠成立一個使元素鋒芒畢露的設想。一個很好的例子是白灰色背景上的紫色按鈕:您正在操縱色采和對照度使該元素成為頁面上最惹人注視的元素。

色采和對照度

均衡與對齊
 
設想中的物體就像在物理天下中一樣蒙受側份量:這稱為視覺份量。物體絕對其余物體的對齊能夠轉變其份量。若是工具是零丁的或向左對齊,則該元素將吸收用戶的注重;乍一看,其余工具將融會在一路。設想的視覺份量須要均衡。均衡能夠經由進程巨細、外形,乃至對照度來表示。固然它能夠操縱對稱或同等,但也能夠經由進程錯誤稱完成均衡。把錯誤稱看做鏡像的背面:你看到的不是反射,而是平均散布元素的工具。

臨近和空缺

臨近和空缺
 
紅色空間或靠近元素,也是一個有用的體例來成立一個有用的條理布局。若是元素有充足的呼吸空間,它能夠操縱戶更輕易地瀏覽和消化它們。大面積的空間也能夠使工具顯得重生動,感受更首要。另外一方面,缺乏夠的空缺會使元素更難瀏覽和消化。