今天為大家介紹視覺重量和方向的設計原則，教程很不錯，推薦到武林網，喜歡的朋友快快來學習吧！

網頁上的每個元素都會產生一種視覺力量來吸引觀眾的注意力。這種視覺力量越大，就越能吸引觀眾的注意力。這些力量似乎同時也作用于其他視覺元素,傳遞出他它們潛在的運動和視覺方向，并且暗示你接下來該看什么內容。

我們把這個力稱作視覺重量，并且把它感知視覺方向的力稱作視覺方向。如果你想創作出的作品有層次感，流暢感，有節奏，有韻律，有平衡感，那么這兩個概念就要重點來理解。

視覺重量

物理重量衡量的是施加于物體上的重力（地心引力），但是二維的物體(比如網頁上的元素)沒有質量，因此也就沒有物理重量。視覺重量是衡量一個元素吸引眼球的力。二維的物體可以吸引注意力，一個元素吸引的注意力越多，那么它的視覺重量越重。

在這系列之前的帖子里我說過元素的原始特點或說是一個元素的內在特點。比如尺寸、顏色和形狀。在之前的帖子里我提到過如何用這些基本特點去展示兩個要素之間的對比和相似統一。

例如，用一個非常大的和另一個非常小的元素做對比，它可以清晰的顯示元素的不同。

控制調節這些元素的特點組合，你可以控制網頁的視覺重量。比如：紅色比藍色更加吸引注意力，更大的要素比更小的要素更吸引注意力。因此組合起來的話，大的紅色的物體視覺重量要比小尺寸的藍色物體視覺重量重很多。

這些內在特征的總和或者元素的基礎特點才能決定一個要素的視覺重量。并不是其中任何一個，而是它們的組合決定了一個元素的視覺重量。一些基本特點的組合相比其它可以吸引更多的注意力。因此，為了創造不同的視覺重量，你應該會使用不同特點的組合。

如何衡量視覺重量?

據我所知沒有一個很精確的方法去測量設計要素的視覺重量。用你自己的經驗和判斷去決定哪一個要素視覺重量輕哪一個重。發揮你眼睛的作用，并且相信它。這個作品區域中最吸引你眼球的地方就是視覺重量最重的地方。學著相信你的眼睛。

這并不意味著你不得不胡亂嘗試和隨意的去看什么元素是最能吸引你的眼睛。例如，你可以將每一個特點都分離出來，以便知道更大元素視覺重量比更小的重，你的眼睛會幫助你組合這些特點。

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

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

尺寸

　　尺寸大的元素的視覺重量比小要素的重。

顏色

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

色值

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

位置

　　在一個作品中，處于更高位置的要素一般比更低位置的要素重。作品中，位于中心區域或重要區域的元素視覺重量更重。前景中的元素比背景中的元素視覺重量更重。

紋理

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

形狀

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

方向

　　垂直方向的物體比水平方向的物體重，但視覺重量最重的是傾斜的元素。

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

密度

　　填充更多的元素到空間中，去增加空間的視覺重量。觀者將會感受到大的深色（更復雜的）的組合要素，而非一些小的和輕的（更簡單）的要素。

留白

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

內在的興趣點

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

深度

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

飽和度

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

感知物理重量

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

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

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

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

視覺重量和格式塔原則

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

　　·圖形背景

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

　　·距離

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

　　·相似和對比

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

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

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

　　·過去的經驗

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

視覺方向

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

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

　　·元素的形狀

　　一個元素的形狀可能可以創造一個坐標軸，并且這個坐標軸會提供一個視覺方向?；据S通常都是平行方向的視覺元素

　　·元素的位置

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

　　·特定元素

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

　　·元素移動

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

　　·結構骨架

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

　　結構骨架

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

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

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

　　我們后面要談到這一個系列關于創作流的時候在回來討論一下結構網絡的?，F在，一個缺乏設計眼光的瀏覽者會被吸引到阿恩海姆結構網絡的中心，并且沿著不同的軸線一點一點往下看。

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

