交互設計 | 解密版式設計的四大法則（下）

Hi，我是許重文~

叔本華認為，人生的意義就是打發無聊。想一想也對，如果讓你衣食無憂，什麼事情也不用做，你肯定會無聊透頂。所謂人生的追求，就是給自己找點有價值的事情做，消磨有限的生命。

前面介紹了文字的字體和文字的排版，這裡再給大家再介紹版式設計和配色原理。

關於版式設計，作者在書上強烈推薦《寫給大家看的設計書》。這本書我在去年就買了，是寫給非專業設計人員的設計入門書，受益匪淺。

書中關於版式設計的排版總結出四大原則：對比、重複、對齊、親密性。

對比從字面上簡單易懂，很容易吸引讀者去看一個頁面。例如大字體和小字體的對比，冷色和暖色的對比等。如果兩個元素想要形成對比，就應當使之不同，而且是截然不同。

我們來看一下有無對比的效果

是不是第二張頁面對比更強烈，更能抓住讀者的眼球，畫面也更具感染力。

對比不僅可以增強頁面效果，更有助於文字的組織。可以通過大小、顏色、粗細、空間等方式，需要注意的是，對比一定要強烈。

重複絕不僅僅是元素的複製粘貼，更多地時候我們可以把它理解為頁面的一致性，利用某些元素的重複來使整個設計作品達到統一的效果。它們可以是字體、形狀、顏色等等，但是一定要遵循某種設定好的規律。

重複最重要的作用就在於統一，並增強作品的視覺效果。同時，為了避免重複過多同一種元素，不妨對其進行適當的變化，引起興趣的同時又不會讓人生厭。

圖片、文字的隨意擺放往往讓人感覺頁面很雜亂，任何東西好像都是隨意丟在一邊。相對的，對齊原則是說任何元素都不能隨意擺放，它們應該與頁面上的某個物體有空間上的聯繫，雖然眼睛看不到，但是好像有一條線將他們連接起來。

大多數人的閱讀習慣是從左側開始，所以設計一般都採用了文字左對齊的方式，即使文字大小、數量不同，仍可以散發出一種整齊的美感。

對於新手而言，一個頁面上一種對齊方式已經足夠。另外在設計頁面時，使用輔助線是幫助我們對齊的一個好習慣，可以讓頁面統一而有條理。補充一條簡單實用的對齊方法：確保任何一個元素都能在本頁與另外一個元素存在著視覺聯繫。

親密性的原則是指將相關的部分組織在一起，這樣一來，有關係的部分被看做一個組，而不是零散的個體，這樣也給讀者明確的提示，快速掌握頁面的內容分布。

親密性的根本目的是實現組織性，如果信息具有條理，將更容易被閱讀，也更容易被記住。如果元素無關，就要將其分開，同時避免頁面上出現太多孤立元素。

除了以上排版四大原則，作者還提到一個很重要的法則「留白」。

排版中留白非常重要，如果文字寫得滿滿當當，會給人感覺很擁擠，缺乏呼吸感，既不好看也不好讀。

不僅文字和圖片之間要有留白，文字和邊框之間也要有留白。

接下給大家講解一些色彩基礎知識和配色原理。

我們的世界色彩無處不在，正是因為斑斕的色彩，才會讓一切看起來更具魅力。而在這些色彩中的任何一種顏色，都具有色相、明度和純度三種屬性。

色相：即色彩的相貌，是區別各種不同色彩的最準確的標準。

這是24色相環，生活中常見的基本顏色就包含在裡面。

明度：顏色在明暗、深淺上的不同變化，也就是色彩的明度變化。色彩的明度越大，顏色看起來越亮，色彩的明度越小，顏色看起來就越暗。

純度：指色彩的純凈程度，它表示顏色中所含有色成分的比例。同一種顏色含有灰色的成分越多，純度越低。

無色彩系：指黑色、白色以及黑白兩色混合而成的各種灰色系列。無彩色系只有一種基本性質——明度。

不同的色彩給人的印象是不同的，當然這種印象一般和國家的文化有關，比如中國的紅白喜事，還有黨政紅色文化等。

給大家列舉一些具有代表性色彩的印象。

顏色使用方法不同，留給人的印象也大不相同。在PPT中如果不使用彩色，不僅很難理解重要的地方，甚至讓人感覺準備不用心；如果顏色使用得太雜也會妨礙人們對內容的理解。

顏色的種類太少或太多都不好,包括背景色一般不要超過4種。

為了讓色彩發揮出更好的效果，就需要遵守一定的法則。

法則1：不要使用飽和度過高的標準色

飽和度太高的標準色不僅對眼睛不好，而且讓人一眼就能看出是隨意選擇的顏色。所以，盡量不要使用PPT中自帶的顏色（尤其是黃、紅、藍、綠燈標準色），而要選擇稍微穩重些的顏色。

法則2：使用同色系的顏色來減少顏色的種類

顏色種類過多，並不利於閱讀，可以使用已經出現的顏色或與它同色系的顏色。

法則3：背景顏色和文字顏色的明度要形成對比

要想提高易讀性，加強對比是非常重要的。如果背景顏色和文字顏色的明度沒有形成對比，文字閱讀就比較費勁。比如背景是暗色，那麼文字就應該是明亮的顏色。

法則4：避免明度接近的顏色搭配在一起

並不是背景和文字分別使用完全不同的顏色就容易閱讀，如果彼此明度相似，將導致文字特別晃眼，出現「光暈現象」，一定要避免。

法則5：從圖片和照片中抽取顏色

圖片和照片都有多種顏色，應從中選擇能代表其整體的顏色。選取圖片和照片中出現的主要顏色作為主色或強調色，這樣能讓顏色具有較強的統一性。

給大家推薦一個配色網站（http://www.58pic.com/peisebiao）

上面的這些顏色都是設計師已經搭配好的，可以根據色相搭配和印象搭配選擇自己喜歡的配色哦。

歡迎關注「重文讀書會」微信個人公眾號

http://weixin.qq.com/r/my7N1dHEDIxzrZW293uJ (二維碼自動識別)

推薦閱讀：