一、網(wǎng)格系統(tǒng)的組成
在深入了解網(wǎng)格的類型和使用準則前,讓我們先來了解一下網(wǎng)格系統(tǒng)中涉及到的一些基本概念,比如列數(shù)、內(nèi)邊距、外邊距等等。
1、列
列(Column)是網(wǎng)格的基礎(chǔ),用來表示內(nèi)容放置的區(qū)域。每一列的寬度以百分比而不是固定的數(shù)值來衡量,這樣面對不同的屏幕尺寸,可以更靈活地進行設計。
日常設計中,最常使用的是12列等寬的網(wǎng)格系統(tǒng),適用于大多數(shù)的頁面和布局設計中。
2、內(nèi)間距
內(nèi)間距(Gutter/Padding)是指每列之間的距離,也被叫做水槽。內(nèi)間距能為頁面提供呼吸空間,避免內(nèi)容之間過于擁擠。
3、外邊距
邊距(Margins)是列與邊框之間的距離,邊距繞過內(nèi)容有上、下、左、右四個方向,在設計中我們可以針對每一側(cè)設定和更改邊距。
4、字段或模塊
字段或模塊是行和列的交集。這些模塊是頁面的基礎(chǔ),所有設計元素都將適合網(wǎng)格中矩形卡片創(chuàng)建的這些空間單元。
5、界面設計與網(wǎng)格
如果說網(wǎng)格在過去對于印刷必不可少,那么今天網(wǎng)格在數(shù)字世界中仍是不可或缺的。
網(wǎng)格成為開發(fā)數(shù)字產(chǎn)品的關(guān)鍵工具,為在所有設備上提供最佳的用戶體驗。因此,無論屏幕大小如何,設計師都必須能夠在每個屏幕上通過最佳的方式組織內(nèi)容。
二、如何在設計中使用網(wǎng)格系統(tǒng)?
網(wǎng)格是具有列、內(nèi)間距和外邊距的結(jié)構(gòu)系統(tǒng),其目的是幫助設計師組織界面的內(nèi)容。
內(nèi)間距的距離越窄,越會向用戶傳達「這些內(nèi)容屬于同一組」的感覺。
同理,內(nèi)間距越寬,看起來越像是不同類型的內(nèi)容。
需要注意的是,內(nèi)間距的距離不要太寬,或者比每一列的寬度還寬,容易導致內(nèi)容之間的留白過大,造成視覺瀏覽上的不連貫。
此外,外邊距的間距遵循與內(nèi)間距相同的規(guī)則。可以靈活調(diào)整外邊距,以便在內(nèi)容和屏幕之間留出合適的間隔。
和內(nèi)間距一樣,屏幕中的外邊距也不能太寬,這樣會壓縮頁面中內(nèi)容的展示空間,會讓頁面看起來很局促。
三、使用網(wǎng)格設計的四條準則
網(wǎng)格的使用看起來很直觀,但在UX或UI項目中使用網(wǎng)格系統(tǒng)仍有一些需要注意的規(guī)則。
1、將元素集中在每一列中
上面說到,在設計中常用到的是12列網(wǎng)格系統(tǒng)。那么12列網(wǎng)格為什么被廣泛使用呢?主要原因在于12列網(wǎng)格更方便擴展不同的布局形式。
▲ 12列網(wǎng)格可以一行排列兩個內(nèi)容,各占6列網(wǎng)格;一行排列三個內(nèi)容,各站四個網(wǎng)格;一行排列四個內(nèi)容,各占3列網(wǎng)格;一行排列六個內(nèi)容,各占2列網(wǎng)格。
基本上,常用到的頁面布局形式在12列網(wǎng)格中都可以實現(xiàn)。
▲ 在每個內(nèi)容之間留出足夠的內(nèi)邊距。這里需要注意的是,內(nèi)容的兩側(cè)要與每一列的邊緣重合,而不是與內(nèi)邊距重合。
▲ 當內(nèi)容居中顯示時,要始終在邊緣留出一點空間,防止頁面被內(nèi)容填充的過于擁擠。
2、不要將列數(shù)作為內(nèi)容填充
在網(wǎng)格系統(tǒng)下,設計應該填充整個內(nèi)容的寬度,這樣會讓界面看起來更規(guī)范。
不要讓左右兩列沒有填充內(nèi)容,讓列數(shù)作為填充,這樣會導致頁面的外邊距不統(tǒng)一,增加后期的開發(fā)成本。
3、可以嘗試脫離網(wǎng)格
在設計中,使用從網(wǎng)格中溢出的圖像或元素也是可以的。
例如我們想填充一個全尺寸的背景色或者圖像,只需將圖像拉到網(wǎng)格之外就可以。在網(wǎng)格和邊距的示意下,開發(fā)人員也能夠快速理解界面的尺寸信息。
4、注意內(nèi)容之間的間距
在網(wǎng)格上放置不同的元素時,確保元素之間的左右間距、上下間距都是一致的,這樣會讓整個界面看起來更規(guī)范。
最后
除了能夠改善設計、減輕用戶認知負擔外,網(wǎng)格系統(tǒng)還能提升設計效率。有了網(wǎng)格我們可以快速衡量元素的間距、邊距的精度,簡化設計過程。
另外,在規(guī)范的網(wǎng)格系統(tǒng)中,界面布局或內(nèi)容上的修改也會變得更容易。
慢慢來比較快,希望對你有幫助!
作者:Clippp
轉(zhuǎn)載請注明:學UI網(wǎng)》如何讓你的設計看起來更有說服力?試試網(wǎng)格系統(tǒng)!
藍藍設計( tweetduck.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司