為了更快地解析周圍的世界，大腦會(huì)投機(jī)取巧地偷懶。大腦每秒要接收約4000萬(wàn)次的感官信息輸入，并試圖完全解析出它們的意義，所以它會(huì)根據(jù)以往的經(jīng)驗(yàn)，猜測(cè)我們看見(jiàn)了什么。 

經(jīng)典再現(xiàn)，看左邊的圖，第一眼能看到一個(gè)黑邊三角形，上面疊了一個(gè)白色倒三角，右邊的圖，你能明顯感知到一個(gè)矩形。

卡尼薩三角

這是1955年，由意大利心理學(xué)家發(fā)現(xiàn)，并以她名字命名的“卡尼薩三角”。這個(gè)視錯(cuò)覺(jué)表明我們的大腦把實(shí)際上不存在的三角形輪廓線畫(huà)了出來(lái)。

我們把根本不存在的輪廓線稱為主觀輪廓。

對(duì)于識(shí)別具體物體來(lái)說(shuō)，中央視覺(jué)是最重要的；

對(duì)于認(rèn)知整體場(chǎng)景而言，周邊視覺(jué)更為關(guān)鍵 ；

通過(guò)電腦屏幕觀看網(wǎng)頁(yè)，你并不用刻意瀏覽，而是整體掃過(guò)就能判斷整個(gè)頁(yè)面的內(nèi)容。所以大多數(shù)人都低估了周邊視覺(jué)對(duì)于我們理解事物的重要性，人對(duì)場(chǎng)景的認(rèn)知似乎都來(lái)自周邊視覺(jué)。

發(fā)現(xiàn)規(guī)律有助于快速處理時(shí)刻接收的感官信息。

看上面的圖，你會(huì)很自然的將其分成4組，每?jī)蓚€(gè)點(diǎn)一組，共8個(gè)點(diǎn)，而不是上來(lái)就直接定義有8個(gè)點(diǎn)。

大腦視覺(jué)皮質(zhì)中的細(xì)胞分工不同，分別只對(duì)橫線、豎線、邊線和特定角度的線作出反應(yīng)。  

講完上述三個(gè)心理學(xué)常識(shí)，我們看下這三個(gè)點(diǎn)對(duì)應(yīng)到我們?cè)O(shè)計(jì)當(dāng)中又是如何一番情景，看下圖：

輪廓

之所以將第一個(gè)心理學(xué)觀點(diǎn)與輪廓關(guān)聯(lián)，是因?yàn)樵谖覀冊(cè)O(shè)計(jì)過(guò)程中任何一個(gè)形式的產(chǎn)生都會(huì)形成一個(gè)輪廓，那畫(huà)面元素多起來(lái)之后，畫(huà)面就會(huì)被這些輪廓分割成一個(gè)負(fù)向空間，很多時(shí)候我們都會(huì)忽視這個(gè)隱藏存在的形式，有時(shí)大家怎么調(diào)整一個(gè)設(shè)計(jì)元素本身，都會(huì)感覺(jué)不盡如人意，其實(shí)有一種可能是：這個(gè)元素在整個(gè)畫(huà)面中所形成的輪廓并沒(méi)有達(dá)到同步的和諧；

如下圖插畫(huà)，一個(gè)女性形象，畫(huà)風(fēng)簡(jiǎn)潔干凈，畫(huà)面給人很強(qiáng)的整體感與完整型。如果是我們，會(huì)不會(huì)更多的去關(guān)注這個(gè)插畫(huà)的精彩之處是比基尼處理很生動(dòng)，人物陰影細(xì)節(jié)刻畫(huà)的很到位？但是關(guān)鍵點(diǎn)是這些嗎？

繼續(xù)分析，如下圖：

圖A，把整個(gè)圖形黑白化后，想想我們的第一個(gè)心理學(xué)觀點(diǎn)，一幅畫(huà)面第一影響我們的是腦海里形成的這個(gè)輪廓。像這個(gè)畫(huà)面，一個(gè)完整近似幾何般的人物輪廓（樣圖白色部分），同時(shí)這個(gè)輪廓所分割形成的空間（樣圖黑色部分），讓整個(gè)畫(huà)面安靜有序規(guī)則，讓人的視線能夠自然流淌，不會(huì)輕易地跳動(dòng)轉(zhuǎn)換；所以圖B，你會(huì)發(fā)覺(jué)，不管我如何填充紋理圖片，這樣一個(gè)畫(huà)面是始終和諧，沒(méi)有違和感的。再比較下圖：

筆者隨機(jī)處理的一個(gè)形狀，有沒(méi)有發(fā)覺(jué)，在沒(méi)有一個(gè)有序優(yōu)美的輪廓之下，縱然你把內(nèi)部的修飾刻畫(huà)的再如何精彩，這個(gè)畫(huà)面依然是索然無(wú)味，毫無(wú)生氣的。

