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

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

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

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

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

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

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

視覺重量

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

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

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

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

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

如何衡量視覺重量?

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

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

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

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

尺寸

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

顏色

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

色值

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

位置

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

紋理

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

形狀

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

方向

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

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

密度

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

留白

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

內(nèi)在的興趣點

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

深度

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

飽和度

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

感知物理重量

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

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

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

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

視覺重量和格式塔原則

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

·圖形背景

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

·距離

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

·相似和對比

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

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

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

·過去的經(jīng)驗

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

視覺方向

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

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

·元素的形狀

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

·元素的位置

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

·特定元素

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

·元素移動

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

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

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

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

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

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

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

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

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

視覺的方向和格式塔

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

·統(tǒng)一連通

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

·連續(xù)

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

·共同命運

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

·并行

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

作品的總體方向

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

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

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

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

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

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

例子

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

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

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

信息局

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

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

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

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

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

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

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

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

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

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

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

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

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

賈維爾·瑪爾塔

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

·圖形

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

·綠色分割點

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

·菜單欄

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

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

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

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

斯坦福藝術(shù)

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

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

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

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

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

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

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

總結(jié)

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

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

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

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