產(chǎn)品設(shè)計(jì)中的視覺力學(xué)—圓實(shí)用教案

1、我們生活在一個(gè)三維的世界里。我們的視覺是如何來感知這個(gè)三維的世界的呢？所有(suyu)的物體和空間都是通過光作為媒介，反射到我們的視網(wǎng)膜上，再由視神經(jīng)把視網(wǎng)膜上所接收到的視覺信息傳送給大腦。然而視網(wǎng)膜它卻是一個(gè)面，一個(gè)球面，所有(suyu)的光都投影到了它的上面，再傳給大腦。這么說來，一切視覺信息都是先被視網(wǎng)膜平面化以后才被大腦接收的這么說來難道我們所看到的一切都是二維的嗎？這個(gè)你肯定不會(huì)同意。第1頁/共44頁第一頁，共45頁。因?yàn)槲覀冇袃蓚€(gè)眼球，能夠合成三維影像，而且眼球就像攝影機(jī)鏡頭(jngtu)，可以調(diào)節(jié)焦距，根據(jù)物體的遠(yuǎn)近進(jìn)行對(duì)焦。，根據(jù)模糊和清晰的不同，可以判斷遠(yuǎn)近。那如果假設(shè)沒有這

2、些，沒有焦距，沒有兩個(gè)眼球。我們所看到的畫面還是三維的嗎？第2頁/共44頁第二頁，共45頁。我們可以自己試一下，隨手打開一本書，由于書的紙張是一個(gè)平面，上面(shng min)印刷的內(nèi)容也都在這個(gè)平面上，所以眼球的焦距變化在這個(gè)面上作用不大。然后我們閉上一只眼睛，單獨(dú)一只眼睛觀察，這樣就撇開了我們所有的三維感知手段。結(jié)果如何呢？你會(huì)感覺到文字有一種漂浮在紙張表面的感覺。 黑色和白色的交界處，似乎在抖動(dòng).第3頁/共44頁第三頁，共45頁。我們的視網(wǎng)膜非常復(fù)雜，它本身也不是一個(gè)真實(shí)的平面，而是如同一張有著高高低低不同長度絨毛的地毯一般。它本身就是一個(gè)立體的構(gòu)造。我們看到的是三維世界，是通過視網(wǎng)膜的

3、二維轉(zhuǎn)換傳遞給大腦的，但這種二維轉(zhuǎn)換又并非絕對(duì)的。在看似二維的畫面中，卻存在著永恒不變的三維效果。這也就是我們這一章要講的主要內(nèi)容，二維圖形所產(chǎn)生的第三維視覺(shju)力。接下來我們來詳細(xì)解釋一下這個(gè)概念。第4頁/共44頁第四頁，共45頁。上圖中是一張白色底的背景中有兩個(gè)黑色的圓形。如之前所說，我們的視覺不能把黑色圓形和白色底面背景視為在同一平面上同時(shí)存在的。這個(gè)現(xiàn)象可以稱為(chn wi)圖底分離現(xiàn)象。第5頁/共44頁第五頁，共45頁。我們無法看到人臉和花瓶兩個(gè)內(nèi)容同時(shí)存在。我們把圖片看作人臉的時(shí)候，就看不到花瓶。把圖片看做花瓶的時(shí)候就看不到人臉。這也是因?yàn)榈囊曈X無法把它們看作是存在于同一

4、個(gè)平面的圖形。它也是圖底分離現(xiàn)象的一種表現(xiàn)，一個(gè)內(nèi)容要么是圖，要么是底，圖和底是存在于不同平面上的，不可能同時(shí)既是圖，又是底。圖底分離現(xiàn)象是視力發(fā)達(dá)(fd)的動(dòng)物的一種基本能力。如同我們非常熟悉的青蛙只能看到飛行的蒼蠅一樣。這種視覺畫面篩選能力是一種動(dòng)物的本能。這種能力也是我們要講的第三維視覺力的存在基礎(chǔ)。第6頁/共44頁第六頁，共45頁?？吹竭@個(gè)圖形，我們的視覺(shju)會(huì)認(rèn)為這兩個(gè)黑色圓形是獨(dú)立于白色底面的。要么它們是漂浮于底面之上，要么它們就是白色底面上的兩個(gè)洞。并且兩種可能性會(huì)爭相出現(xiàn)。第7頁/共44頁第七頁，共45頁。不過一般我們?cè)诜治鲆曈X力的時(shí)候偏向于把它看作是下面一種情況，也就