設(shè)計(jì)元素要注重輪廓的修飾提煉——在設(shè)計(jì)表達(dá)過(guò)程中，不管是何種設(shè)計(jì)，我們都要注重每個(gè)呈現(xiàn)元素的輪廓是否精巧，注意腦海里主觀輪廓之外的負(fù)空間是否舒服與和諧，畫(huà)面是通過(guò)這些彼此聯(lián)系的，不要一上來(lái)就關(guān)注所謂的細(xì)節(jié)，經(jīng)營(yíng)你的形狀。

留白

第二個(gè)心理學(xué)觀點(diǎn)與留白相關(guān)，是因?yàn)檎w認(rèn)知與周邊視覺(jué)關(guān)聯(lián)極大，看下圖：

好了，大家能夠認(rèn)知到什么程度，這是什么？怕是大家怎么猜都不會(huì)確定這個(gè)是什么。

當(dāng)筆者呈現(xiàn)完整圖畫(huà)后，大家是不是一下子就豁然開(kāi)朗了。留白是至關(guān)重要的，留白很重要的一點(diǎn)是加強(qiáng)了元素與元素之間的關(guān)系，我們通過(guò)創(chuàng)建輪廓來(lái)形成元素，元素與元素之間的關(guān)系，通過(guò)留白-元素之間形成的負(fù)空間，來(lái)相互影響，最終形成協(xié)調(diào)的畫(huà)面。留白可以形成空間，引導(dǎo)，形狀等多種可能，讓作品更生動(dòng)更有呼吸。

看上圖，蘋(píng)果設(shè)計(jì)對(duì)留白的使用很了，通過(guò)產(chǎn)品嚴(yán)謹(jǐn)?shù)呐挪迹蠹铱梢院芮逦母惺艿轿矬w分割畫(huà)面后，留白的清晰走向以及秩序，你的視線會(huì)通過(guò)大腦的分析呈現(xiàn)出無(wú)限擴(kuò)展的空間，安靜空靈不干擾，更能彰顯蘋(píng)果設(shè)備本身的高端屬性。再簡(jiǎn)單一點(diǎn)解釋，通過(guò)弱化周邊視覺(jué)的干擾，讓人更多的聚焦中央視覺(jué)，讓你對(duì)產(chǎn)品的感知更加深刻。這時(shí)候留白是空間，烘托畫(huà)面，安靜的美少女。

看上述網(wǎng)頁(yè)設(shè)計(jì)作品，畫(huà)面通過(guò)主視覺(jué)形成的輪廓之后，呈現(xiàn)出大面積的留白空間，在這些空間基礎(chǔ)上，進(jìn)行了核心信息的展示。注意左圖黑色主輪廓的部分并沒(méi)有信息呈現(xiàn)（集中展示了品牌形象氣息），而在留白部分展示了文字信息加以說(shuō)明；右圖部分則在折線這條主輪廓型的兩側(cè)，有序展示了信息。這樣的設(shè)計(jì)，在網(wǎng)頁(yè)滑屏過(guò)程中，增加了畫(huà)面的動(dòng)感效果，更重要的一點(diǎn)是在引導(dǎo)視線過(guò)程中，你會(huì)更關(guān)注內(nèi)容的信息呈現(xiàn)，想想我們的視覺(jué)，對(duì)于認(rèn)知整體場(chǎng)景而言，周邊視覺(jué)更為關(guān)鍵；因?yàn)槟銜?huì)很不經(jīng)意的在意留在中央視覺(jué)（在設(shè)計(jì)中就是刻意設(shè)計(jì)引導(dǎo)你視覺(jué)的主輪廓）之外的東西，這時(shí)候留白是引導(dǎo)，展示信息，完美的指揮家。

再看這組作品，理解這組留白相對(duì)比較復(fù)雜，注意筆者圖示位置的留白，很多時(shí)候，我們都習(xí)慣把畫(huà)滿一個(gè)畫(huà)面當(dāng)作第一要?jiǎng)?wù)，填滿是可以保證我們看到的畫(huà)面至少是飽滿不空的，但是往往適得其反就是亂和沒(méi)有靈氣，所以一些設(shè)計(jì)作品試圖去突破一些視覺(jué)固式，那這時(shí)候留白就是一個(gè)極好的幫手，無(wú)形中啟到一個(gè)形狀的作用，補(bǔ)充畫(huà)面達(dá)到畫(huà)面的和諧統(tǒng)一，又增加韻味。像左圖就是通過(guò)一個(gè)紅色面積的模塊留白，與標(biāo)題呼應(yīng)的同時(shí)，讓畫(huà)面方圓能夠更自然的流淌，增強(qiáng)畫(huà)面的靈動(dòng)感，右圖則通過(guò)添加元素，讓留白區(qū)域形成某種場(chǎng)景或者縱深，這樣就對(duì)文字形成了一種補(bǔ)充，烘托文字的效果，增強(qiáng)感受，兩者看似有明顯空白，但是整體又是完整的?？聪聢D，其實(shí)這又牽扯到我們第一個(gè)講到的心理學(xué)：眼見(jiàn)非腦見(jiàn)，我們的大腦會(huì)自動(dòng)去找尋某種輪廓。而這里輪廓的形成是通過(guò)留白去幫助實(shí)現(xiàn)的。這時(shí)候，留白是形狀，參與構(gòu)成，積極的組織者。

