產(chǎn)品設(shè)計(jì)中的視覺(jué)力學(xué)(圓)

產(chǎn)品設(shè)計(jì)中的視覺(jué)力學(xué)—(圓)二維圖形所產(chǎn)生的三維視覺(jué)力本文檔共44頁(yè)；當(dāng)前第1頁(yè)；編輯于星期一\9點(diǎn)19分我們生活在一個(gè)三維的世界里。我們的視覺(jué)是如何來(lái)感知這個(gè)三維的世界的呢？所有的物體和空間都是通過(guò)光作為媒介，反射到我們的視網(wǎng)膜上，再由視神經(jīng)把視網(wǎng)膜上所接收到的視覺(jué)信息傳送給大腦。然而視網(wǎng)膜它卻是一個(gè)面，一個(gè)球面，所有的光都投影到了它的上面，再傳給大腦。這么說(shuō)來(lái)，一切視覺(jué)信息都是先被視網(wǎng)膜平面化以后才被大腦接收的這么說(shuō)來(lái)難道我們所看到的一切都是二維的嗎？這個(gè)你肯定不會(huì)同意。本文檔共44頁(yè)；當(dāng)前第2頁(yè)；編輯于星期一\9點(diǎn)19分因?yàn)槲覀冇袃蓚€(gè)眼球，能夠合成三維影像，而且眼球就像攝影機(jī)鏡頭，可以調(diào)節(jié)焦距，根據(jù)物體的遠(yuǎn)近進(jìn)行對(duì)焦。，根據(jù)模糊和清晰的不同，可以判斷遠(yuǎn)近。那如果假設(shè)沒(méi)有這些，沒(méi)有焦距，沒(méi)有兩個(gè)眼球。我們所看到的畫面還是三維的嗎？本文檔共44頁(yè)；當(dāng)前第3頁(yè)；編輯于星期一\9點(diǎn)19分我們可以自己試一下，隨手打開(kāi)一本書，由于書的紙張是一個(gè)平面，上面印刷的內(nèi)容也都在這個(gè)平面上，所以眼球的焦距變化在這個(gè)面上作用不大。然后我們閉上一只眼睛，單獨(dú)一只眼睛觀察，這樣就撇開(kāi)了我們所有的三維感知手段。結(jié)果如何呢？你會(huì)感覺(jué)到文字有一種漂浮在紙張表面的感覺(jué)。黑色和白色的交界處，似乎在抖動(dòng).本文檔共44頁(yè)；當(dāng)前第4頁(yè)；編輯于星期一\9點(diǎn)19分我們的視網(wǎng)膜非常復(fù)雜，它本身也不是一個(gè)真實(shí)的平面，而是如同一張有著高高低低不同長(zhǎng)度絨毛的地毯一般。它本身就是一個(gè)立體的構(gòu)造。我們看到的是三維世界，是通過(guò)視網(wǎng)膜的二維轉(zhuǎn)換傳遞給大腦的，但這種二維轉(zhuǎn)換又并非絕對(duì)的。在看似二維的畫面中，卻存在著永恒不變的三維效果。這也就是我們這一章要講的主要內(nèi)容，二維圖形所產(chǎn)生的第三維視覺(jué)力。接下來(lái)我們來(lái)詳細(xì)解釋一下這個(gè)概念。本文檔共44頁(yè)；當(dāng)前第5頁(yè)；編輯于星期一\9點(diǎn)19分上圖中是一張白色底的背景中有兩個(gè)黑色的圓形。如之前所說(shuō)，我們的視覺(jué)不能把黑色圓形和白色底面背景視為在同一平面上同時(shí)存在的。這個(gè)現(xiàn)象可以稱為圖底分離現(xiàn)象。本文檔共44頁(yè)；當(dāng)前第6頁(yè)；編輯于星期一\9點(diǎn)19分我們無(wú)法看到人臉和花瓶?jī)蓚€(gè)內(nèi)容同時(shí)存在。我們把圖片看作人臉的時(shí)候，就看不到花瓶。把圖片看做花瓶的時(shí)候就看不到人臉。這也是因?yàn)榈囊曈X(jué)無(wú)法把它們看作是存在于同一個(gè)平面的圖形。它也是圖底分離現(xiàn)象的一種表現(xiàn)，一個(gè)內(nèi)容要么是圖，要么是底，圖和底是存在于不同平面上的，不可能同時(shí)既是圖，又是底。圖底分離現(xiàn)象是視力發(fā)達(dá)的動(dòng)物的一種基本能力。如同我們非常熟悉的青蛙只能看到飛行的蒼蠅一樣。這種視覺(jué)畫面篩選能力是一種動(dòng)物的本能。這種能力也是我們要講的第三維視覺(jué)力的存在基礎(chǔ)。本文檔共44頁(yè)；當(dāng)前第7頁(yè)；編輯于星期一\9點(diǎn)19分看到這個(gè)圖形，我們的視覺(jué)會(huì)認(rèn)為這兩個(gè)黑色圓形是獨(dú)立于白色底面的。要么它們是漂浮于底面之上，要么它們就是白色底面上的兩個(gè)洞。并且兩種可能性會(huì)爭(zhēng)相出現(xiàn)。本文檔共44頁(yè)；當(dāng)前第8頁(yè)；編輯于星期一\9點(diǎn)19分不過(guò)一般我們?cè)诜治鲆曈X(jué)力的時(shí)候偏向于把它看作是下面一種情況，也就是被擊穿的兩個(gè)洞的情況。這樣我們的第三個(gè)維度的視覺(jué)力也就形成。如圖，我們之前討論的所有視覺(jué)力都是在一個(gè)平面上的，也就是在XY軸這個(gè)平面上，其中的視覺(jué)力也就是在這個(gè)平面上來(lái)回變化的。你一定不曾想過(guò)，一個(gè)二維的圖形竟然在第三個(gè)維度上也有一個(gè)視覺(jué)力，也就是Z軸上的力。本文檔共44頁(yè)；當(dāng)前第9頁(yè)；編輯于星期一\9點(diǎn)19分再如上圖中，子彈擊穿蘿卜的圖片。子彈在蘿卜上留下了一個(gè)近乎正圓的孔。我們把這個(gè)孔看作是一個(gè)平面上的圓形，那么這個(gè)圓形所具有的第三維度的視覺(jué)力就是子彈穿過(guò)的軌跡，也就是圖中Z軸方向的紅色箭頭。本文檔共44頁(yè)；當(dāng)前第10頁(yè)；編輯于星期一\9點(diǎn)19分所以當(dāng)你看到一個(gè)平面上的正圓的時(shí)候，對(duì)我們的視覺(jué)來(lái)說(shuō)，它產(chǎn)生了一個(gè)第三維度的，朝向我們的法向視覺(jué)力，也就是圖中右邊那個(gè)老頭手指的方向。今后我們都把這個(gè)圓形的第三維度的視覺(jué)力稱為法向視覺(jué)力。這里我們同時(shí)可以引入一個(gè)物理中的概念來(lái)加深印象。本文檔共44頁(yè)；當(dāng)前第11頁(yè)；編輯于星期一\9點(diǎn)19分在中學(xué)物理內(nèi)容中就有關(guān)于直導(dǎo)線通電后所產(chǎn)生的電磁場(chǎng)的知識(shí)。我們講的二維圓形圖形的第三維度視覺(jué)力就與這個(gè)物理知識(shí)非常相似。上圖中的電磁場(chǎng)方向，也就是在這個(gè)平面上的一圈圈的圓形，而它產(chǎn)生的視覺(jué)力正是上圖中的電流方向。結(jié)合這個(gè)物理知識(shí)可以讓我們加深印象。本文檔共44頁(yè)；當(dāng)前第12頁(yè)；編輯于星期一\9點(diǎn)19分本文檔共44頁(yè)；當(dāng)前第13頁(yè)；編輯于星期一\9點(diǎn)19分本文檔共44頁(yè)；當(dāng)前第14頁(yè)；編輯于星期一\9點(diǎn)19分這種力量感和壓迫感正是平面圓形的法向視覺(jué)力的作用。本文檔共44頁(yè)；當(dāng)前第15頁(yè)；編輯于星期一\9點(diǎn)19分其實(shí)圓形的這個(gè)法相視覺(jué)力我們并不陌生，因?yàn)槲覀兘?jīng)常和它打交道。舉個(gè)例子，比如你是觀察別人的眼睛，你判斷別人的眼睛在朝什么地方看。我們經(jīng)常會(huì)做順著別人的視線看過(guò)去的動(dòng)作，那么視線是個(gè)什么東西呢？我們又如何能做到順著他人的視線尋找方向呢？其實(shí)所謂視線雖然不存在，但我們確實(shí)能夠感覺(jué)到它。它就是我們瞳孔這個(gè)圓形的法向視覺(jué)力的方向。即使在比較遠(yuǎn)的地方，我們也可以判斷別人是否在看著自己。比較近的時(shí)候，我們甚至可以判斷對(duì)方在看著自己的什么位置，是看著自己的眼睛，還是看著自己的衣服，或者看著自己的鞋。所以說(shuō)我們?cè)揪蛯?duì)圓形的法向視覺(jué)力的方向就有著非常敏銳的判斷能力，只是我們一直沒(méi)有當(dāng)回事罷了。本文檔共44頁(yè)；當(dāng)前第16頁(yè)；編輯于星期一\9點(diǎn)19分歸根到底我們引出這個(gè)視覺(jué)力，還是為了分析它的強(qiáng)弱和運(yùn)用。所以，下面我們來(lái)看看，這個(gè)法相視覺(jué)力的強(qiáng)弱特點(diǎn)。本文檔共44頁(yè)；當(dāng)前第17頁(yè)；編輯于星期一\9點(diǎn)19分依然用眼睛來(lái)舉例，通過(guò)面部特征的比較，我們能夠感受到不同的表情中的眼睛，它們的法相視覺(jué)力給我們?cè)斐傻母惺苁怯袕?qiáng)弱之分的。從上圖中你可以觀察到，圓形的邊界越是完整，眼睛黑色部分越接近完整圓形，法向視覺(jué)力就越強(qiáng)。邊界越不完整，越偏離完整的圓形，它的法向視覺(jué)力就越弱。本文檔共44頁(yè)；當(dāng)前第18頁(yè)；編輯于星期一\9點(diǎn)19分本文檔共44頁(yè)；當(dāng)前第19頁(yè)；編輯于星期一\9點(diǎn)19分本文檔共44頁(yè)；當(dāng)前第20頁(yè)；編輯于星期一\9點(diǎn)19分而圓形法向視覺(jué)力的強(qiáng)弱才是我們真正需要運(yùn)用到產(chǎn)品設(shè)計(jì)中的重要特征。圓形元素被運(yùn)用在各種產(chǎn)品的設(shè)計(jì)中，控制好了它的法向視覺(jué)力，也就控制好了圓這個(gè)要素，讓我們一點(diǎn)點(diǎn)來(lái)了解這個(gè)看似簡(jiǎn)單，卻又變幻莫測(cè)的圖形，最終能夠熟練的把它運(yùn)用起來(lái)。本文檔共44頁(yè)；當(dāng)前第21頁(yè)；編輯于星期一\9點(diǎn)19分之前我們講過(guò)，圓是一個(gè)合力為零的圖形，你可能記得我特地用了暫且兩個(gè)字。進(jìn)入三維領(lǐng)域我們就可以完整的來(lái)定義它的性質(zhì)了。圓，在二維平面中是一個(gè)合力為零的圖形。如圖。本文檔共44頁(yè)；當(dāng)前第22頁(yè)；編輯于星期一\9點(diǎn)19分也正因?yàn)樗诙S平面的各個(gè)方向受力大小相同，才形成了圓形的輪廓。但進(jìn)入了三維狀態(tài)，我們就不能使用這個(gè)暫且的結(jié)論了。因?yàn)樵谌S中它是具有很強(qiáng)的視覺(jué)合力的。如圖中。在它圓心的位置，是這個(gè)圖形的視覺(jué)力量的來(lái)源，是第三維空間上的視覺(jué)力來(lái)源。本文檔共44頁(yè)；當(dāng)前第23頁(yè)；編輯于星期一\9點(diǎn)19分這就如同我們經(jīng)?？吹降拈_(kāi)水龍頭，水柱沖擊到水池底面形成的一個(gè)圓形水波。當(dāng)水流在運(yùn)動(dòng)方向上遇到了一個(gè)阻擋的平面，它就會(huì)在這個(gè)平面上以圓形的方式擴(kuò)散開(kāi)來(lái)。所以圓形從三維角度來(lái)看就不是一個(gè)合力為零的圖形了。本文檔共44頁(yè)；當(dāng)前第24頁(yè)；編輯于星期一\9點(diǎn)19分我們既然了解了它的視覺(jué)力的力量來(lái)源就是在它的圓心區(qū)域的法向力量流體。我們就可以用切斷和阻擋它的法向力量流體的方式來(lái)抑制它的視覺(jué)力強(qiáng)度。也就是針對(duì)它的圓形區(qū)域進(jìn)行阻礙和壓制。這相當(dāng)于我們把一個(gè)頭猛獸關(guān)進(jìn)了籠子，它再也無(wú)法興風(fēng)作浪。下面來(lái)看些例子?？纯磳?duì)圓心攻擊的方式方法。本文檔共44頁(yè)；當(dāng)前第25頁(yè)；編輯于星期一\9點(diǎn)19分上圖中的例子是一個(gè)非常常用的方式。這個(gè)產(chǎn)品雖然比較老了，但是它的形態(tài)處理方式是很有代表性的。藍(lán)色的圓圈的視覺(jué)力我們已經(jīng)知道是一個(gè)法向的，源自于它的圓心附近的一個(gè)力量流體。而紅色的這個(gè)造型，正好是來(lái)抑制藍(lán)色圓圈的視覺(jué)力源頭的。它在圓圈的上方入侵了藍(lán)色圓圈的“領(lǐng)空”，直接蓋住了藍(lán)色圓圈圓心周圍的區(qū)域。有力的切斷了藍(lán)色圓圈的視覺(jué)力源頭力量流體。這就好比在一個(gè)大炮的炮口上裝了一個(gè)阻礙炮彈發(fā)射的鐵板。本文檔共44頁(yè)；當(dāng)前第26頁(yè)；編輯于星期一\9點(diǎn)19分從立體角度觀察，紅色的形態(tài)是對(duì)藍(lán)色圓圈的上空的一種入侵，而從正視圖中看，也就是一個(gè)圓形被另一個(gè)圖形入侵，并且一直入侵到了圓形的位置，好像被掐住了咽喉。這種方式其實(shí)在平面設(shè)計(jì)中也很常見(jiàn)，如圖中的平面設(shè)計(jì)。本文檔共44頁(yè)；當(dāng)前第27頁(yè)；編輯于星期一\9點(diǎn)19分本文檔共44頁(yè)；當(dāng)前第28頁(yè)；編輯于星期一\9點(diǎn)19分可見(jiàn)，這個(gè)方法的運(yùn)用還是不乏一些好例子的。不過(guò)我們需要擴(kuò)展一下這個(gè)方式，因?yàn)檎谏w，阻礙或是入侵圓心區(qū)域的方式變化可以有很多。可以說(shuō)它們都屬于同一個(gè)類型。請(qǐng)看圖中的例子。本文檔共44頁(yè)；當(dāng)前第29頁(yè)；編輯于星期一\9點(diǎn)19分本文檔共44頁(yè)；當(dāng)前第30頁(yè)；編輯于星期一\9點(diǎn)19分如果這個(gè)方式被擴(kuò)展開(kāi)來(lái)，它的例子就更加多了。各種對(duì)圓心區(qū)域周圍或者上方空間的覆蓋遮擋和入侵，來(lái)削弱圓心本身的法向視覺(jué)力。舉一反三自己創(chuàng)造出很多獨(dú)一無(wú)二的抑制圓形法向視覺(jué)力的方式方法，所謂萬(wàn)變不離其宗。本文檔共44頁(yè)；當(dāng)前第31頁(yè)；編輯于星期一\9點(diǎn)19分這里我們還要做一個(gè)對(duì)比，對(duì)圓形的法向視覺(jué)力的抑制和不抑制的效果，有多少的區(qū)別呢？我們以紅綠燈來(lái)作為比較的對(duì)象。我們對(duì)正常的圓形紅燈做兩種遮擋圓心的處理，一種是單邊的，一種是貫穿整個(gè)圓形的。它們對(duì)圓的輪廓以及圓心的破壞依次加強(qiáng)。你是否能感覺(jué)到，與正常的紅燈相比，經(jīng)過(guò)修改的紅燈給我們視覺(jué)上的壓迫感被減弱了，而且減弱的一個(gè)比一個(gè)厲害。紅燈的法向視覺(jué)力依次減弱。通過(guò)對(duì)比，我們就可以體會(huì)出明顯的區(qū)別本文檔共44頁(yè)；當(dāng)前第32頁(yè)；編輯于星期一\9點(diǎn)19分加強(qiáng)的方式講一下。因?yàn)榧訌?qiáng)的方法比較單一，那就是同心圓的重復(fù)。這應(yīng)該比較好理解，就是同一個(gè)類型的力不斷的疊加，視覺(jué)力就會(huì)越來(lái)越強(qiáng)大。如圖。當(dāng)一個(gè)圓的內(nèi)部，增加一個(gè)類似的同心圓形，它們的視覺(jué)力在同一個(gè)方向上，就會(huì)疊加，法向視覺(jué)力的合力就會(huì)很大，對(duì)視覺(jué)的沖擊力也會(huì)增大，壓迫感就會(huì)增強(qiáng)很多。本文檔共44頁(yè)；當(dāng)前第33頁(yè)；編輯于星期一\9點(diǎn)19分如果疊加更多的圓形，它們的法向視覺(jué)力的合力就更大了。我們可以明顯感覺(jué)到上圖右邊的圖形具有更大的視覺(jué)力和壓迫感。這樣強(qiáng)的視覺(jué)力的表現(xiàn)，在產(chǎn)品中其實(shí)并不多見(jiàn)，因?yàn)闀?huì)給我們視覺(jué)造成不舒適的感覺(jué)。本文檔共44頁(yè)；當(dāng)前第34頁(yè)；編輯于星期一\9點(diǎn)19分但也有少數(shù)產(chǎn)品為了特別的突出威力，會(huì)嘗試這樣的方式。也有的時(shí)候因?yàn)橐曈X(jué)力局部不足，也采用這樣的形式。本文檔共44頁(yè)；當(dāng)前第35頁(yè)；編輯于星期一\9點(diǎn)19分本文檔共44頁(yè)；當(dāng)前第36頁(yè)；編輯于星期一\9點(diǎn)19分本文檔共44頁(yè)；當(dāng)前第37頁(yè)；編輯于星期一\9點(diǎn)19分以上這些圖大家可以找到同心的大圓套小圓的形式，感覺(jué)它們的效果。至于具體是否需要用這樣的形式，目前我們暫不討論，大家可以有自己的判斷。本文檔共44頁(yè)；當(dāng)前第38頁(yè)；編輯于星期一\9點(diǎn)19分然同樣是大圓套小圓，但如果它們是不同心的話，那么它們的視覺(jué)力合力是沒(méi)有加強(qiáng)效果的，反而是一種相互的削弱。這如何理解呢？比如兩個(gè)水龍頭距離非常接近，它們同時(shí)開(kāi)水，兩個(gè)非?？拷乃?，同時(shí)沖擊水池的底面。它們兩個(gè)水柱在水池底面形成的水波就會(huì)相互遭遇。因?yàn)橄嗷サ母蓴_，沒(méi)有辦法再形成完整的圓形水波。各自的法向視覺(jué)力都被削弱了。如下圖。本文檔共44頁(yè)；當(dāng)前第39頁(yè)；編輯于星期一\9點(diǎn)19分上圖中左邊的圖案的視覺(jué)力要弱于右邊完整圓形的視覺(jué)力。雖然是圓中圓的圖案，但一個(gè)不同心的小圓存在于內(nèi)部，基本屬于失控和搗亂的節(jié)奏。這種處理的方式也在不少產(chǎn)品中有運(yùn)用。本文檔共44頁(yè)；當(dāng)前第40頁(yè)；編輯于星期一\9點(diǎn)19分本文檔共44頁(yè)；當(dāng)前第41頁(yè)；編輯于星期一\9點(diǎn)19分本文檔共44頁(yè)；當(dāng)前第42頁(yè)；編輯于星期一\9點(diǎn)19分本文檔共44頁(yè)；當(dāng)前第43頁(yè)；編輯于星期一\9點(diǎn)19分總結(jié)：講了這么多，我們依然無(wú)法逃避一個(gè)問(wèn)題，那就是為什么要抑制圓形的法向視覺(jué)力。也許通過(guò)這么多的例子，