亚洲欧美香蕉在线日韩精选_www在线观看美女视频_娇妻的呻吟大团结内裤奇缘_免费a漫禁漫h漫在线

這幾年,一直備受關(guān)注的8pt網(wǎng)格設(shè)計(jì)系統(tǒng),究竟是怎樣的?

2021-12-6    seo達(dá)人


圖片
Photon Design System
比較知名的 Audi Design system
圖片
Audi Design system
當(dāng)然還有一些公司,如airbnb,他們設(shè)計(jì)體系也是基于8網(wǎng)格為基礎(chǔ)來定義的。
圖片
Airbnb Design Language
看到這,大家是不是很想了解8pt網(wǎng)格到底如何構(gòu)建一套強(qiáng)大設(shè)計(jì)系統(tǒng)?底層邏輯是什么?為何諸多大廠都選擇這個(gè)數(shù)字?下面我們一起來揭曉。
為什么是8pt網(wǎng)格系統(tǒng)?
圖片
首先這里給大家介紹下pt 這個(gè)單位,pt是“點(diǎn)”的意思,一倍圖情況下1pt=1dp=1px,所以8pt(8點(diǎn))網(wǎng)格系統(tǒng),我們一般默認(rèn)情況都是基于1倍圖來進(jìn)行設(shè)計(jì)的。
圖片
大多數(shù)屏幕寬高數(shù)值幾乎都能被8整除
如果用數(shù)字8作為設(shè)計(jì)中最小原子單位,可以很方便的縮小畫布的設(shè)計(jì)尺寸,8/2=4、4/2=2、2/2=1。如果從10、5、6這樣的數(shù)值開始,你縮小到的網(wǎng)格單位可能存在小數(shù)點(diǎn)的像素,一般不推薦這樣的數(shù)值進(jìn)行設(shè)計(jì)。
下面大家看一個(gè)圖
圖片
來源網(wǎng)絡(luò)
第一排使用基于8pt的網(wǎng)格系統(tǒng),下面一排是基于 5 為單位的網(wǎng)格系統(tǒng),當(dāng)他們分別適配到對應(yīng)的倍數(shù)時(shí)候(0.75、1、1.5倍),下面一排就會(huì)出現(xiàn)次像素。如果使用基于8pt的網(wǎng)格系統(tǒng),幾乎很少遇到次像素的場景。
如今,屏幕碎片化時(shí)代,多終端設(shè)計(jì)需求層出不窮,為了能確保多終端適配更靈活,基于8pt網(wǎng)格的設(shè)計(jì)系統(tǒng)已成為諸多設(shè)計(jì)師的共識(shí)。
如何應(yīng)用8pt網(wǎng)格?
圖片
如何將8pt網(wǎng)格貫穿整個(gè)設(shè)計(jì)系統(tǒng)里面?這里首先需要?jiǎng)?chuàng)建一個(gè)基于8pt的網(wǎng)格系統(tǒng)。有了這些數(shù)值,那么下面就可以根據(jù)定義出來的數(shù)值去創(chuàng)建分子組件甚至設(shè)計(jì)最終的頁面。
圖片
Google Materials Design 基于8pt網(wǎng)格布局設(shè)計(jì),下面我們就基于8pt網(wǎng)格系統(tǒng)的規(guī)則,給大家演示如何構(gòu)建基礎(chǔ)層設(shè)計(jì)框架,這部分也是最重要的。

 

#1.排版

圖片
來源網(wǎng)絡(luò)
如何將8pt網(wǎng)格應(yīng)用在排版中?很簡單,只需要將字體行高統(tǒng)一定義基于8pt網(wǎng)格的增量,就是8的倍數(shù),這樣文字排版就能對齊到基于8網(wǎng)格的畫布中。

 

#2.圖標(biāo)

圖片
圖標(biāo)的大小尺寸定義,也是需要基于8網(wǎng)格來定義。就像右側(cè)基于8網(wǎng)格的圖標(biāo)尺寸,在排版布局時(shí)候剛好能夠?qū)?yīng)到網(wǎng)格上的。

 

#3.陰影

圖片
如果需要定義陰影數(shù)值,那么陰影也是需要基于8網(wǎng)格系統(tǒng)來定義。

#4.圓角

圖片

設(shè)計(jì)系統(tǒng)里面所有涉及到組件圓角值,都要基于8網(wǎng)格來定義。大圓角一般會(huì)用在頁面級(jí)別的組件設(shè)計(jì),比如沉浸式浮層或者彈窗等

 

#5.柵格布局

圖片

包括整個(gè)系統(tǒng)頁面級(jí)別的布局,都需要基于8pt網(wǎng)格來建立規(guī)則。上圖是web端和移動(dòng)端基于8pt的布局系統(tǒng),需要確保水槽和邊距是遵循這個(gè)規(guī)則的。

圖片
最后,在項(xiàng)目開始的前期,一定要基于8網(wǎng)格系統(tǒng)設(shè)計(jì),來將原子級(jí)和分子級(jí)的組件基礎(chǔ)打牢。因?yàn)楹笃陂_始大量頁面設(shè)計(jì)時(shí),涉及到多人協(xié)作,甚至多團(tuán)隊(duì)。

以上就是一個(gè)8pt網(wǎng)格設(shè)計(jì)系統(tǒng)的大致思路框架,當(dāng)然除了上面這些,一個(gè)設(shè)計(jì)系統(tǒng)里面需要涉及到8pt網(wǎng)格系統(tǒng)還有響應(yīng)式布局等,大家先一步步深入了解學(xué)習(xí),將這套理念應(yīng)用在項(xiàng)目中,發(fā)揮最大價(jià)值。

最后今天既然講到了設(shè)計(jì)系統(tǒng),我正巧也找到了iOS15的figma格式的UIKT,是在線版本的,可直接打開。大家可提前研究下iOS 15的一些新的規(guī)則與變化。

圖片

圖片
領(lǐng)取方式如下:公眾號(hào)后臺(tái)發(fā)送 iOS15 即可獲取當(dāng)前地址

 

原文地址: 功夫UX (公眾號(hào))
作者: 功夫UX
轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》這幾年,一直備受關(guān)注的8pt網(wǎng)格設(shè)計(jì)系統(tǒng),究竟是怎樣的?

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)axecq.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


日歷

鏈接

個(gè)人資料

存檔