美感字體排版歌!日本「Layout song」教你4大排版美學技巧

簡單又美觀的字體排版方法!日本NHK可愛《Layout song》教你留空等4大排版技巧

日本電視台 NHK 教育電視節目《Design Ah!》,是一個培養孩子對設計有基礎認知的節目。而在每一集都有簡短的動畫 MV ,去介紹設計如何被應用。節目釋出的《Layout song》便是用輕鬆愉悅的方式、舉例日常生活中的海報、招牌等,來講解「字體排版」的重要性,現在讓我們一起來看看吧!

Layout song / ならべうた from Ritsuko Nomura on Vimeo.


1. 對齊

第一個類別就是「對齊」。生活中有很多傳遞重要資訊的海報、文書或是資料夾,若沒有整齊對好,看起來就會很雜、很凌亂;對於閱讀者來說可能會造成混淆,不確定要從哪邊開始讀起、從何找起重要的東西。

像是以下這張海報,從原來的置中到靠左對齊,是不是在閱讀的時候就能輕鬆地從左到右看起;而另一個例子原本雜亂無章的電腦桌面,當上下左右都最齊整理後,瞬間變得清爽了。

Layout song


2. 放大

第二個類別就是「放大」。這個技巧,可以讓一個畫面裡的重點被強調、放大,不同資訊之間有主從、階層之別,更重要的是使整體有層次感,不是全部都一樣大小。

例如地鐵站的出口標示,若「出口 1」、「↑」、「Exit」三個傳遞資訊的內容都同等大小,可能乍看會直接忽略這個重要的資訊,若將指標的箭頭與幾號出口放大,這樣從遠方也能一目瞭然數字與方位。

Layout song2

3. 分開

第三個是「分開」。許多人一定有製作 Excel 表格的經驗,而如果你將所有資訊都擠在一起、一股腦的全部條列式的排下來,想必誰也看不懂其中的資訊與數字吧?所以,將不同類別的資訊分開,讓彼此有區別就能讓人賞心悅目了!

像是影片中舉例的發片,原本品項跟價格、總計的金額通通擠在一起,看了心揪一團鬱悶到不行之外,可能還會不小心算錯!所以在將物品的名稱跟金額的距離拉開後,是不是非常的清楚呢?

Layout song3

4. 留空

最後一個技巧,則是所謂的「留白」。如果很多文字或是所有資訊都擠在一起,相對在閱讀及視覺上就會造成很大的壓迫,因此留些許空隙、增加排版的「呼吸空間」,是非常重要的!

假若你拿到一本書如下圖上方那樣,你肯定讀了一行就放棄,因為實在太擠了。所以適當的留白,字與字、圖與圖之間的空間多一些,相對就能使人閱讀起來舒適,不會看到呼吸不暢!

Layout song4

《Layout song》用如此輕快可愛的洗腦曲調、搭配日常中的例子,嘗試展現給大眾「美學」是多麽重要的事!現在聽完、看完這首歌之後,你是不是對於排版有了基礎的概念了呢?往後在生活中,也要記得運用這些小技巧,讓生活裡充滿著美麗噢! 

本文由 FliPER 授權轉載,未經同意請勿任意引用

延伸閱讀

RECOMMEND

OpenAI進行品牌重塑!Logo線條更細緻、推出動態視覺與專屬字體,而且還很「人性化」

OpenAI進行品牌重塑!Logo線條更細緻、推出動態視覺與專屬字體,而且還很「人性化」

ChatGPT母公司OpenAI近期進行識別系統重塑,由設計團隊與AI工具共創,在視覺中引入人本思考,將舊有Logo拆解重組、訂製品牌專屬字體「OpenAI Sans」,還推出動態元素與全新網格系統。這套全新識別系統已同步應用於ChatGPT的瀏覽器與App介面。

OpenAI首度建立完整識別系統

相信大家對ChatGPT都十分熟悉,其開發商OpenAI成立於2015年,於2022年首次推出ChatGPT,近期又發布新模型o3-mini與「Deep Research」深度研究功能。縱使市值數十億美元,OpenAI卻從來沒有一個完整的識別系統,其視覺風格十分混亂,從Logo、字體到用色皆沒有統一標準。

2025年初,OpenAI終於進行品牌重塑,攜手柏林字體設計公司ABC Dinamo及荷蘭動態設計團隊Studio Dumbar,打造充滿人性化美學的視覺元素與相關規範。

OpenAI進行品牌重塑!Logo線條更細緻、推出動態視覺與專屬字體,而且還很「人性化」
OpenAI首度建立完整識別系統(圖片來源:OpenAI)
OpenAI進行品牌重塑!Logo線條更細緻、推出動態視覺與專屬字體,而且還很「人性化」
OpenAI首度建立完整識別系統(圖片來源:OpenAI)

