沒有排版基礎要怎麼 Freestyle!(下集)「比例、順序、群化」掌握排版三大核心

設計是一門和數學有關的學問,尤其排版更是經過精密的計算,不是如表面上單純的圖文編排!
評論
評論

本篇原文刊登於 Medium,INSIDE 經授權轉載。關於作者 00nyrhtak:一位設計熱愛者,憑藉著熱情逐步學習和累積,往心目中理想的設計邁進。目前在聊天機器人新創團隊實習,過著快步調的 UI/UX 生活,製作易用又迷人的產品!

下半場講者從三個排版的核心觀念切入,分別為「比例、順序、群化」,也強調設計是一門和數學有關的學問,尤其排版更是經過精密的計算,不是如表面上單純的圖文編排。

比例是一種倍數關係,所有的東西都有比例,就連人體從頭至腳都存在著某種比例。「三庭五眼」是臉長和臉寬的標準比例,「三庭」將人臉長度分為三個部分:髮際線到眉毛、眉毛到鼻尖、鼻尖到下顎;「五眼」以眼形長度為單位,將人臉寬度分為五個部分。常聽到的「頭身」就是身高和頭部的比例,五頭身代表身高是頭高的五倍。另外,手肘到手腕的長度相當於腳掌的大小,這個冷到不行的冷知識還幫助柯南破案呢!

人的手肘到手腕的長度相當於腳掌的大小 (source)

也有一些特殊的比例,如黃金比例、白銀比例、費氏數列,按照這種比例組成的事物可以表現出一定的舒適、和諧、美感。

黃金比例|Golden Ratio

 

上圖中黃金比例圖形長邊 a+b 和短邊 a 的長度比,等於 a 和 b 的長度比,比例大約是 1.618:1 ,關於黃金比例圖形的畫法和應用可以參考這兩篇文章:

自己也試著畫了一個黃金矩形, 這裡可以下載 AI 原檔
 

白銀比例|Silver Ratio

除了被廣泛運用的黃金比例,也有比較少見的白銀比例,下圖中白銀比例圖形長邊 a+b 和短邊 a 的長度比例大約是 1.414:1 ,國際間常用的標準紙張尺寸,長寬比例也是白銀比例。

 
 
依照 ISO 216 定義的紙張尺寸  (source)

王志弘設計的《短篇小說》書籍封面也運用到白銀比例:

 
左欄寬度 34mm,右邊兩欄寬度 48mm,比例約為 1:1.41
延伸閱讀: 王志弘《短篇小說》封面作品解構 

費氏數列|Fibonacci Sequence

費氏數列原名  費波那契數列 ,從 0 和 1 開始,下一個係數由前兩個數相加而成: 0,1,1,2,3,5,8,13,21... ,以費波那契數為邊長的正方形所拼成的矩形,會近似於先前提過的黃金矩形。

以費波那契數為邊長的正方形,構成的圖形近似於黃金矩形
 

網格系統|Grid Systems

那要如何將比例關係帶進圖文排版的設計中?我們可以利用「網格系統」將畫面簡化成有規律性的格子,版面上的元素可以藉由這些格子進行有效的規劃和組合,使得想要傳達的訊息能夠更快速、更有系統地被讀取。這裡有幾篇文章推薦大家閱讀:

網格系統如何繪製?不是隨意拉幾條參考線就好,不管是定出版心或決定欄位寬度都需要用到數學的概念,參考了幾種畫法以後,繪製出以下的網格:

自己也試著畫了一個網格系統, 這裡可以下載 AI 原檔

第一步:定出版心

版心是由「天頭、地腳、左右頁邊距」所包覆的區域,重要元素放在版心內編排可以保證內容的識別度,次要元素可以放置在版心外的區域,為畫面帶來活潑、動感、張力。

左:定出版心區域 (source)|右:定出不同版心大小 (source)

第二步:定出欄寬

欄寬可以隨著網格的形式(通欄、雙欄、三欄、四欄⋯⋯)而定,最簡單的劃分方式是將版心寬度直接分為不同等份,再依據實際內容需求填入資訊。

欄寬可以直接做等分 (source)

另一種形式——比例網格,是運用美學比例劃分欄寬,下圖第二個步驟使用的是黃金比例,A 欄和 B 欄的寬度比為 1:1.618 。

比例網格的繪制法 (source)

黃金比例線段的分割法,會稍微複雜一點:

運用黃金比例分割的線段  (source)
▍STEP 1 有一線段 AB,以 B 為端點,畫出線段 BC,BC 長度為 1/2 AB,將 A 和 C 兩點相連  ▍STEP 2 以 C 為圓心、BC 為半徑畫弧,交線段 AC 於 D 點  ▍STEP 3 以 A 為圓心、AD 為半徑畫弧,交線段 AB 於 S 點  ▍STEP 4 線段 AS 和線段 SB 即為黃金比例,約 1:1.618

第三步:套入內容, 此篇文章 提到幾個注意事項:

  • 網格內的文字與圖像元素必須與網格架構對齊
  • 版面中所有元素的位置大小都要有一個比例依據
  • 網格的內容沒有固定規則,需要根據實際內容決定
  • 留白也是版面中的元素,不要把網格填滿

嘗試利用自行繪製的網格,套入兩種不同主題,呈現效果如下:

網格的概念是,他給你一套層級系統,但同時也給你豐富的多樣性,網格完全沒變,變的永遠是網格裡面的東西,就是這點讓事情變得活潑有趣—保羅・蘭德

延伸閱讀: 

精選熱門好工作

Brand Management

樂購蝦皮股份有限公司
臺北市.台灣

獎勵 NT$15,000

Campaign Manager 活動企劃經理

樂購蝦皮股份有限公司
臺北市.台灣

獎勵 NT$15,000

Campaign Associate 資深線上活動策劃專員

樂購蝦皮股份有限公司
臺北市.台灣

獎勵 NT$15,000

評論