首頁 > 網頁教程 > 設計分享 > 網格設計:更科學的排版方法

江苏十一选五大遗漏:網格設計:更科學的排版方法

時間:2018-08-15    作者:sky   來源:我們的設計日記

為什么要學習網格

江苏十一选五开奖公告 www.ervgn.com 有效、有規律的設計布局是設計的一個基本原則,網格無處不在,可能只是你沒有注意到它的存在,簡單理解就是把一個頁面,根據版心劃分為無數統一尺寸的網格,廣泛應用于雜志、畫冊、門戶網站、UI設計等平面設計領域。

它能讓你的設計更有秩序、更有規律,簡單來說就是用更科學的方法去排版。

▲ 谷歌material響應UI基于 12 列網格布局

該網格在布局之間創建視覺一致性,同時允許各種設計的靈活性,網格列的數量根據斷點系統而變化。

2. 網格的基礎概念   

列是網格的垂直部分也可以理解為內容區域,網格中的列越多,其靈活性越大。但是列并不是越多越好,PC端一般是 12 列,移動端一般是 6 列,特別是移動端不適合列太多,列太多會讓頁面更碎。

▲ PC端 970 為分辨率網格分為 12 列

▲ 移動端一般分為 6 列

行是網格的水平部分,也是橫向部分,它們通常在網頁設計中被省略。具有行和列的網格稱為??榛?,移動端行間距用的比較少可以忽略,一般在UI設計師中就是橫向的間距。

內容???/strong>

也叫內容區域,填充設計內容,??槭怯尚瀉土薪徊媧唇ǖ目占淶ノ?。

組合區域

區域是形成組合元素的列,行或??櫚姆腫?。

水槽

列和行由水槽分隔。溝渠越緊,視覺張力就越大。如果你希望你界面間距大點,水槽就可以留大,相反水槽越小,越緊湊,注意一點,水槽里面是不要放內容,除非和區域一樣組合使用,內容盡量放在??槔錈?。

▲ 圖中橙色區域就是水槽

這里做設計時候是??楹湍?櫓浼渚?,最好不要放內容。

屏幕邊距

邊距是網格列和行之外的空間,不要填充內容,移動端主要是兩側空間和屏幕邊緣的距離,這里設計時候切忌不要填充內容,保持頁面骨架邊界。

▲ 黃色區域就是屏幕邊距,設計時候切忌填充內容,保持設計骨架統一

上述基本就是網格的一些常用單位,當然還有更細分的流線,標記,還有各種網格類型。但是今天我們主要學習移動端的網格,只需要掌握:移動端一般分為 6 列,內容區域(UI設計元素,內容)一般放置到內容??楹妥楹夏??,水槽和屏幕邊距保持留白,不放內容。

相關推薦
版式設計:深入淺出學會網格系統的應用
界面設計:如何用網格系統設計出大師般的APP界面?
網頁設計教程:20步創建完美網站布局設計
UI布局設計:文章列表與內容詳情頁設計案例賞析
新手教程:9款經典網頁布局設計推薦

精彩推薦

熱門教程