　　視覺的方向和格式塔

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

　　·統一連通

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

　　·連續

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

　　·共同命運

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

　　·并行

　　為了使元素看上去是并行的，它們的內部軸線(相同的指引方向)必須建立起來。

作品的總體方向

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

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

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

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

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

　　有可能作品中沒有主導方向，垂直線和水平線的數量是相等的。舉個例子，在這種情形下，瀏覽者可以決定哪個方向是主導方向

　　例子

　　接下來的一些例子，我拿了一些網頁的截圖。我會跟你分享我的想法以及我看到的視覺重量。當然，你看到的可能和我不一樣，這是很正常的。

　　不同的眼睛會被不同的事物吸引，我也知道沒有一種確定的方法去衡量元素的視覺重量。此外，兩個人會很容易的看到作品的不同區域，因為他們的興趣不一樣。這一點是具有主觀性的。

　　這里有一個很簡單的方法去測試元素的視覺重量，瞇起眼睛或者斜視看哪些元素會漸漸淡去，相比那些淡去的元素那仍然有元素較重。

　　信息局

　　我瀏覽器截取信息局的網頁寬度是1280像素的，如果不這樣的話，設計可能會崩潰。而不是下面看到的兩個單獨欄目

這上面這個信息局網頁的文章顯示了幾乎全部的文本，很明顯，標題的視覺重量最重。第二個就是文章那一片，因為周圍有很多白色空間圍繞著它。這可以說是一個來訪者應該看到的網頁中的最重要的信息，因此它具有較重的視覺重量。

　　鏈接通過與周圍文本的對比也得到了一些視覺重量，盡管在我看來冷色減輕了一些重量。

　　視覺重量最少的地方是右列的文本，這不是沒有道理的。因為，重點最應該是文章而不是側邊欄。

　　請注意右側上方的紅色小點點，這個鏈接是到網站的首頁的。雖然它很小，但是紅色卻給了它一些額外的視覺重量，幫助它從其他元素中脫穎而出。當你直接看這個網頁的時候一切都很大，因此紅色在這個地方顯得不是很那么小。

　　當你用斜眼測試看這個網頁的時候，右邊的側邊欄全部消失，留下的就是一個很大的標題和標題下邊一整塊文字內容。

　　這張作品的視覺方向是垂直方向，因為網頁一共就分了垂直的兩欄。背景不同的顏色創造了一個垂直的線條引導你往下看，并且還給了作品一個垂直的視覺主導方向。

　　創建數字媒體

　　當加載到數字媒體的主頁，豐富的色彩以及恰到好處的動畫，都為他們吸引了大量的注意力。即使你沒有看到它的動畫，你也會覺得這個元素有很重的視覺重量，因為它有著飽和度很高的粉色、黃色和藍色。這些元素也占據相同的空間，它們創造出了一個密集區域在一片空白背景下。

　　這篇文章還在出版和寫作之間，創建數字媒體網站已經關門了。想知道為什么，就看看下面的主頁吧。

對我來說，視覺重量第二種的就是下面的三個圖形按鈕。它們看起來又黑又大而且復雜。它們把你拉到三個部分，并且去看下一個最顯眼的元素(即每個部分的標題)主標題在網頁中顯得黑暗和巨大，直接和它下面的文本產生對比。其他項目對我來說都很耀眼，這要歸因于它們很重的視覺重量(即公司的名字在頭部，而logo和按鈕在下方)。

　　用斜眼測試該網頁，有顏色的齒輪、文本和圖形按鈕仍然較重，其他的元素都漸漸淡去。主標題對我來說也模糊了，盡管我還能看到它。我還看到了左下角的logo，盡管它模糊速度的比圖形按鈕快得多。

　　呃，我認為他的視覺主導方向是水平方向。它的主標題和導航都是呈一條水平線。另一個顯眼的元素，突出的文本也是水平方向的。那三個齒輪可以看成三個單獨的三角形，雖然它形狀上有些彎曲。所以它是對角線方向。它們不長，是頁面上唯一的對角線方向的元素

