入門必學 拿來即用的版式設計法則 009

法則SECTION 1統一，拒絕散亂的頁面 010

法則SECTION 2節奏，增加版面活力感 012

法則SECTION 3對齊，讓版面整潔清晰 014

法則SECTION 4平衡，營造版面穩定感 016

法則SECTION 5留白，增加版面格調和透氣感 018

法則SECTION 6聚攏，讓瑣碎訊息井然有序 020

法則SECTION 7層次，讓閱讀更高效 022

法則SECTION 8重複，使版面簡潔統一 024

法則SECTION 9對比，讓訊息更加強烈直觀 026

法則SECTION 10網格，處理易顯雜亂的圖片 028



CHAPTER01設計新手快速入門 031

SECTION 1初識版式設計 032

‧什麼是版式設計 032

‧如何完成一次完整的版式設計 033

SECTION 2人人必知的版面構圖元素 034

‧「點」的編排構成 034

‧「線」與空間的關係 035

‧「面」的版面構成 037

SECTION 3如何選擇開本大小 038

‧根據媒體選擇版面開本 038

‧根據紙張選擇開本類型 039

‧根據頁邊空白選擇開本大小 039

SECTION 4如何調整版面率 040

‧增加或減少版面空白 040

‧透過改變圖像面積大小調整圖版率 041

‧改變色底顏色使版面充實 042



CHAPTER02版式設計構成法則 043

SECTION 1根據主題選擇適合的構圖方式 044

‧加強畫面感染力的垂直構圖 044

‧表現穩重安定的平衡構圖 045

‧表現時尚主題的傾斜式構圖 046

‧表現趣味性的曲線構圖 047

‧突出主題的三角形構圖 048

‧明確表達訊息的焦點式構圖 049

‧視覺衝擊強烈的聚集式構圖 050

‧輕鬆均衡的分散式構圖 051

‧活潑獨特的座標式構圖 052

SECTION 2 5種視覺流程，輕鬆引導讀者視線 053

‧單向視覺流程 053

‧重心視覺流程 054

‧反覆視覺流程 055

‧導向性視覺流程 056

‧散點視覺流程 057

SECTION 3運用合適比例優化版面效果 058

‧對比與平衡 058

‧四邊和中心 059

‧統一穩定的對稱形式 060

‧充滿視覺美感的黃金比例 061

‧打破平衡與約束的自由型 062

SECTION 4不可忽視的細節調整 063

‧統一邊線，增強秩序感 063

‧調整構圖元素間的間距 064

‧調整圖片的視覺重心 066



CHAPTER03營造氛圍的關鍵——文字 067

SECTION 1選擇合適的字體很重要 068

‧字體樣式影響版面風格 068

‧中英文字體應如何編排 069

SECTION 2恰當的字級大小和間距為版面增光添彩 071

‧印刷文字的字級規定 071

‧結合字體設置字級和間距 072

‧根據訊息內容設置行距 073

‧根據段落調整段間距 074

SECTION 3不同文字的組合編排豐富版面 075

‧文字的對齊方式 075

‧增強版面吸睛力的文字編排 076

‧文字的圖形化編排 078

SECTION 4文字與圖片的編排規則 079

‧統一文字和圖片的邊線 079

‧安排圖片和文字的位置 080

‧圖片與文字的色彩搭配很關鍵 082



CHAPTER04直白的解說家——圖片 083

SECTION 1調整圖片尺寸使版面鬆緊有度 084

‧放大含有重要訊息的圖片 084

‧縮小圖片，讓留白增加透氣感 086

‧運用圖片出血增強感染力 088

SECTION 2多種圖片組合打造更具吸引力的版面 090

‧井然有序地展示大量圖片 090

‧增大圖片的視覺張力 092

‧打破規則增添趣味感 094

SECTION 3結合圖片內容排出靈活的版式 096

‧學會利用圖片本身的動感 096

‧使用滿版圖片增強氛圍 098

‧圖片去背使版面通透活躍 100

SECTION 4圖片的適當裁剪讓表達更清晰 102

‧圖片的解析度與裁剪 102

‧透過裁剪突出圖片主體 103

‧透過裁剪刪除多餘的圖像 103

‧根據版面的編排方式對圖片進行裁剪 104



CHAPTER05版式的「骨架」——網格 105

SECTION 1初識網格系統 106

‧什麼是網格 106

‧網格系統的重要性 107

SECTION 2豐富的網格類型 108

‧穩定平衡的對稱式網格 108

‧生動靈活的非對稱式網格 110