5、是被擊穿的兩個(gè)洞的情況。這樣我們的第三個(gè)維度的視覺力也就形成。如圖，我們之前討論的所有視覺力都是在一個(gè)平面上的，也就是在XY軸這個(gè)平面上，其中(qzhng)的視覺力也就是在這個(gè)平面上來回變化的。你一定不曾想過，一個(gè)二維的圖形竟然在第三個(gè)維度上也有一個(gè)視覺力，也就是Z軸上的力。第8頁/共44頁第八頁，共45頁。再如上圖中，子彈擊穿蘿卜的圖片。子彈在蘿卜上留下了一個(gè)近乎正圓的孔。我們把這個(gè)孔看作是一個(gè)平面上的圓形，那么(n me)這個(gè)圓形所具有的第三維度的視覺力就是子彈穿過的軌跡，也就是圖中Z軸方向的紅色箭頭。第9頁/共44頁第九頁，共45頁。所以(suy)當(dāng)你看到一個(gè)平面上的正圓的時(shí)候，對(duì)我們的

6、視覺來說，它產(chǎn)生了一個(gè)第三維度的，朝向我們的法向視覺力，也就是圖中右邊那個(gè)老頭手指的方向。今后我們都把這個(gè)圓形的第三維度的視覺力稱為法向視覺力。這里我們同時(shí)可以引入一個(gè)物理中的概念來加深印象。第10頁/共44頁第十頁，共45頁。在中學(xué)物理內(nèi)容中就有關(guān)于直導(dǎo)線通電(tng din)后所產(chǎn)生的電磁場的知識(shí)。我們講的二維圓形圖形的第三維度視覺力就與這個(gè)物理知識(shí)非常相似。上圖中的電磁場方向，也就是在這個(gè)平面上的一圈圈的圓形，而它產(chǎn)生的視覺力正是上圖中的電流方向。結(jié)合這個(gè)物理知識(shí)可以讓我們加深印象。第11頁/共44頁第十一頁，共45頁。第12頁/共44頁第十二頁，共45頁。第13頁/共44頁第十三頁，共

7、45頁。這種力量感和壓迫感正是平面(pngmin)圓形的法向視覺力的作用。第14頁/共44頁第十四頁，共45頁。其實(shí)圓形的這個(gè)法相視覺力我們并不陌生，因?yàn)槲覀兘?jīng)常和它打交道。舉個(gè)例子，比如你是觀察別人的眼睛，你判斷別人的眼睛在朝什么地方看。我們經(jīng)常會(huì)做順著別人的視線看過去的動(dòng)作，那么視線是個(gè)什么東西呢？我們又如何能做到順著他人的視線尋找方向呢？其實(shí)所謂視線雖然不存在，但我們確實(shí)能夠感覺到它。它就是我們瞳孔這個(gè)圓形的法向視覺力的方向。即使在比較遠(yuǎn)的地方，我們也可以判斷別人是否在看著自己。比較近的時(shí)候，我們甚至可以判斷對(duì)方在看著自己的什么位置，是看著自己的眼睛，還是看著自己的衣服，或者看著自己的鞋

8、。所以說我們?cè)揪蛯?duì)圓形的法向視覺力的方向就有著非常敏銳的判斷能力，只是我們一直(yzh)沒有當(dāng)回事罷了。第15頁/共44頁第十五頁，共45頁。歸根到底我們引出這個(gè)視覺力，還是為了分析它的強(qiáng)弱和運(yùn)用(ynyng)。所以，下面我們來看看，這個(gè)法相視覺力的強(qiáng)弱特點(diǎn)。第16頁/共44頁第十六頁，共45頁。依然(yrn)用眼睛來舉例，通過面部特征的比較，我們能夠感受到不同的表情中的眼睛，它們的法相視覺力給我們?cè)斐傻母惺苁怯袕?qiáng)弱之分的。從上圖中你可以觀察到，圓形的邊界越是完整，眼睛黑色部分越接近完整圓形，法向視覺力就越強(qiáng)。邊界越不完整，越偏離完整的圓形，它的法向視覺力就越弱。第17頁/共44頁第十七頁，

9、共45頁。第18頁/共44頁第十八頁，共45頁。第19頁/共44頁第十九頁，共45頁。而圓形法向視覺力的強(qiáng)弱才是我們真正需要運(yùn)用(ynyng)到產(chǎn)品設(shè)計(jì)中的重要特征。圓形元素被運(yùn)用(ynyng)在各種產(chǎn)品的設(shè)計(jì)中，控制好了它的法向視覺力，也就控制好了圓這個(gè)要素，讓我們一點(diǎn)點(diǎn)來了解這個(gè)看似簡單，卻又變幻莫測的圖形，最終能夠熟練的把它運(yùn)用(ynyng)起來。第20頁/共44頁第二十頁，共45頁。之前我們講過，圓是一個(gè)合力為零的圖形，你可能記得我特地用了暫且兩個(gè)字。進(jìn)入三維領(lǐng)域(ln y)我們就可以完整的來定義它的性質(zhì)了。圓，在二維平面中是一個(gè)合力為零的圖形。如圖。第21頁/共44頁第二十一頁，共4