留白，是形式的延展...空間，引導(dǎo)，形狀——元素在構(gòu)成畫(huà)面中一定會(huì)產(chǎn)生留白，留白對(duì)畫(huà)面的意義在于可以幫助我們更好的展示內(nèi)容，幫助我們營(yíng)造空間，創(chuàng)造聯(lián)系，配合形式，讓畫(huà)面更加有序有感。

構(gòu)成

講到構(gòu)成，這個(gè)名詞大家都不陌生：一定的形態(tài)元素，按照視覺(jué)規(guī)律、力學(xué)原理、心理特性、審美法則進(jìn)行的創(chuàng)造性的組合。很顯然跟我們的心理學(xué)原理三不謀而合，人是習(xí)慣尋找規(guī)律，也很習(xí)慣創(chuàng)造規(guī)律，所以在設(shè)計(jì)領(lǐng)域，才有了對(duì)點(diǎn)，線，面等不斷的研究與實(shí)踐，在抽象的形、色、質(zhì)的造型方法上不斷追求與探索。

看上圖，這是一張展覽海報(bào)，海報(bào)簡(jiǎn)潔干凈，穩(wěn)重大氣，沒(méi)有太多筆墨渲染，背景圖的選擇，以靜制動(dòng)，讓整個(gè)海報(bào)有種高山流水，知音無(wú)限的濃郁氣息。先想下我們之前的說(shuō)明：大腦視覺(jué)皮質(zhì)中的細(xì)胞分工不同，分別只對(duì)橫線、豎線、邊線和特定角度的線作出反應(yīng)。再結(jié)合下點(diǎn)線面構(gòu)成的知識(shí)。首先畫(huà)面三個(gè)大字，這是點(diǎn)，然后由上到下一個(gè)“之”字形排開(kāi)，斜線至此形成，你的第一視感規(guī)律完結(jié)，接下來(lái)注意畫(huà)面背景圖的選擇，瀑布從上而下，這個(gè)水流的動(dòng)勢(shì)極大得幫助和引導(dǎo)了我們的視線閱讀，豎線至此形。畫(huà)面感就形成了，你會(huì)很自然舒服的去閱讀這個(gè)海報(bào)。

但是就此就結(jié)束了，視線總體流動(dòng)是這樣的，為什么設(shè)計(jì)師要把字放到畫(huà)面這個(gè)位置，而不是其他位置呢？想想剛剛說(shuō)的規(guī)律，人喜歡規(guī)律，創(chuàng)造找尋規(guī)律，并以此為根據(jù)去實(shí)踐，這里就牽扯出了大自然里最神奇的定律黃金分割（今天的文章暫時(shí)不講，之后我會(huì)帶來(lái)關(guān)于黃金分割的文章分享哦），繼續(xù)看下圖，

首先，A1，A2這是畫(huà)面橫向?qū)挾壬蟽蓷l黃金風(fēng)格線，B1，B2，B3這是畫(huà)面縱向按順序的三條黃金風(fēng)格線，當(dāng)畫(huà)出這幾條黃金分割線，是不是一目了然，海報(bào)作者把核心元素有序安排在黃金風(fēng)格線及焦點(diǎn)之上，和諧之美，一張看似簡(jiǎn)單的海報(bào)蘊(yùn)藏著如此豐富的魅力，我們也可以感悟到設(shè)計(jì)師本身嚴(yán)謹(jǐn)?shù)臍庀⒑蛯?duì)構(gòu)成形式的細(xì)心推敲。如果是我們，又會(huì)是怎樣的呢？

再看上圖，大家可以自行按照上述的方式去分析一下。下圖海報(bào)可能更復(fù)雜些，但是其中的規(guī)律也是可以尋找的，畫(huà)面通過(guò)兩組不同斜面創(chuàng)造大的規(guī)律動(dòng)勢(shì)（右圖黑紅示意），同時(shí)巧妙的利用交叉后形成的三角形，形成點(diǎn)的元素，作為人物畫(huà)像的載體之用，因而三角形是從整體上而來(lái)，有序而有組織，相互有關(guān)系，不會(huì)顯得亂。

