激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

資深設(shè)計(jì)師心得:網(wǎng)格，更科學(xué)的排版方法

發(fā)布時(shí)間：2024-03-12 20:51:26 瀏覽量：205次

網(wǎng)格在有規(guī)律的設(shè)計(jì)布局中是設(shè)計(jì)的一個(gè)基本原則，網(wǎng)格的應(yīng)用能夠讓你的設(shè)計(jì)更有秩序、更有規(guī)律。簡單的說，網(wǎng)格的使用就是用更科學(xué)的方法去排版。

1. 為什么要學(xué)習(xí)網(wǎng)格

有效、有規(guī)律的設(shè)計(jì)布局是設(shè)計(jì)的一個(gè)基本原則，網(wǎng)格無處不在，可能只是你沒有注意到它的存在，簡單理解就是把一個(gè)頁面，根據(jù)版心劃分為無數(shù)統(tǒng)一尺寸的網(wǎng)格，廣泛應(yīng)用于雜志、畫冊、門戶網(wǎng)站、UI設(shè)計(jì)等平面設(shè)計(jì)領(lǐng)域。

它能讓你的設(shè)計(jì)更有秩序、更有規(guī)律，簡單來說就是用更科學(xué)的方法去排版。

谷歌material響應(yīng)UI基于12列網(wǎng)格布局

該網(wǎng)格在布局之間創(chuàng)建視覺一致性，同時(shí)允許各種設(shè)計(jì)的靈活性，網(wǎng)格列的數(shù)量根據(jù)斷點(diǎn)系統(tǒng)而變化。

2. 網(wǎng)格的基礎(chǔ)概念

列

列是網(wǎng)格的垂直部分也可以理解為內(nèi)容區(qū)域，網(wǎng)格中的列越多，其靈活性越大。但是列并不是越多越好，PC端一般是12列，移動(dòng)端一般是6列，特別是移動(dòng)端不適合列太多，列太多會讓頁面更碎。

PC端970為分辨率網(wǎng)格分為12列

移動(dòng)端一般分為6列

行

行是網(wǎng)格的水平部分，也是橫向部分，它們通常在網(wǎng)頁設(shè)計(jì)中被省略。具有行和列的網(wǎng)格稱為模塊化網(wǎng)格，移動(dòng)端行間距用的比較少可以忽略，一般在UI設(shè)計(jì)師中就是橫向的間距。

內(nèi)容模塊

也叫內(nèi)容區(qū)域，填充設(shè)計(jì)內(nèi)容，模塊是由行和列交叉創(chuàng)建的空間單位。

組合區(qū)域

區(qū)域是形成組合元素的列，行或模塊的分組。

水槽

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

圖中橙色區(qū)域就是水槽

這里做設(shè)計(jì)時(shí)候是模塊和模塊之間間距，最好不要放內(nèi)容。

屏幕邊距

邊距是網(wǎng)格列和行之外的空間，不要填充內(nèi)容，移動(dòng)端主要是兩側(cè)空間和屏幕邊緣的距離，這里設(shè)計(jì)時(shí)候切忌不要填充內(nèi)容，保持頁面骨架邊界。

黃色區(qū)域就是屏幕邊距，設(shè)計(jì)時(shí)候切忌填充內(nèi)容，保持設(shè)計(jì)骨架統(tǒng)一

上述基本就是網(wǎng)格的一些常用單位，當(dāng)然還有更細(xì)分的流線，標(biāo)記，還有各種網(wǎng)格類型。但是今天我們主要學(xué)習(xí)移動(dòng)端的網(wǎng)格，只需要掌握：移動(dòng)端一般分為6列，內(nèi)容區(qū)域（UI設(shè)計(jì)元素，內(nèi)容）一般放置到內(nèi)容模塊和組合模塊，水槽和屏幕邊距保持留白，不放內(nèi)容。

3. 如何定網(wǎng)格，各模塊大小

知道了網(wǎng)格的基礎(chǔ)概念，那么我們?nèi)绾巫约憾x一套科學(xué)標(biāo)準(zhǔn)的網(wǎng)格系統(tǒng)和骨架，來保證骨架的科學(xué)性和設(shè)計(jì)連續(xù)性。

第一步：定最小設(shè)計(jì)單位

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

這個(gè)具體看你們產(chǎn)品的復(fù)雜程度，目前整體設(shè)計(jì)區(qū)域是最小單位越來越大，像Airbnb，pinterest等都是大留白，單位都是5甚至6。

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

前面說過，先定最小單位，假如我們最小單位是5，總寬是375（sketch1倍設(shè)計(jì)尺寸）產(chǎn)品內(nèi)容我希望整個(gè)系統(tǒng)設(shè)計(jì)風(fēng)格別那么滿，留白稍微多點(diǎn)，我左右邊距是10，中間內(nèi)容和內(nèi)容之間也想留10，這里注意，單位一定是前面我們定的5的倍數(shù)。

計(jì)算得出：

（375（屏幕總寬）-邊距左右兩邊20- 水槽五個(gè)50 ） ? 6（內(nèi)容移動(dòng)端是6）= 51（四舍五入）

  • 邊距：10
  • 水槽：10
  • 內(nèi)容：51

這就是我們定的柵格，系統(tǒng)骨架。設(shè)計(jì)時(shí)候必須保證每個(gè)設(shè)計(jì)元素，在框架內(nèi)，保持規(guī)則，邊距不要出現(xiàn)內(nèi)容，水槽不要放置內(nèi)容，如果放置，盡量以組的形式。

必然會出現(xiàn)除不盡的情況這個(gè)避免不了，取整數(shù)，有個(gè)內(nèi)容區(qū)域面積會少1個(gè)px，這個(gè)沒關(guān)系。

也可以根據(jù)不同情況，做出不同組合的網(wǎng)格，具體看業(yè)務(wù)場景。

第三步：定橫向間距

前面雖然說過，在定骨架時(shí)候可以忽略橫向，但是在UI系統(tǒng)設(shè)計(jì)中還是需要對橫向的設(shè)計(jì)間距進(jìn)行統(tǒng)一，多人協(xié)作時(shí)需要保證所有設(shè)計(jì)師界面中的間距一致性，這有個(gè)科學(xué)方法：

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

費(fèi)波那契系數(shù)是：0,1,1,2,3,5,8,13,21,34,55,89,144,233

我也研究過很多國外設(shè)計(jì)系統(tǒng)，都是類似有節(jié)奏的設(shè)計(jì)間距來搭建系統(tǒng)，結(jié)合前面我們定的5的柵格，可以得出：

當(dāng)然這個(gè)間距只是一個(gè)運(yùn)用費(fèi)波那契數(shù)列的一個(gè)參考，如果在運(yùn)用過程中如果覺得間距不夠用，完全可以去添加或者調(diào)整，但是一定要在系統(tǒng)的原則基礎(chǔ)上加有規(guī)律的間距。

至此網(wǎng)格大概就講完了，也通過前面推導(dǎo)得出了一套網(wǎng)格系統(tǒng)，后續(xù)就是需要大家在自己項(xiàng)目里面去使用了。

國外運(yùn)用案例

網(wǎng)格制作工具

PS推薦輔助線工具：guideguide http://guideguide.me/

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

作者：sky，微信公眾號“我們的設(shè)計(jì)日記 ”

本文由 @sky 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會在第一時(shí)間與您取得聯(lián)系，請保持電話暢通！
確定