網頁設計攻略:UI設計中如何更好地使用柵格系統?

網頁設計中,運用柵格系統,能讓界面的視覺表現更有秩序感和韻律,讓頁面變得更加專業化和系統化。柵格系統在UI設計和前端開發中都是被應用的很廣泛一套體系,利用柵格系統可以輔助我們制定網頁設計的規則。那麼在UI設計中如何更好地使用柵格系統?

網頁設計攻略:UI設計中如何更好地使用柵格系統?
網頁設計攻略

什麼是柵格系統?

柵格,即以規則的網格陳列,指導界面中的版面布局以及信息分佈。簡單來說,就是根據一定的邏輯,在界面中繪製出一個個格子,再將內容擺在這些小格子里組合起來的一種設計形式。

通常,我們都會將網頁端的柵格和移動端的柵格同成為UI設計的柵格系統。

網頁設計攻略:UI設計中如何更好地使用柵格系統?
網頁設計攻略

網頁柵格系統的特點

一、必要性

1.專業:能制定頁面合理的基礎規則,保持界面這題設計的一致性、專業性,同時避免無效設計的嘗試,讓設計師更專註於有意義的設計方向。

2.高效:網頁設計時遵循柵格系統的設計細節,能讓界面中所有元素和模塊都有會規律可循,同時減少設計師的決策時間,以及部門間的溝通損耗,提升各部門的工作效率。

3.布局基礎:能作為響應式網頁設計布局的基礎。

二、優點

1、邏輯性:

很多時候網頁設計得越細小的地方,越無法解釋它的存在理由,設計師也不能有理有據地闡述自己的設計。但透過柵格的使用,界面中的尺寸細節問題就能完美解釋。

2、便捷性

設計師除了做好視覺設計工作,還需與程序員對接,如網站實現方式、實現的規範性等等,透過柵格設計便能間接的推動和解決這些問題。

3、條理性

利用柵格系統,界面設計會變得更有條理性,內容可讀性變高,也會讓界面變得更加有層次感,更加穩定平衡。

網頁設計攻略:UI設計中如何更好地使用柵格系統?
網頁設計攻略

UI設計中如何更好地使用柵格系統?

一、柵格的基本要求

① 最小單位

柵格系統的最小單位,即界面的網格單位基礎。界面設計的所有元素、模塊以及版式都是根據這個基礎單位建立和布局。

② 屏幕總寬度

進行界面設計前,都需要設定屏幕尺寸,這個尺寸將是規範整個界面布局尺寸及統一的標準規範,目前各種電商網站的尺寸以960為主,而移動端主要以375、750、1280等為常規設計尺寸。

③ 水槽

水槽,就是小列間的分隔間距,也可用於內容分隔。水槽寬度會以頁面風格來設置:水槽越大,頁面留白呼吸感越好;水槽越小,頁面元素會變得緊湊。但無論水槽大小如何,都不得在水槽內添加任何版塊和元素。

④ 列

列=小列+水槽。通常列數越多,排布在版面內的內容就會越精細,通過控制列數,就可以控制版面的留白和呼吸感。

⑤ 行

由於現今網頁設計的內容高度不固定,因此一般情況下,設計師都會忽略「行」的重要性。但在比較嚴謹數據可視化的後台設計中,透過精細化行的布局,會讓頁面變得更有邏輯和節奏感。

⑥ 安全邊距

安全邊距,指柵格內容和屏幕邊緣之間的距離,作用在於避免信息太貼近屏幕邊緣,影響視覺內容。

* 安全邊距與平面設計中的出血位是同一個概念。

⑦ 內容區域

內容區域是整個柵格系統的匯總,在橫向的行和縱向的小列所交叉的區域,就是設計元素排布的地方。

二、柵格系統的應用準則

a.柵格系統的核心思想:內容元素必須位於若個列,且可任意分割。

b.內容元素應位於小列和行以內,不能流出水槽內,否則違背柵格系統的目的。

c.父級元素對齊柵格,子級可以不完全對齊列。

d.除非特意設計,否則不要在小列外的區域放置元素,也不要把柵格內部的列寬當作內邊距,而是與網格最邊緣保持對齊。

e.所有重要內容應與總寬度相適應,不能把總寬度當作全部內容區域,應設定內邊距作留白之用。

f.若界面設計屬特殊風格,可嘗試讓背景顏色或背景圖片完全出血,將它理解為全面屏設計,此時背景可以脫離柵格化設計規則。

柵格系統能幫助我們設計出整齊平衡的界面,但規範總歸是規範,設計也需要靈活變通,才能讓自己的設計在視覺上有所突破。