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