2019-1-4 資深UI設計者
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
平面與版式背后是千年來人類讀取信息形成的習慣、約定俗成的閱讀方式和心理學等，想成為一個優秀的設計師，我們需要進一步了解設計背后的原理以及表達信息的多種方法。
在中國繪畫中，有所謂章法、布局。中國繪畫最講究“經營位置”，因而有了中國畫高遠，深遠，平遠獨特意境的畫風體系。大家學習的設計體系中對構圖的分析就更加的全面，比如大家都了解的形式美學法則：均衡與對稱、漸次與重復、對比與調和、比例與尺度、節奏與韻律、體與主體、微差與統調、特異與秩序、前者多顯示生動型，而后者顯示秩序型。
那為什么會總結出這些理論與法則？究竟又是什么在影響著我們的觀察與思考呢？有時候我們會不會遇到這些問題：
1. 有時候我們在面對需求，需要強理論支撐自己的設計，但又找不到切入點，總會拿什么對比，對稱，韻律說事，需求方卻不為所動……
2. 在平時的設計工作當中，大家不可避免的會參考和研習其他設計大師，同行的各類設計作品，大家肯定會有各自關注的點，創意，排版，顏色，細節刻畫等等等等，無論是那種類型的設計作品（平面，招貼，海報，H5，banner等），有時候會不會感到：看了好多作品，臨摹了好多作品，依然做不好設計；問題出在哪里呢？
3. 我們總會收集一大堆的素材參考，那你的評判方式是什么？你又是如何分析畫面？為什么好，好又好在哪里？……
接下來我們透過視覺表象，揭開那些神秘的面紗，希望通過我自己的學習和研究，能夠對大家有所幫助。
為了更快地解析周圍的世界，大腦會投機取巧地偷懶。大腦每秒要接收約4000萬次的感官信息輸入，并試圖完全解析出它們的意義，所以它會根據以往的經驗，猜測我們看見了什么。
經典再現，看左邊的圖，第一眼能看到一個黑邊三角形，上面疊了一個白色倒三角，右邊的圖，你能明顯感知到一個矩形。
卡尼薩三角
這是1955年，由意大利心理學家發現，并以她名字命名的“卡尼薩三角”。這個視錯覺表明我們的大腦把實際上不存在的三角形輪廓線畫了出來。
我們把根本不存在的輪廓線稱為主觀輪廓。
對于識別具體物體來說，中央視覺是最重要的；
對于認知整體場景而言，周邊視覺更為關鍵 ；
通過電腦屏幕觀看網頁，你并不用刻意瀏覽，而是整體掃過就能判斷整個頁面的內容。所以大多數人都低估了周邊視覺對于我們理解事物的重要性，人對場景的認知似乎都來自周邊視覺。
發現規律有助于快速處理時刻接收的感官信息。
看上面的圖，你會很自然的將其分成4組，每兩個點一組，共8個點，而不是上來就直接定義有8個點。
大腦視覺皮質中的細胞分工不同，分別只對橫線、豎線、邊線和特定角度的線作出反應。
講完上述三個心理學常識，我們看下這三個點對應到我們設計當中又是如何一番情景，看下圖：
輪廓
之所以將第一個心理學觀點與輪廓關聯，是因為在我們設計過程中任何一個形式的產生都會形成一個輪廓，那畫面元素多起來之后，畫面就會被這些輪廓分割成一個負向空間，很多時候我們都會忽視這個隱藏存在的形式，有時大家怎么調整一個設計元素本身，都會感覺不盡如人意，其實有一種可能是：這個元素在整個畫面中所形成的輪廓并沒有達到同步的和諧；
如下圖插畫，一個女性形象，畫風簡潔干凈，畫面給人很強的整體感與完整型。如果是我們，會不會更多的去關注這個插畫的精彩之處是比基尼處理很生動，人物陰影細節刻畫的很到位？但是關鍵點是這些嗎？
繼續分析，如下圖：
圖A，把整個圖形黑白化后，想想我們的第一個心理學觀點，一幅畫面第一影響我們的是腦海里形成的這個輪廓。像這個畫面，一個完整近似幾何般的人物輪廓（樣圖白色部分），同時這個輪廓所分割形成的空間（樣圖黑色部分），讓整個畫面安靜有序規則，讓人的視線能夠自然流淌，不會輕易地跳動轉換；所以圖B，你會發覺，不管我如何填充紋理圖片，這樣一個畫面是始終和諧，沒有違和感的。再比較下圖：
筆者隨機處理的一個形狀，有沒有發覺，在沒有一個有序優美的輪廓之下，縱然你把內部的修飾刻畫的再如何精彩，這個畫面依然是索然無味，毫無生氣的。
設計元素要注重輪廓的修飾提煉——在設計表達過程中，不管是何種設計，我們都要注重每個呈現元素的輪廓是否精巧，注意腦海里主觀輪廓之外的負空間是否舒服與和諧，畫面是通過這些彼此聯系的，不要一上來就關注所謂的細節，經營你的形狀。
留白
第二個心理學觀點與留白相關，是因為整體認知與周邊視覺關聯極大，看下圖：
好了，大家能夠認知到什么程度，這是什么？怕是大家怎么猜都不會確定這個是什么。
當筆者呈現完整圖畫后，大家是不是一下子就豁然開朗了。留白是至關重要的，留白很重要的一點是加強了元素與元素之間的關系，我們通過創建輪廓來形成元素，元素與元素之間的關系，通過留白-元素之間形成的負空間，來相互影響，最終形成協調的畫面。留白可以形成空間，引導，形狀等多種可能，讓作品更生動更有呼吸。
看上圖，蘋果設計對留白的使用很了，通過產品嚴謹的排布，大家可以很清晰的感受到物體分割畫面后，留白的清晰走向以及秩序，你的視線會通過大腦的分析呈現出無限擴展的空間，安靜空靈不干擾，更能彰顯蘋果設備本身的高端屬性。再簡單一點解釋，通過弱化周邊視覺的干擾，讓人更多的聚焦中央視覺，讓你對產品的感知更加深刻。這時候留白是空間，烘托畫面，安靜的美少女。
看上述網頁設計作品，畫面通過主視覺形成的輪廓之后，呈現出大面積的留白空間，在這些空間基礎上，進行了核心信息的展示。注意左圖黑色主輪廓的部分并沒有信息呈現（集中展示了品牌形象氣息），而在留白部分展示了文字信息加以說明；右圖部分則在折線這條主輪廓型的兩側，有序展示了信息。這樣的設計，在網頁滑屏過程中，增加了畫面的動感效果，更重要的一點是在引導視線過程中，你會更關注內容的信息呈現，想想我們的視覺，對于認知整體場景而言，周邊視覺更為關鍵；因為你會很不經意的在意留在中央視覺（在設計中就是刻意設計引導你視覺的主輪廓）之外的東西，這時候留白是引導，展示信息，完美的指揮家。
再看這組作品，理解這組留白相對比較復雜，注意筆者圖示位置的留白，很多時候，我們都習慣把畫滿一個畫面當作第一要務，填滿是可以保證我們看到的畫面至少是飽滿不空的，但是往往適得其反就是亂和沒有靈氣，所以一些設計作品試圖去突破一些視覺固式，那這時候留白就是一個極好的幫手，無形中啟到一個形狀的作用，補充畫面達到畫面的和諧統一，又增加韻味。像左圖就是通過一個紅色面積的模塊留白，與標題呼應的同時，讓畫面方圓能夠更自然的流淌，增強畫面的靈動感，右圖則通過添加元素，讓留白區域形成某種場景或者縱深，這樣就對文字形成了一種補充，烘托文字的效果，增強感受，兩者看似有明顯空白，但是整體又是完整的。看下圖，其實這又牽扯到我們第一個講到的心理學：眼見非腦見，我們的大腦會自動去找尋某種輪廓。而這里輪廓的形成是通過留白去幫助實現的。這時候，留白是形狀，參與構成，積極的組織者。
留白，是形式的延展...空間，引導，形狀——元素在構成畫面中一定會產生留白，留白對畫面的意義在于可以幫助我們更好的展示內容，幫助我們營造空間，創造聯系，配合形式，讓畫面更加有序有感。
構成
講到構成，這個名詞大家都不陌生：一定的形態元素，按照視覺規律、力學原理、心理特性、審美法則進行的創造性的組合。很顯然跟我們的心理學原理三不謀而合，人是習慣尋找規律，也很習慣創造規律，所以在設計領域，才有了對點，線，面等不斷的研究與實踐，在抽象的形、色、質的造型方法上不斷追求與探索。
看上圖，這是一張展覽海報，海報簡潔干凈，穩重大氣，沒有太多筆墨渲染，背景圖的選擇，以靜制動，讓整個海報有種高山流水，知音無限的濃郁氣息。先想下我們之前的說明：大腦視覺皮質中的細胞分工不同，分別只對橫線、豎線、邊線和特定角度的線作出反應。再結合下點線面構成的知識。首先畫面三個大字，這是點，然后由上到下一個“之”字形排開，斜線至此形成，你的第一視感規律完結，接下來注意畫面背景圖的選擇，瀑布從上而下，這個水流的動勢極大得幫助和引導了我們的視線閱讀，豎線至此形。畫面感就形成了，你會很自然舒服的去閱讀這個海報。
但是就此就結束了，視線總體流動是這樣的，為什么設計師要把字放到畫面這個位置，而不是其他位置呢？想想剛剛說的規律，人喜歡規律，創造找尋規律，并以此為根據去實踐，這里就牽扯出了大自然里最神奇的定律黃金分割（今天的文章暫時不講，之后我會帶來關于黃金分割的文章分享哦），繼續看下圖，
首先，A1，A2這是畫面橫向寬度上兩條黃金風格線，B1，B2，B3這是畫面縱向按順序的三條黃金風格線，當畫出這幾條黃金分割線，是不是一目了然，海報作者把核心元素有序安排在黃金風格線及焦點之上，和諧之美，一張看似簡單的海報蘊藏著如此豐富的魅力，我們也可以感悟到設計師本身嚴謹的氣息和對構成形式的細心推敲。如果是我們，又會是怎樣的呢？
再看上圖，大家可以自行按照上述的方式去分析一下。下圖海報可能更復雜些，但是其中的規律也是可以尋找的，畫面通過兩組不同斜面創造大的規律動勢（右圖黑紅示意），同時巧妙的利用交叉后形成的三角形，形成點的元素，作為人物畫像的載體之用，因而三角形是從整體上而來，有序而有組織，相互有關系，不會顯得亂。
更令人驚奇的是，當我也使用黃金分割試圖去進一步分析和理解畫面的時候，你會發現人物的面部表情—眼神，全在分割線上，所以有沒有覺得，這個海報的每個人都感覺實在你在對視，莫名的一種震撼，畫面的張力，不得不佩服國外設計師的嚴謹。
合理使用點線面，引導組織畫面——優秀的畫面從來不是無組織無秩序的，都是通過點線面的仔細經營來創造最佳的視覺效果，而這個視覺效果，是能夠自發的去引導觀眾的視線，讓規律自然被閱讀，達到形神合一。
今天通過三個心理學，引出設計中三個設計要點輪廓，留白，構成，其實彼此之間是一個遞進聯系，有了元素就會產生形狀，躍然紙上，則需要足夠的留白去為元素講故事，然后這個故事就是構成，你使用如何的手段，讓他更豐富更有內涵，一目了然。三者的有機結合就形成了我們所說的構圖，視覺語言中構圖是非常重要的底層環節，相比華麗的細節和各種炫目的效果，畫面中隱藏的構圖實際上才是視覺設計的核心！
看一下這些電影場景，是不是恍然大悟，看似復雜的場景，都建立在這些幾何圖形的基礎骨架之上，回憶下文章之初的心理學觀點，其實設計知識背后是人類讀取信息幾千年來形成的習慣以及現代社會約定俗成的閱讀方式和心理學等，要想成為一個優秀的設計師，我們需要進一步地了解設計背后的原理以及表達信息的多種方法，就像研究表明，人類能識別 24 種基本形體，這些基礎形狀稱為幾何離子（方形，圓形，三角形，圓柱體，圓錐體等），這就落回到我們講到的心理學：我們眼睛能夠尋找的規律，而上圖的電影畫面也都構建在此基礎之上，因為這樣的形式更容易讓我們的視覺去捕捉去理解。
講了這么多，就是希望能夠幫助大家在平時的設計工作和日常的學習積累過程中，能夠有一種思路和方法，去判斷和解讀作品，去分析這個設計為什么好，好在哪里，去把設計進行有效的分解（元素本身的樣式，元素所在空間的留白，以及彼此之間的關聯）給你自己的設計說明增加籌碼，以便更加得擲地有聲。
最后，既然我們知道了這些心理學知識，了解到了我們的觀察習慣，在之后的設計過程中我們就需要努力做到以下幾點：
1. 經營好元素的輪廓和位置；
2. 人會不由自主地尋找規律，那就盡量多使用規律，利用分組和間隔創造規律；
3. 要讓某個物體(例如圖標)易于識別，就用簡單的幾何圖形來畫它。這會讓構成物體的幾何離子更明顯，從而使人更快、更輕松地識別該物體；
4. 控制好你的形式，形式在內容之下，形式服務內容。文繁則質衰，末勝則本虧，過分強調文飾與修辭，內容就會受到遮蔽而顯得軟弱無力，形式重于內容，其實就是舍本逐末。
藍藍設計( www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