人工智慧品牌的人性化展現

有趣的是,作為一個領先全球的人工智慧團隊,OpenAI的品牌重塑卻以「有機與人性化」為核心目標。雖然設計過程應用了DALL·E、ChatGPT和Sora等人工智慧工具,然而專屬於人類的直覺思考,仍是這次品牌重塑的關鍵角色——像是除了大量使用自然主義的色調,OpenAI還委託攝影師拍攝風景與靜物照,打造更具創新性與親和力的視覺。

OpenAI進行品牌重塑!Logo線條更細緻、推出動態視覺與專屬字體,而且還很「人性化」
OpenAI的品牌重塑以「有機與人性化」為核心目標(圖片來源:OpenAI)
OpenAI進行品牌重塑!Logo線條更細緻、推出動態視覺與專屬字體,而且還很「人性化」
除了大量使用自然主義的色調,OpenAI還委託攝影師拍攝風景與靜物照(圖片來源:OpenAI)

團隊表示,人類的影像管理能力在創作過程中仍然至關重要:「我們試圖不對人工智慧的創作制定太多規則,將人工智慧視作工具和合作夥伴是一件很有趣的事情。」

OpenAI品牌重塑亮點有哪些?

#01 Logo線條比例更簡扼

被稱為「花朵」(Blossom)的Logo,由三個相互交織的三角形組成,外觀如同一朵綻放的花。過去,Logo的設計並不完全對稱、線條粗細也不一;經過升級改版後,團隊以圓弧線傳遞人本思維的溫暖與流動性,直角細節則象徵技術所需的結構與精密度,Logo線條變得更精緻、比例也更精準。

OpenAI進行品牌重塑!Logo線條更細緻、推出動態視覺與專屬字體,而且還很「人性化」
OpenAI Logo的前後對比(圖片來源:OpenAI)

新版Logo不僅代表著品牌的成長與演進,也強調了4大核心價值「簡化、留白、不完美和生動」(simplification, space, imperfection and liveliness)。

#02 品牌字體OpenAI Sans

OpenAI Sans由OpenAI團隊與ABC Dinamo合作開發,從一個簡單的黑色圓圈出發,將幾何圓形引入字母與標點符號中,讓設計更圓潤,也更平易近人。為了在精準的幾何排列中展現人性化特質,OpenAI Sans故意保留許多「不完美」的細節。以字母「O」為例,雖然外圈是完美的正圓形線條,但內部比例卻不是。

OpenAI進行品牌重塑!Logo線條更細緻、推出動態視覺與專屬字體,而且還很「人性化」
OpenAI Sans將幾何圓形引入字母與標點符號中,讓設計更圓潤,也更平易近人(圖片來源:OpenAI)
OpenAI進行品牌重塑!Logo線條更細緻、推出動態視覺與專屬字體,而且還很「人性化」
OpenAI Sans(圖片來源:OpenAI)

至於品牌文字商標「OpenAI」,則是由六個相互連接的圓圈組成架構,其象徵著「生命的種子」,未來也將會更廣泛的應用於各處。

OpenAI進行品牌重塑!Logo線條更細緻、推出動態視覺與專屬字體,而且還很「人性化」
文字商標「OpenAI」由六個相互連接的圓圈組成架構,象徵著「生命的種子」(圖片來源:OpenAI)

#03 與使用者互動的動態元件「Emotive Point」

本次品牌重塑中,OpenAI攜手Studio Dumbar打造了全新的動態視覺元素「Emotive Point」,它是一個充滿動能、如水晶球一般的藍色抽象圖形,並根據輸入的程式碼變換不同面貌。團隊表示,「Emotive Point」的設計靈感來自水彩繪畫,卻又故意呈現好似沒有性格、沒有情感的外觀,作為人工智慧與使用者互動的介面物件。

OpenAI進行品牌重塑!Logo線條更細緻、推出動態視覺與專屬字體,而且還很「人性化」
動態視覺元素「Emotive Point」(圖片來源:OpenAI)

「Emotive Point」將以不同形式應用於OpenAI的產品中,包含ChatGPT「聲音」的視覺表現,並隨著使用者輸入的回應,呈現不一樣的律動。

#04 全新藍灰配色與網格系統

最後,OpenAI也推出全新配色與網格系統,作為未來品牌出版品的設計指南。配色上以灰色與藍色為主調,令人聯想到廣闊的天空與地平線,代表著深遠的視野與科技成長;而網格系統則融入新配色、新Logo、新字體OpenAI Sans等規範,提升設計排版的視覺效果。

