2017-7-12 用心設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
當(dāng)所有人都在急于變現(xiàn)的時候，我選擇用心寫好每一篇原創(chuàng)文章。這是關(guān)于我設(shè)計理論中最重要的感悟-方塊理論。六千多字的文章我寫了一個星期，這是一個待完善的理論，是初探，更是分享。送給一直在路上的種夢人！
前言：一直以來，我們都認(rèn)為“點線面”是畫面構(gòu)成最基礎(chǔ)的組成部分，而從廣義的角度來說并不完全是這樣。傳統(tǒng)的說法中，畫面最小面積是“點”，若干個“點”組成了“線”，若干條“線”組成了“面”，但真的是這樣嗎？假設(shè)我們把點放大，它其實也是一個面，而同樣的，我們把線放大，它同樣其實也是一個面，其實“點線面”在述說的是一個方塊（區(qū)域），而在一個畫面中，方塊與方塊之間是相互作用的，而使各個方塊達(dá)致平衡的理論，我稱之為“方塊理論”。
“方塊理論”并不是要推翻“點線面理論”，而是把復(fù)雜的問題簡單化。把“點線面”看作是畫面中的各個相互作用的方塊（區(qū)域），為了更好更形象地推廣這一套理論，一般情況下我們把“區(qū)域”說成是“方塊”使之更為形象，下面我們就統(tǒng)一把“區(qū)域”述說成“方塊”，其實兩者所說的是一樣的事情。“方塊理論”在接下來的案例中會有更詳細(xì)的說明，而現(xiàn)在讓我們一起來重溫一下“點線面”吧。
一、何為點線面
1、點：宇宙萬物的起源；宇宙萬物的基礎(chǔ)。
在幾何學(xué)上，點只有位置，理論上并不是真實存在的。在設(shè)計學(xué)中，點則有具體的大小、形狀、色彩、肌理等特性。而在自然界中，如果我們把任何物體放至最大或者縮至最小，最終呈現(xiàn)的將會是一個又一個的點。打個比喻，遠(yuǎn)看海邊的沙石是點，從高空中俯視街道上的行人是點，抬頭仰望夜幕中滿天星星是點。近看（通過顯微鏡）我們?nèi)粘Ｉ钪械囊路屈c，家中可愛的小貓小狗是點，還有我們?nèi)吮旧硪彩且粋€點，所以說點是宇宙萬物的基礎(chǔ)與起源。
2、線：點運動的軌跡，面運動的起點。
在幾何學(xué)中，線只具有位置與長度，沒有寬度與厚度。在設(shè)計學(xué)中，線則具有寬度、形狀、色彩、肌理等特性?，F(xiàn)實生活中，線有兩種，一種是直線（最重要的有平行線、垂直線、斜線等），它給人一種干練理性的感覺。另一種是曲線（最重要的有弧線、圓、波浪線等），它給人一種優(yōu)美感性的感覺。所謂直線就是一點在平面上或空間上或空間中沿一定（含反向）方向運動，所形成的軌跡就是直線。而曲線則是在平面上或空間中因一定條件而變動方向的點軌跡。同時線還有實線與虛線之分。
嚴(yán)格來說，宇宙萬物并不存在線，因為點才是物象最終呈現(xiàn)的結(jié)果。打個比喻，要想繪制海邊的沙石首先要把具體的物象（海、沙石）就是所謂的面，轉(zhuǎn)折形成線，其物象的輪廓由線來界定，也就是我們通常所說的線稿（輪廓線）。而所謂的線，其實是由若干個點組成的。
3、面：擴大的點形成了面，一根封閉的線造成了面。
在設(shè)計學(xué)中，面具有大小、形狀、色彩、肌理等特性。所謂面，其實就是一個畫面中的方塊（區(qū)域），與上文所說，根據(jù)“方塊理論”一個點、一根線同樣也是一個方塊（區(qū)域）。
分析：在一個畫面中，無論呈現(xiàn)的方式是平面還是立體，都是由一個又一個的“方塊”組成的，又或者說是單獨一個“方塊”組成的。傳統(tǒng)的“點線面”理論相對有點復(fù)雜，把復(fù)雜的設(shè)計理論簡單化，讓大家都能看懂設(shè)計，正是“方塊理論”誕生的初衷。
設(shè)計是一門基于美學(xué)的系統(tǒng)工程，所以它會有系統(tǒng)的一部分，但我們可以將系統(tǒng)部分簡化成為大家都能理解的知識。把“點線面”看作是一個畫面的綜合體、一個個的方塊（區(qū)域），這樣更有利于大家去理解設(shè)計本身。
舉個簡單例子：在PS新建一張900px*500px（尺寸可自定義）的圖片，最外面一層是一個最大的“方塊”，現(xiàn)在畫面是左右排版的，左邊是LOGO+文字信息，右邊是產(chǎn)品配圖，那么，我們可以把畫面左邊看作是一個“方塊A”，畫面右邊看作是另外一個“方塊B”。而為了達(dá)到畫面相對的平衡，我們用最簡單的辦法就是把方塊平分對齊，達(dá)到畫面的平衡。這是“方塊理論”里面的“絕對對稱”。為了打破絕對對稱的沉悶感，使用了“方塊理論”的“互動”技巧在畫面上方疊加了圓點，使之有靈動的感覺，大家可以試著想象一下，如果沒有了圓點之后的畫面是多么的單調(diào)乏味。
二、初探“方塊理論”
“方塊理論”其實并不是說要把“點線面”忘記，它的初衷是希望大家了解，雖然設(shè)計里有很多系統(tǒng)化的東西，但你可以把一些較為復(fù)雜的理論，簡單化，從而幫助你更快速地掌握畫面中的平衡，提高審美，讓你的排版更加出彩。這些才是對你工作最實際的東西。
結(jié)合“點線面”來說，所謂“方塊理論”中的“方塊”不一定是四邊形的，它可能是三角形的、五邊形等等……如上文所述，一個畫面上有許多個不同的“方塊”，“方塊”有主次之分，主“方塊”可以由多個次“方塊”組成。就像上圖的左右排版或下圖的LOGO居中排版，無論畫面中有多少個“方塊”，讓其達(dá)到最終的畫面平衡，就是“方塊理論”誕生的目標(biāo)。
無論是二維還是三維作品，只要是一個靜態(tài)的作品，就會有很多不同的“方塊”：有主體方塊、次主體方塊、或輔助方塊。簡單形象的說，就是有大的方塊、中的方塊、小的方塊、更小的方塊等等。
如上文所述，在一個主體方塊里面，可能也有層次的劃分，例如一個大標(biāo)題就是一個大方塊，底下的文字是一個小方塊。就像大方塊有若干個小方塊組成，而小方塊有可能也是由若干個更小的小方塊組成，簡單來說就像是玩積木一樣，有很多不同大小的積木拼出一個作品來。你需要記住，無論是二維還是三維，這些方塊的組成最終都是為了達(dá)致畫面的平衡。
接下來我將用一個案例讓大家可以更直觀地理解 “方塊理論”：這是我剛完成的《彼得的蜜蜂》項目（關(guān)于《彼得的蜜蜂》的項目詳解，我會在另一篇文章講述，這里我們先初探一下“方塊理論”在實際工作中的實用性。）
首先我們來看上圖，它是由一個LOGO加一句英文Slogan，左邊有蜜蜂，右邊有蝴蝶，下面有一些不規(guī)則的圓點組成的，色調(diào)是淺黃色，畫面是上下排版。根據(jù)“方塊理論”你會看到主體LOGO是一個主體方塊（A）（內(nèi)含蜜蜂與蝴蝶），圓點是一個次主體方塊（B），最外面底色是一個輔助方塊。
我們接著分析，其實主體方塊里面也有主次之分，LOGO是最大的，Slogan相對小一點，為了突出品牌特性，在LOGO左右加入了蜜蜂與蝴蝶，形成一種大自然的感覺。這就是畫面中主體方塊的構(gòu)成。次主體方塊看上去是不規(guī)則的圓點，其實它們的形成是有規(guī)律的，它們是通過很多塊橫豎結(jié)合的線條產(chǎn)生的，每一條橫條的寬度與橫條之間的間距都是一致的，豎條的高度與豎條之間的間距都是一致的，而它們各自交錯的位置便形成了圓點。輔助型方塊其實是一個純色，它是基于品牌定位主色調(diào)所產(chǎn)生的（我會在下文的色彩構(gòu)成部分詳細(xì)說明）。這個就是使用“方塊理論”對作品初步的分析，相信大家通過這個理論，去看一幅作品，或者說去創(chuàng)作一幅作品會比之前更加得心應(yīng)手。
接下來，為了讓大家對“方塊理論”有更深入的了解，我會結(jié)合平面三大構(gòu)成（即平面構(gòu)成、色彩構(gòu)成、立體構(gòu)成）繼續(xù)來分析一下剛才那個案例。
平面構(gòu)成是視覺元素在二次元的平面上，按照美的視覺效果，力學(xué)的原理，進(jìn)行編排與組合，它是以理性與邏輯推理來創(chuàng)造形象、研究形象與形象之間的排列的方法。是理性與感性相結(jié)合的產(chǎn)物。
簡單來說，就是美學(xué)的系統(tǒng)工程。而就剛才那個案例來說，我們先說主體方塊吧，主體的比例不一定是最大的，但一定要是視覺的中心，就像上圖中的LOGO一樣。次主體方塊是圓點，在上一節(jié)我已經(jīng)講過，圓點是最原始的生命體，無論是一只蜜蜂還是一只蝴蝶，當(dāng)縮小到最小的時候，它們就是一個個圓點，是最小面積的，圓點是一切的起始，所以也特別符合這個品牌的特性，另外分散的點可以活躍畫面，讓整體畫面靈動起來，所以用圓點來作為次主體方塊，在畫面中形成主次關(guān)系，這是一個比較簡單的平面構(gòu)成案例。
色彩構(gòu)成即色彩的相互作用，是從人對色彩的知覺和心理效果出發(fā)，用科學(xué)分析的方法，把復(fù)雜的色彩現(xiàn)象還原為基本要素，利用色彩在空間、量與質(zhì)上的可變幻性，按照一定的規(guī)律去組合各構(gòu)成之間的相互關(guān)系，再創(chuàng)造出新的色彩效果的過程。
簡單來說，色彩是基于人對于色彩的理解延伸出來的，而從實際的工作中來說，色彩更多是為品牌服務(wù)的。而就剛才那個案例來說，看上去主要是有黃色和紅色兩種色彩構(gòu)成，黃色是比較刺眼的顏色，理論上來說并不太適合大面積的使用，而且在印刷上也要特別的留神，在《彼得的蜜蜂》這個品牌中，因為品牌定位我們必須要使用黃色作為主色調(diào)，因此我們要降低黃色的飽和度（延伸閱讀：《純干貨：色彩入門寶典》），紅色是它的近似色，兩個暖色系的近鄰色作為主色調(diào)會比較陽光，較為符合品牌定位。（關(guān)于創(chuàng)立品牌的延伸閱讀《純干貨：是時候開始創(chuàng)立你的個人品牌》）。
另外案例中不規(guī)則的圓點的顏色也是根據(jù)品牌定位的主色調(diào)延伸出來的。如下圖基于品牌特性，有主色調(diào)、輔助色、次要輔助色等，從而形成品牌的色彩關(guān)系。其實無論是平面、網(wǎng)頁、電商、UI等，都是為品牌服務(wù)的。以上就是基于《彼得的蜜蜂》進(jìn)行探究的色彩構(gòu)成。
立體構(gòu)成作為研究形態(tài)創(chuàng)造與造型設(shè)計的獨立學(xué)科。所涉及的學(xué)科建筑設(shè)計、景觀設(shè)計、室內(nèi)設(shè)計、工業(yè)造型、雕塑、廣告等設(shè)計行業(yè)。除在平面上塑造形象與空間感的圖案及繪畫藝術(shù)外，其它各類造型藝術(shù)都應(yīng)劃歸立體藝術(shù)與立體造型設(shè)計的范疇。
簡單來說，立體構(gòu)成就是在畫面中呈現(xiàn)出的“景深”。無論是二維還是三維，最終呈現(xiàn)在大家面前的都是一個“平面”，看上去非常立體的畫面，都是通過前景、中景、遠(yuǎn)景，包括每一層的面（受光的面，背光的面）形成空間感，形成立體構(gòu)成。
我們來看上圖，它是用三維軟件設(shè)計的（當(dāng)然不是說所有用三維軟件做出來的圖片都是立體構(gòu)成，只是這張三維圖片會讓大家看得更加的形象。）這張圖片，通過受光面、背光面形成立體構(gòu)成的效果，但其實它也是基于平面構(gòu)成與色彩構(gòu)成而形成的一個個“方塊”。我在《優(yōu)秀平面設(shè)計師養(yǎng)成記》中講過，平面是所有設(shè)計的基礎(chǔ)，三維只是呈現(xiàn)的手法而已。套用“方塊理論”，圖片中“沐浴露”區(qū)域就是主體方塊，但這個區(qū)域不會特別明顯，而是相對平均的把所有東西放好，你可以把剩下的上下左右方塊，看作是次主體方塊來理解。
我們再看另外一張圖片，它雖然呈現(xiàn)的是立體效果，但其實你可以看到，它也是基于“方塊理論”形成了的主體方塊（電熱蚊香液促銷裝的區(qū)域）和次主體方塊（其余上下左右部分）。通過這兩個簡單的案例，你也可以試著將一些作品簡單的通過“方塊理論”來分析，從而提高你的審美與設(shè)計能力。
三、 “方塊理論”為“平衡”而生
其實“方塊理論”就是將復(fù)雜的問題，簡單化，但它并不會拋棄設(shè)計師心中早已根深蒂固的平面基礎(chǔ)（你可以把它看作是一個延伸一個補充），把“點線面”看作是畫面中的各個相互作用的“方塊”，所謂 “方塊”不一定是四邊形的，它可能是三角形的、五邊形等等。一個畫面上可能會有許多個不同的“方塊”，而它們是有主次之分的，有主體方塊、次主體方塊、更次或輔助型方塊等。再形象一點，你可以把“方塊理論”用積木來理解，用積木拼湊出一幅大的畫面。而“方塊理論”的最終目的是達(dá)致畫面的平衡。
*要實現(xiàn)畫面的“平衡”，有兩個要點是必須要記住的：
1、平衡的構(gòu)成
即畫面的整體平衡。要做到這一點，需要“對稱”與“互動”。
（1）對稱
對稱包括“絕對對稱”與“相對對稱”。
【絕對對稱】
“絕對對稱”就是所有元素都要平均分配，擺放得非常整齊，包括上下左右的間距、字體的大小、距離等都很對稱。如果是在做標(biāo)準(zhǔn)的柵格化系統(tǒng)、或者做某些線條表現(xiàn)時，都是需要絕對對稱的，但是在平面作品中絕對對稱也會讓人產(chǎn)生乏味、沉悶的感覺,所以一般為了使畫面帶點靈動的感覺，我會在“絕對對稱”里面使用“相對對稱”或者“互動”（下文的“互動”章節(jié)有案例說明）。
【相對對稱】
在日常的商業(yè)化創(chuàng)作中，一般是“絕對對稱”與“相對對稱”混合使用，又或者是“相對對稱”使用得比較多。而“相對對稱”也比較容易理解，它是基于某種原則去做一些對稱處理。相對對稱會比較靈活，排版是千變?nèi)f化的，相對對稱會使作品更加靈動，能給人更有靈氣的感覺。
（2）互動
互動是基于對稱的，但這里我主要是說“相對對稱”中的互動?；邮侵笀D片中A元素和B元素之間的關(guān)系。包括上下的互動關(guān)系、左右的互動關(guān)系、對角線的互動關(guān)系、等分的互動關(guān)系、疊加的互動關(guān)系等等。而為了打破“絕對對稱”的沉悶感，加入“互動”使之更加靈動是一個不錯的選擇。
以上圖為例，在主體方塊1、主體方塊2、主體方塊3、主體方塊4的上一層，疊加一層次主體方塊，讓畫面更加的具有靈氣。另外“互動”經(jīng)常會出現(xiàn)在淘寶等電商頁面中，它通常會以“你中有我，我中有你”的形式出現(xiàn)的。
2、技巧與細(xì)節(jié)
剛才說的平面構(gòu)成、色彩構(gòu)成、立體構(gòu)成都是關(guān)于設(shè)計作品整體平衡的，而技巧與細(xì)節(jié)是基于作品細(xì)節(jié)元素創(chuàng)作的。作品的元素包括字體、素材、肌理、圖片與原創(chuàng)圖形等，關(guān)于技巧與細(xì)節(jié)，主要有以下四個方面：
（1）重復(fù)
“重復(fù)”就是把素材多次使用。例如我設(shè)計了一些圓點、方點或者其他素材，在同一個作品中重復(fù)使用了很多次，這就是“重復(fù)”。
重復(fù)可以是完全重復(fù)，例如我復(fù)制許多個相同的圓點，在不同的位置中使用，也有近似重復(fù)，例如一個圓點旁邊有一個方點，然后又是一個圓點和一個方點；還有系列重復(fù)，例如有太陽、旁邊是月亮，然后有星星等。
（2）疊加
疊加是有“加”也有“減”的， “加”就是ABC等多個元素合并在一起變成另外一個元素D，“減”就是元素A和元素B相減變成元素C。你可以把疊加看作是為了畫面平衡而將各種元素進(jìn)行“加”或“減”的操作。
*這里講述的疊加是技巧，與設(shè)計軟件中的疊加交集、差集技能并無直接關(guān)系。
（3）元素與肌理
剛才也說過，元素就是指用于商業(yè)作品或個人作品的字體、素材、圖片與原創(chuàng)圖形等；肌理就是也是元素的一種，一般情況下肌理用作裝飾性為主。關(guān)于元素與肌理的收集，請看我的原創(chuàng)作品《純干貨：如何建立自身的設(shè)計系統(tǒng)》。無論是元素還是肌理，都可以通過“重復(fù)”與“疊加”，形成新的元素與新的肌理。所有的技巧與細(xì)節(jié)都是可以靈活運用的。但是無論是進(jìn)行怎樣的操作，都需要基于方塊的整體“平衡”，否則，如果只是每個局部都做得很漂亮，但從整體上看平衡失調(diào)的話，那就是一幅不合格的作品了。
（4）破局
“破局”是很容易理解的，例如我在很多圓點重復(fù)的畫面上加了一個方形，這就是“破局”，如果是在LOGO中出現(xiàn)不一致的元素，它就很有可能成為“破局”的關(guān)鍵了。在做電商的作品中（例如是化妝品吧），通過放大化妝品的局部細(xì)節(jié)，將某一個面呈現(xiàn)出來，讓整個畫面變得有趣，這也是一個破局的方法。在元素中利用“漸變”突出效果，令畫面出現(xiàn)一點不同，也會形成一個破局。破局的方法有很多，這里我就不一一列舉了，主要還是看大家多看多練。
后記：關(guān)于“方塊理論”的誕生
最后，我想講一下關(guān)于“方塊理論”的起源。其實“方塊理論”是我在27歲時，第一次做公司合伙人時領(lǐng)悟出來的，當(dāng)時為了更好地與客戶溝通，讓客戶更好地理解我們的設(shè)計理念，自然而然地我就在日常的工作中領(lǐng)悟出了這套“方塊理論”。
在實戰(zhàn)中，我發(fā)現(xiàn)“方塊理論”真的很實用。因為我們的客戶都不是設(shè)計師，他們不可能完全理解設(shè)計專用術(shù)語，而“方塊理論”把設(shè)計理論簡化為他們都能夠很容易理解的語言，這樣便降低了設(shè)計師跟客戶之間的溝通成本，使溝通變得更加順暢，從而促進(jìn)項目的順利開展，并帶來實際利潤。另外曾經(jīng)也有部分企業(yè)邀請我到其公司作商業(yè)培訓(xùn)，我當(dāng)時也使用了“方塊理論”為企業(yè)的設(shè)計人員提供培訓(xùn)服務(wù)，不過這個不是今天的主題，我就不展開說了。
作為設(shè)計師，無論是初級的還是高級的，要與非設(shè)計專業(yè)的需求方良好溝通，我們可以通過“方塊理論”達(dá)到與其良好溝通的目標(biāo)。同時作為設(shè)計師，我們也可以通過“方塊理論”快速地提高我們的審美能力與設(shè)計能力?！胺綁K理論”是基于“點線面”與“平面三大構(gòu)成”的一個延伸一個補充，是把復(fù)雜的問題簡單化。它能為設(shè)計師快速找到畫面中的平衡之美，是設(shè)計師實際工作中的好伙伴。這次由于時間有限，我只把“方塊理論”最基礎(chǔ)的部分分享了出來，所以題目是初探，而在我正在編寫的設(shè)計書籍中，會有更加完整更加詳細(xì)的案例（例如畫面中的留白與“方塊理論”的關(guān)系，又例如是“方塊理論”中的層級關(guān)系等等），大家如果有興趣之后可以購買我編寫的相關(guān)設(shè)計書籍，謝謝??！
藍(lán)藍(lán)設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.teruid.com