沒有排版基礎要怎麼 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

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

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

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

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

延伸閱讀: 

阿物科技《B2B 數位轉型白皮書》提出 B2B 數位行銷十大趨勢、六大具體方針指引

以 MarTech 見長的阿物科技(awoo)提出一份《B2B 數位轉型白皮書》,為企業剖析為什麼現在必須立刻實施 MarTech 計畫,以及如何找到最佳的行銷途徑。
評論
Photo Credit:Campaign Creators on Unsplash
評論

疫情席捲全球,人們的生活與工作模式與以往大不同,全球商務與貿易生態也改變了。不只避免人與人連結的「零接觸經濟」成為當代顯學,講究以人為本、科技賦權的「行銷 5.0」時代也已然到來。換言之,現在的企業不能僅是完成傳統數位化(例如只是把資料 e 化),還必須實施新一代科技的數位轉型,將線下的規模延伸至線上,並善用「行銷科技 MarTech」以帶來真正的獲益成長。

三個必須展開 B2B 數位行銷的理由

改變既有 B2B 行銷模式、思考數位轉型是必須的嗎?答案是:沒錯。根據阿物科技《B2B 數位轉型白皮書》中的資料顯示:B2B 的買賣雙方的工作型態已逐漸往數位靠攏,諸如:透過視訊會議互動、上網搜尋相關資訊等,再再顯示線上發展的必要性。

此外,B2B 買方採購決策者,也樂於透過線上管道與品牌互動聯繫、獲取產品與服務資訊,而非實體面對面;反映到銷售數字上,則是 B2B 買方比起過去更願意透過線上或電商採購,誠如顧問公司麥肯錫調查指出,疫情期間 B2B 企業減少了 34% 的面對面銷售、增加了 10% 的線上模式,明確指出疫情為商務帶來的影響。

另外,由於科技與數位變遷,許多技術到位,進而驅動行銷變革,也就是說,當數位行銷、線上銷售已成為標準配備,企業若要鞏固其專業性與權威性,行銷數位轉型便是無法迴避的任務。更重要的是,由於愈來愈多的企業轉型為數位工作型式,也就是客戶(或說買家)多已構築線上溝通的生態基礎,因此要與客戶接觸最好的方式,便是跟著轉往線上,搶佔商機。

總之,在外部環境(全球疫情影響)、數位變遷(即至科技,或說行銷 5.0 時代的到來)、買方行為(數位工作型態)等三大元素交織的時間點上,建立 B2B 線上行銷生態系是一條必須踏上的明確道路。

立即下載:《B2B 數位轉型白皮書 - 以數位行銷力決戰 2022》

B2B 數位行銷十大趨勢,以及具體執行策略

阿物科技《B2B 數位轉型白皮書》對於當前 B2B 數位趨勢提出十大觀察,包括:

  1. B2B 通路,數位渠道將佔 8 成。
  2. B2B 企業 Y 世代上位,逾 7 成握有採購決策。
  3. 2019 年疫情爆發前 B2B 電商營收達 12.2 兆美元,超過 B2C 營收規模,預估 2027 年全球 B2B 電商營收將達 20.9 兆美元。
  4. B2B 與 B2C 模式將趨於一致,在行銷模式上將難以區分 B2B 還是 B2C。
  5. B2B 台灣賣家數於國際電商平台激增 3 倍。
  6. B2B 貿易受疫情影響,全球 1,200 個展會延期或取消,或改以線上進行。
  7. B2B 經營內容與 SEO 是行銷趨勢。
  8. B2B 需經營品牌,並同步經營社群,讓企業成為市場上的意見領袖,留住忠誠粉絲與潛在客戶。
  9. B2B 行銷需善用 SEO 智慧賦能,如透過自然語言處理(NLP)分析內容文本、電腦視覺(CV)分析網頁產品情境,為產品貼上特徵標籤,以供使用者搜尋意圖之預測,也讓 SEO 從字元比對升級為「意圖比對」,以呈現更精準的搜尋結果。
  10. 數據驅動、內容為王,行銷不只以「人」為中心,也要以「物」為中心同時洞察行為與意圖數據。

種種趨勢意味著,建立 B2B 數位轉型的線上化行銷生態系,是當前 B2B 企業不可迴避的任務。阿物科技也在白皮書中提出具體做法,透過「以 SEO 為核心+電商行銷」的架構建立,結合 SEO 關注的「關鍵字、網頁優化、內容經營」與電商行銷的「導流、導購、會員經營」帶入 B2B 模式,進而完成從導流到導購的 B2B 內容行銷與 SMarketing1,以及會員經營、再行銷,創造顧客終生價值。

(註1)SMarketing:意即 Sales+Marketing,指的是企業如何結合行銷與銷售團隊,讓雙方得以合作並完成業務目標,例如建立共同的語言、建立共同的工作流程等。

立即下載:《B2B 數位轉型白皮書 - 以數位行銷力決戰 2022》

六大方針助攻 B2B 企業成為數位行銷常勝軍

綜觀 SEO(搜尋引擎最佳化) 與內容行銷趨勢、B2B 買賣雙方的痛點與現象、影響現況的三大元素(疫情來臨、數位變遷、世代交替)等考量,阿物科技也在白皮書中提出 B2B 企業與電商行銷數位轉型的六大方針指引:

  1. 掌握數位行銷發展趨勢,舉凡 SEO 搜尋引擎優化、內容行銷經營、社群媒體擴散、權威領導聲量(KOL)等概念,皆須有所了解。
  2. 要有「數據驅動,內容為王」的雙核心管理。
  3. 採取「以 SEO 為核心、以電商行銷為架構」的 B2B 行銷數位轉型策略。
  4. 建立「長期、有效率、穩定的」買賣雙方的互動網絡與線上數位平台。
  5. 具備「得優質流量得天下」的 SEO/CRO 思維與行動,為「導流」建立深厚基礎。
  6. 導入「以 SEO 為核心的成長流量服務」,搶攻後疫情時代下的全球商機。

若企業渴望在全球 MarTech 潮流中一同乘風破浪,不妨立即展開電商行銷數位轉型,開啟 B2B 貿易的新大航海時代。

立即下載:《B2B 數位轉型白皮書 - 以數位行銷力決戰 2022》

瞭解更多:阿物科技的 MarTech 趨勢解密