移动端UI开发规范
2019-08-20 本文已影响0人
陈桐Caliburn
1、目的
建立UI和开发人员规范认知的一致性，便于高效团队合作
2、ios规范
2.1 UI交付给开发者资料
2x切图（以640为宽度尺寸为基准切图）640960*
3x切图（以1280为宽度尺寸为基准切图）12801920*
若提供一张切图，ios必须是2x
2.2 ios logo系统标准要求（尺寸规定严格）且提供对应1x 2x 3x
20*20 通知logo
29*29 设置
40*40 搜索icon
60*60 app icon
1024*1024 app store
76*76 ipad
83.5*83.5 ipad pro
2.3 闪屏业界标准
640x960 iPhone 4S
640x1136 iPhone 5S
750x1334 iPhone 8
1242x2208 iPhone 8 Plus
1125x2436 iPhoneX
828 x 1792 iPhone XR
1242 x 2688 iPhone XS Max
3、android规范
3.1 UI交付给开发者资料
| 图片类型 | 屏幕 |
|---|---|
| mdpi | 320*480 |
| hdpi | 480*800 |
| xhdpi | 720*1280 |
| xxhdpi | 1080*1920 |
| xxxhdpi | 2160*3840 |
3.2 app logo 系统标准要求（尺寸规定严格）
| DEBSITY | SIZE | RATIO | SCREEN | MARGIN | CONTENT | Padding |
|---|---|---|---|---|---|---|
| XXXHDPI | 192*192 | 4 | 640DPI | 12-16 | 170*170 | 16 |
| XXHDPI | 144*144 | 3 | 480DPI | 8-12 | 128*128 | 8 |
| XHDPI | 96*96 | 2 | 320DPI | 6-8 | 88*88 | 4 |
| HDPI | 72*72 | 1.5 | 240DPI | 4-6 | 68*68 | 2 |
| MDPI | 48*48 | 1 | 160DPI | 3-4 | 46*46 | 1 |
| N/A | 512*512 | Google play | NA | NA | As Required |
安卓建议：
提供MDPI~XXXHDPI, 图标有正常和圆角两种
若圆角为android切，须UI产品确认最终样式
3.3 应用市场提交logo
应用市场logo
| 应用市场 | 图片尺寸 | 体积 | 格式 | 特别建议 |
|---|---|---|---|---|
| 应用宝 | 16*16 | 20k以内 | png | |
| 应用宝 | 512*512 | 200K以内 | png | 直角图标 |
| 华为 | 216*216 | Png | 正方形图片 圆角32px | |
| VIVO | 512*512 | 小于50K | png | 正方形图片，直角图标 |
| 阿里分发平台 | 512*512 | Png | 背景透明带圆角 | |
| 小米 | 216*216 | png | 正方形图片 |
3.4 应用市场提交截图
| 市场 | 截图要求 | 特殊要求 |
|---|---|---|
| 应用宝 | 480*800 4张 1M PNG | |
| 阿里分发平台 | 480*800 4张 1M PNG | 不可上传ios截图 |
| 百度 | 480*800 4张 1M PNG | 通知栏不含有与app自身无关的应用图标 |
| 华为 | 450*800 4张 1M PNG | |
| 小米 | 720*1280 4张 1M PNG | 若截图含有手机外观，必须使用小米手机外观素材 |
| OPPO | 1080*1920 4张 1M PNG | 去除顶部通知栏，不得使用其他品牌手机作为边框或宣传图 |
| VIVO | 480*800 4张 1M PNG |
3.5 应用截图要求
体积 小于1M 4 张 png
尺寸
480*800
450*800
720*1280
1080*1920
特别要求：
1、无ios截图
2、无通知栏
3、无手机外观
3.6 闪屏页图片要求
app冷启动
一整张图片 1080*1920 jpg
