網格的應用 - 為什麼有些排版會特別的好看

更新於 發佈於 閱讀時間約 3 分鐘

「每次遇到排版設計的時候,總是會感到手足無措,尤其是內容資料、文案或素材的數量較多時,更是容易傷透腦筋,花再多時間都做不好。」

如果你有這種煩惱,表示你只是憑感覺在排版,這樣的方式不僅容易讓人視覺麻木、疲勞,更無法客觀的分辨出好壞,甚至會讓大腦靈感枯竭,做不出其他的版面變化。

因此,排版不能只憑感覺,而是要靠邏輯、秩序、系統化的思考方式來完成,而這樣的方式,就稱之為「網格系統」,是源自於二十世紀瑞士「客觀排版設計運動」中的一部份。

知名的美國平面設計師「保羅蘭德」先生就曾說過:「網格的概念是,他給你一套層級系統,但同時也給你豐富的多樣性,網格完全沒變,變的永遠是網格裡面的東西,就是這點讓事情變得活潑有趣。」

接下來,我們就要來跟大家介紹,「網格系統」的使用方式:

1. 選出範圍

先選出內容的顯示範圍,與版面上下左右邊有一定的距離,並將所有內容元素都排在這個顯示範圍之內,這樣就能讓版面更具有條理性,但這並不是硬性的規定,你也可以適時的將一些不重要的元素排在外圍點綴,增加視覺的動感與張力。

raw-image

顯示範圍小,會給人雅致、寧靜的感覺,顯示範圍大,則會給人豐富、熱鬧的感覺。

2. 切成網格

把選好的顯示範圍切成網格,每格的尺寸大小一致,並有著相同的間距,網格的數量沒有限制,通常是以個人的經驗去判斷,但基本上,網格數量越多,運用起來也就越靈活,一般來說,你必須先仔細研究排版內容裡的每一個元素,才能確定所需的網格大小和數量。

raw-image

網格的間距沒有一定限制,越寬鬆,視覺越開放舒適,越細密,視覺越熱鬧緊湊,基礎規則是以內文字句的一行高度為間距標準,但因為每個人的設計方式跟遇到的情況不同,所以實際上,還是會以個人的經驗去判斷。

3. 進行排版

接下來就可以用對齊網格的方式,將內容元素都排上去,創造出各種不同的視覺組合變化。

raw-image

這邊要特別注意:

● 網格內的文字與圖像元素必須與網格架構對齊。

● 版面中所有元素的位置大小都要有一個比例依據。

● 網格的內容沒有固定規則,需要根據實際內容決定。

● 留白也是版面中的元素,不要把網格填滿。

其實「網格系統」,就像你在玩俄羅斯方塊遊戲一樣!

有很多的設計師跟初學者,會害怕自己的創意,被網格系統給限制住,但其實這樣的想法,完全是錯誤的,因為當你開始運用「網格系統」進行排版之後,不僅能讓視覺畫面更有層次,文案表達更有條理,甚至還能夠更快速的創造出各種不同的視覺組合變化!

所以請不用害怕,「網格系統」絕對會是改善你排版方式,提升設計能力最實用的必備工具。

