歡迎訪問

云南鼎浩信息技術有限公司官方網站,云南網站建設誠信品牌!

鼎浩網絡,云南鼎浩信息技術有限公司

鼎浩客服熱線

DING HAO COLUMN 鼎浩專欄

鼎浩的一些分享
Sharing from Ding Hao

  • 鼎浩服務
  • 1

資深設計師心得:網格,更科學的排版方法

來源:站長之家     2018年08月16日28:09
字號:T|T


為什么要學習網格

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

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


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

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

2. 網格的基礎概念?

? 列

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


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


▲ 移動端一般分為 6 列

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


內容模塊

也叫內容區域,填充設計內容,模塊是由行和列交叉創建的空間單位。


組合區域

區域是形成組合元素的列,行或模塊的分組。


水槽

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


▲ 圖中橙色區域就是水槽

這里做設計時候是模塊和模塊之間間距,最好不要放內容。

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


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

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

3. 如何定網格,各模塊大小

知道了網格的基礎概念,那么我們如何自己定義一套科學標準的網格系統和骨架,來保證骨架的科學性和設計連續性。

第一步:定最小設計單位

我們都學過化學,在化學里面有最小單位原子,原子可以組成分子,分子可以組成更多的化學元素,那么在UI系統中其實也一樣,我們先要保證你的這個世界里面的元素是有個基礎的,常用的單位有3,(淘寶,天貓,蘑菇街等最小單位),4(funcy),5(eaby,亞馬遜,pinterest等)。

這個具體看你們產品的復雜程度,目前整體設計區域是最小單位越來越大,像Airbnb,pinterest等都是大留白,單位都是 5 甚至6。




第二步:定邊距和水槽大小

前面說過,先定最小單位,假如我們最小單位是5,總寬是375(sketch1 倍設計尺寸)產品內容我希望整個系統設計風格別那么滿,留白稍微多點,我左右邊距是10,中間內容和內容之間也想留10,這里注意,單位一定是前面我們定的 5 的倍數。

計算得出:

(375(屏幕總寬)-邊距左右兩邊20- 水槽五個50 ) ? ?6(內容移動端是6)= 51(四舍五入)

邊距:10

水槽:10

內容:51

這就是我們定的柵格,系統骨架。設計時候必須保證每個設計元素,在框架內,保持規則,邊距不要出現內容,水槽不要放置內容,如果放置,盡量以組的形式。

必然會出現除不盡的情況這個避免不了,取整數,有個內容區域面積會少 1 個px,這個沒關系。


也可以根據不同情況,做出不同組合的網格,具體看業務場景。


第三步:定橫向間距

前面雖然說過,在定骨架時候可以忽略橫向,但是在UI系統設計中還是需要對橫向的設計間距進行統一,多人協作時需要保證所有設計師界面中的間距一致性,這有個科學方法:

費波那契數列又譯為費波拿契數、斐波那契數列、費氏數列、黃金分割數列。在數學上,費波那契數列是以遞歸的方法來定義:用文字來說,就是費波那契數列由 0 和 1 開始,之后的費波那契系數就是由之前的兩數相加而得出。

費波那契系數是:0,1,1,2,3,5,8,13,21,34,55,89,144,233

我也研究過很多國外設計系統,都是類似有節奏的設計間距來搭建系統,結合前面我們定的 5 的柵格,可以得出:


當然這個間距只是一個運用費波那契數列的一個參考,如果在運用過程中如果覺得間距不夠用,完全可以去添加或者調整,但是一定要在系統的原則基礎上加有規律的間距。

至此網格大概就講完了,也通過前面推導得出了一套網格系統,后續就是需要大家在自己項目里面去使用了。


國外運用案例


網格制作工具


▲ PS推薦輔助線工具:


guideguide ?http://guideguide.me/

▲ Sketch推薦:craft插件 ? https://www.invisionapp.com/craft?




客服中心
點擊進行在線咨詢

QQ咨詢 咨詢QQ:79929313 咨詢QQ:88139574 咨詢QQ:122790803

咨詢熱線:0871-63399840

客服熱線:0871-63523332

客服中心 客服中心
台湾麻将牌 45142164799272469697474187957738775698772588736970248368878827850881130401268763528563528855753 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();