麻豆视传媒官网直接进入免费 設計原則：視覺重量與方向

網頁上的每個元素都會通過發揮自身的視覺力量吸引觀者的眼球。而這種力量越大，吸引力也就越強。這些力量同時也能作用于其他元素，從而形成一種潛在的視覺運動方向，引導觀者的閱讀。

我們把這種力量叫“視覺重量”，把我們所感知到的視覺力量方向，叫做視覺方向。理解這兩個概念對于作品中層級、流程、節奏和平衡的打造具有重要的意義。

視覺重量

物理學的重量是對地心引力施加于物體上的力的度量，但是二維的物體（例如網頁上的元素）沒有質量，所以也就沒有物理范疇的重量可言。視覺重量是對元素吸引人眼球力量的度量。二維的物體都能夠吸引人的注意力。一個元素吸引力越強，其視覺重量也就越大。

舉例來說，兩個元素一個很大一個很小就能形成鮮明的對比。

而通過組合這些不同的特性，我們就可以控制視覺重量。紅色比藍色更加吸引人，大的元素比小的元素更加吸引人，所以說，一個大的紅色物體所具有的視覺重量就要大于小的藍色物體。

那么這些特征或者說原始特性的集合，就決定了元素的視覺重量高低。要強調的是，決定元素視覺重量的不是單個特性，而是多個特性的組合。但不同的特性組合吸引人的力度也有不同。要打造具有不同視覺重量的元素，就需要結合不同的原始特性。

如何衡量視覺重量？

據我所知，精確衡量設計元素視覺重量的方法是不存在的。但你可以憑借經驗和判斷力來分辨哪些元素重量大，哪些重量小。所以你要培養并相信自己的眼力。一幅作品中最吸引眼球的區域就是視覺重量比較高的區域。還是那句話，要相信自己的眼力。

但這并不是說你可以隨便亂試然后用眼睛判斷什么吸引力最強什么吸引力不夠強。舉個例，你可以通過把每個不同特征分離開來判斷出比較大的東西重量要大于比較小的東西。與此同時，你的眼力可以幫助你區分不同特性組合的視覺重量。

不過好在已經有高人把各種不同的特征進行了分離和測試。下面是幾個元素特征以及其增減對視覺重量的影響說明。

首先我們來看上一篇文章中提到過的幾個原始特性：大小、顏色、色值、位置、材質、形狀及朝向。

大小比較大的元素相比小元素的視覺重量要高。

顏色暖色能夠比較好的融入前景，比冷色重量高。冷色更傾向于融入背景。紅色是一般認為是重量最大的顏色，黃色則為最輕。

色值較暗的元素視覺重量較高。

位置在作品中所處位置較高的元素重量要大于所處位置較低的元素。距離作品中心或核心區域越遠，元素的視覺重量也就越高。前景中的元素所具有的重量要高于背景元素。

材質有材質的元素重量大于無材質物體。材質能讓元素更具三維感，從而更表現出一定的質量和物理重量感。

形狀形狀規則的物體比不規則的物體重量較高。不規則形狀會讓人產生其質量被從規則形狀中抽離的感覺。

朝向垂直的物體重量高于水平物體。呈對角線放置的元素重量最高。

當然，你不一定要局限在上述的這些原始特性之中，大可通過其他的特征來掌控視覺重量。

密度增加特定空間內元素的數量能夠提高空間的視覺重量。在觀看者眼中，高密度的區域會結合成為一個較大、較暗的組合元素，而不再是幾個小的、淡色的元素。

局部留白留白的空間呈現出空的狀態，因此不具有任何視覺重量。因此，放置在留白空間中的物體就會在周邊環境的襯托下顯得更具重量。

內在興趣點不同的物體有趣程度也不盡相同。元素越復雜、越繁復會讓人興趣越高，從而吸引眼球的能力也就越強。在這一方面，個人的興趣點也發揮著作用。比方說，你對汽車的興趣大于飛機，那么汽車的圖片相比飛機就更能吸引你的注意力。

深度較高的景深度能夠讓位于焦點的元素更具視覺重量，這一點有可能是焦點與非焦點區域之間的對比度造成的。

飽和度飽和的顏色比不飽和顏色更重。

物理重量感覺我們都知道房子的重量顯然大于鞋子的重量。那么，一所房子的圖片在視覺上也就自然比鞋子圖片更重，因為我們心里知道房子重。

在本系列上一篇有關于對比與相似的文章中，我提到了對比度能夠提高元素的吸引力。換句話說，一個與周邊環境對比強烈的元素在視覺上就比環境元素的重量更高。舉個例吧，在網頁上，圓形一般比矩形看起來更重，因為大部分網站元素都是矩形的。

