在我們的日常設計中無論是文字、圖片、形狀、等各種細小的元素都是版式設計中的組成部分，那麼我們要如何處理好他們的排版關係呢，今天將分享平面設計的排版祕籍，一起來學習哦。

注意：下方乾貨滿滿，知識點密集，請大家靜心觀看～

今年第二季度拉了一羣小夥伴一起來學習平面設計相關的知識，最主要目的是爲了讓年輕的設計師紮實打好設計基礎。既然是活動，一定要有個聽起來不明覺厲的明白後又覺得很有道理的代號，於是乎 GDLP 「平面設計學習計劃」誕生了。

自學設計的我，結合多年工作中血和淚的教訓，憋出了 2 個塞滿乾貨的課程做設計分享。由於篇幅較長，需要分上下 2 集來說完。以下是本期的內容目錄：

平面設計中的排版

1. 平面設計的四個原則
2. 比例和網格
3. 點線面的使用
4. 一些小細節 tips

01、 平面設計的四個原則

關於平面設計的 4 大原則，在 RobinWilliams 所著的《寫給大家看的設計書》裏面已經寫得很詳細了，很多小夥伴也都看過。

• Contrast / 對比；
• Repetition / 重複；
• Alignment / 排列；
• Proximity / 親近；

● 現代主義設計的先驅 Jan Tschichold 說過「對比是平面設計中最重要的元素」。對比不光有我們最熟悉的大小的對比，還有顏色的對比（撞色）；空間上的對比（清晰&模糊）；時間上的對比（傳統&未來）；表現形式的對比（雜亂&整齊）等等……

● 重複並不是單調的複製，重複可以用少數的元素快速傳達畫面想要傳達的信息。重複還可以形成一種風格，運用在品牌設計中就是一種符號，也是奢侈品常用的視覺手法。

（去年 Burburry 升級新 logo 重複排列組成圖案）

● 排列手法有一個很大作用是視覺引導，讓畫面中的元素找到平衡，更理論化的是讓排列形成一個系統，例如“網格”，這個後面會詳細說到。

