網(wǎng)頁上的每個(gè)元素都會(huì)通過發(fā)揮自身的視覺力量吸引觀者的眼球。而這種力量越大，吸引力也就越強(qiáng)。這些力量同時(shí)也能作用于其他元素，從而形成一種潛在的視覺運(yùn)動(dòng)方向，引導(dǎo)觀者的閱讀。

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

 

注：本文是設(shè)計(jì)原則系列文章第四篇。本系列前三篇為：

1.   設(shè)計(jì)原則：視覺感知力及完全形態(tài)原則

2.   設(shè)計(jì)原則：空間與圖形背景關(guān)系

3.   設(shè)計(jì)原則：通過對(duì)比與相似聯(lián)系或分離元素

 

視覺重量

 

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

 

在本系列的上一篇文章中，我談到了元素的原始特性或者叫固有特征，例如其尺寸、顏色和形狀等等。在文中，我還說到了如何通過這些特性來表現(xiàn)不同元素之間的對(duì)比與相似。

 

舉例來說，兩個(gè)元素一個(gè)很大一個(gè)很小就能形成鮮明的對(duì)比。

 

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

 

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

 

如何衡量視覺重量？

 

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

 

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

 

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

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

 

大小

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

 

顏色

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

 

色值

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

 

位置

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

 

材質(zhì)

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

 

形狀

形狀規(guī)則的物體比不規(guī)則的物體重量較高。不規(guī)則形狀會(huì)讓人產(chǎn)生其質(zhì)量被從規(guī)則形狀中抽離的感覺。

 

朝向

垂直的物體重量高于水平物體。呈對(duì)角線放置的元素重量最高。

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

 

密度

增加特定空間內(nèi)元素的數(shù)量能夠提高空間的視覺重量。在觀看者眼中，高密度的區(qū)域會(huì)結(jié)合成為一個(gè)較大、較暗的組合元素，而不再是幾個(gè)小的、淡色的元素。

 

局部留白

留白的空間呈現(xiàn)出空的狀態(tài)，因此不具有任何視覺重量。因此，放置在留白空間中的物體就會(huì)在周邊環(huán)境的襯托下顯得更具重量。

 

內(nèi)在興趣點(diǎn)

不同的物體有趣程度也不盡相同。元素越復(fù)雜、越繁復(fù)會(huì)讓人興趣越高，從而吸引眼球的能力也就越強(qiáng)。在這一方面，個(gè)人的興趣點(diǎn)也發(fā)揮著作用。比方說，你對(duì)汽車的興趣大于飛機(jī)，那么汽車的圖片相比飛機(jī)就更能吸引你的注意力。

 

深度

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

 

飽和度

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

 

物理重量感覺

我們都知道房子的重量顯然大于鞋子的重量。那么，一所房子的圖片在視覺上也就自然比鞋子圖片更重，因?yàn)槲覀冃睦镏婪孔又亍?/span>

 

在本系列上一篇有關(guān)于對(duì)比與相似的文章中，我提到了對(duì)比度能夠提高元素的吸引力。換句話說，一個(gè)與周邊環(huán)境對(duì)比強(qiáng)烈的元素在視覺上就比環(huán)境元素的重量更高。舉個(gè)例吧，在網(wǎng)頁上，圓形一般比矩形看起來更重，因?yàn)榇蟛糠志W(wǎng)站元素都是矩形的。

 

當(dāng)然，并不是所有特征對(duì)視覺重量的影響程度都相同。大部分人對(duì)元素顏色的注意力要先于元素形狀，這也就說明顏色對(duì)視覺重量的貢獻(xiàn)較大。同時(shí)你還要考慮特定作品的獨(dú)特性，因?yàn)樾纬蓪?duì)比的元素的重量要高于用來與之對(duì)比的元素。作品的獨(dú)特性將決定哪些東西能夠形成對(duì)比，哪些不能。

 

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

 

視覺重量與完全形態(tài)

 

本系列文章背后的一個(gè)重要目的就是指出完全形態(tài)原則對(duì)設(shè)計(jì)原則的貢獻(xiàn)度有多少。

 

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

鄰近

不同元素之間的空間會(huì)形成不同的局部留白空間量和不同的空間內(nèi)物體密度。

相似與對(duì)比

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

焦點(diǎn)（本系列下一篇的主題）

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

過往經(jīng)歷

觀看者的個(gè)人經(jīng)歷會(huì)作用于其腦中所認(rèn)為一個(gè)元素所具有的內(nèi)在興趣點(diǎn)。

 

 

視覺方向

 

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

 

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

 

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

 

元素形狀

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

 

元素位置