當然，并不是所有特征對視覺重量的影響程度都相同。大部分人對元素顏色的注意力要先于元素形狀，這也就說明顏色對視覺重量的貢獻較大。同時你還要考慮特定作品的獨特性，因為形成對比的元素的重量要高于用來與之對比的元素。作品的獨特性將決定哪些東西能夠形成對比，哪些不能。

要牢記，視覺重量是上述各種屬性的組合。所以，盡管大的物體視覺重量高于小的物體，但一個周邊環繞大量留白空間、放置在頁面頂部的深色小圓形物體，其重量很可能會高于放置在頁面底部、形狀不規則的淺冷色大物體。

視覺重量與完全形態 本系列文章背后的一個重要目的就是指出完全形態原則對設計原則的貢獻度有多少。

圖形- 背景 通過提高圖形相對背景的視覺重量，我們可以將這兩者進行分離。

鄰近不同元素之間的空間會形成不同的局部留白空間量和不同的空間內物體密度。

相似與對比我們可以從視覺重量的角度來對這兩者分別進行定義。對比可以給形成對比的元素帶來較高的視覺重量。而視覺重量差不多的元素則會自然地表現出相似性。

焦點一幅作品中的吸引點就是其焦點，而焦點自然比其他元素更具視覺重量。

過往經歷觀看者的個人經歷會作用于其腦中所認為一個元素所具有的內在興趣點。

視覺方向

如果說視覺重量的用途是將人的眼光吸引到特定的位置，那么視覺方向的目的就是將眼光引領到下一個位置。視覺方向就是指視覺力量的方向。你可以把它看作是你腦中想象的某個元素下一步的運動方向。

在某種程度上說，視覺方向與視覺重量所起到的作用是類似的，它們都是為了把人的注意力吸引到作品的特定部分。但它們的區別在于，視覺重量就像是在高聲呼喊“看我！看我！”，而視覺方向則說的是“往這邊看！”

和視覺重量相同，你可以通過修改元素的特征來表現出不同的方向，不過在視覺方向這方面可操作的特征不如重量那么多。

元素形狀不論元素形狀如何，其自身中都會存在一個軸線，而這個軸線則是指明方向的關鍵。元素的主軸線一般會被視為與元素的視覺方向平行。

元素位置視覺重量是一股能夠吸引或排斥鄰近元素的力量。而這股力量能夠沿著連接兩個元素的方向 進行移動。

元素主旨箭頭、手指或凝視的眼睛都能夠指示特定的方向。

運動你可以讓元素在設計中運動起來，而其運動也就指明了方向。

結構骨架每個作品都有自己的骨架，骨架中存在沿著不同軸線流轉穿梭的力量。這一點可能還需要進一步講解一下。

視覺方向與完全形態你可以把方向看作是真實的或者是想象出來的從一個元素指向另一個元素，或者連接不同元素的線條。這些線條不一定要真的表現出來。

一致的連通性連接各個元素的線條都有方向。目光的聚焦能夠在眼睛和其所關注的物體之間形成一條想象的線條。

連續性這一原理可以聯系到沿直線或曲線排列的元素上，就好像這些元素會沿著直線或曲線方向運動一般。

共同性能夠看作具有共同性的元素通常是指沿著或者在想象中沿著同一方向運動的元素。

平行為了讓不同元素看似平行，就必須確立其內在的軸線（也就是形成方向的軸線）。

作品的整體方向有關視覺方向還有一個概念：每幅作品都會存在一個主要的方向，可以是水平、垂直或者對角線。

1. 水平方向能夠讓作品更加沉穩、沉著。

2. 垂直方向作品則能夠帶來嚴謹、警醒和平衡感。

3. 對角線方向則能夠表現出運動和動感。

通過大部分元素或者幾個關鍵元素的方向可以建立起整幅作品的主要方向。根據不同線條類型所具有的一般含義，方向有助于奠定作品的總體基調。

當然，一幅作品也有可能沒有主要方向。比方說，水平和垂直元素的數量有可能是相同的。在這種情況下，觀看者就可以自己認定主要方向是什么。

總結

元素的視覺重量是衡量其吸引觀眾眼球的指標。視覺重量高的元素能夠吸引更多眼球。

而視覺方向則是指不同元素所發揮出的視覺力量作用于其他元素時人所感知的方向。這里的方向是觀者目光移動的提示引導。

通過修改很多內在特征可以改變元素的視覺重量。其中甚至有些能夠起到確立視覺方向的作用。