設(shè)計(jì)教程：視覺的重量和方向

網(wǎng)頁上的每個(gè)元素都會(huì)產(chǎn)生一種視覺力量來吸引觀眾的注意力。這種視覺力量越大，就越能吸引觀眾的注意力。這些力量似乎同時(shí)也作用于其他視覺元素,傳遞出他它們潛在的運(yùn)動(dòng)和視覺方向，并且暗示你接下來該看什么內(nèi)容。

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

注意：這是設(shè)計(jì)原則系列文章的第四篇，你可以找到之前的三篇文章

第一篇：視知覺和格式塔原則

第二篇：設(shè)計(jì)留白和圖底關(guān)系

第三篇：如何通過相似和對(duì)比原則區(qū)分和聯(lián)系元素

視覺重量

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

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

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

控制調(diào)節(jié)這些元素的特點(diǎn)組合，你可以控制網(wǎng)頁的視覺重量。比如：紅色比藍(lán)色更加吸引注意力，更大的要素比更小的要素更吸引注意力。因此組合起來的話，大的紅色的物體視覺重量要比小尺寸的藍(lán)色物體視覺重量重很多。

這些內(nèi)在特征的總和或者元素的基礎(chǔ)特點(diǎn)才能決定一個(gè)要素的視覺重量。并不是其中任何一個(gè)，而是它們的組合決定了一個(gè)元素的視覺重量。一些基本特點(diǎn)的組合相比其它可以吸引更多的注意力。因此，為了創(chuàng)造不同的視覺重量，你應(yīng)該會(huì)使用不同特點(diǎn)的組合。

如何衡量視覺重量?

據(jù)我所知沒有一個(gè)很精確的方法去測量設(shè)計(jì)要素的視覺重量。用你自己的經(jīng)驗(yàn)和判斷去決定哪一個(gè)要素視覺重量輕哪一個(gè)重。發(fā)揮你眼睛的作用，并且相信它。這個(gè)作品區(qū)域中最吸引你眼球的地方就是視覺重量最重的地方。學(xué)著相信你的眼睛。

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

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

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

尺寸

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

顏色

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

色值

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

位置

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

紋理

有紋理疊加的要素比沒有紋理的要重。紋理讓物體呈現(xiàn)三維的效果，同時(shí)給予它質(zhì)量和視覺重量。

形狀

規(guī)則的物體比不規(guī)則的物體要重，因?yàn)椴灰?guī)則的物體就像是規(guī)則的物體被切掉一部分后得到的。

方向

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

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

密度

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

留白

純白的空間看上去沒有視覺重量，因?yàn)樗樟?。任何一個(gè)在空白中的物體似乎都更重了，原因是周圍的空間都包圍著它。

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

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

深度

較大的景深給了焦點(diǎn)元素更多的視覺重量，原因可能是焦距和未焦距區(qū)域的對(duì)比度

飽和度

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

感知物理重量

我們都知道一棟房子的重量比一雙鞋子重吧!一張印著房子圖片的視覺重量比一張印著鞋子的照片重。因?yàn)槲覀兏杏X房子更重。

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

并不是所有的特點(diǎn)都會(huì)導(dǎo)致相同的視覺重量，大多數(shù)人可能最先注意到的是顏色而非形狀。這表明顏色的視覺重量更重。你還必須考慮到他們的獨(dú)特性，因?yàn)閷?duì)比的元素比他們的對(duì)比物更重。你作品的具體情況將決定哪些地方有對(duì)比，哪些地方?jīng)]有。

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

視覺重量和格式塔原則

接下來的這個(gè)系列指出了格式塔原理對(duì)設(shè)計(jì)原則有多大的貢獻(xiàn)。

·圖形背景

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

·距離

元素間的空間導(dǎo)致了不同數(shù)量的局部空白和物體內(nèi)部空間的不同密度

·相似和對(duì)比

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

·焦點(diǎn)(該系列中的下一個(gè)主題)

點(diǎn)元素組成了焦點(diǎn)并且會(huì)特別有吸引力，它的視覺重量比其他元素都重

·過去的經(jīng)驗(yàn)

瀏覽者過去的體驗(yàn)會(huì)很影響他們認(rèn)為的當(dāng)前網(wǎng)頁中最吸引眼球的元素。

視覺方向