視覺重量是一股能夠吸引或排斥鄰近元素的力量。而這股力量能夠沿著連接兩個(gè)元素的方向 進(jìn)行移動(dòng)。

 

元素主旨

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

 

運(yùn)動(dòng)

你可以讓元素在設(shè)計(jì)中運(yùn)動(dòng)起來，而其運(yùn)動(dòng)也就指明了方向。

 

結(jié)構(gòu)骨架

每個(gè)作品都有自己的骨架，骨架中存在沿著不同軸線流轉(zhuǎn)穿梭的力量。這一點(diǎn)可能還需要進(jìn)一步講解一下。

 

結(jié)構(gòu)骨架

 

在Rudolf Arnheim的書作《藝術(shù)與視覺感知：創(chuàng)意目光心理學(xué)》中，他提出了每幅作品背后都存在著一副骨架這一理念。

 

其觀點(diǎn)在于，每幅作品中都蘊(yùn)含著一套結(jié)構(gòu)化的力量網(wǎng)。即便作品中沒有任何元素，我們的目光也會(huì)被吸引到其中的某個(gè)部分，而原因就如下面這個(gè)力量網(wǎng)絡(luò)圖所示。

 

 

這個(gè)方形畫布的中心和四個(gè)角落就好像磁鐵一樣吸引人的目光。這里面磁性最強(qiáng)的位置在中心點(diǎn)，但這里說的并不是畫布的幾何中心，而是光學(xué)中心，其位于真正幾何中心的上方。

 

畫布中的軸線從一個(gè)角落通往另一個(gè)角落，沿著軸線的點(diǎn)位于中心和角落之間中間的位置，其同樣能夠吸引人的注意力。如果將這些中間點(diǎn)用垂直及水平線連起來，就形成了有一套視覺力量軸線。

 

有關(guān)于這個(gè)理論，我們等到系列文章中有關(guān)創(chuàng)作流程的一篇再細(xì)講?，F(xiàn)在，我們可以考慮，在尚未加入設(shè)計(jì)的情況下，觀看者的目光會(huì)被吸引到Arnheim結(jié)構(gòu)骨架中的各個(gè)點(diǎn)，并跟隨各個(gè)軸的方向從一個(gè)點(diǎn)移動(dòng)到另一個(gè)點(diǎn)。

 

這樣一來，我們就可以根據(jù)這個(gè)結(jié)構(gòu)網(wǎng)把元素放置到能夠自然吸引目光的位置，從而增強(qiáng)元素的吸引力。

 

視覺方向與完全形態(tài)

 

你可以把方向看作是真實(shí)的或者是想象出來的從一個(gè)元素指向另一個(gè)元素，或者連接不同元素的線條。這些線條不一定要真的表現(xiàn)出來。

 

一致的連通性

連接各個(gè)元素的線條都有方向。目光的聚焦能夠在眼睛和其所關(guān)注的物體之間形成一條想象的線條。

 

連續(xù)性

這一原理可以聯(lián)系到沿直線或曲線排列的元素上，就好像這些元素會(huì)沿著直線或曲線方向運(yùn)動(dòng)一般。

 

共同性

能夠看作具有共同性的元素通常是指沿著或者在想象中沿著同一方向運(yùn)動(dòng)的元素。

 

平行

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

 

作品的整體方向

 

有關(guān)視覺方向還有一個(gè)概念：每幅作品都會(huì)存在一個(gè)主要的方向，可以是水平、垂直或者對(duì)角線。

 

1.   水平方向能夠讓作品更加沉穩(wěn)、沉著。

 

2.   垂直方向作品則能夠帶來嚴(yán)謹(jǐn)、警醒和平衡感。

3.   對(duì)角線方向則能夠表現(xiàn)出運(yùn)動(dòng)和動(dòng)感。

 

 

 

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

 

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

 

示例

 

有關(guān)下面的示例，我截取了幾個(gè)頁面截圖，并會(huì)和大家分享一下我眼中這些作品的視覺重量分布情況。當(dāng)然，你也可能會(huì)有不同意見，

 

畢竟不同的人所關(guān)注的事物不盡相同。不過要再重申一遍，我個(gè)人完全不知道有任何準(zhǔn)確衡量元素視覺重量的方法。另外，兩個(gè)興趣不同的人看同一幅作品所關(guān)注的區(qū)域也完全可能不同。所以說存在一定主觀性是必然的。

 

要判斷哪些元素重量較高的一個(gè)簡(jiǎn)單方法就是使用瞇眼測(cè)試法。具體方法就是，一點(diǎn)一點(diǎn)把眼睛微閉起來，直到部分元素逐漸消失。那么剩下的元素相比消失的來說視覺重量就較高一些。

 

