UI排版不夠精致？掌握這1點，不再困惑
發(fā)布者：君點科技 時間：2019-05-30 13:25:321. 為 什 么 要 學 習 網(wǎng) 格
有效有規(guī)律的設(shè)計布局是設(shè)計的一個基本原則，網(wǎng)格無處不在，可能只是你沒有注意到它的存在，簡單理解就是把一個頁面，根據(jù)版心劃分為無數(shù)統(tǒng)一尺寸的網(wǎng)格，廣泛應(yīng)用于雜志、畫冊、門戶網(wǎng)站、UI設(shè)計等平面設(shè)計領(lǐng)域。它能讓你的設(shè)計更有秩序更有規(guī)律，簡單來說就是用更科學的方法去排版。
▲ 谷歌響應(yīng)UI基于12列網(wǎng)格布局。該網(wǎng)格在布局之間創(chuàng)建視覺一致性，同時允許各種設(shè)計的靈活性，網(wǎng)格列的數(shù)量根據(jù)斷點系統(tǒng)而變化。
2. 網(wǎng) 格 的 基 礎(chǔ) 概 念
列
列是網(wǎng)格的垂直部分也可以理解為內(nèi)容區(qū)域。網(wǎng)格中的列越多，其靈活性越大，但是列并不是越多越好，PC端一般是12列，移動端一般是6列，特別是移動端不適合列太多，列太多會讓頁面更碎。
PC端970為分辨率網(wǎng)格分為12列
移動端一般分為6列
行
行是網(wǎng)格的水平部分。也是橫向部分，它們通常在網(wǎng)頁設(shè)計中被省略。具有行和列的網(wǎng)格稱為模塊化網(wǎng)格。移動端行間距用的比較少可以忽略，一般就是橫向的間距。
內(nèi)容模塊
也叫內(nèi)容區(qū)域，填充設(shè)計內(nèi)容，模塊是由行和列交叉創(chuàng)建的空間單位。
組合區(qū)域
區(qū)域是形成組合元素的列，行或模塊的分組。
水槽
列和行由水槽分隔。溝渠越緊，視覺張力就越大。如果你希望你界面間距大點，水槽就可以留大，相反水槽越小，越緊湊，注意一點，水槽里面是不要放內(nèi)容，除非和區(qū)域一樣組合使用，內(nèi)容盡量放在模塊里面。
圖中橙色區(qū)域就是水槽，這里做設(shè)計時候是模塊和模塊之間間距，最好不要放內(nèi)容。
屏幕邊距
邊距是網(wǎng)格列和行之外的空間。不要填充內(nèi)容，移動端主要是兩側(cè)空間和屏幕邊緣的距離，這里設(shè)計時候切忌不要填充內(nèi)容，保持頁面骨架邊界。
黃色區(qū)域就是屏幕邊距，設(shè)計時候切忌填充內(nèi)容，保持設(shè)計骨架統(tǒng)一。
上述基本就是網(wǎng)格的一些常用單位，當然還有更細分的流線，標記，還有各種網(wǎng)格類型，主要學習移動端的網(wǎng)格，只需要掌握:移動端一般分為6列，內(nèi)容區(qū)域（UI設(shè)計元素，內(nèi)容）一般放置到內(nèi)容模塊和組合模塊，水槽和屏幕邊距保持留白，不放內(nèi)容。
3. 如 何 定 網(wǎng) 格 ， 各 模 塊 大 小
知道了網(wǎng)格的基礎(chǔ)概念，那么我們?nèi)绾巫约憾x一套科學標準的網(wǎng)格系統(tǒng)和骨架，來保證骨架的科學性和設(shè)計連續(xù)性。
第一步：定最小設(shè)計單位
在UI系統(tǒng)中我們先要保證你的這個世界里面的元素是有個基礎(chǔ)的，常用的單位有3，（淘寶，天貓,蘑菇街等最小單位），4（funcy），5（eaby，亞馬遜，pinterest等）這個具體看你們產(chǎn)品的復(fù)雜程度，目前整體設(shè)計區(qū)域是最小單位越來越大，像Airbnb，pinterest等都是大留白，單位都是5甚至6。
第二：定邊距和水槽大小
前面說過，先定最小單位，假如我們最小單位是5，總寬是375（sketch1倍設(shè)計尺寸）產(chǎn)品內(nèi)容我希望整個系統(tǒng)設(shè)計風格別那么滿，留白稍微多點，我左右邊距是10，中間內(nèi)容和內(nèi)容之間也想留10，這里注意，單位一定是前面我們定的5的倍數(shù)。
計算得出：
（375（屏幕總寬）-邊距左右兩邊20- 水槽五個50 ） ? 6（內(nèi)容移動端是6）= 51(四舍五入)
-
邊距：10
-
水槽：10
-
內(nèi)容：51
這就是我們定的柵格，系統(tǒng)骨架，設(shè)計時候必須保證每個設(shè)計元素，在框架內(nèi)，保持規(guī)則，邊距不要出現(xiàn)內(nèi)容，水槽不要放置內(nèi)容，如果放置，盡量以組的形式。
必然會出現(xiàn)除不盡的情況這個避免不了，取整數(shù)，有個內(nèi)容區(qū)域面積會少1個px，這個沒關(guān)系。
也可以根據(jù)不同情況，做出不同組合的網(wǎng)格，具體看業(yè)務(wù)場景。
第三：定橫向間距
前面雖然說過，在定骨架時候可以忽略橫向，但是在UI系統(tǒng)設(shè)計中還是需要對橫向的設(shè)計間距進行統(tǒng)一，多人協(xié)作時需要保證所有設(shè)計師界面中的間距一致性，這有個科學方法：
費波那契數(shù)列又譯為費波拿契數(shù)、斐波那契數(shù)列、費氏數(shù)列、黃金分割數(shù)列。
在數(shù)學上，費波那契數(shù)列是以遞歸的方法來定義：用文字來說，就是費波那契數(shù)列由0和1開始，之后的費波那契系數(shù)就是由之前的兩數(shù)相加而得出。
費波那契系數(shù)是：0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233
類似有節(jié)奏的設(shè)計間距來搭建系統(tǒng)，結(jié)合前面我們定的5的柵格，可以得出：
這個間距只是一個運用費波那契數(shù)列的一個參考，如果在運用過程中如果覺得間距不夠用，完全可以去添加或者調(diào)整，但是一定要在系統(tǒng)的原則基礎(chǔ)上加有規(guī)律的間距。
國外運用案例
網(wǎng)格制作工具
PS推薦輔助線工具：guideguide
Sketch推薦：craft插件
本信息來源于：君點科技 fasttcp.cn 網(wǎng)站建設(shè)，網(wǎng)站設(shè)計，上海網(wǎng)站建設(shè)，上海網(wǎng)站設(shè)計，網(wǎng)站建設(shè)公司，網(wǎng)站設(shè)計公司
掃描二維碼