OpenAI進行品牌重塑!Logo線條更細緻、推出動態視覺與專屬字體,而且還很「人性化」
OpenAI也推出全新配色與網格系統,作為未來品牌出版品的設計指南(圖片來源:OpenAI)
OpenAI進行品牌重塑!Logo線條更細緻、推出動態視覺與專屬字體,而且還很「人性化」
OpenAI也推出全新配色與網格系統,作為未來品牌出版品的設計指南(圖片來源:OpenAI)

延伸閱讀

RECOMMEND

方序中 X 董十行操刀《風之谷》台灣限定海報!素描王蟲、破損邊緣等細節呈現「古昆蟲圖鑑」

宮﨑駿《風之谷》台灣限定海報!方序中、董十行聯手設計「古代昆蟲圖鑑」

宮﨑駿經典作品《風之谷》將於3月6日首登全台大銀幕,台灣限定海報特邀設計師方序中率領的究方社團隊、插畫家董十行聯手呈現,結合刀模設計、呈玻璃質感的獨特印刷,營造古昆蟲圖鑑般的視覺風格;片名標準字也藏有巧思,仔細看「谷」字便能看見王蟲的樣貌,彩蛋滿滿。

宮﨑駿《風之谷》台灣限定海報!方序中、董十行聯手設計「古代昆蟲圖鑑」
(圖片提供:甲上娛樂)

《風之谷》用奇想包裹環境與人類關係的省思

《風之谷》名列「影史百大動畫」,更是「吉卜力三巨頭」宮﨑駿、高畑勳、鈴木敏夫、日本配樂大師久石讓夢幻聯動的合作起點。以往吉卜力經典作品如《神隱少女》、《魔法公主》、《霍爾的移動城堡》等在台重映時,皆由方序中操刀台灣限定海報,這次為《風之谷》設計,他也分享對劇情及角色象徵意義的細膩觀察:

「巨神兵代表對未來的追求與科技濫用,王蟲與腐海象徵自然界的力量與無窮生命,人們自私的行爲正在破壞這樣的平衡狀態,但娜烏西卡對自然和生命的深刻理解,展現出非凡的勇氣與智慧,以及在面對戰爭和環境破壞時所展現的堅定態度,讓人類有了希望與前進的力量。」

宮﨑駿《風之谷》台灣限定海報!方序中、董十行聯手設計「古代昆蟲圖鑑」
(圖片提供:甲上娛樂)

素描筆觸、破損邊緣等細節呈現「古昆蟲圖鑑」

從《風之谷》敘事中對環境與人類關係的省思、及各角色象徵意涵出發,方序中與董十行一同梳理呈現海報的觀點與可能性,更深入研究《風之谷》漫畫原作的細節,最後決定以「古代昆蟲圖鑑」的表現風格呈現海報。作為主體的王蟲,透過素描線條描繪出古代書籍的視覺風格,其比例、姿態、質地都經長時間琢磨,兩人更特別向設計師張志祺借來巨型王蟲模型,以賦予王蟲最接近原作的狀態。

宮﨑駿《風之谷》台灣限定海報!方序中、董十行聯手設計「古代昆蟲圖鑑」
(圖片提供:甲上娛樂)

此外,王蟲的眼睛做了局部亮面處理,表現出象徵和平的藍色玻璃質感;一旁則是娜烏西卡帶著狐松鼠迪多,像風一樣自由翱翔天際;海報的破損邊緣特別採刀模設計,象徵時間的無情流逝,每一細節無不呼應《風之谷》劇情所乘載的訊息。

宮﨑駿《風之谷》台灣限定海報!方序中、董十行聯手設計「古代昆蟲圖鑑」
(圖片提供:甲上娛樂)

王蟲形象融入標準字

片名標準字設計也藏有小彩蛋,方序中以日版字體為原型,加入更多圓角表現古代機械的結構感,更將王蟲的正面藏入「谷」字上方,增添趣味性。這款台灣限定海報無論視覺或概念,都展現了對《風之谷》的致敬與獨特詮釋。

宮﨑駿《風之谷》台灣限定海報!方序中、董十行聯手設計「古代昆蟲圖鑑」
(圖片提供:甲上娛樂)

如何獲得《風之谷》台灣限定版海報?

全球僅限量6萬張,只送不賣,每張海報皆印有專屬流水編號,以防盜版。凡於《風之谷》上映首周(36日~313日)至全台戲院購買2張電影票,就有機會獲得「限量版王蟲圖鑑」海報1張,數量有限,錯過不再。若有興趣收藏,不妨持續鎖定官方消息

宮﨑駿《風之谷》台灣限定海報!方序中、董十行聯手設計「古代昆蟲圖鑑」
(圖片提供:甲上娛樂)

資料來源|甲上娛樂、方序中Facebook