BUREAU

 

注：給Bureau截圖的時(shí)候，我的瀏覽器設(shè)置寬度在1280像素以上。如果你的寬度低于1280，其設(shè)計(jì)就會(huì)折疊成單欄，而不是截圖里顯示的兩欄。

 

 

上圖所示的Bureau的文章基本全部是文字。其中主標(biāo)題最具視覺重量。它是最大的一塊文字，同時(shí)周邊還有一定的局部留白空間。這個(gè)標(biāo)題可以說是每個(gè)登陸到頁面上的人所應(yīng)看到的最重要的信息，所以視覺重量高也理所當(dāng)然。

 

圖中的鏈接通過與周邊文字形成對(duì)比也獲得了一定的重量，不過我個(gè)人認(rèn)為比較冷的顏色弱化了其重量。

 

視覺重量最低的元素當(dāng)屬右側(cè)欄里的文字?？紤]到大家的注意力可能主要應(yīng)當(dāng)集中到文章而不是側(cè)邊欄內(nèi)，所以這一點(diǎn)也很合理。

 

另外，注意一下右側(cè)欄內(nèi)頂部小塊紅色文字。它是網(wǎng)站主頁的鏈接。盡管體型較小，但紅色也給其增添了一定的重量，使其能夠和欄內(nèi)其他文字區(qū)分開。如果你直接去看網(wǎng)站，那圖片中所示的所有內(nèi)容其實(shí)都不小，所以這一塊紅色的文字也不會(huì)像截圖中表現(xiàn)的這么小。

 

在這里，如果你采用瞇眼測(cè)試法，就會(huì)發(fā)現(xiàn)右邊欄會(huì)全部消失，眼里只剩下文章上方的主標(biāo)題以及下方的一大塊文字。

 

這個(gè)作品內(nèi)含兩個(gè)從頁面上到下的長(zhǎng)欄，因此主方向?yàn)榇怪?。兩欄背景色的不同形成了一條垂直的線條，指引大家向頁面下方瀏覽，進(jìn)而進(jìn)一步增添了作品的垂直方向感。

 

CREATE DIGITAL MEDIA

 

Create Digital Media的主頁在加載時(shí)會(huì)有彩色的元素以動(dòng)畫效果躍入頁面，進(jìn)而為自身吸引大量注意力。如果你錯(cuò)過了動(dòng)畫效果，這些元素飽和的粉色、黃色和藍(lán)色也能表現(xiàn)出極大的視覺重量。另外，這些元素所占空間也相同，從而在空白空間的中央營(yíng)造出了一片密度較高的區(qū)域。

 

注：Create Digital Media在本文撰寫至發(fā)表期間停業(yè)。如果你想了解原因，請(qǐng)?jiān)L問其主頁。

 

 

底部的圖形就我個(gè)人來說是重量第二高的。這些圖形呈黑色、體積較大且形狀復(fù)雜，它們能夠?qū)⒛愕淖⒁饬Ψ謩e拉到三個(gè)版塊，其中每個(gè)板塊都包含有視覺突出性次強(qiáng)之的元素，也就是版塊標(biāo)題。

 

頁面的主標(biāo)題行相比其正下方的文字既大且黑。其他對(duì)我來說比較突出的內(nèi)容，從視覺重量的角度來說，應(yīng)該是頂部的公司名稱和底部的logo。

 

通過瞇眼測(cè)試，在大部分元素消失后，還剩下彩色的形狀和文字，以及底部的圖形。瞇眼后我看不到主標(biāo)題，不過我還能感覺到其位置。另外，左下角的logo盡管比其近旁的圖形消失的早得多，但還是特別引起了我的注意。

 

這幅作品的方向，我覺得是水平。頁面上的線條都呈水平分布，主標(biāo)題和導(dǎo)航欄也是如此。另外一個(gè)比較具有視覺突出性的元素—高亮的文字，也是水平方向。

 

三個(gè)齒輪可以看作是一個(gè)合體的曲里拐彎的三角形，因此表現(xiàn)出了對(duì)角線的方向。不過這些齒輪分布不大，而且是頁面中唯一的對(duì)角方向元素。

 

JAVIER MARTA

 

Javier Marta主頁上有三個(gè)元素競(jìng)爭(zhēng)視覺重量最高。圖形、板塊間的綠色隔離欄以及頁面頂部的菜單項(xiàng)都在爭(zhēng)搶著人的注意。

 

 

 

圖形

大型、深色，周圍環(huán)繞白色空間。每個(gè)圖形本身都有自己的興趣點(diǎn)。

 

綠色隔離欄

大型、有顏色，和圖形一樣周圍環(huán)繞白色空間。

 

