在對(duì)界面的一些尺寸規(guī)范不是十分清楚的時(shí)候，往往憑借自己的感覺(jué)去繪制界面。

大家都知道移動(dòng)端設(shè)備屏幕尺寸非常多。尤其是Android，你會(huì)聽(tīng)到很多種分辨率：480×800, 480×854, 540×960, 720×1280, 1080×1920。近年來(lái)iPhone也加劇了：640×960, 640×1136, 750×1334, 1242×2208。

整理了一些UI設(shè)計(jì)尺寸規(guī)范，ui設(shè)計(jì)需要遵循一定的規(guī)范，才能使其成為用戶(hù)都能理解的設(shè)計(jì)產(chǎn)品。

?

1、尺寸

設(shè)計(jì)圖尺寸

UI組件布局

狀態(tài)欄和導(dǎo)航欄：在 iPhone6/7/8設(shè)計(jì)中，狀態(tài)欄的高度為20pt（40px）。導(dǎo)航欄的高度是44pt（88px）。在 iPhoneX 設(shè)計(jì)中，狀態(tài)欄的高度為44pt（132px）。導(dǎo)航欄的高度也是44pt（132px）。

標(biāo)簽欄：iPhone6/7/8設(shè)計(jì)中，標(biāo)簽欄的高度為49pt（98px）。在iphone X 中為83pt（249px），通常我們會(huì)在 Tab欄圖標(biāo)之下加上10pt（20px/30px）的注釋文字。

其中包含：34pt（102px）安全區(qū)域。

個(gè)人一般作圖為：iPhone X@2 750*1624（@1 375*812）

狀態(tài)欄：88PX

導(dǎo)航欄：88PX

標(biāo)簽欄：98PX

安全欄：68PX

?

2、字體

IOS設(shè)計(jì)中：

中文字體：PingFang SC

英文字體：SF UI Text 、SF UI Display

其中SF UI Text適用與小于19pt的文字，SF UI Display適用于大于20pt的文字

安卓設(shè)計(jì)中：

中文字體：思源黑體/ Noto

英文字體：Roboto

?

3、啟動(dòng)圖標(biāo)

設(shè)計(jì)師需要設(shè)計(jì)啟動(dòng)圖標(biāo)（1024x1024px）之后按照程序員的要求切出幾十個(gè)不同尺寸的圖標(biāo)。比如，在手機(jī)中@3x情況下桌面圖標(biāo)尺寸為180x180px，在@2x情況下為120x120px。

規(guī)范始終是規(guī)范，并不靈活。我們要遵循設(shè)計(jì)規(guī)范，它能保證我們的設(shè)計(jì)不會(huì)出現(xiàn)較大的問(wèn)題，最大限度保證產(chǎn)品的一致性。

（ps：如果文中有錯(cuò)誤的地方，歡迎指正）

?