設計准則：視覺的重量和方向

 　　在網頁中，每一個要素都發揮著它該有的視覺的力量去吸引用戶的眼睛。這個力量越大，它吸引的目光就越多。同時它還作用於其他的視覺要素，傳遞出潛在的視覺移動方向的信息，並且告訴你接下來該看什麼。

　　我們把這個力稱作：視覺重量;把它感知視覺方向的力稱作：視覺方向。如果想讓你的作品變得流暢、平衡、有節奏感和層次感，那他們就很重要了。視覺重量

　　物理重量衡量的是引力發揮在物體上的力，但是二維的物體(比如網頁上的元素)沒有質量，也就沒有物理重量。視覺重量是衡量一個元素吸引眼球的力。二維的物體可以吸引注意力，吸引的注意力越多，它的視覺重量越重。

　　在這個系列之前的帖子裡，我談到了要素的基本特點或者說是內在特點。比如尺寸、顏色和形狀。並且提及如何用這些基本特點去展示兩個要素之間的對比和統一。

　　舉個例子，你可以通過一大一小的形狀對比讓要素變得不同且清晰。

　　通過調節這些內在特點的組合，你可以控制網頁的視覺重量。比如：紅色比藍色更加吸引眼球，更大的要素比更小的要素更加吸引眼球。那麼組合起來的話，大面積紅色的視覺重量就要比小面積的藍色要重很多。

　　這些基本特點的總和才能決定一個要素的視覺重量。並不是其中任何一個。確實一些基本特點的組合可以吸引更多的眼球。因此，為了創造不同的視覺重量，你要使用不同特點的組合。

　　如何衡量視覺重量?

　　說實話，沒有一個很精確的方法去測量設計要素的視覺重量。用你自己的體驗去決定哪一個要素輕哪一個重吧!發揮你眼睛的作用。這個區域中最吸引你眼球的地方就是視覺重量最重的地方!學著相信你的眼睛!

　　這並不意味著你要很隨意的去看什麼最吸引你的眼睛。例如，你可以將每一個特點都分離出來，去理解更大的比更小的重，你的眼睛會幫助這些特點相互組合。

　　幸運的是，有人已經分離測試了這些特點。下面的這些特點，你可以改變其中任何要素並且說明如何改變他們，改變後會增加或是減少視覺重量。

　　讓我們來分析一下之前我提到的幾個基本特點：尺寸、顏色、色值、位置、紋理、形狀和方向。

　　·尺寸

　　大要素的視覺重量比小要素的重。

　　·顏色

　　暖色更傾向於前景，一般都比較突出，同時暖色比冷色更重。冷色則往背景方向逐漸遠去。紅色被認為是最重的顏色，黃色則是最輕的顏色。

　　·色值

　　深色元素的視覺重量比淺色元素重。

　　·位置

　　在一個作品中，處於更高位置的要素一般比更低位置的要素重。位於中心區域或重要區域的元素更重。

　　·紋理

　　有紋理疊加的要素比沒有紋理的要重。紋理讓物體呈現三維的效果，同時給予它質量和視覺重量。

　　·形狀

　　規則的物體比不規則的物體要重，因為不規則的物體就像是規則的物體被切掉一部分後得到的。

　　·方向

　　垂直方向的物體比水平方向的物體重，但最重的是傾斜的物體。

　　事實上，你完全不用把自己限制在這幾個基本特點中，你也可以使用額外的特點去控制視覺重量。

　　·密度

　　填充更多的元素到空間中，去增加空間的視覺重量。觀者將會感受到更復雜的的組合要素，而非更簡單的要素。

　　·白色空間

　　純白的空間看上去沒有視覺重量，因為它太空了。任何一個在空白中的物體似乎都更重了，原因是周圍的空間都包圍著它。

　　·本身的興趣

　　有些事比其他的事物更有趣，更復雜的元素就更有趣，也能吸引更多的眼球。你自己本身的興趣也扮演了一個角色，如果在飛機和汽車中你更喜歡汽車，那汽車的圖片就會更吸引你的注意力。

　　·深度

　　較大的景深給了焦點元素更多的視覺重量，原因可能是焦距和未焦距區域的對比度

　　·飽和度

　　飽和度高的顏色比飽和度低的顏色更重

　　·感知物理重量

　　我們都知道一棟房子的重量比一雙鞋子重吧!一張印著房子圖片的視覺重量比一張印著鞋子的照片重。因為我們感覺房子更重

　　在之前的這個系列裡，我提到了對比的元素會更加吸引眼球。換句話說，與周圍環境對比的要素將會比他周圍的環境更重。舉個例子，網頁中的環形元素視覺重量比矩形元素更重，原因是網頁中的大多數元素都是矩形。

　　並不是所有的特點都會導致相同的視覺重量，大多數人可能最先注意到的是顏色而非形狀。這表明顏色的視覺重量更重。你還必須考慮到他們的獨特性，因為對比的元素比他們的對比物更重。你作品的具體情況將決定哪些地方有對比，哪些地方沒有。

