網頁中每個元素都對吸引眼球發揮著視覺作用力，這種作用力越大，對眼睛的吸引就越大。這些力量也會作用到其他元素上，對它們的潛在運動傳遞一個視覺方向，並暗示你接下來應該看向哪裡。
我們把這種力量稱為視覺重量，把這個方向稱作視覺方向。如果你想在你的構圖中建立層次結構，流程，節奏和平衡，理解這兩個概念非常重要。
視覺重量
物理重量是一種對物體所受重力的度量，但是二維物體（例如網頁中的元素）沒有質量，因此，沒有任何物理重量。視覺重量是一種對元素吸引眼睛的力量的度量。
在之前的文章中，我談到原始屬性，或元素的內在屬性，如大小，顏色和形狀。在那篇文章中我提到了如何通過這些屬性顯示元素之間的對比和相似。例如，通過使一個非常大，其他非常小，來形成對比，表明這些元素是不同的。控制這些屬性的結合就是控制視覺重量，紅色比藍色更吸引眼球，而較大的元素比小的更吸引眼睛；一個大的紅色物體比一個小的藍色物體帶有更多的視覺重量。
這些特徵或基本屬性的總和，決定了一個元素的視覺重量。不是任何哪一個屬性，而是它們的組合，決定了一個元素的視覺重量。一些屬性的組合會比別的組合更吸引眼睛，要建立不同視覺重量的元素，你需要用到不同的基本屬性的組合。
你如何看待視覺重量？
沒有哪種方法可以精確地測量一個設計元素的視覺重量，你可以通過你的經驗和判斷，確定哪些元素有更大或更小的重量。構圖中，吸引你眼睛的區域有更大的視覺重量，學會相信你的眼睛。
這並不意味著你要隨機嘗試，然後看怎樣最吸引你的眼睛。你可以隔離每個特性，然後你會發現，例如大小，一些更大的元素比那些更小的要重。在屬性的組合中，你的眼睛會幫助你。
幸運的是，其他人已經分離並測試過這些屬性。下面是一些可以任意改變的屬性，以及怎樣改變它們來增加或減少元素的視覺重量。讓我們從上一個帖子中提到的基本屬性開始：大小、顏色、明度、位置、紋理、形狀和方向。
- 大小
大的元素比小的有更多視覺重量。
- 顏色
溫色往往比冷色有更多視覺重量。紅色被認為是最重的，黃色是最輕的。
- 明度
深色被認為比淺色有更多視覺重量。
- 位置
構圖中，位於更高處的元素重量超過位於較低處的元素。距離構圖中心更遠的元素，有更大的視覺重量。前景中的元素比背景中的元素更重。
- 紋理
有紋理的元素比無紋理的元素更重。紋理使一個元素呈現出三維，這給出了質量和物理重量的外觀。
- 形狀
形狀規則的物體比形狀不規則的物體顯得更重。不規則給人的印象是，一部分質量已被從一個規則的形狀中刪除。
- 方位
垂直的物體比水平的物體更重，斜的元素最重。
不必侷限於基本屬性，你可以使用更多的屬性來控制視覺重量。
- 密度
在一個給定的空間中增加更多的元素，可以增加空間的視覺重量。觀眾會看到一個更大或更重的組合元素，而不是幾個更小，更輕的元素。
- 放置白色空間
白色空間似乎沒有視覺重量，因為它被視為空白。任何放置在該空間內的物體都會看起來更重，由於它周圍的空間。
- 固有的興趣
有些東西比別的更有趣。一個元素越複雜，就越會吸引更多的興趣，越吸引眼球。你自己的興趣也起到了作用。如果你對汽車比飛機更感興趣，那麼一輛汽車的形象會吸引你的注意力，而不是一個飛機的形象。
- 深度
一個更大的景深會增加焦點元素的視覺重量，很大一方面是由於聚焦區域和非聚焦區域的對比。
- 飽和度
飽和的顏色看起來比不飽和的顏色更重。
- 可感知的物理重量
我們知道，一所房子的重量超過一隻鞋的。在視覺上一個房子的影像將比鞋的影像更重，因為我們會把房子想像得很重。
在系列文章中，之前有一篇關於對比和相似的，我提到了通過對比引起對元素的注意。換句話說，一個與它的環境形成對比的元素會比它周圍的東西視覺上更重。例如，在網頁中，圓形通常會比矩形更重，因為大多數網頁元素都是矩形的。
並非所有的特性對視覺重量有同等的影響，大多數人會在注意到一個元素的形狀之前先注意到它的顏色，這表明，顏色更有助於增加視覺重量。你還必須考慮在一個特定組成裡的唯一性，因為對比的元素會表現出重於其它與之形成對比的元素。根據你的具體構圖情況來決定哪些需要對比，哪些不需要。
請記住，視覺權重是上述屬性的組合。雖然大的比小的承載更多的視覺重量，一個小的深色圓形被周圍大的白色空間包圍並位於該頁面的頂部，會看起來比一個更大但不規則且位於頁面底部顏色很淺的形狀，要重得多。
視覺重量與格式塔
這一系列文章背後的理念之一，是指出格式塔原則如何有助於設計的
- 圖形—背景
視覺重量可以用來區分圖形和背景。
- 相似
元素之間的空間形成了不同的白色區域和空間內不同密度的元素。
- 相似與對比
你可以用視覺重量表示任何一種，對比會在元素間產生一種更大視覺重量，有相似視覺重量的元素自然會表現出相似度。
- 焦點
構圖中吸引眼球的點即為焦點，比其他元素有更多的視覺重量。
- 過去的經驗
觀察者的過去經驗會有助於他們認為元素能包含多少內在的興趣。
視覺方向
如果視覺重量是把視線吸引到一個特定的位置，那麼視覺方向是把視線引領到下一個位置。視覺方向是視覺力量的可感知的方向，把它作為一個，如果元素在運動中你認為元素要移動的方向。
視覺方向與視覺重量有一個類似的作用，就是嘗試讓你注意到構圖中的某些部分。視覺的重量是喊“看我！”，視覺方向是說”看那邊！”。與視覺重量一樣，你可以改變元素的屬性，來暗示不同的方向，儘管與視覺重量相比，你可以改變的屬性比較少。
- 元素的形狀
元素的形狀可能會建立一個穿過自身的軸線，這個軸線可以暗示一個方向，通常被看作是平行於元素的視覺方向。
- 定位元素
視覺重量是一種可以吸引或排斥相鄰元素的力量，這種力將在連線兩個元素的方向移動。
- 主題元素
一個箭頭，一根手指，或眼睛的視線都表示了某個特定的方向。
- 運動
一個元素可以直接穿過你的設計而動，它的運動有一個方向。
- 結構骨架
每一個構圖都有一個結構骨架，力量會自然地沿行，通過不同的軸線。這可能需要多一點點的解釋。
結構骨架
在他的書中，《藝術與視知覺：一種創造性眼睛的心理》，魯道夫 · 阿恩海姆提出畫布背後結構骨架的觀點。這個觀點是，每一個畫布都有一個結構化的網路力量貫穿它。在下圖，即使畫布裡沒有元素，我們的眼睛也會被吸引到畫布的某些部分，正是因為這個網路的力量。
魯道夫 · 阿恩海姆的結構網
長方形畫布的中心和四角像磁鐵一樣的吸引眼睛，最強的磁鐵是在中心，雖然不是畫布的幾何中心。相反，吸引眼球的中心是視覺中心，它位於真正的幾何中心的上方。從角落到角落的軸，以及沿著這些軸的中心與角落的中間點，也吸引注意力。然後這些中間點可以與垂直線和水平線相連，這創造了更多的視覺力軸。
現在考慮，在設計的不到位的地方，觀眾的眼睛會被其骨架中的某些點吸引，並且眼睛將隨著不同軸的方向，從一個點看向另一個點。你可以通過把元素放置在可以自然而然地吸引眼球的地方，來利用這結構網，從而增加元素的吸引力。
視覺方向與格式塔
你可以把方向想象為一個或一個從一個元素到另一個元素或連線不同元素的實線或虛線，這些線條不需要是可見的。
- 統一的連通性
連線元素的線有方向，眼睛的視線在眼睛和被注視的物體之間連線了一條虛構的線。
- 延續
這個原則講的是沿著一條線或一條曲線排列的元素，好像它們在直線或曲線的方向上移動。
- 共同命運
被視為有共同的命運的元素是那些在同一個方向移動，或看起來移動。
- 並行
為了被看作是平行的元素，元素的內部軸（同一個方向的方向）必須建立。
一個構圖的主導方向
視覺方向的另一個概念是，每一個組成將被視為有一個主導方向，無論是橫向的，垂直的或對角線的。
- 水平方向使構圖顯得平靜和穩定。
- 垂直方向增添了一種形式感，警覺性和平衡。
- 對角線方向暗示運動和行動。
一個結構的主導方向將由大多數元素或者幾個關鍵元素的方向決定。主導方向有助於根據不同型別線條所產生的整體意義來設定一個整體的感覺。一個結構也可能沒有主導方向，比如，垂直元素與水平元素數量相等。在這種情況下，觀看者可以決定哪一個方向是占主導地位的。
例子
下面的例子中，我抓取了一些頁面的截圖，分享一些我是怎樣看視覺重量在頁面中的使用。你可能會有不一樣的看法，這很好。不同的眼睛被不同的東西吸引，同樣，我發現沒有辦法來測量一個元素攜帶多少視覺重量。此外，兩個人很可能會看向同一構圖的不同區域，因為他們有不同的興趣，帶有一些主觀性是預料之內的。
一個很簡單的分辨哪些元素最重的辦法是眯起眼睛，把你的眼睛輕微的閉合一點，直到一些元素消失。那些留在視線中的元素比那些消失的有更多的重量。
BUREAU
注意：這張Bureau的截圖是在我設定寬度大於1280畫素的瀏覽器上擷取的，如果小於1280畫素，整個頁面的設計將會變成一個單一的列，而不是這裡看到的兩列。
Bureau網站的文章截圖
上面Bureau所顯示的文章，幾乎是純文字。主標題進行最直觀的重量，它是最大的一段文字，並且，它周圍有一些區域性的白色空間。這可以說是登陸後應該被看到最重要的資訊，因此它在視覺上很重。
通過與周圍的文字對比，連結獲得了一些重量，儘管在我看來，冷色減少了這種獲得。視覺重量最小的元素是右列中的文字，這是因為重點可能是主要聚焦在本文，而不是在側邊欄中的內容。注意右欄頂部的紅色文字，這是一個到網站主頁的連線。就像它這麼小的，紅色給文字增加了一些重量，幫助它從欄中的其他文字中脫穎而出。當你直接檢視網站的時候，你的圖片看起來更大，所以小的紅色文字並不像它在這裡顯示的那麼小。
當你運用眯眼測試，整個右欄會消失，留下的是文章上面的主標題，和標題下的一大塊文字。該構圖的主導方向是垂直的，因為它的兩個長列向下延伸。在兩列的不同背景顏色之間建立一條垂直線，引導你向下瀏覽頁面，併為構圖中的垂直方向做了加法。
Create Digital Media
當Create Digital Media 主頁載入彩色元素動畫化，引起了很多的關注。即使你錯過了動畫，你也會看到這些元素因為它們承載最重，也由於其飽和的粉紅色，黃色和藍色。這些元素也佔據了相同的空間，在空曠的空間中建立了一個密集的區域。注意：在這篇文章的撰寫和釋出期間，該網站已經關閉了它的各個入口，如果你想知道怎麼可以訪問它的主頁。
Create Digital Media的主頁截圖
對我來說，底部的圖形是第二重要的。它們是黑色，面積大，且複雜的形狀。它們把你拉到這三部分中的其中一個，一個包含下一個視覺上最突出的元素，部分的標題。頁面上的主標題與下面的文字相比，是大的，黑色的。其他凸顯出來的條目，對我而言，是由於它們的視覺重量更大，也就是頂部的公司名稱和底部的Logo。
用眯眼測試，彩色圖形和文字以及底部的圖形在大多數元素已消失的時候依然存在。在我看來，主標題淡出，雖然我仍然可以識別出它在那裡。我也還可以注意到一點左下角的Logo，儘管它比它旁邊的圖形消失地更快。
這裡，我認為主方向是水平的。線條在水平方向延伸，像主標題和導航那樣。另一個更突出的視覺元素，突出的文字，也是水平的。三個齒輪可以看作一個三角形，形狀彎曲，因此建立了對角線方向。但是它們不沿著這些方向運動，而且它們是網頁上僅有的對角線。
JAVIER MARTA
在Javier Marta主頁，三要素的競爭是視覺上最重要的。圖形，部分之間的綠色分隔符，以及頂部的選單項都需要注意。
Javier Marta的主頁截圖
- 圖形
這些都是大的，黑暗的，被白色的空間包圍著，每一個圖形本質上都有自己的興趣。
- 綠色分離器
這些有顏色，是更大的，像圖形一樣，被白色的空間包圍著
- 選單項
這些都是黑暗的，大的，又一次被白色的空間包圍著。
Javie的Logo的視覺重量比它周圍的選單專案小，雖然它仍然是非常突出的其中之一。它比文字攜帶更多的重量，但沒有在我的腦海裡的選單專案的重量多 ，你可能不同意。
斜視使選單項和標誌融合成一個單一的單位。圖形和分隔符仍然是視覺上的重量，文字仍然可見。你還可以在眯著眼睛看到的一切，即使你不懂它想表達什麼。
在我的螢幕上，只有頂部和“El evento”部分是可見的，使頁面水平方向。然而，共有四個部分在頁面上，當部分被檢視一次，綠色分隔線的對齊給組成一個垂直方向。當然，從整個頁面看，再一次改變畫布從水平到垂直。
STANFORD ARTS
在Stanford Art 主頁頂部的影像帶有最大的視覺重量，它是頁面上最大的元素，而且作為一個影像，它有很多內在的興趣。它也位於結構的頂部，事實上，它佔據了我大部分的螢幕。
Stanford Arts 的主頁截圖
注意：這個網站在頁面的頂部旋轉影像，以及旋轉的影像隨時間而改變。如果你訪問這個網站，你可能不會看到這個特定的影像，因此，你對設計中的視覺重量地評估可能會不同於我這裡。
我認為三角形影像而不是角容器是第二重要的元素，之後，是組成頁面頭部和尾部的大紅色塊。當我完成眯眼測試，所有的元素的可見度都明顯比我預期的更長久。元素對淺色和深色的對比有很好的處理，這有助於它們突出顯示。最後，唯一留下的東西仍然是影像，雖然細節不完整。我可以識別頂部的大圖，但下面的三角形影像就只能看到形狀了。
設計的有趣之處，也在於它的視覺方向。斜線是主宰，因為大多數網頁都不是斜線方向為主，所以它們這裡會捕捉到更多的關注，顛覆了你的期望。
上面我擷取的這張圖還展示了一個斜角的東西，雖然某些部分有點彎曲，由一個人群的移動的線建立。那女人（在右邊的三角形影像）和攝影師（中間三角形）都有一個指向右邊的方向。更好的情況可能是使女子臉面向內，並將相機移到左邊向內對焦。當然，當你的滑鼠懸停在塊中的任何一個連結時，影像都會改變。然而，影像往往會導致向外，而不是向內。
總結
元素的視覺重量是對一個元素吸引觀眾眼球多少的衡量，視覺上重的元素會吸引眼球。視覺方向是作用於元素以及由由元素施加的力的感知方向，方向是一個提示觀眾的視線移到其他地方的線索。
許多內在特性的修改，可以使元素在視覺上更重或者更輕。一些能夠用來建立一個元素的視覺方向，比如畫布本身。在本系列剩下的文章中，我們將看到視覺重量和視覺方向是怎樣產生一些設計規則，如優勢和層級，流動和節奏以及最終的構圖平衡。