設(shè)計原則：視覺重量與方向
網(wǎng)頁上的每個元素都會通過發(fā)揮自身的視覺力量吸引觀者的眼球。而這種力量越大，吸引力也就越強。這些力量同時也能作用于其他元素，從而形成一種潛在的視覺運動方向，引導(dǎo)觀者的閱讀。
我們把這種力量叫“視覺重量”，把我們所感知到的視覺力量方向，叫做視覺方向。理解這兩個概念對于作品中層級、流程、節(jié)奏和平衡的打造具有重要的意義。
注：本文是設(shè)計原則系列文章第四篇。本系列前三篇為：
1. 設(shè)計原則：視覺感知力及完全形態(tài)原則
3. 設(shè)計原則：通過對比與相似聯(lián)系或分離元素
視覺重量
物理學(xué)的重量是對地心引力施加于物體上的力的度量，但是二維的物體（例如網(wǎng)頁上的元素）沒有質(zhì)量，所以也就沒有物理范疇的重量可言。視覺重量是對元素吸引人眼球力量的度量。二維的物體都能夠吸引人的注意力。一個元素吸引力越強，其視覺重量也就越大。
在本系列的上一篇文章中，我談到了元素的原始特性或者叫固有特征，例如其尺寸、顏色和形狀等等。在文中，我還說到了如何通過這些特性來表現(xiàn)不同元素之間的對比與相似。
舉例來說，兩個元素一個很大一個很小就能形成鮮明的對比。
而通過組合這些不同的特性，我們就可以控制視覺重量。紅色比藍色更加吸引人，大的元素比小的元素更加吸引人，所以說，一個大的紅色物體所具有的視覺重量就要大于小的藍色物體。
那么這些特征或者說原始特性的集合，就決定了元素的視覺重量高低。要強調(diào)的是，決定元素視覺重量的不是單個特性，而是多個特性的組合。但不同的特性組合吸引人的力度也有不同。要打造具有不同視覺重量的元素，就需要結(jié)合不同的原始特性。
如何衡量視覺重量？
據(jù)我所知，精確衡量設(shè)計元素視覺重量的方法是不存在的。但你可以憑借經(jīng)驗和判斷力來分辨哪些元素重量大，哪些重量小。所以你要培養(yǎng)并相信自己的眼力。一幅作品中最吸引眼球的區(qū)域就是視覺重量比較高的區(qū)域。還是那句話，要相信自己的眼力。
但這并不是說你可以隨便亂試然后用眼睛判斷什么吸引力最強什么吸引力不夠強。舉個例，你可以通過把每個不同特征分離開來判斷出比較大的東西重量要大于比較小的東西。與此同時，你的眼力可以幫助你區(qū)分不同特性組合的視覺重量。
不過好在已經(jīng)有高人把各種不同的特征進行了分離和測試。下面是幾個元素特征以及其增減對視覺重量的影響說明。
首先我們來看上一篇文章中提到過的幾個原始特性：大小、顏色、色值、位置、材質(zhì)、形狀及朝向。
大小
比較大的元素相比小元素的視覺重量要高。
顏色
暖色能夠比較好的融入前景，比冷色重量高。冷色更傾向于融入背景。紅色是一般認為是重量最大的顏色，黃色則為最輕。
色值
較暗的元素視覺重量較高。
位置
在作品中所處位置較高的元素重量要大于所處位置較低的元素。距離作品中心或核心區(qū)域越遠，元素的視覺重量也就越高。前景中的元素所具有的重量要高于背景元素。
材質(zhì)
有材質(zhì)的元素重量大于無材質(zhì)物體。材質(zhì)能讓元素更具三維感，從而更表現(xiàn)出一定的質(zhì)量和物理重量感。
形狀
形狀規(guī)則的物體比不規(guī)則的物體重量較高。不規(guī)則形狀會讓人產(chǎn)生其質(zhì)量被從規(guī)則形狀中抽離的感覺。
朝向
垂直的物體重量高于水平物體。呈對角線放置的元素重量最高。
當(dāng)然，你不一定要局限在上述的這些原始特性之中，大可通過其他的特征來掌控視覺重量。
密度
增加特定空間內(nèi)元素的數(shù)量能夠提高空間的視覺重量。在觀看者眼中，高密度的區(qū)域會結(jié)合成為一個較大、較暗的組合元素，而不再是幾個小的、淡色的元素。
局部留白
留白的空間呈現(xiàn)出空的狀態(tài)，因此不具有任何視覺重量。因此，放置在留白空間中的物體就會在周邊環(huán)境的襯托下顯得更具重量。
內(nèi)在興趣點
不同的物體有趣程度也不盡相同。元素越復(fù)雜、越繁復(fù)會讓人興趣越高，從而吸引眼球的能力也就越強。在這一方面，個人的興趣點也發(fā)揮著作用。比方說，你對汽車的興趣大于飛機，那么汽車的圖片相比飛機就更能吸引你的注意力。
深度
較高的景深度能夠讓位于焦點的元素更具視覺重量，這一點有可能是焦點與非焦點區(qū)域之間的對比度造成的。
飽和度
飽和的顏色比不飽和顏色更重。
物理重量感覺
我們都知道房子的重量顯然大于鞋子的重量。那么，一所房子的圖片在視覺上也就自然比鞋子圖片更重，因為我們心里知道房子重。
在本系列上一篇有關(guān)于對比與相似的文章中，我提到了對比度能夠提高元素的吸引力。換句話說，一個與周邊環(huán)境對比強烈的元素在視覺上就比環(huán)境元素的重量更高。舉個例吧，在網(wǎng)頁上，圓形一般比矩形看起來更重，因為大部分網(wǎng)站元素都是矩形的。
當(dāng)然，并不是所有特征對視覺重量的影響程度都相同。大部分人對元素顏色的注意力要先于元素形狀，這也就說明顏色對視覺重量的貢獻較大。同時你還要考慮特定作品的獨特性，因為形成對比的元素的重量要高于用來與之對比的元素。作品的獨特性將決定哪些東西能夠形成對比，哪些不能。
要牢記，視覺重量是上述各種屬性的組合。所以，盡管大的物體視覺重量高于小的物體，但一個周邊環(huán)繞大量留白空間、放置在頁面頂部的深色小圓形物體，其重量很可能會高于放置在頁面底部、形狀不規(guī)則的淺冷色大物體。
視覺重量與完全形態(tài)
本系列文章背后的一個重要目的就是指出完全形態(tài)原則對設(shè)計原則的貢獻度有多少。
圖形-背景
通過提高圖形相對背景的視覺重量，我們可以將這兩者進行分離。
鄰近
不同元素之間的空間會形成不同的局部留白空間量和不同的空間內(nèi)物體密度。
相似與對比
我們可以從視覺重量的角度來對這兩者分別進行定義。對比可以給形成對比的元素帶來較高的視覺重量。而視覺重量差不多的元素則會自然地表現(xiàn)出相似性。
焦點（本系列下一篇的主題）
一幅作品中的吸引點就是其焦點，而焦點自然比其他元素更具視覺重量。
過往經(jīng)歷
觀看者的個人經(jīng)歷會作用于其腦中所認為一個元素所具有的內(nèi)在興趣點。
視覺方向
如果說視覺重量的用途是將人的眼光吸引到特定的位置，那么視覺方向的目的就是將眼光引領(lǐng)到下一個位置。視覺方向就是指視覺力量的方向。你可以把它看作是你腦中想象的某個元素下一步的運動方向。
在某種程度上說，視覺方向與視覺重量所起到的作用是類似的，它們都是為了把人的注意力吸引到作品的特定部分。但它們的區(qū)別在于，視覺重量就像是在高聲呼喊“看我！看我！”，而視覺方向則說的是“往這邊看！”
和視覺重量相同，你可以通過修改元素的特征來表現(xiàn)出不同的方向，不過在視覺方向這方面可操作的特征不如重量那么多。
元素形狀
不論元素形狀如何，其自身中都會存在一個軸線，而這個軸線則是指明方向的關(guān)鍵。元素的主軸線一般會被視為與元素的視覺方向平行。
元素位置
視覺重量是一股能夠吸引或排斥鄰近元素的力量。而這股力量能夠沿著連接兩個元素的方向 進行移動。
元素主旨
箭頭、手指或凝視的眼睛都能夠指示特定的方向。
運動
你可以讓元素在設(shè)計中運動起來，而其運動也就指明了方向。
結(jié)構(gòu)骨架
每個作品都有自己的骨架，骨架中存在沿著不同軸線流轉(zhuǎn)穿梭的力量。這一點可能還需要進一步講解一下。
結(jié)構(gòu)骨架
在Rudolf Arnheim的書作《藝術(shù)與視覺感知：創(chuàng)意目光心理學(xué)》中，他提出了每幅作品背后都存在著一副骨架這一理念。
其觀點在于，每幅作品中都蘊含著一套結(jié)構(gòu)化的力量網(wǎng)。即便作品中沒有任何元素，我們的目光也會被吸引到其中的某個部分，而原因就如下面這個力量網(wǎng)絡(luò)圖所示。
這個方形畫布的中心和四個角落就好像磁鐵一樣吸引人的目光。這里面磁性最強的位置在中心點，但這里說的并不是畫布的幾何中心，而是光學(xué)中心，其位于真正幾何中心的上方。
畫布中的軸線從一個角落通往另一個角落，沿著軸線的點位于中心和角落之間中間的位置，其同樣能夠吸引人的注意力。如果將這些中間點用垂直及水平線連起來，就形成了有一套視覺力量軸線。
有關(guān)于這個理論，我們等到系列文章中有關(guān)創(chuàng)作流程的一篇再細講?，F(xiàn)在，我們可以考慮，在尚未加入設(shè)計的情況下，觀看者的目光會被吸引到Arnheim結(jié)構(gòu)骨架中的各個點，并跟隨各個軸的方向從一個點移動到另一個點。
這樣一來，我們就可以根據(jù)這個結(jié)構(gòu)網(wǎng)把元素放置到能夠自然吸引目光的位置，從而增強元素的吸引力。
視覺方向與完全形態(tài)
你可以把方向看作是真實的或者是想象出來的從一個元素指向另一個元素，或者連接不同元素的線條。這些線條不一定要真的表現(xiàn)出來。
一致的連通性
連接各個元素的線條都有方向。目光的聚焦能夠在眼睛和其所關(guān)注的物體之間形成一條想象的線條。
連續(xù)性
這一原理可以聯(lián)系到沿直線或曲線排列的元素上，就好像這些元素會沿著直線或曲線方向運動一般。
共同性
能夠看作具有共同性的元素通常是指沿著或者在想象中沿著同一方向運動的元素。
平行
為了讓不同元素看似平行，就必須確立其內(nèi)在的軸線（也就是形成方向的軸線）。
作品的整體方向
有關(guān)視覺方向還有一個概念：每幅作品都會存在一個主要的方向，可以是水平、垂直或者對角線。
1. 水平方向能夠讓作品更加沉穩(wěn)、沉著。
2. 垂直方向作品則能夠帶來嚴謹、警醒和平衡感。
3. 對角線方向則能夠表現(xiàn)出運動和動感。
通過大部分元素或者幾個關(guān)鍵元素的方向可以建立起整幅作品的主要方向。根據(jù)不同線條類型所具有的一般含義，方向有助于奠定作品的總體基調(diào)。
當(dāng)然，一幅作品也有可能沒有主要方向。比方說，水平和垂直元素的數(shù)量有可能是相同的。在這種情況下，觀看者就可以自己認定主要方向是什么。
示例
有關(guān)下面的示例，我截取了幾個頁面截圖，并會和大家分享一下我眼中這些作品的視覺重量分布情況。當(dāng)然，你也可能會有不同意見，
畢竟不同的人所關(guān)注的事物不盡相同。不過要再重申一遍，我個人完全不知道有任何準(zhǔn)確衡量元素視覺重量的方法。另外，兩個興趣不同的人看同一幅作品所關(guān)注的區(qū)域也完全可能不同。所以說存在一定主觀性是必然的。
要判斷哪些元素重量較高的一個簡單方法就是使用瞇眼測試法。具體方法就是，一點一點把眼睛微閉起來，直到部分元素逐漸消失。那么剩下的元素相比消失的來說視覺重量就較高一些。
BUREAU
注：給Bureau截圖的時候，我的瀏覽器設(shè)置寬度在1280像素以上。如果你的寬度低于1280，其設(shè)計就會折疊成單欄，而不是截圖里顯示的兩欄。
上圖所示的Bureau的文章基本全部是文字。其中主標(biāo)題最具視覺重量。它是最大的一塊文字，同時周邊還有一定的局部留白空間。這個標(biāo)題可以說是每個登陸到頁面上的人所應(yīng)看到的最重要的信息，所以視覺重量高也理所當(dāng)然。
圖中的鏈接通過與周邊文字形成對比也獲得了一定的重量，不過我個人認為比較冷的顏色弱化了其重量。
視覺重量最低的元素當(dāng)屬右側(cè)欄里的文字?？紤]到大家的注意力可能主要應(yīng)當(dāng)集中到文章而不是側(cè)邊欄內(nèi)，所以這一點也很合理。
另外，注意一下右側(cè)欄內(nèi)頂部小塊紅色文字。它是網(wǎng)站主頁的鏈接。盡管體型較小，但紅色也給其增添了一定的重量，使其能夠和欄內(nèi)其他文字區(qū)分開。如果你直接去看網(wǎng)站，那圖片中所示的所有內(nèi)容其實都不小，所以這一塊紅色的文字也不會像截圖中表現(xiàn)的這么小。
在這里，如果你采用瞇眼測試法，就會發(fā)現(xiàn)右邊欄會全部消失，眼里只剩下文章上方的主標(biāo)題以及下方的一大塊文字。
這個作品內(nèi)含兩個從頁面上到下的長欄，因此主方向為垂直。兩欄背景色的不同形成了一條垂直的線條，指引大家向頁面下方瀏覽，進而進一步增添了作品的垂直方向感。
CREATE DIGITAL MEDIA
Create Digital Media的主頁在加載時會有彩色的元素以動畫效果躍入頁面，進而為自身吸引大量注意力。如果你錯過了動畫效果，這些元素飽和的粉色、黃色和藍色也能表現(xiàn)出極大的視覺重量。另外，這些元素所占空間也相同，從而在空白空間的中央營造出了一片密度較高的區(qū)域。
注：Create Digital Media在本文撰寫至發(fā)表期間停業(yè)。如果你想了解原因，請訪問其主頁。
底部的圖形就我個人來說是重量第二高的。這些圖形呈黑色、體積較大且形狀復(fù)雜，它們能夠?qū)⒛愕淖⒁饬Ψ謩e拉到三個版塊，其中每個板塊都包含有視覺突出性次強之的元素，也就是版塊標(biāo)題。
頁面的主標(biāo)題行相比其正下方的文字既大且黑。其他對我來說比較突出的內(nèi)容，從視覺重量的角度來說，應(yīng)該是頂部的公司名稱和底部的logo。
通過瞇眼測試，在大部分元素消失后，還剩下彩色的形狀和文字，以及底部的圖形。瞇眼后我看不到主標(biāo)題，不過我還能感覺到其位置。另外，左下角的logo盡管比其近旁的圖形消失的早得多，但還是特別引起了我的注意。
這幅作品的方向，我覺得是水平。頁面上的線條都呈水平分布，主標(biāo)題和導(dǎo)航欄也是如此。另外一個比較具有視覺突出性的元素—高亮的文字，也是水平方向。
三個齒輪可以看作是一個合體的曲里拐彎的三角形，因此表現(xiàn)出了對角線的方向。不過這些齒輪分布不大，而且是頁面中唯一的對角方向元素。
JAVIER MARTA
Javier Marta主頁上有三個元素競爭視覺重量最高。圖形、板塊間的綠色隔離欄以及頁面頂部的菜單項都在爭搶著人的注意。
圖形
大型、深色，周圍環(huán)繞白色空間。每個圖形本身都有自己的興趣點。
綠色隔離欄
大型、有顏色，和圖形一樣周圍環(huán)繞白色空間。
菜單項
大型、深色，同樣周圍環(huán)繞白色空間。
Javier的logo，就我個人而言，相比四周的菜單項來說視覺重量略輕，不過仍然是比較顯眼的。其重量要高于文字，但不如菜單項。不過你也可以有不同意見。
通過瞇眼測試，菜單項和logo會融合成一體。但圖形和隔離欄仍然會比較顯眼，文字也依然可見，不過變成了一塊一塊的。瞇著眼的情況下還是可以看見所有內(nèi)容的，不過看不清楚具體的字樣。
在我的屏幕上，只有標(biāo)題和“El evento”部分可以看到，這樣一來就確立了整個頁面的水平方向。不過，整體四個板塊仍然保留在頁面上。如果一眼掃過所有板塊，綠色隔離欄的對齊排列會讓整幅作品表現(xiàn)出垂直的方向。所以說，如果從整體角度看整個頁面，其方向就會從水平變成垂直。
不知道截圖里展示的兩個圖形如果放到相反的方向會不會好點。上面的圖形里，相機是朝右的，所以我的目光也是向右看的。如果其能夠把目光引導(dǎo)到文字上就更好了。
下面的圖片里，那位女士的雨傘倒是朝右的，不過她人卻是向左走，所以我也會不自禁向左看。這兩個圖片如果能夠把方向引導(dǎo)到文字上，而不是引離開文字就更好了。
STANFORD ARTS
Stanford Arts主頁頂部的圖片具有最大的視覺重量。其自身是頁面上最大的元素，而且作為一幅圖片，也蘊含了不少的內(nèi)在興趣點。同時其還位于作品的最頂部。實際上，光這個圖片就占去了我屏幕上的大部分空間。
注：該網(wǎng)站頁面頂部的圖片會滾動播放，且圖片會隔一段時間更新一次。所以你訪問網(wǎng)站時可能不一定能看到截圖里的圖片，那么你對設(shè)計中視覺重量的評估就會與我有所不同。
下面，我認為放在方形框內(nèi)的三角形圖片的視覺重量為第二高。之后是構(gòu)成標(biāo)題和腳注的大型紅色板塊。
我進行瞇眼測試時，發(fā)現(xiàn)所有元素持續(xù)看到的時間都比我預(yù)期的長。頁面元素的明暗對比做的比較不錯，所以有助于其突出自身。
測試最后剩下的內(nèi)容只有圖片，而且比較模糊。我能看清楚的是頂部的圖片，至于下面的三角形圖片就只剩下輪廓了。
其設(shè)計在視覺方向上的處理也很有趣。主導(dǎo)方向時對角，因為大部分網(wǎng)頁都不采用對角方向，所以這一點比較吸引人的注意。這個是比較顛覆人預(yù)期的。
我截圖里的那張照片，雖然有的部分比較曲折，而且取材自人流，但同樣也表現(xiàn)出了一定的對角方向，
圖片里的女士（最右側(cè)三角形圖片）和攝影師（中間的三角形圖片）的方向都引向右側(cè)。所以如果能將女士反過來臉朝內(nèi)，相機放到左側(cè)的板塊里也朝內(nèi)，效果會更好。
當(dāng)然，這些圖片會在你鼠標(biāo)懸停到板塊中任意鏈接的時候切換，不過總體來說圖片呈現(xiàn)出向外而不是向內(nèi)的感覺。
總結(jié)
元素的視覺重量是衡量其吸引觀眾眼球的指標(biāo)。視覺重量高的元素能夠吸引更多眼球。
而視覺方向則是指不同元素所發(fā)揮出的視覺力量作用于其他元素時人所感知的方向。這里的方向是觀者目光移動的提示引導(dǎo)。
通過修改很多內(nèi)在特征可以改變元素的視覺重量。其中甚至有些能夠起到確立視覺方向的作用。
在本系列的剩下幾篇文章中，我們將一起來看視覺重量和方向是如何引出支配、層級、流程和節(jié)奏以及作品平衡等設(shè)計原理的。
原文地址：Smashing Magazine
本文地址：http://irelandcustomcontracting.com/tutorial/di2633.html