留言
avatar-img
留言分享你的想法!
cosai-avatar-img
2019/10/20
想請問一般來說 是看資訊量大決定由網格來想排版 還是有初步的排版構想再使用網格輔助呢 有點不清楚這工具怎麼用 謝謝
avatar-img
CJC 設計實驗室的沙龍
91會員
30內容數
2019/10/14
當我們在設計商業廣告時,時常會遇到以照片為主的廣告,而這種類型的廣告,通常是以大面積的照片,搭配上一些簡單的字句,作為主要傳遞情境氛圍的方式,所以照片該如何擺放,在整體的排版構圖上,就顯得非常重要。
Thumbnail
2019/10/14
當我們在設計商業廣告時,時常會遇到以照片為主的廣告,而這種類型的廣告,通常是以大面積的照片,搭配上一些簡單的字句,作為主要傳遞情境氛圍的方式,所以照片該如何擺放,在整體的排版構圖上,就顯得非常重要。
Thumbnail
2019/06/10
我們之前說過Content SEO,策略導向的優化,也就是透過各種行銷方式,讓搜尋引擎在進行搜尋結果運算時,認為該網頁是符合關鍵字的高人氣優質內容,進而使網頁的排名更前面。 所以SEO的決勝重點,就在於Content SEO,行銷的思考策略!
Thumbnail
2019/06/10
我們之前說過Content SEO,策略導向的優化,也就是透過各種行銷方式,讓搜尋引擎在進行搜尋結果運算時,認為該網頁是符合關鍵字的高人氣優質內容,進而使網頁的排名更前面。 所以SEO的決勝重點,就在於Content SEO,行銷的思考策略!
Thumbnail
2019/06/06
說真的,你花了那麼多時間設計網頁,卻沒被搜尋引擎收錄,不是很可惜嗎? 所以接下來,我們就要告訴你,有關於「Technical SEO」的語法重點,讓你的網頁也能快速又有效率的被搜尋引擎收錄進去。
Thumbnail
2019/06/06
說真的,你花了那麼多時間設計網頁,卻沒被搜尋引擎收錄,不是很可惜嗎? 所以接下來,我們就要告訴你,有關於「Technical SEO」的語法重點,讓你的網頁也能快速又有效率的被搜尋引擎收錄進去。
Thumbnail
看更多
你可能也想看
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
多邊形空心線圈十分類似方形線圈,同樣會有個線圈外膨的現象,使得完成線型可能不如預期。在方形空心線圈的討論文章中,著重討論的是兩彎角之間的距離及漆包線徑的剛性強度影響,這些要素在多邊形線圈當中依然存在。簡單的描述,就是兩彎角越近,則彎角中間的直線段外擴越嚴重;漆包線越粗,代表線材越不容易彎折,也會增加
Thumbnail
多邊形空心線圈十分類似方形線圈,同樣會有個線圈外膨的現象,使得完成線型可能不如預期。在方形空心線圈的討論文章中,著重討論的是兩彎角之間的距離及漆包線徑的剛性強度影響,這些要素在多邊形線圈當中依然存在。簡單的描述,就是兩彎角越近,則彎角中間的直線段外擴越嚴重;漆包線越粗,代表線材越不容易彎折,也會增加
Thumbnail
圓形為空心線圈中最常出現的形狀,但很多設計者在規劃時,常常漏了一點,導致實際生產的尺寸有落差,那就是爬層空間。 如下圖所示,過往在空心線圈排列規劃時免不了兩種形式,左側的方形排列以及右側的緊實排列兩種,生產上是右側較為接近現實。但無論是左右兩種規劃,設計者往往都忽略了從線圈從第一層往上爬至第二層時
Thumbnail
圓形為空心線圈中最常出現的形狀,但很多設計者在規劃時,常常漏了一點,導致實際生產的尺寸有落差,那就是爬層空間。 如下圖所示,過往在空心線圈排列規劃時免不了兩種形式,左側的方形排列以及右側的緊實排列兩種,生產上是右側較為接近現實。但無論是左右兩種規劃,設計者往往都忽略了從線圈從第一層往上爬至第二層時
Thumbnail
這篇文章將會講述 Blockout 的介紹和適合的材質。
Thumbnail
這篇文章將會講述 Blockout 的介紹和適合的材質。
Thumbnail
這是一個利用structured grid 所切出來的conformal mesh 特色是,每一個網格與網格的交界處都很完整,一進一出,你丟我撿,臉貼臉。 這也是最一開始有限差分(finite difference)下的產物,原始但是快。
Thumbnail
這是一個利用structured grid 所切出來的conformal mesh 特色是,每一個網格與網格的交界處都很完整,一進一出,你丟我撿,臉貼臉。 這也是最一開始有限差分(finite difference)下的產物,原始但是快。
Thumbnail
建模 (Modeling) 畫細不難,難在用最經濟的方式達成 "雖不中亦不遠矣"。 網格 (Meshing) 任憑你列式再怎麼漂亮,解不出來就是白搭。 求解 (iterating) 能收斂都好說,不能收斂就是痛苦的開始
Thumbnail
建模 (Modeling) 畫細不難,難在用最經濟的方式達成 "雖不中亦不遠矣"。 網格 (Meshing) 任憑你列式再怎麼漂亮,解不出來就是白搭。 求解 (iterating) 能收斂都好說,不能收斂就是痛苦的開始
Thumbnail
本文使用LibreCAD繪製太極圖,以格點的方式繪圖,並加入修剪及剖面線的功能教學。
Thumbnail
本文使用LibreCAD繪製太極圖,以格點的方式繪圖,並加入修剪及剖面線的功能教學。
Thumbnail
「圖解」是一項很有魅力的技能,夠將複雜的資訊濃縮在一張圖上說清楚。這篇文章寫給需要處理複雜問題的人,內容摘要於一位工程師分享「為自己的程式碼做圖解的經驗」,看完後你可以學習圖解的 3 個大概念 — 區分、連結、描述關係,將腦中複雜的問題與邏輯架構,透過圖解表達出來。
Thumbnail
「圖解」是一項很有魅力的技能,夠將複雜的資訊濃縮在一張圖上說清楚。這篇文章寫給需要處理複雜問題的人,內容摘要於一位工程師分享「為自己的程式碼做圖解的經驗」,看完後你可以學習圖解的 3 個大概念 — 區分、連結、描述關係,將腦中複雜的問題與邏輯架構,透過圖解表達出來。
Thumbnail
大家久等的九種構成原理下集來囉!讓我們看看還有哪一些超實用的構成能用在我們的設計上吧! 第五種: 十字構成 十字構成為垂直與水平的構成方式,可以增加畫面的平衡感, 其中一條線需為斜線,比較不死板更為動態。 參考:“日本KORIN展”海報設計 第六種: 圓形(方形)構成 圓形構成具有曲線美又有視覺
Thumbnail
大家久等的九種構成原理下集來囉!讓我們看看還有哪一些超實用的構成能用在我們的設計上吧! 第五種: 十字構成 十字構成為垂直與水平的構成方式,可以增加畫面的平衡感, 其中一條線需為斜線,比較不死板更為動態。 參考:“日本KORIN展”海報設計 第六種: 圓形(方形)構成 圓形構成具有曲線美又有視覺
Thumbnail
「每次遇到排版設計的時候,總是會感到手足無措,尤其是內容資料、文案或素材的數量較多時,更是容易傷透腦筋,花再多時間都做不好。」如果你有這種煩惱,表示你只是憑感覺在排版,這樣的方式不僅容易讓人視覺麻木、疲勞,更無法客觀的分辨出好壞,甚至會讓大腦靈感枯竭,做不出其他的版面變化。
Thumbnail
「每次遇到排版設計的時候,總是會感到手足無措,尤其是內容資料、文案或素材的數量較多時,更是容易傷透腦筋,花再多時間都做不好。」如果你有這種煩惱,表示你只是憑感覺在排版,這樣的方式不僅容易讓人視覺麻木、疲勞,更無法客觀的分辨出好壞,甚至會讓大腦靈感枯竭,做不出其他的版面變化。
Thumbnail
設計師在設計圖案或畫圖的時候,最重要的就是「結構」,就跟蓋房子需要先架鋼筋一樣,是建築整體中的支柱與架構,假設你學會畫出一隻狗,發現自己就只會畫那一隻狗,畫不出貓或其他物品,也不會變換狗的樣式、造型,那就表示你並不了解圖形的組成「結構」,才會無法自由的應用與變化。
Thumbnail
設計師在設計圖案或畫圖的時候,最重要的就是「結構」,就跟蓋房子需要先架鋼筋一樣,是建築整體中的支柱與架構,假設你學會畫出一隻狗,發現自己就只會畫那一隻狗,畫不出貓或其他物品,也不會變換狗的樣式、造型,那就表示你並不了解圖形的組成「結構」,才會無法自由的應用與變化。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News