10、5頁。也正因?yàn)樗诙S平面的各個(gè)方向受力大小相同，才形成了圓形的輪廓。但進(jìn)入了三維狀態(tài)，我們就不能使用這個(gè)(zh ge)暫且的結(jié)論了。因?yàn)樵谌S中它是具有很強(qiáng)的視覺合力的。如圖中。在它圓心的位置，是這個(gè)(zh ge)圖形的視覺力量的來源，是第三維空間上的視覺力來源。第22頁/共44頁第二十二頁，共45頁。這就如同我們經(jīng)?？吹降拈_水龍頭，水柱沖擊到水池底面形成的一個(gè)圓形水波(shu b)。當(dāng)水流在運(yùn)動(dòng)方向上遇到了一個(gè)阻擋的平面，它就會(huì)在這個(gè)平面上以圓形的方式擴(kuò)散開來。所以圓形從三維角度來看就不是一個(gè)合力為零的圖形了。第23頁/共44頁第二十三頁，共45頁。我們既然了解了它的視覺力的力量來源就是在

11、它的圓心區(qū)域的法向力量流體。我們就可以用切斷和阻擋它的法向力量流體的方式來抑制它的視覺力強(qiáng)度。也就是針對(duì)它的圓形區(qū)域進(jìn)行阻礙和壓制。這相當(dāng)于我們把一個(gè)頭猛獸關(guān)進(jìn)了籠子，它再也(zi y)無法興風(fēng)作浪。下面來看些例子?？纯磳?duì)圓心攻擊的方式方法。第24頁/共44頁第二十四頁，共45頁。上圖中的例子是一個(gè)非常常用的方式。這個(gè)產(chǎn)品雖然比較老了，但是它的形態(tài)(xngti)處理方式是很有代表性的。藍(lán)色的圓圈的視覺力我們已經(jīng)知道是一個(gè)法向的，源自于它的圓心附近的一個(gè)力量流體。而紅色的這個(gè)造型，正好是來抑制藍(lán)色圓圈的視覺力源頭的。它在圓圈的上方入侵了藍(lán)色圓圈的“領(lǐng)空”，直接蓋住了藍(lán)色圓圈圓心周圍的區(qū)域。有力的

12、切斷了藍(lán)色圓圈的視覺力源頭力量流體。這就好比在一個(gè)大炮的炮口上裝了一個(gè)阻礙炮彈發(fā)射的鐵板。第25頁/共44頁第二十五頁，共45頁。從立體角度觀察，紅色的形態(tài)是對(duì)藍(lán)色圓圈的上空的一種入侵，而從正視圖中看(zhngkn)，也就是一個(gè)圓形被另一個(gè)圖形入侵，并且一直入侵到了圓形的位置，好像被掐住了咽喉。這種方式其實(shí)在平面設(shè)計(jì)中也很常見，如圖中的平面設(shè)計(jì)。第26頁/共44頁第二十六頁，共45頁。第27頁/共44頁第二十七頁，共45頁?？梢姡@個(gè)方法的運(yùn)用還是不乏一些好例子的。不過我們需要擴(kuò)展一下這個(gè)方式，因?yàn)檎谏w，阻礙或是入侵圓心(yunxn)區(qū)域的方式變化可以有很多?？梢哉f它們都屬于同一個(gè)類型。請(qǐng)看圖

13、中的例子。第28頁/共44頁第二十八頁，共45頁。第29頁/共44頁第二十九頁，共45頁。如果這個(gè)方式被擴(kuò)展開來，它的例子就更加多了。各種對(duì)圓心區(qū)域(qy)周圍或者上方空間的覆蓋遮擋和入侵，來削弱圓心本身的法向視覺力。舉一反三自己創(chuàng)造出很多獨(dú)一無二的抑制圓形法向視覺力的方式方法，所謂萬變不離其宗。第30頁/共44頁第三十頁，共45頁。這里我們還要做一個(gè)對(duì)比，對(duì)圓形的法向視覺力的抑制和不抑制的效果，有多少的區(qū)別呢？我們以紅綠燈來作為比較(bjio)的對(duì)象。我們對(duì)正常的圓形紅燈做兩種遮擋圓心的處理，一種是單邊的，一種是貫穿整個(gè)圓形的。它們對(duì)圓的輪廓以及圓心的破壞依次加強(qiáng)。你是否能感覺到，與正常的紅