如果說視覺重量是關(guān)于吸引眼球到特定的位置，那么視覺方向就是引導(dǎo)眼球到下一個(gè)位置。視覺方向是對(duì)視覺力量的感知。如果元素正在運(yùn)動(dòng)中，那想一下你期望的元素的移動(dòng)方向。視覺方向和視覺重量有著相似的功能，視覺重量是想讓你注意到作品中的某一部分，它在興奮的對(duì)你說“嘿，看我這!”，而視覺方向卻在對(duì)你說“嘿，看那邊!”

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

·元素的形狀

一個(gè)元素的形狀可能可以創(chuàng)造一個(gè)坐標(biāo)軸，并且這個(gè)坐標(biāo)軸會(huì)提供一個(gè)視覺方向?；据S通常都是平行方向的視覺元素

·元素的位置

視覺重量是一種排斥與吸引并存周圍元素的力量，同時(shí)這個(gè)力量把它們都聯(lián)系在了一起。

·特定元素

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

·元素移動(dòng)

通過你的設(shè)計(jì)，元素確實(shí)可以移動(dòng)，并且它的移動(dòng)是有方向的

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

每一個(gè)元素都有骨架結(jié)構(gòu)，它們都沿著不同的軸線很自然的移動(dòng)。這里可能需要更多的解釋了。

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

在魯?shù)婪颉ぐ⒍骱Ｄ匪摹端囆g(shù)與視知覺》這本書中，魯?shù)婪颉ぐ⒍骱Ｄ诽岢雒繌埉嫴己蠖加薪Y(jié)構(gòu)骨架，每一個(gè)畫布都有一個(gè)結(jié)構(gòu)網(wǎng)格的力量貫穿它的全部。即使這個(gè)畫布上沒有任何元素，我們的眼睛還是會(huì)被吸引到畫布上的某些特定部分，正如下圖中結(jié)構(gòu)網(wǎng)格的力量。

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

軸線從中心貫穿四周，這些軸線交點(diǎn)的中心和四角都吸引了注意力。這些中途的交點(diǎn)，把水平線和垂線相互聯(lián)系起來，創(chuàng)造了一個(gè)吸引眼球的坐標(biāo)軸。

我們后面要談到這一個(gè)系列關(guān)于創(chuàng)作流的時(shí)候在回來討論一下結(jié)構(gòu)網(wǎng)絡(luò)的。現(xiàn)在，一個(gè)缺乏設(shè)計(jì)眼光的瀏覽者會(huì)被吸引到阿恩海姆結(jié)構(gòu)網(wǎng)絡(luò)的中心，并且沿著不同的軸線一點(diǎn)一點(diǎn)往下看。

因此，你可以利用這個(gè)結(jié)構(gòu)網(wǎng)絡(luò)去放置元素，調(diào)整它們的位置。它們會(huì)很自然的吸引眼球，并且吸引力會(huì)增強(qiáng)。

視覺的方向和格式塔

你可以想象一個(gè)元素到另一個(gè)不同卻相互聯(lián)系的元素的方向，用一條真實(shí)或想象出來的線條。這條線可以是不可見的。

·統(tǒng)一連通

這根線連接的元素是有方向的，眼睛凝視元素的地方會(huì)出現(xiàn)一條線。

·連續(xù)

這條原則相關(guān)于元素被安排成直線還是曲線，就好像他們正在沿著曲線或直線運(yùn)動(dòng)

·共同命運(yùn)

元素之間似乎有朝著一個(gè)方向移動(dòng)和呈現(xiàn)的共同命運(yùn)。

·并行

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

作品的總體方向

視覺方向更多的一個(gè)概念就是，每個(gè)作品都有一個(gè)主導(dǎo)方向，不管是垂線、水平線還是對(duì)角線。

·水平方向會(huì)讓作品表現(xiàn)出冷靜和穩(wěn)定的感覺

·垂直方向會(huì)讓作品表現(xiàn)出危險(xiǎn)、形式感和平衡感

·對(duì)角方向代表位移和運(yùn)動(dòng)。

作品的主導(dǎo)方向是由大多數(shù)元素或者幾個(gè)關(guān)鍵元素來確定的，這個(gè)方向會(huì)幫助建立一個(gè)總體氛圍，這個(gè)總體氛圍的建立是根據(jù)不同的線型來決定的。

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

例子

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

不同的眼睛會(huì)被不同的事物吸引，我也知道沒有一種確定的方法去衡量元素的視覺重量。此外，兩個(gè)人會(huì)很容易的看到作品的不同區(qū)域，因?yàn)樗麄兊呐d趣不一樣。這一點(diǎn)是具有主觀性的。

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

