新建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...