　　請記住，視覺的重量是上述這些屬性的總和。盡管大的元素比小的元素要重，一個小的黑色圓圈周圍是大量的白色空間並且在頁面頂部，他比一個大的不規則的冷色的在頁面底部的物體要重。

　　視覺的重量和格式塔原則

　　接下來的這個系列指出了格式塔原理對設計原則有多大的貢獻。

　　·圖形背景

　　視覺重量可以通過給予圖形更多的負重去把背景和圖形元素區分開來。

　　·距離

　　元素間的空間導致了不同數量的局部空白和物體內部空間的不同密度

　　·相似和對比

　　你可以用視覺重量去表示它們，對比的元素會帶來巨大的反差和視覺重量，類似的元素很自然的就會表現出相似性。

　　·焦點(該系列中的下一個主題)

　　點元素組成了焦點並且會特別有吸引力，它的視覺重量比其他元素都重

　　·曾經的體驗

　　浏覽者過去的體驗會很影響他們認為的當前網頁中最吸引眼球的元素。

　　視覺方向

　　如果說視覺重量是關於吸引眼球到特定的位置，那麼視覺方向就是引導眼球到下一個位置。視覺方向是對視覺力量的感知。如果元素正在運動中，那想一下你期望的元素的移動方向。視覺方向和視覺重量有著相似的功能，視覺重量是想讓你注意到作品中的某一部分，它在興奮的對你說“嘿，看我這!”，而視覺方向卻在對你說“嘿，看那邊!”

　　當然你也同樣可以通過修改元素特點去改變視覺方向，盡管它的元素特點比視覺重量要少很多。

　　·元素的形狀

　　一個元素的形狀可能可以創造一個坐標軸，並且這個坐標軸會提供一個視覺方向。基本軸通常都是平行方向的視覺元素

　　·元素的位置

　　視覺重量是一種排斥與吸引並存周圍元素的力量，同時這個力量把它們都聯系在了一起。

　　·特定元素

　　一個箭頭、一個手的指向或者一個眼睛的凝視都暗示了一個具體的方向

　　·元素移動

　　通過你的設計，元素確實可以移動，並且它的移動是有方向的

　　·結構骨架

　　每一個元素都有骨架結構，它們都沿著不同的軸線很自然的移動。這裡可能需要更多的解釋了。

　　結構骨架

　　在《藝術與視知覺》這本書中，魯道夫·阿恩海姆提出每張畫布後都有結構骨架，每一個畫布都有一個結構網絡的力量貫穿它的全部。即使這個畫布上沒有任何元素，我們的眼睛還是會被吸引到畫布上的特定部分，因為結構網絡力一直在畫布下面

　　魯道夫·阿恩海姆的結構網絡。

　　一張矩形畫布的中心和四角就像磁鐵一樣吸引我們的眼睛。磁力最強的地方在畫布的中心，盡管不是畫布的幾何中心。相反，吸引眼球的中心是光學中心，它位於幾何中心的上方。

　　軸線從中心貫穿四周，這些軸線交點的中心和四角都吸引了注意力。這些中途的交點，把水平線和垂線相互聯系起來，創造了一個吸引眼球的坐標軸。

　　好了，後面要談到這一個系列的時候我們還會回來好好聊一下結構網絡的。現在知道了，一個缺乏設計眼光的浏覽者會被吸引到阿恩海姆結構網絡的中心，並且沿著不同的軸線一點一點往下看。

　　因此，你可以利用這個結構網絡去放置元素，調整它們的位置。它們會很自然的吸引眼球，並且吸引力會增強。

　　視覺的方向和格式塔

　　你可以想象一個元素到另一個不同卻相互聯系的元素的方向，用一條真實或想象出來的線條。這條線可以是不可見的。

　　·統一連通

　　這根線連接的元素是有方向的，眼睛凝視元素的地方會出現一條線。

　　·連續

　　這條原則相關於元素被安排成直線還是曲線，就好像他們正在沿著曲線或直線運動

　　·共同命運

　　元素之間似乎有朝著一個方向移動和呈現的共同命運。

　　·並行

　　為了使元素看上去是並行的，它們的內部軸線(就是賦予視覺方向的線)必須建立起來。

　　作品的總體方向

　　視覺方向更多的一個概念就是，每個作品都有一個主導方向，不管是垂線、水平線還是對角線。

　　·水平方向會讓作品表現出冷靜和穩定的感覺

　　·垂直方向會讓作品表現出危險、形式感和平衡感

　　·對角方向代表位移和運動。

　　作品的主導方向是由大多數元素或者幾個關鍵元素來確定的，這個方向會幫助建立一個總體氛圍，這個總體氛圍的建立是根據不同的線型來決定的。

　　有可能作品中沒有主導方向，垂直線和水平線的數量是