精品主題,實(shí)戰(zhàn)科普,最新行業(yè)熱點(diǎn)話題,隨時掌握云上咨訊。
網(wǎng)頁上的每個元素都會通過發(fā)揮自身的視覺力量吸引觀者的眼球。而這種力量越大,吸引力也就越強(qiáng)。這些力量同時也能作用于其他元素,從而形成一種潛在的視覺運(yùn)動方向,引導(dǎo)觀者的閱讀。
我們把這種力量叫“視覺重量”,把我們所感知到的視覺力量方向,叫做視覺方向。理解這兩個概念對于作品中層級、流程、節(jié)奏和平衡的打造具有重要的意義。
注:本文是設(shè)計(jì)原則系列文章第四篇。本系列前三篇為:
1. 設(shè)計(jì)原則:視覺感知力及完全形態(tài)原則
2. 設(shè)計(jì)原則:空間與圖形背景關(guān)系
3. 設(shè)計(jì)原則:通過對比與相似聯(lián)系或分離元素
視覺重量
物理學(xué)的重量是對地心引力施加于物體上的力的度量,但是二維的物體(例如網(wǎng)頁上的元素)沒有質(zhì)量,所以也就沒有物理范疇的重量可言。視覺重量是對元素吸引人眼球力量的度量。二維的物體都能夠吸引人的注意力。一個元素吸引力越強(qiáng),其視覺重量也就越大。
在本系列的上一篇文章中,我談到了元素的原始特性或者叫固有特征,例如其尺寸、顏色和形狀等等。在文中,我還說到了如何通過這些特性來表現(xiàn)不同元素之間的對比與相似。
舉例來說,兩個元素一個很大一個很小就能形成鮮明的對比。
而通過組合這些不同的特性,我們就可以控制視覺重量。紅色比藍(lán)色更加吸引人,大的元素比小的元素更加吸引人,所以說,一個大的紅色物體所具有的視覺重量就要大于小的藍(lán)色物體。
那么這些特征或者說原始特性的集合,就決定了元素的視覺重量高低。要強(qiáng)調(diào)的是,決定元素視覺重量的不是單個特性,而是多個特性的組合。但不同的特性組合吸引人的力度也有不同。要打造具有不同視覺重量的元素,就需要結(jié)合不同的原始特性。
如何衡量視覺重量?
據(jù)我所知,精確衡量設(shè)計(jì)元素視覺重量的方法是不存在的。但你可以憑借經(jīng)驗(yàn)和判斷力來分辨哪些元素重量大,哪些重量小。所以你要培養(yǎng)并相信自己的眼力。一幅作品中最吸引眼球的區(qū)域就是視覺重量比較高的區(qū)域。還是那句話,要相信自己的眼力。
但這并不是說你可以隨便亂試然后用眼睛判斷什么吸引力最強(qiáng)什么吸引力不夠強(qiáng)。舉個例,你可以通過把每個不同特征分離開來判斷出比較大的東西重量要大于比較小的東西。與此同時,你的眼力可以幫助你區(qū)分不同特性組合的視覺重量。
不過好在已經(jīng)有高人把各種不同的特征進(jìn)行了分離和測試。下面是幾個元素特征以及其增減對視覺重量的影響說明。
首先我們來看上一篇文章中提到過的幾個原始特性:大小、顏色、色值、位置、材質(zhì)、形狀及朝向。
大小
比較大的元素相比小元素的視覺重量要高。
顏色
暖色能夠比較好的融入前景,比冷色重量高。冷色更傾向于融入背景。紅色是一般認(rèn)為是重量最大的顏色,黃色則為最輕。
色值
較暗的元素視覺重量較高。
位置
在作品中所處位置較高的元素重量要大于所處位置較低的元素。距離作品中心或核心區(qū)域越遠(yuǎn),元素的視覺重量也就越高。前景中的元素所具有的重量要高于背景元素。
材質(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)在興趣點(diǎn)
不同的物體有趣程度也不盡相同。元素越復(fù)雜、越繁復(fù)會讓人興趣越高,從而吸引眼球的能力也就越強(qiáng)。在這一方面,個人的興趣點(diǎn)也發(fā)揮著作用。比方說,你對汽車的興趣大于飛機(jī),那么汽車的圖片相比飛機(jī)就更能吸引你的注意力。
深度
較高的景深度能夠讓位于焦點(diǎn)的元素更具視覺重量,這一點(diǎn)有可能是焦點(diǎn)與非焦點(diǎn)區(qū)域之間的對比度造成的。
飽和度
飽和的顏色比不飽和顏色更重。
物理重量感覺
我們都知道房子的重量顯然大于鞋子的重量。那么,一所房子的圖片在視覺上也就自然比鞋子圖片更重,因?yàn)槲覀冃睦镏婪孔又亍?span lang="EN-US">
在本系列上一篇有關(guān)于對比與相似的文章中,我提到了對比度能夠提高元素的吸引力。換句話說,一個與周邊環(huán)境對比強(qiáng)烈的元素在視覺上就比環(huán)境元素的重量更高。舉個例吧,在網(wǎng)頁上,圓形一般比矩形看起來更重,因?yàn)榇蟛糠志W(wǎng)站元素都是矩形的。
當(dāng)然,并不是所有特征對視覺重量的影響程度都相同。大部分人對元素顏色的注意力要先于元素形狀,這也就說明顏色對視覺重量的貢獻(xiàn)較大。同時你還要考慮特定作品的獨(dú)特性,因?yàn)樾纬蓪Ρ鹊脑氐闹亓恳哂谟脕砼c之對比的元素。作品的獨(dú)特性將決定哪些東西能夠形成對比,哪些不能。
要牢記,視覺重量是上述各種屬性的組合。所以,盡管大的物體視覺重量高于小的物體,但一個周邊環(huán)繞大量留白空間、放置在頁面頂部的深色小圓形物體,其重量很可能會高于放置在頁面底部、形狀不規(guī)則的淺冷色大物體。
視覺重量與完全形態(tài)
本系列文章背后的一個重要目的就是指出完全形態(tài)原則對設(shè)計(jì)原則的貢獻(xiàn)度有多少。
圖形-背景
通過提高圖形相對背景的視覺重量,我們可以將這兩者進(jìn)行分離。
鄰近
不同元素之間的空間會形成不同的局部留白空間量和不同的空間內(nèi)物體密度。
相似與對比
我們可以從視覺重量的角度來對這兩者分別進(jìn)行定義。對比可以給形成對比的元素帶來較高的視覺重量。而視覺重量差不多的元素則會自然地表現(xiàn)出相似性。
焦點(diǎn)(本系列下一篇的主題)
一幅作品中的吸引點(diǎn)就是其焦點(diǎn),而焦點(diǎn)自然比其他元素更具視覺重量。
過往經(jīng)歷
觀看者的個人經(jīng)歷會作用于其腦中所認(rèn)為一個元素所具有的內(nèi)在興趣點(diǎn)。
視覺方向
如果說視覺重量的用途是將人的眼光吸引到特定的位置,那么視覺方向的目的就是將眼光引領(lǐng)到下一個位置。視覺方向就是指視覺力量的方向。你可以把它看作是你腦中想象的某個元素下一步的運(yùn)動方向。
在某種程度上說,視覺方向與視覺重量所起到的作用是類似的,它們都是為了把人的注意力吸引到作品的特定部分。但它們的區(qū)別在于,視覺重量就像是在高聲呼喊“看我!看我!”,而視覺方向則說的是“往這邊看!”
和視覺重量相同,你可以通過修改元素的特征來表現(xiàn)出不同的方向,不過在視覺方向這方面可操作的特征不如重量那么多。
元素形狀
不論元素形狀如何,其自身中都會存在一個軸線,而這個軸線則是指明方向的關(guān)鍵。元素的主軸線一般會被視為與元素的視覺方向平行。
元素位置
視覺重量是一股能夠吸引或排斥鄰近元素的力量。而這股力量能夠沿著連接兩個元素的方向 進(jìn)行移動。
元素主旨
箭頭、手指或凝視的眼睛都能夠指示特定的方向。
運(yùn)動
你可以讓元素在設(shè)計(jì)中運(yùn)動起來,而其運(yùn)動也就指明了方向。
結(jié)構(gòu)骨架
每個作品都有自己的骨架,骨架中存在沿著不同軸線流轉(zhuǎn)穿梭的力量。這一點(diǎn)可能還需要進(jìn)一步講解一下。
結(jié)構(gòu)骨架
在Rudolf Arnheim的書作《藝術(shù)與視覺感知:創(chuàng)意目光心理學(xué)》中,他提出了每幅作品背后都存在著一副骨架這一理念。
其觀點(diǎn)在于,每幅作品中都蘊(yùn)含著一套結(jié)構(gòu)化的力量網(wǎng)。即便作品中沒有任何元素,我們的目光也會被吸引到其中的某個部分,而原因就如下面這個力量網(wǎng)絡(luò)圖所示。
這個方形畫布的中心和四個角落就好像磁鐵一樣吸引人的目光。這里面磁性最強(qiáng)的位置在中心點(diǎn),但這里說的并不是畫布的幾何中心,而是光學(xué)中心,其位于真正幾何中心的上方。
畫布中的軸線從一個角落通往另一個角落,沿著軸線的點(diǎn)位于中心和角落之間中間的位置,其同樣能夠吸引人的注意力。如果將這些中間點(diǎn)用垂直及水平線連起來,就形成了有一套視覺力量軸線。
有關(guān)于這個理論,我們等到系列文章中有關(guān)創(chuàng)作流程的一篇再細(xì)講?,F(xiàn)在,我們可以考慮,在尚未加入設(shè)計(jì)的情況下,觀看者的目光會被吸引到Arnheim結(jié)構(gòu)骨架中的各個點(diǎn),并跟隨各個軸的方向從一個點(diǎn)移動到另一個點(diǎn)。
這樣一來,我們就可以根據(jù)這個結(jié)構(gòu)網(wǎng)把元素放置到能夠自然吸引目光的位置,從而增強(qiáng)元素的吸引力。
視覺方向與完全形態(tài)
你可以把方向看作是真實(shí)的或者是想象出來的從一個元素指向另一個元素,或者連接不同元素的線條。這些線條不一定要真的表現(xiàn)出來。
一致的連通性
連接各個元素的線條都有方向。目光的聚焦能夠在眼睛和其所關(guān)注的物體之間形成一條想象的線條。
連續(xù)性
這一原理可以聯(lián)系到沿直線或曲線排列的元素上,就好像這些元素會沿著直線或曲線方向運(yùn)動一般。
共同性
能夠看作具有共同性的元素通常是指沿著或者在想象中沿著同一方向運(yùn)動的元素。
平行
為了讓不同元素看似平行,就必須確立其內(nèi)在的軸線(也就是形成方向的軸線)。
作品的整體方向
有關(guān)視覺方向還有一個概念:每幅作品都會存在一個主要的方向,可以是水平、垂直或者對角線。
1. 水平方向能夠讓作品更加沉穩(wěn)、沉著。
2. 垂直方向作品則能夠帶來嚴(yán)謹(jǐn)、警醒和平衡感。
3. 對角線方向則能夠表現(xiàn)出運(yùn)動和動感。
通過大部分元素或者幾個關(guān)鍵元素的方向可以建立起整幅作品的主要方向。根據(jù)不同線條類型所具有的一般含義,方向有助于奠定作品的總體基調(diào)。
當(dāng)然,一幅作品也有可能沒有主要方向。比方說,水平和垂直元素的數(shù)量有可能是相同的。在這種情況下,觀看者就可以自己認(rèn)定主要方向是什么。