菜單項(xiàng)

大型、深色，同樣周圍環(huán)繞白色空間。

 

Javier的logo，就我個(gè)人而言，相比四周的菜單項(xiàng)來說視覺重量略輕，不過仍然是比較顯眼的。其重量要高于文字，但不如菜單項(xiàng)。不過你也可以有不同意見。

 

通過瞇眼測(cè)試，菜單項(xiàng)和logo會(huì)融合成一體。但圖形和隔離欄仍然會(huì)比較顯眼，文字也依然可見，不過變成了一塊一塊的。瞇著眼的情況下還是可以看見所有內(nèi)容的，不過看不清楚具體的字樣。

 

在我的屏幕上，只有標(biāo)題和“El evento”部分可以看到，這樣一來就確立了整個(gè)頁面的水平方向。不過，整體四個(gè)板塊仍然保留在頁面上。如果一眼掃過所有板塊，綠色隔離欄的對(duì)齊排列會(huì)讓整幅作品表現(xiàn)出垂直的方向。所以說，如果從整體角度看整個(gè)頁面，其方向就會(huì)從水平變成垂直。

 

不知道截圖里展示的兩個(gè)圖形如果放到相反的方向會(huì)不會(huì)好點(diǎn)。上面的圖形里，相機(jī)是朝右的，所以我的目光也是向右看的。如果其能夠把目光引導(dǎo)到文字上就更好了。

 

下面的圖片里，那位女士的雨傘倒是朝右的，不過她人卻是向左走，所以我也會(huì)不自禁向左看。這兩個(gè)圖片如果能夠把方向引導(dǎo)到文字上，而不是引離開文字就更好了。

 

STANFORD ARTS

 

Stanford Arts主頁頂部的圖片具有最大的視覺重量。其自身是頁面上最大的元素，而且作為一幅圖片，也蘊(yùn)含了不少的內(nèi)在興趣點(diǎn)。同時(shí)其還位于作品的最頂部。實(shí)際上，光這個(gè)圖片就占去了我屏幕上的大部分空間。

 

 

注：該網(wǎng)站頁面頂部的圖片會(huì)滾動(dòng)播放，且圖片會(huì)隔一段時(shí)間更新一次。所以你訪問網(wǎng)站時(shí)可能不一定能看到截圖里的圖片，那么你對(duì)設(shè)計(jì)中視覺重量的評(píng)估就會(huì)與我有所不同。

 

下面，我認(rèn)為放在方形框內(nèi)的三角形圖片的視覺重量為第二高。之后是構(gòu)成標(biāo)題和腳注的大型紅色板塊。

 

我進(jìn)行瞇眼測(cè)試時(shí)，發(fā)現(xiàn)所有元素持續(xù)看到的時(shí)間都比我預(yù)期的長(zhǎng)。頁面元素的明暗對(duì)比做的比較不錯(cuò)，所以有助于其突出自身。

 

測(cè)試最后剩下的內(nèi)容只有圖片，而且比較模糊。我能看清楚的是頂部的圖片，至于下面的三角形圖片就只剩下輪廓了。

 

其設(shè)計(jì)在視覺方向上的處理也很有趣。主導(dǎo)方向時(shí)對(duì)角，因?yàn)榇蟛糠志W(wǎng)頁都不采用對(duì)角方向，所以這一點(diǎn)比較吸引人的注意。這個(gè)是比較顛覆人預(yù)期的。

 

我截圖里的那張照片，雖然有的部分比較曲折，而且取材自人流，但同樣也表現(xiàn)出了一定的對(duì)角方向，

圖片里的女士（最右側(cè)三角形圖片）和攝影師（中間的三角形圖片）的方向都引向右側(cè)。所以如果能將女士反過來臉朝內(nèi)，相機(jī)放到左側(cè)的板塊里也朝內(nèi)，效果會(huì)更好。

 

當(dāng)然，這些圖片會(huì)在你鼠標(biāo)懸停到板塊中任意鏈接的時(shí)候切換，不過總體來說圖片呈現(xiàn)出向外而不是向內(nèi)的感覺。

 

總結(jié)

 

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

 

而視覺方向則是指不同元素所發(fā)揮出的視覺力量作用于其他元素時(shí)人所感知的方向。這里的方向是觀者目光移動(dòng)的提示引導(dǎo)。

 

通過修改很多內(nèi)在特征可以改變?cè)氐囊曈X重量。其中甚至有些能夠起到確立視覺方向的作用。

 

在本系列的剩下幾篇文章中，我們將一起來看視覺重量和方向是如何引出支配、層級(jí)、流程和節(jié)奏以及作品平衡等設(shè)計(jì)原理的。