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

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

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

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

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

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

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

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

8、。所以說我們原本就對圓形的法向視覺力的方向就有著非常敏銳的判斷能力，只是我們一直(yzh)沒有當回事罷了。第15頁/共44頁第十五頁，共45頁。歸根到底我們引出這個視覺力，還是為了分析它的強弱和運用(ynyng)。所以，下面我們來看看，這個法相視覺力的強弱特點。第16頁/共44頁第十六頁，共45頁。依然(yrn)用眼睛來舉例，通過面部特征的比較，我們能夠感受到不同的表情中的眼睛，它們的法相視覺力給我們造成的感受是有強弱之分的。從上圖中你可以觀察到，圓形的邊界越是完整，眼睛黑色部分越接近完整圓形，法向視覺力就越強。邊界越不完整，越偏離完整的圓形，它的法向視覺力就越弱。第17頁/共44頁第十七頁，

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

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

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

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

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

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

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

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

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