無痛學習簡易的版面概念
IPFS
![](https://assets.matters.news/embed/f8b37e79-ef77-4cd9-b9ee-8398d119af0c.png)
關於版面率、留白率、網格等基本觀念
不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息。
⊙ 排版是什麼?
不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即讓版面更加美觀的畫面配置。考量畫面中的所有元素的配置,包含文案的取捨、配色、位置安排、資訊呈現等等。
![](https://assets.matters.news/embed/c1091afc-176d-487f-82fc-0431ad41eded.png)
明確的設計目標,正確傳達訊息
想傳達的感受?是否契合主題?符合受眾?所有考量都在明確的設計目標中,運用視覺手法傳達訊息。
可考慮以下條件,做出適合的版面規劃:
- 此設計的目的是什麼?
- 最有效的版面配置?
- 是否好閱讀資訊?
![](https://assets.matters.news/embed/3ae98999-6f84-4e37-a41a-5711e7c5717e.png)
⊙ 版面率
版面率的高低可影響整體視覺的感受。
![](https://assets.matters.news/embed/9c14ff34-78d8-45d5-8048-362c3dc10a99.png)
版面率:版心在整個頁面中佔的比例
首先,我們需要理解何謂「版心」及「頁邊距」。
- 版心:頁面內容的擺放空間
- 頁邊距:版心到整個頁面的空間
了解以上的概念後,就能簡易判斷不同視覺的版面率。
版面率的高低可營造不同的感覺
- 版面率高:豐富、活潑、大膽
- 版面率低:輕鬆、簡約、優雅
![](https://assets.matters.news/embed/a66ac5bf-1813-48fe-9a42-96be9340cc9e.png)
![](https://assets.matters.news/embed/5cea7e7d-27b6-4f44-ade3-37080a89c4de.png)
![](https://assets.matters.news/embed/7f1fb747-af16-4e15-9d07-20f4a74dd5d4.png)
⊙ 留白率
![](https://assets.matters.news/embed/ea896f7e-c61d-4fd0-a61d-7149e372e5f1.png)
畫面中的負空間
頁面內容以外的區域,皆可視為留白的區域。內容越多的版面,留白率越低;反之則越高。
留白率的高低可營造不同的感覺
- 留白率低:活潑、親民感
- 留白率高:典雅、距離感
![](https://assets.matters.news/embed/f69e40dc-9b3b-4c46-9cea-3757a11494e8.png)
![](https://assets.matters.news/embed/729e97fc-9378-4121-a15e-d63c324c1b07.png)
![](https://assets.matters.news/embed/905b7e1a-080c-49e7-a166-d9eb52e6717d.png)
![](https://assets.matters.news/embed/edd7207d-8c7b-42b8-a6c9-b8482fad4ccf.png)
⊙ 網格系統
網格系統能讓版面穩定,也使人能短時間讀懂資訊。
![](https://assets.matters.news/embed/63b0e812-7ca2-42ed-9f16-0a77b716e3cc.png)
嚴謹而富有節奏的理性之美
最基礎的做法為運用數理,將版心劃分為多個大小一致、間距統一的網格。網格的數量與尺寸沒有限制,以個人的經驗為依據。
視不同的載體需求,將網格作些許調整
考量書籍閱讀的視覺集中、以及裝訂方式可攤平的程度,將網格做些許調整。此外,將網格沿用在版面設計中,可讓多個畫面時達到統一的效果。
![](https://assets.matters.news/embed/b1325141-2ec4-4f0e-8735-40ff9d186693.png)
![](https://assets.matters.news/embed/80c30073-1bf0-44d3-bbdb-ae4e931db948.png)
![](https://assets.matters.news/embed/9c657d7a-f109-42c4-986d-1b65c8613fa8.png)
![](https://assets.matters.news/embed/27a1140d-e979-423e-8062-79748f991b48.png)
⊙ 打破網格
熟悉網格後,可嘗試打破網格的框架,讓版面的呈現意想不到的動態感。
![](https://assets.matters.news/embed/b3298d84-30e4-40fe-8bc2-32c3f9973c93.png)
![](https://assets.matters.news/embed/e3e1814c-5e7e-474d-84fb-1fc01ef9ec61.png)
![](https://assets.matters.news/embed/7a24f834-844e-4874-b5ef-7dbad2f0deb0.png)
![](https://assets.matters.news/embed/34bec3e1-6c14-49ae-b018-a3fc3473f7e2.png)
⊙ 排版相關文章
更多相關文章,可見關聯作品~
文章首次發布於 Medium,目前閱讀的版本為同步版。
感謝你的閱讀及支持,任何問題都歡迎來信交流|imjhanemi@gmail.com
喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/588b19da-1f3e-4113-870a-7f12a0647cb9.jpeg/public)