‧基礎編排的基線網格 112

‧打破常規的成角式網格 113

SECTION 3網格的應用 114

‧分欄與分塊 114

‧如何在有限網格中靈活編排 116

‧探究網格系統的變化規律 118



CHAPTER06版式的顏值革命——色彩搭配 119

SECTION 1色彩知識大掃盲 120

‧色彩的基礎知識 120

‧色彩的視覺識別性 122

SECTION 2利用色彩表現空間感 125

‧烘托主題的冷暖色 125

‧和諧統一的同類色 127

‧增大張力的對比色 128

SECTION 3色彩在不同版面中的應用技巧 129

‧色調統一讓版面更舒適 129

‧強調色在版面中的導向性 131

‧黑白和雙色印刷讓版面更具表現力 133



CHAPTER07 UI版式設計 135

SECTION 1 UI版式設計必知必會 136

‧UI設計的特點 136

‧UI設計的版式編原則 137

SECTION 2實戰案例解析 138

‧服飾網購APP介面設計 138

‧旅遊APP介面設計 140

‧社交APP介面設計 142

SECTION 3優秀UI版式設計欣賞 145



CHAPTER08 網頁版式設計 147

SECTION 1網頁版式設計必知必會 148

‧網頁設計的特點 148

‧網頁的版式編排特點 149

SECTION 2實戰案例解析 150

‧WHEREBUY購物網站網頁設計 150

‧音樂網站網頁設計 152

‧圖庫網站網頁設計 154

SECTION 3優秀網頁版式設計欣賞 157



CHAPTER09 海報版式設計 159

SECTION 1海報版式設計必知必會 159

‧海報設計的特點 160

‧海報的版式編排特點 161

SECTION 2實戰案例解析 162

‧幼兒園招生海報設計 162

‧電子樂演出宣傳海報設計 164

‧個人藝術展宣傳海報設計 166

SECTION 3優秀海報版式設計欣賞 169



CHAPTER10 DM版式設計 171

SECTION 1 DM版式設計必知必會 172

‧DM 設計的特點 172

‧DM 的版式編排特點 173

SECTION 2實戰案例解析 174

‧城市之淚環境宣傳DM 設計 174

‧寵物之家DM 設計 176

SECTION 3優秀DM 版式設計欣賞 179



CHAPTER11圖書雜誌版式設計 181

SECTION 1圖書雜誌版式設計必知必會 182

‧圖書雜誌設計的特點 182

‧圖書雜誌的版式編排特點 183

SECTION 2實戰案例解析 184

‧美妝雜誌內頁版式設計 184

‧旅遊雜誌內頁設計 186

‧男性時尚雜誌內頁設計 188

SECTION 3優秀圖書雜誌版式設計欣賞 191



CHAPTER12 包裝版式設計 193

SECTION 1包裝版式設計必知必會 194

‧包裝設計的特點 194

‧包裝的版式編排特點 195

SECTION 2實戰案例解析 196

‧咖啡袋版式設計 196

‧果汁包裝版式設計 198

‧早餐穀片牛奶包裝版式設計 200



?

序



　　假設把一堆文字、圖片、符號等元素放到你面前，讓你把它們組合在一起，你會怎麼做呢？

　　路人：憑感覺隨機組合圖片文字……

　　學生：像做筆記一樣，把圖片對應文字，畫出重點……

　　學者：像寫論文一般，縮小圖片，文字做成大區塊……

　　版式設計師：將視覺元素遵循版式設計規律編排，進行視覺調整、布局優化，以達到更好地傳達訊息的目的。



　　版式設計是一門結合理性分析與感性審美的綜合學科，如果盲目地進行設計，沒有遵循版式規律，所產生的效果不會好。而這本集版式、色彩理論與實戰案例演練的設計書籍，將是你從設計新手直達版式高手的秘笈。



　　本書共有 13 章。開篇介紹了 10 種「拿來即用的版式設計法則」，讓讀者能快速瞭解版式設計的基本法則；接著從版式設計的構成法則、文字、圖片、網格、配色五個方面，全面講解版式設計原理；最後則是跨平台設計實戰案例篇，結合當下的設計熱門案例，使讀者能夠全面理解案例的設計過程。詳實的技巧解答幫助讀者解決設計中遇到的困惑、豐富的成功案例有助於提升審美和設計能力。



　　對於沒有版式設計經驗，或者有一定基礎但急需提高設計水平的讀者來說，本書是不二之選。衷心希望本書能提供有效的幫助，讓大家踏上版式設計的成功之路！

?