那些樣版沒教你的事:你不可不知的間距

網路上琳瑯滿目的 WordPress 佈景主題,讓我們可以快速地選擇符合自己喜好的樣版套用至網站上,許多樣版在展示時,總是美美的呈現於螢幕上,但在實際應用在自己的網站時往往不如預期。

你也許會碰到以下問題:

(1) 按鈕丟進去頁面後隨意放置 - 不曉得元素間彼此配置的規則為何
(2) 今天做介紹頁,明天做聯絡頁,版面設定全憑感覺 - 不同頁面的配置規則不一致
這些問題的主要原因在於 - 間距的設定
一個良好的網頁版面配置應具備:
(1)  一致性:全站維持相同的空間邏輯,並套用至不同單元頁面。
(2) 群組關係:有關聯性的元素放在一起;沒有關聯性的元素則加大間距。
(3) 方便維護與更新:預先定義好運用的間距規則,作為往後維護、更新的依據。

以下文章將為大家介紹間距的應用,並且考察各大 WordPress 佈景主題樣版的間距規則,了解其設計原理,作為往後設計的參考。

從網頁設計的面向思考

網頁設計主要由文字、圖像、色彩三大元素所構成,而這三大元素的組合,延伸了一個我們時常忽略的要素 - 空間的運用。元素與元素間的組合產生了間距,而間距讓空間產生了不同的變化性。

間距
間距所產生的留白空間,表現了不同的品牌意象,給予觀看者不同的感受,間距的使用並沒有標準答案, 單純取決於你要給觀看者怎麼樣的「氛圍」。​

間距存在於網頁每個元素與元素之間,網頁上常見元素有:文字、顏色、按鈕、圖標、輸入框、圖片、彈出視窗 … 等。間距無所不在,在設計規劃時也必須一起納入考量,每個元素上、下、左、右的間距,都需要掌握它的規律性,並藉著規律性組合出良好的配置。

那麼間距如何被「定義」呢?

一、定義間距的規則

定義間距並沒有固定的規範,即使取雙數數值也算是定義的一種,如:2, 4, 6, 8, 10, 12 …等。
使用整數的倍數是個好選擇嗎?
以 5 或 10 的倍數,作為固定級數的間距使用,如:5, 10, 15, 20, 25, 30 …等;相較於使用 2, 3, 4, 5 這些未定義的數值,使用固定級數的間距,讓我們得到了規律的數值;但是以 5, 10, 15, 20, 25, 30 做為間距的數值會是最好的選擇嗎?
重點在於「定義間距的規則」
為了避免我們在往後維護或更新頁面時造成困擾與混淆,所以我們必須「定義間距的規則」,例如:按鈕與按鈕間的間距、頁尾上方的間距等。 即使往後由不同人員執行維護與更新,都可以快速了解間距的規則,避免不同單元頁面設定不同的間距,導致網站整體一致性降低。

二、來定義間距吧!

第一步、定義最小單位
最小的間距規則可以是 2 的倍數,如果希望網頁留白較多,也可以是 10 的倍數,這並沒有絕對性,一切取決於你要給觀看者怎麼樣的「氛圍」。
Google Material Design 的佈局為例,他們的間距是以 8 的倍數進行遞增,但並不是毫無頭緒的遞增,最小為 8, 16, 24, 32, 48, 56, 72,這些數值讓他的佈局保有一定的彈性以及閱讀的舒適度,這些數值都是有序的,而不是隨意選用的間距。

Material Design

垂直間隔:8, 24, 56, 72

Material Design / 質感設計
Material Design 模擬「紙」的形態,將現實世界中紙張的特性,挪用到電子螢幕裡,把資訊內容呈現在虛擬的「紙」上, 而「紙」與「紙」之間存在著上下層級關係,模擬出紙張的空間感。這是 Google 在 2014 年提出的設計準則, 為一種設計風格、理念與設計基本原則。

第二步、確認間距的彈性
你可以想像定義間距就像買衣服跟鞋子一樣,只會有幾種固定的尺寸讓你挑選,若超出規格就會需要特別訂製。 在第一步驟已經定義好最小的單位,再來依照增量去設定即可,例如:4 的增量為 8, 12, 16, 20, 24 …,但是並不是每個增量都會使用到, 所以定義太多間距其實毫無意義,只會在往後的設計帶來困擾。
第三步、根據元素性質,定義間距
想像間距如同標題、副標題的字級設定,我們可以從 XS、S、M、L、XL 為參考,設定出一套間距作為設計頁面時使用,定義間距的目的在於讓全站維持相同的空間邏輯,我們可以先針對大方向進行規劃,如:區塊與區塊間、段落與段落間,至於是否將網站所有元素的間距定義的鉅細靡遺呢? 我想這樣的成品應該已經可以說是頂級 UI 設計的規格了吧!

三、WordPress 樣版間距大考察

我們從各大佈景主題所提供的樣版,觀察其間距設定的規則,了解它是如何定義間距後,在往後更新、維護時, 我們的設計將不會再是無中生有,而是憑藉著這個規則所製作,並藉著規則組合出良好的配置。
(1) Astra
以 10 的倍數進行遞增 ,最小為 10, 20, 30, 50, 90
(2) GeneratePress
以 10 的倍數進行遞增 ,最小為 20, 30, 60, 120
(3) OceanWP
以 10 的倍數進行遞增 ,最小為 10, 20, 30, 40, 100

觀察許多優秀的樣版,可以發現大多樣版遵循著這個規律,使頁面與頁面之間保有一致性,頁面中元素高度,如:區塊、Banner,皆按照間距增量去設定高度,使頁面更具有系統性與邏輯性。

小結

藉由定義間距規則,可以讓網站建構出一致的頁面,當所有元素的間距都遵循著定義的規則,對於設計師與工程師來說, 更容易達成網頁設計的一致性,並提高設計的效率。 也許在一開始設計時無法感受到定義規則所帶來的好處為何,但是當網站頁面越來越多、越來越複雜,每天都在處理各種元素的配置, 你會發現,使用固定間距會比隨意的間距規則更有效率,更容易達成網站頁面的一致,提升網站的專業度。
佈景主題提供了許多的樣版,而這些樣版的配置遵循著一定的規則,這些規則增加了樣版產出的效率,達成品質的管控。 有一天我們使用了這些樣版,也可以依照他所定義的規則進行更新與維護,如此一來就可以避免不同頁面的配置規則不一致, 再進行設計時也不用花太多時間思考區塊該設定多少高度,以提升網頁設計的效率。
你們的網頁間距是依循的怎麼樣的規則呢? 歡迎分享你們如何定義網站的間距!我們下次見 ~

參考資料

sky (2019.07.05)。8年资深设计师:间距不会调?掌握这一个点,从此不再迷茫!【優設】。取自 https://www.uisdc.com/spacing-adjustment
卡斯伯 (2019.07.05)。網頁設計規範 – 一致性的距離(計算方法、水平、垂直)【iT邦幫忙】。取自 https://ithelp.ithome.com.tw/articles/10208127
黄昏后约人-SDID (2019.07.05)。Web网页设计标准【知乎】。取自 https://zhuanlan.zhihu.com/p/23421543