移動端介面設計之尺寸篇(更新)

2021-09-07 14:01:37 字數 2295 閱讀 8851

新建750×1334  解析度72,畫素/英吋。

24px、26px、28px、30px、32px、34px,36px等等。記住是偶數的。最小字型大小20px。

中文用蘋方黑,英文用san francisco,如果安不上也可以用helvetica代替。

750×1334尺寸的換算關係 1pt=2px,也就是說程式設計師拿到我們的px單位的標註稿,自己除以2就是pt了。

24px、32px,48px等,記住4的倍數比較好。

注意圖示的尺寸要統一尺寸,以眼睛觀察為主調整尺寸看上去一樣。方形的比圓形的看著要大,需要調整下。

750 x 1334 設計稿尺寸:

狀態列高度:40 px

導航欄高度:88 px

標籤欄高度:98 px

安裝乙個ps mirror可以在iphone上實時**效果。

馬克鰻pxcook 畫素大廚

parker標

一鍵標註神器-zeplin

用cutterman選中@2x @3x匯出。

做1024×1024尺寸,一般做方形無圓角。然後用 icontemplate 自動切圖一套圖示資源丟給程式設計師就ok了。

最好是乙個介面乙個資料夾。資料夾裡包括:介面效果圖,標註檔案圖,切圖資源檔案包。

值得注意的是引導頁切圖需要單獨設計多套(640×1136、750×1334、1242×2208)這個可別傻乎乎的用cutterman切幾套圖,這就尷尬了。

文字流式

控制項彈性

等比縮放

程式實現demo版本以後,咱們要在測試機上好好檢查下介面問題,及時跟程式溝通並更改。

可以看看下面這幾篇文章:

移動端介面設計之尺寸篇(**版)

新手福利!超全面的ui設計切圖規範

ui適配攻略·教程④一稿配雙平台

h5移動端頁面設計學習文件

乙份詳盡全面的ui設計字型與排版指南

如果想一稿適配ios,那就新建720×1280  解析度72,畫素/英吋。

如果單獨設計安卓md新規範的,那就新建1080×1920  解析度72,畫素/英吋。

24px、26px、28px、30px、32px、34px,36px等等。記住是偶數的。最小字型大小20px。

中文用noto/思源黑體(是乙個字型,叫法不同而已),英文用roboto。

距離單位是dp

文字單位是sp

720×1280尺寸的換算關係 1dp=2px,文字1sp=2px。也就是說程式設計師拿到我們的px單位的標註稿,自己除以2就是dp和sp了。

1080×1920尺寸就是1dp=3px,文字1sp=3px

24px、32px,48px等,記住4的倍數比較好。

注意圖示的尺寸要統一尺寸,以眼睛觀察為主調整尺寸看上去一樣。方形的比圓形的看著要大,需要調整下。

移動端介面設計之尺寸篇(**版)

最新規範md的做法:

8dp原則   柵格系統的最小單位是8dp,一切距離、尺寸都應該是8dp的整數倍。

常見一般常用做法:

直接把ios的設計稿照搬過來,只不過狀態列,導航欄,標籤欄按照安卓的來。

720 x 1280 設計稿尺寸:

狀態列高度:50 px

導航欄高度:96 px

標籤欄高度:96 px

安裝乙個ps mirror可以在安卓手機上實時**效果。

馬克鰻pxcook 畫素大廚

parker標

一鍵標註神器-zeplin

標註的時候,如果是720×1280尺寸設計的,就選對應的xhdpi,如果是1080×1920尺寸設計的,就選對應的xxhdpi。

用cutterman選中下面所示,根據需要選擇不同解析度的匯出。

主要是一些按鈕,單色或半透明的背景塊。圖示不用做點9。

做1024×1024尺寸,安卓對圖示的樣式沒有要求,你可以做各種形狀都行,一般做方形無圓角的,各家手機廠商的定製系統會自己加圓角。

然後用 icontemplate 自動切圖一套圖示資源丟給程式設計師就ok了。

最好是乙個介面乙個資料夾。資料夾裡包括:介面效果圖,標註檔案圖,切圖資源檔案包。

值得注意的是引導頁切圖需要單獨設計多套(480×800、720×1280、1080×1920)這個可別傻乎乎的用cutterman切幾套圖,這就尷尬了。

文字流式

控制項彈性

等比縮放

程式實現demo版本以後,咱們要在測試機上好好檢查下介面問題,及時跟程式溝通並更改。

可以看看下面這幾篇文章:

安卓1080p介面設計規範解讀

虎哥整理。

2023年12月10日更新。

移動裝置的介面設計尺寸

剛開始接觸ui的時候,碰到的最多的就是尺寸問題,什麼畫布要建多大 文字該用多大才合適 我要做幾套介面才可以?什麼七七八八的也著實讓人有些頭疼。iphone 介面尺寸 320 480 640 960 640 1136 ipad 介面尺寸 1024 768 2048 1536 以上單位都是畫素哦,至於解...

Android IOS APP介面設計之尺寸規範

剛開始接觸ui設計的新手們,碰到最多的就是有關尺寸的問題,介面多大,文字怎麼樣才合適,關於安卓我是不是要做幾套不同大小的才能適應?一大堆問題都讓人頭疼!閒話少說,希望這篇分享對大家有所幫助,不用再糾結尺寸大小,專心做好設計!iphone的介面尺寸不用多說,640 960是基本ok的,也可以是適應5s...

ui設計移動端字型適配 移動端介面設計之尺寸篇

畫布尺寸 新建750 1334 解析度72,畫素 英吋。常見的字型大小 24px 26px 28px 30px 32px 34px,36px等等。記住是偶數的。最小字型大小20px。字型 中文用蘋方黑,英文用san francisco,如果安不上也可以用helvetica代替。ios開發裡單位是pt...