(企鵝圖書封面 – 用網格設計的來排列的經典案例）

● 「親近」是英文的直譯，簡單理解來說就是元素與元素之間關係的處理。我們把畫面中的元素按一定邏輯關係排列。關聯的元素之間相互靠近，無關的元素之間相互遠離。

「道士下山」海報 – 黃海，這裏面對設計原則的使用你都看明白了嗎？

雖然這 4 點是平面設計中最基礎的原則，但最簡單的東西也往往是最「複雜」的。無論是平面設計還是 UI 設計都脫離不了這些基礎原則框架，這是打好基礎的第一步。

02 比例和網格

很多小夥伴往往都會使用 4 原則，但是在設計排版一些結構複雜的內容時，往往無法下手或是上下左右挪來挪去得糾結。

這時候藉助一些「工具」來搭建框架是個簡單有效且快速的方法。這裏說的「工具」就是比例和網格，它在設計佈局中的作用是非常重要的，但非平面科班畢業的設計師可能很少有機會深入瞭解使用，所以這裏重點多說一些。

平面設計中常用的比例有：

• 黃金分割 / 黃金比例
• 三等分/九宮格
• 斐波那契額數列
• √2 / √2矩形

●黃金分割/黃金比例大家都知道，就是 0.618 ，這個比例在 logo 設計等需要加入更多玄學來背書的設計類型中比較常用。最簡單的用法栗子：b = a * 0.618，這裏的 a、b 指代是線段長度、圓的大小等任意尺寸單位。

●三等分/九宮格在攝影構圖中使用的比較多，簡單容易理解就不多介紹。

●斐波那契額數列聽起來很厲害，它其實就是黃金比例的數學近似版。數列規則即後一個數字是前 2 個數字相加的和。也就是 0，1，1，2，3，5，8，13，21，34，55，89，144，233 …

知道這個數列後，那麼具體怎麼使用呢？最簡單的就是依照數列畫參考線網格作爲排版的依據。

● 最後一個 √2矩形 聽起來很奇葩，但它其實就是我們平時最常見的 A系列紙（A2、A3、A4等）。

它的構成方法是，先畫一個正方形，然後連上對角線，再將對角線以一終點爲圓點畫圓旋轉，轉到與正方形一邊重合時，構成 √2矩形 的長邊，正方形的邊則是 √2矩形 的短邊。

「小知識」：再延展一下，繼續連上 √2 矩形 的對角線，旋轉，重合構成更長邊的矩形是 √3 矩形。以此類推還可以有 √4 矩形，√5 矩形，√6 矩形 ……

瞭解了一些比例規則後，讓我們來看一下 Josef Müller-Brockmann 大佬設計的海報。不知道你有沒有發現出一些比例上的規律？

（右滑查看答案）

可能有的小夥伴雖然對上面的海報不明覺歷，但感覺有點花裏胡哨沒啥作用呢？非也， Josef Müller-Brockmann 大佬其實就是《網格系統》的作者，書裏介紹的強大的網格工具讓平面設計師面對複雜的書籍、雜誌、報紙排版時也可以輕鬆愉快。書裏面的觀點方法對網頁、APP 的設計也有很多參考價值。

03、 點線面的使用

關於點線面

• 點：畫面的信息及點綴，裝飾平衡
• 線：畫面的信息及方向引導，造型，分割信息
• 面：畫面的整體氛圍基調，作爲主體信息或背景輔助

在基本平面設計當中，你可把點當做一個文字或單獨小元素，線是一句文案，而面，則是一段文字等等。

需要注意的是，點線面之間，沒有絕對的界線。它們可以通過程度的變化自由變換。例如下圖 B 相對於 A 來看，B 是面；B 相對 C 來看，B 是點。E 可以看成是更密集的 D；F 可以看成是更高的 E。

點成線，線成面，點是幾何中最基本的組成部分。很多點聚在一起可以組成韻律和圖案，點的疏密，重複，規模和數量變化都能對畫面效果產生關鍵影響。

線具有很強的視覺引導性，它是連接任意兩個點的路徑。表現形式可以有直線、斜線、曲線、實線、虛線等等。

面有一定的長度和寬度。不同的形態的面可以在視覺上表現出不同的情感。直線形的面具有穩定、秩序感；曲線形的面柔軟、輕鬆、活潑；不規則的面則會更自然生動。

無印良品的海報就是點線面運用最簡化的經典案例：

04、 一些小細節 tips

細節決定成敗，平面設計中有很多值得注意的小細節，這裏把它歸成 Tip 列一下：

● 注意按鈕內部上下留白，留白多可以簡單快速地讓界面看起來更大氣。

● 軟件中（ sketch 和 figma 等 UI 設計工具還不支持）開啓避頭尾和間距組合。可以避免標點符號出現在句首，爲中西文混排時增加半角空隙（ 用 sketch、figma 手動加空格的你哭了嗎？）。

● 因爲中文是方塊字，所以字符高度一般比常見的非襯線西文字符更高。所以在中西文混排時可以手動調整西文大小，讓中西文保持在一個和諧的高度上。做法通常是增大西文的字號，再使用基線參數向下偏移西文位置。

（手機橫過來看比較清楚）

● 注意視覺平衡/對齊，不同造型的元素有不同的視覺大小，例如一個變長 400px 的正方形和直徑 450px 的圓形在視覺大小上其實是想當的。

● 背景的深淺會影響對其的方式。

●設計長表格列表時背景色（條紋）分割比線分割更好，看圖就知道了。

分享後留了個日曆內頁設計的小練習，讓小夥伴們在實戰中加深對理論和工具的理解。雖然題目很小，但對一些平時接觸平面設計比較少的插畫師、交互設計師來說也是個不小的挑戰。下面是小夥伴們一些練習作品：

好記性不如爛筆頭，學習了再多高深的知識，都不如實際練習領悟的正切。同時在實際練習中我們還可以舉一反三，更深入的理解。小編就不多講不講大道理了，咋們下期見。

作者 | 流利說設計團隊

來源 | 流利說設計團隊（id:LLS_Design）

推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com

交流：結交更多有才華的設計師？請加入UI設計QQ羣，與50000名設計師交流設計。

相關文章