設計概念說明　✕　設計應用實際範例

掌握版面設計的基礎概念，編排出最吸引人的版面，不再是問題！

生活中四處充斥著廣告、LOGO和傳單

你以為它們本來就該是這個樣子嗎？

事實上，心思細膩的設計師們，巧妙利用空間和視覺效果

將很多不必要的雜訊過濾，重新排列組合，如同拼圖

力求將最直接、清晰的訊息傳達到你我眼前

如果你是設計新手，如果你空有技術獨缺審美

那麼你一定要看——

◎本書內容概要◎

關於版面設計概念：

整體構圖、留白多寡、色彩對比、標語配置、主打客群、視線引導、元素的重覆與韻律、欄位配置、開數‧版心與邊界……
 

多種應用媒介例舉：

書籍‧雜誌的封面＆內文版面、網站‧網頁瀏覽頁面、APP頁面配置、海報‧文宣設計……

你每天早上出門前，會不會想打開手機，確認一下今天的天氣狀況？蔚藍的底色上，蛋黃般又大又圓的太陽躲在雲層後方，天氣差的時候，灰暗的螢幕上有動態細雨飄落，只要滑進去一眼就能看到各個時間點的氣溫和一周天氣預報一字排開，最底下幾個小圓點暗示你還有下一個頁面，簡潔明瞭的互動式設計，讓人毫不猶豫就能把手指向設計師想要你觸碰的地方。去時早餐店的候，你在琳瑯滿目的菜單上，會優先留意標星號的餐點嗎？走在路上收到一張活動傳單，你最想第一眼看到的，是活動時間，還是活動內容？電影院的特價優惠訊息，限定年齡七十歲以上的長者，你一眼掃過去，沒有停下腳步走到了下一個街口……

像這樣，我們的生活中處處都看得到「設計」，優質的設計即為過濾多餘的雜訊，讓觀看者感覺舒適，進一步達到「參與」或者「消費」的最終目的。

你肯定也收到過字體大小不統一、配色讓人眼花撩亂、各種元素像跳樓大拍賣的花車衣物一樣擠在一起，讓人海底撈針也找不出重點的海報傳單，而絕大部分的受眾就如同麥肯錫的30秒電梯理論所說的一樣——時間寶貴，拒絕廢話，只想迅速了解重點。

你既不能開門見山告訴他們：「嘿，過來消費（使用）吧！」又必須將這個目的簡明扼要地傳導進他們大腦，讓他們對你的設計產生認同，進而對商品有了自主購買或使用的慾望，這個時候我們就必須仰賴設計美感，來將想要精確投遞到受眾手中的訊息消化成多個簡短的要素，利用文字、配色和圖片，按照重要程度排列先後順序，重新建構成一個容易快速了解的訊息媒介。

你只需要多觀摩優良的設計，自然而然會獲得基本品味，當然如果你抓不到訣竅，也可以翻開本書學習，平面設計大致上有一個共同的「規則」，在這些規則下做變化，你的設計就不至於跑得太偏。

本書除教授設計相關的基礎知識，以及實用設計原則之外，更收錄大量作品範例，藉由欣賞與分析，了解這些設計的優點與缺點。亦提及吸引不同年齡、客群的設計重點參考。

【打開本書，你會獲得什麼？】

■網羅豐富而多元的基本排版原則

所謂的「基本排版原則」指的正是在平面設計漫長的歷史洪流中，千錘百鍊之下總結出來的產物。這些原則是版面設計上的普遍性的常識，並不會輕易隨著流行而改變。只要掌握這些設計原則，就能夠學以致用到各種設計上面。

■介紹排版設計上的潮流演變

每個時代都有屬於它的流行設計，了解潮流、掌握現代人接受怎麼樣的設計也是十分重要的功課。書中會介紹各國的優良設計範例，而了解何謂優良設計，便能磨礪「品味」。品味並非有限的天生才幹，而是藉由觀看設計來累積的能力。只要琢磨自己的品味，任何人都有辦法分辨「好設計」與「壞設計」。

■收錄「設計的流程」教學

不只給你工具，還教你該如何「善用工具」！

了解排版原則之後，還要懂得如何學以致用。本書於「Chapter 4‧排版的方法」中，列出進行設計的各項流程，並提供各個階段的製作建議，只要按部就班地進行下去，就能夠探索、總結出心中理想且最符合需求的設計作品。