更令人驚奇的是，當(dāng)我也使用黃金分割試圖去進(jìn)一步分析和理解畫(huà)面的時(shí)候，你會(huì)發(fā)現(xiàn)人物的面部表情—眼神，全在分割線上，所以有沒(méi)有覺(jué)得，這個(gè)海報(bào)的每個(gè)人都感覺(jué)實(shí)在你在對(duì)視，莫名的一種震撼，畫(huà)面的張力，不得不佩服國(guó)外設(shè)計(jì)師的嚴(yán)謹(jǐn)。

合理使用點(diǎn)線面，引導(dǎo)組織畫(huà)面——優(yōu)秀的畫(huà)面從來(lái)不是無(wú)組織無(wú)秩序的，都是通過(guò)點(diǎn)線面的仔細(xì)經(jīng)營(yíng)來(lái)創(chuàng)造最佳的視覺(jué)效果，而這個(gè)視覺(jué)效果，是能夠自發(fā)的去引導(dǎo)觀眾的視線，讓規(guī)律自然被閱讀，達(dá)到形神合一。

今天通過(guò)三個(gè)心理學(xué)，引出設(shè)計(jì)中三個(gè)設(shè)計(jì)要點(diǎn)輪廓，留白，構(gòu)成，其實(shí)彼此之間是一個(gè)遞進(jìn)聯(lián)系，有了元素就會(huì)產(chǎn)生形狀，躍然紙上，則需要足夠的留白去為元素講故事，然后這個(gè)故事就是構(gòu)成，你使用如何的手段，讓他更豐富更有內(nèi)涵，一目了然。三者的有機(jī)結(jié)合就形成了我們所說(shuō)的構(gòu)圖，視覺(jué)語(yǔ)言中構(gòu)圖是非常重要的底層環(huán)節(jié)，相比華麗的細(xì)節(jié)和各種炫目的效果，畫(huà)面中隱藏的構(gòu)圖實(shí)際上才是視覺(jué)設(shè)計(jì)的核心！

看一下這些電影場(chǎng)景，是不是恍然大悟，看似復(fù)雜的場(chǎng)景，都建立在這些幾何圖形的基礎(chǔ)骨架之上，回憶下文章之初的心理學(xué)觀點(diǎn)，其實(shí)設(shè)計(jì)知識(shí)背后是人類讀取信息幾千年來(lái)形成的習(xí)慣以及現(xiàn)代社會(huì)約定俗成的閱讀方式和心理學(xué)等，要想成為一個(gè)優(yōu)秀的設(shè)計(jì)師，我們需要進(jìn)一步地了解設(shè)計(jì)背后的原理以及表達(dá)信息的多種方法，就像研究表明，人類能識(shí)別 24 種基本形體，這些基礎(chǔ)形狀稱為幾何離子（方形，圓形，三角形，圓柱體，圓錐體等），這就落回到我們講到的心理學(xué)：我們眼睛能夠?qū)ふ业囊?guī)律，而上圖的電影畫(huà)面也都構(gòu)建在此基礎(chǔ)之上，因?yàn)檫@樣的形式更容易讓我們的視覺(jué)去捕捉去理解。

講了這么多，就是希望能夠幫助大家在平時(shí)的設(shè)計(jì)工作和日常的學(xué)習(xí)積累過(guò)程中，能夠有一種思路和方法，去判斷和解讀作品，去分析這個(gè)設(shè)計(jì)為什么好，好在哪里，去把設(shè)計(jì)進(jìn)行有效的分解（元素本身的樣式，元素所在空間的留白，以及彼此之間的關(guān)聯(lián)）給你自己的設(shè)計(jì)說(shuō)明增加籌碼，以便更加得擲地有聲。

最后，既然我們知道了這些心理學(xué)知識(shí)，了解到了我們的觀察習(xí)慣，在之后的設(shè)計(jì)過(guò)程中我們就需要努力做到以下幾點(diǎn)：

1.  經(jīng)營(yíng)好元素的輪廓和位置；

2.  人會(huì)不由自主地尋找規(guī)律，那就盡量多使用規(guī)律，利用分組和間隔創(chuàng)造規(guī)律；

3.  要讓某個(gè)物體(例如圖標(biāo))易于識(shí)別，就用簡(jiǎn)單的幾何圖形來(lái)畫(huà)它。這會(huì)讓構(gòu)成物體的幾何離子更明顯，從而使人更快、更輕松地識(shí)別該物體；

4.  控制好你的形式，形式在內(nèi)容之下，形式服務(wù)內(nèi)容。文繁則質(zhì)衰，末勝則本虧，過(guò)分強(qiáng)調(diào)文飾與修辭，內(nèi)容就會(huì)受到遮蔽而顯得軟弱無(wú)力，形式重于內(nèi)容，其實(shí)就是舍本逐末。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。