信息局

我瀏覽器截取信息局的網(wǎng)頁寬度是1280像素的，如果不這樣的話，設(shè)計(jì)可能會(huì)崩潰。而不是下面看到的兩個(gè)單獨(dú)欄目

這上面這個(gè)信息局網(wǎng)頁的文章顯示了幾乎全部的文本，很明顯，標(biāo)題的視覺重量最重。第二個(gè)就是文章那一片，因?yàn)橹車泻芏喟咨臻g圍繞著它。這可以說是一個(gè)來訪者應(yīng)該看到的網(wǎng)頁中的最重要的信息，因此它具有較重的視覺重量。

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

視覺重量最少的地方是右列的文本，這不是沒有道理的。因?yàn)?，重點(diǎn)最應(yīng)該是文章而不是側(cè)邊欄。

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

當(dāng)你用斜眼測試看這個(gè)網(wǎng)頁的時(shí)候，右邊的側(cè)邊欄全部消失，留下的就是一個(gè)很大的標(biāo)題和標(biāo)題下邊一整塊文字內(nèi)容。

這張作品的視覺方向是垂直方向，因?yàn)榫W(wǎng)頁一共就分了垂直的兩欄。背景不同的顏色創(chuàng)造了一個(gè)垂直的線條引導(dǎo)你往下看，并且還給了作品一個(gè)垂直的視覺主導(dǎo)方向。

創(chuàng)建數(shù)字媒體

當(dāng)加載到數(shù)字媒體的主頁，豐富的色彩以及恰到好處的動(dòng)畫，都為他們吸引了大量的注意力。即使你沒有看到它的動(dòng)畫，你也會(huì)覺得這個(gè)元素有很重的視覺重量，因?yàn)樗兄柡投群芨叩姆凵?、黃色和藍(lán)色。這些元素也占據(jù)相同的空間，它們創(chuàng)造出了一個(gè)密集區(qū)域在一片空白背景下。

這篇文章還在出版和寫作之間，創(chuàng)建數(shù)字媒體網(wǎng)站已經(jīng)關(guān)門了。想知道為什么，就看看下面的主頁吧。

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

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

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

賈維爾·瑪爾塔

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

·圖形

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

·綠色分割點(diǎn)

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

·菜單欄

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

對(duì)我來說，網(wǎng)站的logo也有一些視覺重量跟它旁邊的菜單欄相比，盡管沒有菜單欄那么顯眼，但也比正文板塊要重一點(diǎn)?？赡苣銜?huì)反對(duì)我，但這不重要。

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

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

斯坦福藝術(shù)

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

注意：這個(gè)網(wǎng)頁的圖片輪播在頂部，并且它隨時(shí)間的變化而變化。你可能不會(huì)看到特定的一張照片，當(dāng)你進(jìn)入這個(gè)網(wǎng)頁的時(shí)候。正因?yàn)槿绱恕Ｄ阍u(píng)估它的視覺重量可能和我在這評(píng)估的不一樣。三角形的照片可能是視覺重量第二重的了。之后就是大紅色塊的頁眉和頁腳了。

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

這個(gè)網(wǎng)頁的視覺方向也很有意思。以對(duì)角線方向?yàn)橹鲗?dǎo)，大多數(shù)網(wǎng)頁都不會(huì)用對(duì)角線作為主導(dǎo)視覺方向，它抓捕了更多的吸引力。它們顛覆了你的期望。

我截取下來的這個(gè)網(wǎng)頁有特殊的大圖并提供了一些對(duì)角線元素。盡管也有一些曲線。

在最右邊的圖片的女人和中心圖片的攝影師給了一個(gè)向右的視覺方向。也可以把女人的面部轉(zhuǎn)向內(nèi)部，將攝像機(jī)轉(zhuǎn)向左邊。

誠然，當(dāng)你鼠標(biāo)懸停在圖片上的時(shí)候它可能會(huì)發(fā)生改變。盡管如此，圖像往往會(huì)導(dǎo)致向外而不是向內(nèi)。

總結(jié)

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

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

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

在本文剩余部分中，我們將看到視覺重量和視覺方向是如何引導(dǎo)設(shè)計(jì)原則，像主導(dǎo)地位和結(jié)構(gòu)層次，流量和節(jié)奏，從而使作品平衡。