平面與版式背後是千年(nián)來人(rén)類讀取信息形成的習慣、約定俗成的閱讀方式和(hé)心理學等，想成為(wèi)一(yī)個優秀的設計師(shī)，我們需要(yào)進一(yī)步了(le)解設計背後的原理以及表達信息的多種方法。
在中國(guó)繪畫(huà)中，有所謂的章(zhāng)法、布局。中國(guó)繪畫(huà)最講究「經營位置」，因而有了(le)中國(guó)畫(huà)高遠、深遠、平遠獨特意境的畫(huà)風(fēng)體系。大家學習的設計體系中對構圖的分析就更加的全面，比如(rú)大家都(dōu)了(le)解的形式美學法則：均衡與對稱、漸次與重複、對比與調和(hé)、比例與尺度、節奏與韻律、陪體與主體、微(wēi)差與統調、特異與秩序、前者多顯示生動型，而後者顯示秩序型。
那(nà)為(wèi)什麽會總結出這(zhè)些理論與法則？究竟又是什麽在影響着我們的觀察與思考呢？有時(shí)候我們可(kě)能(néng)會遇到這(zhè)些問(wèn)題：
接下(xià)來我們透過視(shì)覺表象，揭開(kāi)那(nà)些神秘的面紗，希望通(tōng)過我自(zì)己的學習和(hé)研究，能(néng)夠對大家有所幫助。
為(wèi)了(le)更快(kuài)地(dì)解析周圍的世界，大腦會投機取巧地(dì)偷懶。大腦每秒要(yào)接收約4000萬次的感官信息輸入，并試圖完全解析出它們的意義，所以它會根據以往的經驗，猜測我們看(kàn)見(jiàn)了(le)什麽。
看(kàn)左邊的圖，第一(yī)眼能(néng)看(kàn)到一(yī)個黑(hēi)邊三角形，上(shàng)面疊了(le)一(yī)個白色倒三角；右邊的圖，你能(néng)明(míng)顯感知到一(yī)個矩形。
這(zhè)是1955年(nián)，由意大利心理學家發現，并以她名字命名的「卡尼薩三角」。這(zhè)個視(shì)錯覺表明(míng)我們的大腦把實際上(shàng)不存在的三角形輪廓線畫(huà)了(le)出來。
我們把根本不存在的輪廓線稱為(wèi)主觀輪廓。
對于識别具體物(wù)體來說，中央視(shì)覺是最重要(yào)的；對于認知整體場景而言，周邊視(shì)覺更為(wèi)關鍵。
通(tōng)過電腦屏幕觀看(kàn)網頁，你并不用刻意浏覽，而是整體掃過就能(néng)判斷整個頁面的內(nèi)容。所以大多數(shù)人(rén)都(dōu)低(dī)估了(le)周邊視(shì)覺對于我們理解事物(wù)的重要(yào)性，人(rén)對場景的認知似乎都(dōu)來自(zì)周邊視(shì)覺。
發現規律有助于快(kuài)速處理時(shí)刻接收的感官信息。
看(kàn)上(shàng)面的圖，你會很(hěn)自(zì)然的将其分成4組，每兩個點一(yī)組，共8個點，而不是上(shàng)來就直接定義有8個點。
大腦視(shì)覺皮質中的細胞分工(gōng)不同，分别隻對橫線、豎線、邊線和(hé)特定角度的線作(zuò)出反應。
講完上(shàng)述三個心理學常識，我們看(kàn)下(xià)這(zhè)三個點對應到我們設計當中又是如(rú)何一(yī)番情景，看(kàn)下(xià)圖：
之所以将第一(yī)個心理學觀點與輪廓關聯，是因為(wèi)在我們設計過程中任何一(yī)個形式的産生都(dōu)會形成一(yī)個輪廓，那(nà)畫(huà)面元素多起來之後，畫(huà)面就會被這(zhè)些輪廓分割成一(yī)個負向空間(jiān)，很(hěn)多時(shí)候我們都(dōu)會忽視(shì)這(zhè)個隐藏存在的形式。有時(shí)大家怎麽調整一(yī)個設計元素本身，都(dōu)會感覺不盡如(rú)人(rén)意，其實有一(yī)種可(kě)能(néng)是：這(zhè)個元素在整個畫(huà)面中所形成的輪廓并沒有達到同步的和(hé)諧。
如(rú)下(xià)圖插畫(huà)，一(yī)個女(nǚ)性形象，畫(huà)風(fēng)簡潔幹淨，畫(huà)面給人(rén)很(hěn)強的整體感與完整型。如(rú)果是我們，會不會更多的去關注這(zhè)個插畫(huà)的精彩之處是比基尼處理很(hěn)生動，人(rén)物(wù)陰影細節刻畫(huà)的很(hěn)到位？但(dàn)是關鍵點是這(zhè)些嗎？
繼續分析，如(rú)下(xià)圖：
左圖，把整個圖形黑(hēi)白化後，想想我們的第一(yī)個心理學觀點，一(yī)幅畫(huà)面第一(yī)影響我們的是腦海(hǎi)裏形成的這(zhè)個輪廓。像這(zhè)個畫(huà)面，一(yī)個完整近似幾何般的人(rén)物(wù)輪廓（樣圖白色部分），同時(shí)這(zhè)個輪廓所分割形成的空間(jiān)（樣圖黑(hēi)色部分），讓整個畫(huà)面安靜有序規則，讓人(rén)的視(shì)線能(néng)夠自(zì)然流暢，不會輕易地(dì)跳(tiào)動轉換。所以右圖，你會發現，不管我如(rú)何填充紋理圖片，這(zhè)樣一(yī)個畫(huà)面是始終和(hé)諧，沒有違和(hé)感的。
筆(bǐ)者随機處理的一(yī)個形狀，在沒有一(yī)個有序優美的輪廓下(xià)，縱然你把內(nèi)部的修飾刻畫(huà)的如(rú)何精彩，這(zhè)個畫(huà)面依然是索然無味，毫無生氣的。
設計元素要(yào)注重輪廓的修飾提煉。在設計表達過程中，不管是何種設計，我們都(dōu)要(yào)注重每個呈現元素的輪廓是否精巧，注意腦海(hǎi)裏主觀輪廓之外(wài)的負空間(jiān)是否舒服與和(hé)諧，畫(huà)面是通(tōng)過這(zhè)些彼此聯系的，不要(yào)一(yī)上(shàng)來就關注所謂的細節，經營你的形狀。
第二個心理學觀點與留白相關，是因為(wèi)整體認知與周邊視(shì)覺關聯極大，看(kàn)下(xià)圖：
大家能(néng)夠認知到什麽程度，這(zhè)是什麽？怕是大家怎麽猜都(dōu)不會确定這(zhè)個是什麽吧。
當筆(bǐ)者呈現完整圖畫(huà)後，大家是不是一(yī)下(xià)子就豁然開(kāi)朗了(le)。留白是至關重要(yào)的，留白很(hěn)重要(yào)的一(yī)點是加強了(le)元素與元素之間(jiān)的關系，我們通(tōng)過創建輪廓來形成元素，元素與元素之間(jiān)的關系，通(tōng)過留白和(hé)元素之間(jiān)形成的負空間(jiān)，來相互影響，最終形成協調的畫(huà)面。留白可(kě)以形成空間(jiān)、引導、形狀等多種可(kě)能(néng)，讓作(zuò)品更生動更有呼吸。
看(kàn)上(shàng)圖，蘋果設計對留白的使用很(hěn)極緻了(le)，通(tōng)過産品嚴謹的排布，大家可(kě)以很(hěn)清晰的感受到物(wù)體分割畫(huà)面後，留白的清晰走向以及秩序，你的視(shì)線會通(tōng)過大腦的分析呈現出無限擴展的空間(jiān)，安靜空靈不幹擾，更能(néng)彰顯蘋果設備本身的高端屬性。再簡單一(yī)點解釋，通(tōng)過弱化周邊視(shì)覺的幹擾，讓人(rén)更多的聚焦中央視(shì)覺，讓你對産品的感知更加深刻。這(zhè)時(shí)候留白是空間(jiān)，烘托畫(huà)面，安靜的美少(shǎo)女(nǚ)。
看(kàn)上(shàng)述網頁設計作(zuò)品，畫(huà)面通(tōng)過主視(shì)覺形成的輪廓之後，呈現出大面積的留白空間(jiān)，在這(zhè)些空間(jiān)基礎上(shàng)，進行(xíng)了(le)核心信息的展示。注意左圖黑(hēi)色主輪廓的部分并沒有信息呈現（集中展示了(le)品牌形象氣息），而在留白部分展示了(le)文字信息加以說明(míng)。右圖部分則在折線這(zhè)條主輪廓型的兩側，有序展示了(le)信息。這(zhè)樣的設計，在網頁滑屏過程中，增加了(le)畫(huà)面的動感效果，更重要(yào)的一(yī)點是在引導視(shì)線過程中，你會更關注內(nèi)容的信息呈現。對于認知整體場景而言，周邊視(shì)覺更為(wèi)關鍵，因為(wèi)你會很(hěn)不經意的在意留在中央視(shì)覺之外(wài)的東西(xī)，這(zhè)時(shí)候留白是引導，展示信息，完美的指揮家。
再看(kàn)這(zhè)組作(zuò)品，理解這(zhè)組留白相對比較複雜(zá)，注意筆(bǐ)者圖示位置的留白。很(hěn)多時(shí)候，我們都(dōu)習慣把填滿一(yī)個畫(huà)面當作(zuò)第一(yī)要(yào)務，填滿是可(kě)以保證我們看(kàn)到的畫(huà)面至少(shǎo)是飽滿不空的，但(dàn)是往往适得其反，不僅亂而且沒有靈氣。所以一(yī)些設計作(zuò)品試圖去突破一(yī)些視(shì)覺固式，那(nà)這(zhè)時(shí)候留白就是一(yī)個極好的幫手，無形中起到一(yī)個形狀的作(zuò)用，補充畫(huà)面達到畫(huà)面的和(hé)諧統一(yī)，又增加韻味。像左圖就是通(tōng)過一(yī)個紅(hóng)色面積的模塊留白，與标題呼應的同時(shí)，讓畫(huà)面方圓能(néng)夠更自(zì)然的流淌，增強畫(huà)面的靈動感。右圖則通(tōng)過添加元素，讓留白區(qū)域形成某種場景或者縱深，這(zhè)樣就對文字形成了(le)一(yī)種補充，烘托文字的效果，增強感受。兩者看(kàn)似有明(míng)顯空白，但(dàn)是整體又是完整的。
看(kàn)下(xià)圖，其實這(zhè)又牽扯到我們第一(yī)個講到的心理學：眼見(jiàn)非腦見(jiàn)，我們的大腦會自(zì)動去找尋某種輪廓。而這(zhè)裏輪廓的形成是通(tōng)過留白去幫助實現的。這(zhè)時(shí)候，留白是形狀，參與構成，積極的組織者。
留白，是形式的延展。空間(jiān)、引導、形狀──元素在構成畫(huà)面中一(yī)定會産生留白，留白對畫(huà)面的意義在于可(kě)以幫助我們更好的展示內(nèi)容，幫助我們營造空間(jiān)，創造聯系，配合形式，讓畫(huà)面更加有秩序感。
講到構成，這(zhè)個名詞大家都(dōu)不陌生：一(yī)定的形态元素，按照視(shì)覺規律、力學原理、心理特性、審美法則進行(xíng)的創造性的組合。很(hěn)顯然跟我們的心理學原理三不謀而合，人(rén)是習慣尋找規律，也很(hěn)習慣創造規律，所以在設計領域，才有了(le)對點、線、面等不斷的研究與實踐，在抽象的形、色、質的造型方法上(shàng)不斷追求與探索。
看(kàn)上(shàng)圖，這(zhè)是一(yī)張展覽海(hǎi)報，海(hǎi)報簡潔幹淨，穩重大氣，沒有太多筆(bǐ)墨渲染，背景圖的選擇，以靜制動，讓整個海(hǎi)報有種高山(shān)流水，知音無限的濃郁氣息。先想下(xià)我們之前的說明(míng)：大腦視(shì)覺皮質中的細胞分工(gōng)不同，分别隻對橫線、豎線、邊線和(hé)特定角度的線作(zuò)出反應。再結合下(xià)點線面構成的知識，首先畫(huà)面三個大字，這(zhè)是點，然後由上(shàng)到下(xià)一(yī)個「之」字形排開(kāi)，斜線至此形成，你的第一(yī)視(shì)感規律完結；接下(xià)來注意畫(huà)面背景圖的選擇，瀑布從(cóng)上(shàng)而下(xià)，這(zhè)個水流的動勢極大的幫助和(hé)引導了(le)我們的視(shì)線閱讀，豎線至此形成。畫(huà)面感就形成了(le)，你會很(hěn)自(zì)然舒服的去閱讀這(zhè)個海(hǎi)報。
為(wèi)什麽設計師(shī)要(yào)把字放到畫(huà)面這(zhè)個位置，而不是其他(tā)位置呢？想想剛剛說的規律，人(rén)喜歡規律，創造找尋規律，并以此為(wèi)根據去實踐，這(zhè)裏就牽扯出了(le)大自(zì)然裏最神奇的定律黃(huáng)金(jīn)分割。
A1、A2這(zhè)是畫(huà)面橫向寬度上(shàng)兩條黃(huáng)金(jīn)風(fēng)格線，B1、B2、B3這(zhè)是畫(huà)面縱向按順序的三條黃(huáng)金(jīn)分割線。當畫(huà)出這(zhè)幾條黃(huáng)金(jīn)分割線，是不是一(yī)目了(le)然了(le)？海(hǎi)報作(zuò)者把核心元素有序安排在黃(huáng)金(jīn)分割線及焦點之上(shàng)，和(hé)諧之美，一(yī)張看(kàn)似簡單的海(hǎi)報蘊藏着如(rú)此豐富的魅力，我們也可(kě)以感悟到設計師(shī)本身嚴謹的氣息和(hé)對構成形式的細心推敲。如(rú)果是我們，又會是怎樣的呢？
再看(kàn)上(shàng)圖，大家可(kě)以自(zì)行(xíng)按照上(shàng)述的方式去分析一(yī)下(xià)。
下(xià)圖海(hǎi)報可(kě)能(néng)更複雜(zá)些，但(dàn)是其中的規律也是可(kě)以尋找的，畫(huà)面通(tōng)過兩組不同斜面創造大的規律動勢（右圖黑(hēi)紅(hóng)示意），同時(shí)巧妙的利用交叉後形成的三角形，形成點的元素，作(zuò)為(wèi)人(rén)物(wù)畫(huà)像的載體之用，因而三角形是從(cóng)整體上(shàng)而來，有序而有組織，相互有關系，不會顯得亂。
更令人(rén)驚奇的是，當我也使用黃(huáng)金(jīn)分割試圖去進一(yī)步分析和(hé)理解畫(huà)面的時(shí)候，你會發現人(rén)物(wù)的面部表情──眼神，全在分割線上(shàng)，所以有沒有感覺到，這(zhè)個海(hǎi)報的每個人(rén)其實都(dōu)在與你對視(shì)，莫名的一(yī)種震撼，畫(huà)面的張力，不得不佩服國(guó)外(wài)設計師(shī)的嚴謹。
合理使用點線面，引導組織畫(huà)面。優秀的畫(huà)面從(cóng)來不是無組織無秩序的，都(dōu)是通(tōng)過點線面的仔細經營來創造最佳的視(shì)覺效果，而這(zhè)個視(shì)覺效果，是能(néng)夠自(zì)發的去引導觀衆的視(shì)線，讓規律自(zì)然被閱讀，達到形神合一(yī)。
今天通(tōng)過三個心理學，引出設計中三個設計要(yào)點輪廓、留白、構成，其實彼此之間(jiān)是一(yī)個遞進關系，有了(le)元素就會産生形狀，躍然紙(zhǐ)上(shàng)，則需要(yào)足夠的留白去為(wèi)元素講故事，然後這(zhè)個故事就是構成，使用怎樣的手段，讓它更豐富更有內(nèi)涵，一(yī)目了(le)然。三者的有機結合就形成了(le)我們所說的構圖，視(shì)覺語言中構圖是非常重要(yào)的底層環節，相比華麗(lì)的細節和(hé)各種炫目的效果，畫(huà)面中隐藏的構圖實際上(shàng)才是視(shì)覺設計的核心。
看(kàn)一(yī)下(xià)這(zhè)些電影場景，是不是恍然大悟，看(kàn)似複雜(zá)的場景，都(dōu)建立在這(zhè)些幾何圖形的基礎骨架之上(shàng)。回憶下(xià)文章(zhāng)之初的心理學觀點，其實設計知識背後是人(rén)類讀取信息幾千年(nián)來形成的習慣，以及現代社會約定俗成的閱讀方式和(hé)心理學等，要(yào)想成為(wèi)一(yī)個優秀的設計師(shī)，我們需要(yào)進一(yī)步地(dì)了(le)解設計背後的原理以及表達信息的多種方法。就像研究表明(míng)，人(rén)類能(néng)識别24種基本形體，這(zhè)些基礎形狀稱為(wèi)幾何離子（方形、圓形、三角形、圓柱體、圓錐體等），這(zhè)就落回到我們講到的心理學：我們眼睛能(néng)夠尋找的規律，而上(shàng)圖的電影畫(huà)面也都(dōu)構建在此基礎之上(shàng)，因為(wèi)這(zhè)樣的形式更容易讓我們的視(shì)覺去捕捉去理解。
講了(le)這(zhè)麽多，就是希望能(néng)夠幫助大家在平時(shí)的設計工(gōng)作(zuò)和(hé)日常的學習積累過程中，能(néng)夠有一(yī)種思路和(hé)方法，去判斷和(hé)解讀作(zuò)品，去分析這(zhè)個設計為(wèi)什麽好，好在哪裏，去把設計進行(xíng)有效的分解（元素本身的樣式，元素所在空間(jiān)的留白，以及彼此之間(jiān)的關聯）給你自(zì)己的設計說明(míng)增加籌碼，以便讓作(zuò)品更加擲地(dì)有聲。
最後，既然我們知道(dào)了(le)這(zhè)些心理學知識，了(le)解到了(le)我們的觀察習慣，在之後的設計過程中我們就需要(yào)努力做(zuò)到以下(xià)幾點：
在線客服1号
微(wēi)信公衆賬号