ui設計的常用尺寸-tft每日頭條

在對界面的一些尺寸規範不是十分清楚的時候，往往憑借自己的感覺去繪制界面。

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

整理了一些UI設計尺寸規範，ui設計需要遵循一定的規範，才能使其成為用戶都能理解的設計産品。

ui設計的常用尺寸（新手學習UI設計尺寸和規範）1

1、尺寸

設計圖尺寸

ui設計的常用尺寸（新手學習UI設計尺寸和規範）2

UI組件布局

狀态欄和導航欄：在 iPhone6/7/8設計中，狀态欄的高度為20pt（40px）。導航欄的高度是44pt（88px）。在 iPhoneX 設計中，狀态欄的高度為44pt（132px）。導航欄的高度也是44pt（132px）。

ui設計的常用尺寸（新手學習UI設計尺寸和規範）3

标簽欄：iPhone6/7/8設計中，标簽欄的高度為49pt（98px）。在iphone X 中為83pt（249px），通常我們會在 Tab欄圖标之下加上10pt（20px/30px）的注釋文字。

ui設計的常用尺寸（新手學習UI設計尺寸和規範）4

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

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

狀态欄：88PX

導航欄：88PX

标簽欄：98PX

安全欄：68PX

2、字體

IOS設計中：

中文字體：PingFang SC

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

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

安卓設計中：

中文字體：思源黑體/ Noto

英文字體：Roboto

3、啟動圖标

設計師需要設計啟動圖标（1024x1024px）之後按照程序員的要求切出幾十個不同尺寸的圖标。比如，在手機中@3x情況下桌面圖标尺寸為180x180px，在@2x情況下為120x120px。

ui設計的常用尺寸（新手學習UI設計尺寸和規範）5

規範始終是規範，并不靈活。我們要遵循設計規範，它能保證我們的設計不會出現較大的問題，最大限度保證産品的一緻性。

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