14、燈相比，經(jīng)過修改的紅燈給我們視覺上的壓迫感被減弱了，而且減弱的一個(gè)比一個(gè)厲害。紅燈的法向視覺力依次減弱。通過對(duì)比，我們就可以體會(huì)出明顯的區(qū)別第31頁/共44頁第三十一頁，共45頁。加強(qiáng)的方式講一下。因?yàn)榧訌?qiáng)的方法比較單一(dny)，那就是同心圓的重復(fù)。這應(yīng)該比較好理解，就是同一個(gè)類型的力不斷的疊加，視覺力就會(huì)越來越強(qiáng)大。如圖。當(dāng)一個(gè)圓的內(nèi)部，增加一個(gè)類似的同心圓形，它們的視覺力在同一個(gè)方向上，就會(huì)疊加，法向視覺力的合力就會(huì)很大，對(duì)視覺的沖擊力也會(huì)增大，壓迫感就會(huì)增強(qiáng)很多。第32頁/共44頁第三十二頁，共45頁。如果疊加更多的圓形，它們的法向視覺力的合力就更大了。我們可以明顯感覺到上圖右邊的圖形

15、(txng)具有更大的視覺力和壓迫感。這樣強(qiáng)的視覺力的表現(xiàn)，在產(chǎn)品中其實(shí)并不多見，因?yàn)闀?huì)給我們視覺造成不舒適的感覺。第33頁/共44頁第三十三頁，共45頁。但也有少數(shù)產(chǎn)品為了特別的突出威力，會(huì)嘗試這樣的方式。也有的時(shí)候因?yàn)橐曈X力局部不足，也采用(ciyng)這樣的形式。第34頁/共44頁第三十四頁，共45頁。第35頁/共44頁第三十五頁，共45頁。第36頁/共44頁第三十六頁，共45頁。以上這些圖大家可以找到同心的大圓套小圓的形式，感覺它們的效果。至于具體是否需要用這樣(zhyng)的形式，目前我們暫不討論，大家可以有自己的判斷。第37頁/共44頁第三十七頁，共45頁。然同樣是大圓套小圓，但如

16、果它們是不同心的話，那么它們的視覺力合力是沒有加強(qiáng)(jiqing)效果的，反而是一種相互的削弱。這如何理解呢？比如兩個(gè)水龍頭距離非常接近，它們同時(shí)開水，兩個(gè)非?？拷乃?，同時(shí)沖擊水池的底面。它們兩個(gè)水柱在水池底面形成的水波就會(huì)相互遭遇。因?yàn)橄嗷サ母蓴_，沒有辦法再形成完整的圓形水波。各自的法向視覺力都被削弱了。如下圖。第38頁/共44頁第三十八頁，共45頁。上圖中左邊的圖案的視覺力要弱于右邊完整圓形的視覺力。雖然是圓中圓的圖案，但一個(gè)不同心的小圓存在于內(nèi)部，基本屬于(shy)失控和搗亂的節(jié)奏。這種處理的方式也在不少產(chǎn)品中有運(yùn)用。第39頁/共44頁第三十九頁，共45頁。第40頁/共44頁第四十頁

17、，共45頁。第41頁/共44頁第四十一頁，共45頁。第42頁/共44頁第四十二頁，共45頁?？偨Y(jié)：講了這么多，我們依然無法逃避一個(gè)問題，那就是為什么要抑制圓形的法向視覺力。也許通過這么多的例子，你已經(jīng)感覺到，抑制圓形的法向視覺力給視覺上帶來的舒適性和溫和感，這可以說是原因的一部分，另一部分原因，其實(shí)我們之前的章節(jié)里就提到過，一個(gè)沒有任何約束的視覺力是會(huì)給視覺產(chǎn)生不適應(yīng)感的，是沒有生命特征的，沒有力量與之對(duì)抗的視覺力是不符合我們的視覺物理習(xí)慣的，也會(huì)給視覺造成強(qiáng)烈的壓迫感，當(dāng)然，這并不是說所有產(chǎn)品上的圓形要素都需要嚴(yán)肅的處理這個(gè)問題，有的設(shè)計(jì)就是要給人壓迫感的。當(dāng)你需要設(shè)計(jì)一個(gè)溫和的產(chǎn)品的時(shí)候，如果(rgu)你覺得溫和的程度不夠，那么就請(qǐng)留意產(chǎn)品上圓形的元素是否得到了充分的抑