版面設計指的是在書籍、刊物或網頁上安排內容與物件的過程。良好的版面設計能夠有效地傳達資訊，協助讀者吸收內容。
然而在現今商業社會為了觸發消費行為，人類的專注力被各種訊息爭奪，該如何勾引讀者的注意力，也成了設計師必須面對的挑戰。
本篇將根據自己製作紙本書籍的實務經驗，歸納出能有效提升閱讀體驗的方法。即便設計師在面對龐大的資訊時，仍能設計出清晰達意並且引人入勝的版面。
我將執行版面設計的工作流程分成三個階段，本篇會先簡述前兩階段的目標與目的，以及簡單列出使用了哪些方法來達成：
（一）增加易用性：舒適閱讀且容易理解 （二）引人入勝：激發興趣 （三）保持一致：強化品牌印象（敬請期待……）
（一）增加易用性：舒適閱讀且容易理解
閱讀的媒介隨著科技進展變得越來越多元，但無論形式為何，其「傳達資訊」的本質仍不改變。
進行設計前會先了解編輯的企劃方向以及市面上同類型書籍的樣貌，來判斷讀者群與閱讀環境。若有餘裕的話，建議親自閱讀及理解內容後再著手進行設計。之所以這麼做是為了「同理讀者」，使我們在編排每一項物件時能從讀者的角度去設想。
以下列出三項可增加易用性的方法：
從讀者的角度出發：尺寸、重量與厚度
書籍的尺寸廣泛，設定尺寸時可從敘事類型（小說、百科、旅遊攻略……）和閱讀環境出發。例如，攝影書經常設定成大尺寸精裝本，使用塗布細緻、顯色飽滿的紙材，具有收藏價值；語言教學書經常設定成小尺寸平裝本，用紙重量較輕，利於攜帶與單手掌握。
先對讀者與閱讀環境有了解，便會對書籍結構有初步構想。另外，除了考量讀者的閱讀環境，也要注意印刷時的「全紙尺寸」和「全紙裁切前的對折次數」以免浪費紙材和預算。下圖為台灣印刷廠常用的尺寸：
在台灣，印刷廠的全紙尺寸多用菊版、四六版。對折一次稱為對開、對折兩側稱為四開……以此類推。 image credit: wiki
而書籍的重量與厚度，跟紙的基重（g/㎡）與條數有關：
紙的基重（g/㎡）：紙材每一平方公尺的重量。
紙的條數：也就是紙的厚度，1條等於0.01mm
不同紙材會因其纖維、黏著劑或填料不同以致密度也不同。所以條數與基重兩者關係不成正比。挑選紙材時建議留意紙樣上標示的資訊表，或詢問紙廠業務。
加入節奏感：落版
閱讀為靜態的行為，但其實所有行為皆會隨著節奏造成身體或內心的變化。例如，同樣屬於靜態行為的看電影或聽音樂會，觀者的身體緊繃程度與情緒會因場景、劇情和配樂而有所起伏。即便需收起手機、維持同樣的姿勢長達兩、三小時仍然令人享受其中。
至於閱讀如何創造如電影和音樂的節奏感？
設計師則可以先從「落版」著手——落版是針對書籍的每一頁規劃其需呈現的內容。我們可以將它想像成音樂節拍，如下圖所示，白色1為內文與藍色2為滿版圖片，我們將它們交錯模擬出1、2、1、2的節奏。這麼做能讓讀者在一段長文閱讀後稍作休息，提供消化資訊的時間間隔。
Images credit: The Layout Book by Gavin Ambrose and Paul Harris
圖片佔比高、資訊類型豐富的圖文書，則可以使用更複雜的韻律（如下圖所示）。
Images credit: The Layout Book by Gavin Ambrose and Paul Harris
規劃複雜的韻律可使閱讀變得活潑有趣，並有利於讀者在非線性翻閱的狀況下，仍能有線索地查找內容。此外，也可加入拉頁、不同紙材和特殊色印刷等效果，來創造驚奇感。
初期，我會以手繪草圖或表格來示意，與編輯溝通確認後，再使用排版軟體進行更細部的版面設計。
策略性編排：將資訊分類分層
如何提升人類的閱讀效率？現今有許多學科對此進行分析。例如：視覺熱點、黃金分割比與完形心理學等等，已有越來越多不同領域的研究成果，能支持設計師產出「有效」的設計。
以下將列出三項能有效處理資訊的方法。設計師可以使用這些原則作為設計的基礎。
建立層級：
建立清晰的資訊層級，使畫面更清楚易讀。能使讀者的視線自然地受引導，提高繼續閱讀的意願。
設計師可依據資訊的重要程度來分級，並針對每一級對應特定的視覺效果。例如，章節的標題可以使用有表現力的字型來吸引注意力；內文則可以使用中性、清楚易讀的字型。以便人腦直覺地判讀資訊，首先看到最重要的內容。
文字可依其重要程度對應不同的字型、大小、字重、字距和行距等。SIGNATURE Watch & Jewelry designed by nakamuragraph
使用網格系統（Grid system）：
網格系統能協助定位與組織頁面上的物件，創造整潔和一致的版面。欄與列的間距稱為溝間（gutter）有引導視線，使讀者掃視內容時更容易、快速的效果。
此外，用網格系統建立版面，有助多人協作時訂定物件定位的規則，加快團隊的設計流程。
若想了解更多網格系統相關內容。可參考《版面設計基礎：鑑古推今為媒介構造網格設計系統》。
Images credit: The Layout Book by Gavin Ambrose and Paul Harris
了解完形心理學（Gestalttheorie）：
完形心理學又稱格式塔原則。描述人類在感知物體時，如何對相似物件進行分組、判斷以及簡化複雜圖案。
原則包含：相似性（Similarity）、接近性（Proximity）、連續性 （Continuity）、封閉性（Closure）、共同區域（Common region）、對稱性（Symmetry）和不對稱性（symmetry）……等。
熟知這些原則，將有利於設計出適合大腦直覺判讀的版面。若想了解更多完形心理學相關內容。可參考《Gestalt Principles: The Complete Overview》
images credit: Gestalt Principles: The Complete Overview
（二） 引人入勝：激發興趣
商業社會為了觸發消費行為，使得設計師要處理的狀況除了傳達資訊，還包含吸引人們的「注意力」。
以下簡單列出幾項常見的手法，這些手法不是什麼新穎的觀念，想深入探討的話，網路上有非常多內容和線上課程可以自主學習：
從讀者的角度出發：內在興趣
色彩心理學（Color Psychology）：
色彩心理學是研究不同顏色如何影響人類情緒和行為的學科。設計師可根據書籍內容以及讀者群來思考配色，並使用一些基本的色彩意涵來為設計提供發想基礎。例如，黃色可能會被認為是熱情、可口的；藍色可能被認為是平靜的、具專業度的。
但要留心色彩意涵可能存在著文化差異，例如，白色在西方世界代表純潔，而在華人世界則象徵死亡。
此外，配色使用的「比例」也會對人類的感知產生不同的影響，例如將紅色用作主導氛圍的主色，與將紅色用作畫龍點睛強調色，兩者給人的視覺效果截然不同。
images credit: Huang Chi Yun
右圖以紅色作為主色，左圖以紅色作為強調色。
圖片主題與風格：
圖片通常比黑白文字更吸引人，尤其是圖片的主題是讀者感興趣的事物時，效果更明顯。例如：愛狗人士可能會立即被小狗的圖片所吸引。
而圖片風格也會大幅影響書籍的氣氛。因此，建議先收集期望的風格給攝影師或插畫家參考，讓圖片素材符合預期。
Milanote 是一款適合用來製作情緒版的協作工具。上圖便以 Milanote 示意了兩種不同的攝影風格與主題。images credit: Milanote
生活感的料理與人物圖片，可創造出溫馨、充滿滋味的畫面。Images credit: 翼の王国2022年3月号 designed by nakamuragraph
強調與破格：引起注意力
文字的魅力：字型、抽言
文字若適當處理，同樣也是激起讀者興趣與情緒的元素之一。例如，下圖的雜誌開門頁，大膽地使用多種字型與繽紛色彩，不僅引起讀者的注意也創造出活潑的氣氛。
Images credit: LOGOS SELECTION CATALOG 2022 designed by nakamuragraph
若遇到篇幅較長的文章時，設計師可從文章中節錄一句重點作為「抽言」，並將之放大置於版面之上。提起讀者對於文章內容的興趣，也提供視覺休憩與消化資訊的空間。例如，下圖將抽言放置於圓形的留白之中，吸睛效果加成。
image credit: KSIOKS
形狀與線條：
形狀與線條可以說是平面設計的基礎。它們能在頁面上引導視線和凝聚內容，更重要的是它們能創造圖案來補助說明內容。
例如，下圖為 NHK 的語言教學課下載卷。設計師放上音訊符號作為視覺焦點，並以對話框來凝聚文案，最下方還繪製出手機和電腦圖形來指示收聽課程的媒介。
NHK音声ダウンロードチケット designed by nakamuragraph
值得一提的是，形狀中最有趣的莫過於「圓形」。教育家及知名平面設計師 Kimberly Elam 在《網格系統：字型編排原則》指出：
「圓形就像所有形狀中的鬼牌。人類的眼睛天生就喜愛圓形，無可避免的會注意到它。就算圓形被放在其他形狀之中，或是被放得非常非常小，都仍有不容忽視的視覺吸引力。」（Kimberly Elam, 2004）
將商品放在圓形之中，並以線條引導視線。Smart LOGOS vol.18 designed by nakamuragraph
留白（負空間）：
留白是版面上未被利用的區域。雖然說是「未被利用」，但留白在設計中是不可或缺的關鍵元素之一。
就易用性的層面來看：留白能暗示物件的關係（詳見完形心理學）、使注意力聚焦在主體上、放慢閱讀節奏，避免讀者面對大量資訊時心力憔悴或分心。
不僅如此，留白也可以建立風格。例如：畫冊圖片的四邊留白會帶出一致感，讓人聯想到畫廊藝術品的四周的裱框卡紙；時尚海報人物主體之外留白，能創造聚焦的視覺空間，給人現代、俐落的印象；商場傳單填滿促銷與折扣訊息，留白空間較少，激起急迫感。
左頁在照片四周做出裱框卡紙般的留白，右頁雖然是滿版圖，但人物與文字外黑色的部分也可以稱作留白，帶有現代感同時將視覺集中在主體。，image credit: Dior Homme
視覺重量（Visual weight）
「視覺重量」是一個平面二維物件吸引視線的量度。通常受一種或多種視覺效果影響。例如，對比度、大小、質感、顏色和留白。視覺效果越鮮明，物件便越吸引視線，視覺重量也就越大。
而有了重量，便需注意另一項衍生的元素「平衡」。
平衡有助於營造視覺上的穩定與和諧。當版面達成平衡時，就會特別令人順眼，使得整體設計具有凝聚力，有效地傳達資訊。
這種平衡可以是對稱（Symmetrical Balance）或非對稱（Asymmetrical balance）。
左邊是對稱平衡、右邊是非對稱平衡。images credit: NN/g Visual Design Terms Cheat Sheet
非對稱是透過不同視覺重量的物件繞著頁面無形的支點線（fulcrum line）相互牽制，使得整體視覺產生平衡。
因此達成非對稱平衡較為困難，需仰賴設計師的天份或經驗。不過有效使用的話可創造出活潑、動感，但在視覺上卻和諧的版面。
對稱平衡。dancyu スパイス designed by nakamuragraph
將視覺重量最重的紅色安排在頁面下方，並且在左頁放上兩欄文字，右頁放上單欄文字，穩固傾斜的三雙鞋，巧妙地達成非對稱平衡。Runners Pulse Magazine Vol.08 designed by nakamuragraph
未完待續
隨著設計實務經驗累積後，我開始有意識地思考一件作品之所以賞心悅目和清晰達意的原因，「美」這件事就變得不那麼單純了。
文章中歸納了我在執行設計時所做的每項決定的原因，這些原因不是以個人的美感出發，而是考量讀者（使用者）與市場因素，作為能幫助自己製作出「有效的」設計的依據。
若想了解版面設計工作流程的第三階段「保持一致」，歡迎點擊《版面設計基礎：保持一致的重要性與如何進行多人協作》前往瀏覽。內容說明保持一致的重要性，需注意的細節，以及如何定義清晰的設計規範，以提高工作效率。
Read more
《版型研究室：學會平面設計中難懂的數學題＆美學邏輯，最基礎的版型理論》 作者： Gavin Ambrose, Paul Harris 出版社：原點 👉🏻點擊了解更多
《文字排印設計系統》 作者：Kimberly Elam 出版社：臉譜 👉🏻點擊了解更多
Comentários