　　賈維爾·瑪爾塔

　　三個要素的對比給了瑪爾塔主頁視覺重量。圖像、板塊間的綠色分割元素和頂部的菜單欄都吸引了注意力。

      ·圖形

　　這些圖形都是大的、顏色深的并且被周圍的白色空間包圍。每一個圖形都有自己本質的意義。

　　·綠色分割點

　　它們較大，并且有顏色，就像圖形一樣。并且它們被白色空間包圍著

　　·菜單欄

　　與前面元素一樣，菜單欄很大，顏色很深并且被白色空間包圍。

　　對我來說，網站的logo也有一些視覺重量跟它旁邊的菜單欄相比，盡管沒有菜單欄那么顯眼，但也比正文板塊要重一點。可能你會反對我，但這不重要。

　　斜眼測試使菜單欄和logo混為一體，綠色分割點和圖形元素仍然很明顯，正文板塊看起來就像一整個色塊。你可以看到任何東西當你瞇起眼睛的時候，即使你不知道它具體說的什么。

　　在我的屏幕上，只有頭部和"EL evento"這兩個部分是看得見的，它們給了網頁一個水平方向。然而四個部分全在這個頁面上，當你一次性看上去，綠色分割點會給作品一個垂直方向。呃，當然，你會看到整個頁面從水平方向轉變成垂直方向。我想知道如果兩個圖形都在上方而不是在對立的兩端是不是會更好。在第一個圖形，攝像頭右側一點，就是我眼睛看到的地方。沒有更好的將視線引導到正文板塊。在底部的圖片中，女士的傘朝右側打，人卻往左側走，這就是我視線的趨向。如果這兩張圖片能互相配合好，就能將視線引導到正文上而不是遠離它。

　　斯坦福藝術

　　這張斯坦福藝術的主頁是視覺重量最重的網頁，它有一張大圖在首屏，并且有本質的興趣。它也位于網頁的頂部，它幾乎占了我的整個屏幕。

注意：這個網頁的圖片輪播在頂部，并且它隨時間的變化而變化。你可能不會看到特定的一張照片，當你進入這個網頁的時候。正因為如此。你評估它的視覺重量可能和我在這評估的不一樣。三角形的照片可能是視覺重量第二重的了。之后就是大紅色塊的頁眉和頁腳了。

　　當我進行斜眼測試的時候，所有元素可見的時間比我預想的要長。這些元素很好的處理了光影效果，讓他們脫穎而出。最后，剩下的就是一些圖片了，雖然沒有全部的細節。我只能認出頂部的大圖，卻看不清下面三角的圖片。

　　這個網頁的視覺方向也很有意思。以對角線方向為主導，大多數網頁都不會用對角線作為主導視覺方向，它抓捕了更多的吸引力。它們顛覆了你的期望。

　　我截取下來的這個網頁有特殊的大圖并提供了一些對角線元素。盡管也有一些曲線。

　　在最右邊的圖片的女人和中心圖片的攝影師給了一個向右的視覺方向。也可以把女人的面部轉向內部，將攝像機轉向左邊。

　　誠然，當你鼠標懸停在圖片上的時候它可能會發生改變。盡管如此，圖像往往會導致向外而不是向內。

總結

一個元素的視覺重量是元素對觀眾眼睛的吸引力的多少來衡量。元素視覺重量越重越吸引觀者的眼球。

視覺方向是施加在元素上的一種方向的感知力。方向是來提示瀏覽者眼睛移動的方向。

許多內在的特性可以被修改，使得元素的視覺重量重或者輕。同樣也有一些可以建立視覺方向。

在本文剩余部分中，我們將看到視覺重量和視覺方向是如何引導設計原則，像主導地位和結構層次，流量和節奏，從而使作品平衡。

以上就是視覺重量和方向的設計原則教程，教程很不錯，很值得學習，推薦到武林網，喜歡的朋友，一起來學習吧！