【如果你是設計新手，你應該做什麼？】

■多看、多收集

每個設計師都應該有一個寶藏資料夾，分門別類收藏了自己平時索取到的傳單或LOGO等設計品或資料，等到自己開始接CASE的時候，就能知道別人大概都是怎麼做的，光用眼睛看你就能培養審美品味，這麼舒服的事應該從現在就開始！

■多孰悉設計軟體

設計是用眼睛看的，但成為好的設計師可不是用眼睛看就能解決問題，應該要多多練習，確保自己熟悉設計師常用的幾款軟體，並了解它們是否能夠互通，乃至於實際輸出成紙本的規格、色差等問題，不要讓錯誤的知識盲區成為絆腳石，熟練、自信才是你和客戶談條件的最大武器！

■了解規約

雖然設計有一定的自由程度，但如果你碰上某些特定情況，如：網站架構、手機APP等UI設計，那麼就必須要事先了解各家的不同規範，以免完成了設計之後才來頭大。

■實際動手設計

光說不練沒有成效，在看過這麼多的設計後，你應該做的是立即打開新檔案，在空白的畫布上擺上文字訊息，利用先前反覆練習的製圖技術，或者取一張白紙，先畫出草稿，再一一將物件具象化，這像一個拼圖遊戲，一開始也許沒有頭緒，但漸漸的，經歷過無數個版本的演化之後，總會找到一個最適合的。

【如果你是設計老鳥，還可以怎麼玩？】
 

■改進、創新

過去的設計真的好嗎？經常接稿的人，是不是久了之後會因為太過熟悉而形成一種反射條件，總是像套模板一樣操作，覺得審美疲乏？你應該跳脫舒適圈，進一步學習創新的設計方式，也有可能讓你固定配合的客戶眼睛為之一亮，進而推薦給新客戶喔！

■留白

最高級的設計不只是將過多的訊息排列整齊，去蕪存菁利用大量留白凸顯重點才是好設計的最終進化，留白能看出一個設計師對自己手上掌握的訊息是否相當了解，本書會告訴你文字上的留白，圖像上的留白，怎麼留白才能留下最美！

■嘗試不同媒介

如果你過去都在做平面設計，那麼也許你可以嘗試做做網站或者UI設計，平面設計的資訊有限，新世代的APP屬於互動式設計，在過去看來不應該切分的畫面故意將一半資訊停留在上頭，好讓操作者知道還可以往下滑動，你必須猜測使用者會把手伸向哪裡，去探索他們想要了解的訊息，轉換媒介可以活化你的思緒！

■了解設計歷史

設計的歷史，你了解多少？了解設計的歷史也是了解各種不同設計的起源，儘管設計並不像美術一樣分流派，但知識的是攝取可以讓你在參與各種設計師論壇和交流時不虛，又或者你準備成為老師？那麼就千萬不可以錯過這堂補課！

作者

米倉 明男

曾於AOL（America Online）擔任藝術總監，從事APP UI設計與其他各項設計。2007年後自立門戶成為自由工作者，並於專科學校Digital Hollywood擔任UI設計與文字排印的講師。

生田 信一

編輯、寫手。經營書籍與雜誌製作公司Far, Inc.，著有許多設計、DTP、印刷方面的書籍，亦於網站「活版印刷研究所」與「設計誌」（デザログ）耕耘專欄與採訪文章。此外也擔任許多教育機構與研習會的講師，目前為東京設計專科學校的兼任講師。

青柳 千鄉（培根）

平面設計師／部落客。1984年生，現居於北海道，擅長以創造力為武器，創作各式設計、影片、音樂。其經營之「培根先生的世界部落格」內容包含設計師煩惱諮詢、字體的使用方法、淺顯易懂的設計基礎講座等等，每個月瀏覽次數超過10萬人次。

培根先生的世界部落格：www.baconjapan.com

目錄

Chapter1 排版可以改變什麼
1-01 好的版面與壞的版面    008
COLUMN Logo設計中充滿了排版的基礎    013
1-02 好的版面便於理解        014
COLUMN 難以理解內容的版面出了什麼問題    017
1-03 你的傳達對象是誰        018
1-04 排版方式改變，傳達方式也會改變    022
COLUMN 優秀的設計師都是設計收藏家    024
 
Chapter2 排版的基本原則
2-01 對齊        026
2-02 相近        030
2-03 重複        034
2-04 對比        038
COLUMN 調整字距來影響視覺效果    040
2-05 優先順序        042
2-06 視線引導        046
2-07 留白        050
2-08 分割        054
COLUMN 電腦網頁與智慧型手機上的分割        057
2-09 黃金比例、白銀比例    058
2-10 網格系統        062
2-11 網格系統的建立方法    066
2-12 2欄網格的草圖與範例 070
2-13 3欄網格的草圖與範例 072
2-14 4欄網格的草圖與範例 074
2-15 對稱與非對稱        076
2-16 中軸        080
COLUMN 活用原先格式        082
2-17 輻射、圓形    084
2-18 隨機        088
2-19 模組        092
COLUMN 了解規約        095
2-20 開數、版心、邊界        096
2-21 分頁        100
COLUMN 讀者自行分頁        102
2-22 通用設計        104
COLUMN UD 字體 105
COLUMN 如何蒐集設計        108
 
Chapter3 排版的應用技巧
3-01 三角形構圖    110
3-02 善用形象        112
COLUMN 為什麼會出現感覺類似的設計    113
3-03 顏色與元素的重複        114
3-04 利用圖示降低理解難度        116
3-05 基本色與多色的用途區別    118
3-06 利用資訊圖表化繁為簡        120
3-07 利用圖表簡單傳遞資訊        122
3-08 利用格線劃分區塊        124
3-09 利用曲線帶出柔軟度    126
3-10 利用對話框引導視線    127
3-11 利用數字拉出引導線    128
3-12 使用具立體感的物件    130
3-13 利用色塊區隔資訊        131
3-14 使用有規律的圖紋        132
3-15 組合直式與橫式文字    134
COLUMN 排版是設計的重要元素之一        135
3-16 創造方向性來引導視線        136
3-17 創造韻律感減輕負擔    138
3-18 加入幾何學美化版面    140
3-19 利用文字對比強調重點        142
3-20 加入色彩對比        144
3-21 加入強調元素        146
COLUMN 雙向互動的UX設計      147
3-22 利用文字排印加深印象        148
3-23 結合照片與廣告標語    149
3-24 照片的效果、方形照片與出血的用途區別        150
3-25 編排去背照片        152
COLUMN 穿出畫面的分割    153
3-26 大量留白        154
3-27 自由配置        156
COLUMN 了解設計的歷史    158

序／導讀

序

「Layout」在設計上指涉版面編排，「排版」是為了使一項設計成功傳遞內容給觀看者，而去思考哪個地方要擺放什麼元素的行為。
 

版面在設計上扮演著十分吃重的角色，本書以說明「版面」之內容為主，簡單來說可以幫助讀者學會兩件事情。
 

一是習得大量的排版基本原則。排版的基本原則是令設計看起來更為美觀的方法，詳情請見Chapter 2。

本書所介紹的排版基本原則，乃先人於平面設計漫長的歷史洪流中千錘百鍊之下的產物，如今已是普遍性的常識，不會隨著流行而改變。相信各位讀者透過本書學會的技巧，都是能用上一輩子的武器。

二是排版的潮流。每個時代都有屬於它的流行設計，了解潮流、掌握現代人接受怎麼樣的設計也是十分重要的功課。書中會介紹各國的優良設計範例，而了解何謂優良設計，便能磨礪「品味」。品味並非有限的天生才幹，而是藉由觀看設計來累積的能力。只要琢磨自己的品味，任何人都有辦法分辨「好設計」與「壞設計」。

具普遍性的「基本原則」與隨著時代演變的「潮流」看似完全相反，其實本是同根生。本書會藉著分析諸多優良設計範例，解說排版的基本原則是如何實際運用於設計。相信各位讀者讀後也能明白基礎和潮流之間的異同。

當各位讀者掌握基本原則和潮流後，再翻開Chapter 4或參考本書舉出的各項範例，自己動手嘗試設計看看。設計時，背景知識固然重要，然而「光是知道」可沒辦法做出好設計，必須親身實踐並反覆修正，這些知識才會內化成自己的東西。

去思考、去動手，只要將學到的知識與技術結合，任何人都有辦法做出優良的設計。

願本書能化為各位平日做設計時的助力。

謹代表全體作者 米倉 明男