推荐： UI设计规范整理汇总——界面尺寸、控件间距、版式设计、文字设计、设计适配、标注、切图
1.设计稿与切片稿
a.尺寸
| 类别 | 尺寸 | Asset |
|---|---|---|
| 设计稿 | 750 × 1624 px | @2x |
| iPhone切图稿 | 2208 × 1242 px | @3x |
| Android切图稿 | 1920 × 1080 px | – |
设计稿以 iPhone 7 为模版，高度增加 290 px —— 750 × 1624 px
iOS ：向上和向下适配的时候界面调整的幅度最小，最方便适配；
iPhone X系列——3倍图（主页指示器 102 px、状态栏 132 px）2倍图（主页指示器 68 px、状态栏 88 px）Android ：设计时只需做最小的设计调整，提升设计效率
b.切图
| 切图稿 | Asset |
|---|---|
| iOS | 3倍（name@3x.png）、2倍（name@2x.png）、1倍（name.png） |
| Android | 3倍图 |
2.字体
| 字体 | 英文 | 中文 |
|---|---|---|
| iOS 10+ | SF UI Text (小于19pt)、SF UI Display(大于20pt) | 苹方 |
| iOS 9 | Helvetica Neue | 冬青黑 |
| Android | Roboto | Source Han Sans / Noto |
3.尺寸
| iPhone | 分辨率 | 点 | PPI | 状态栏 | 导航栏 | 标签栏 | Asset |
|---|---|---|---|---|---|---|---|
| iPhone 12 Pro Max | 1284x2778 px | 428x926 pt | 458PPI | 132px | 132px | 147px | @3x |
| iPhone 12、12 Pro | 1170x2532 px | 390x844 pt | 460PPI | 132px | 132px | 147px | @3x |
| iPhone 12 mini | 1080x2340 px | 375x812 pt | 476PPI | 132px | 132px | 147px | @3x |
| iPhone XS Max、11 Pro Max | 1242×2688 px | 414×896 pt | 458PPI | 132px | 132px | 147px | @3x |
| iPhone X、XS、11 Pro | 1125×2436 px | 375×812 pt | 458PPI | 132px | 132px | 147px | @3x |
| iPhone XR、11 | 828×1792 px | 414×896 pt | 326PPI | 88px | 88px | 98px | @2x |
| iPhone 6P、6SP、7P、8P | 1242×2208 px | 414×736 pt | 401PPI | 60px | 132px | 147px | @3x |
| iPhone 6、6S、7、8 | 750×1334 px | 375×667 pt | 326PPI | 40px | 88px | 98px | @2x |
| iPhone 5、5C、5S | 640×1136 px | 320×568 pt | 326PPI | 40px | 88px | 98px | @2x |
| iPhone 4、4S | 640×960 px | 320×480 pt | 326PPI | 40px | 88px | 98px | @2x |
| iPhone、iPod Touch 1、2、3 | 320×480 px | 320×480 pt | 163PPI | 20px | 44px | 49px | @1x |
| Android | 启动图标 | 操作栏图标 | 上下文图标 | 系统通知图标 | 最细笔画 |
|---|---|---|---|---|---|
| 320×480 px | 48×48 px | 32×32 px | 16×16 px | 24×24 px | 不小于2 px |
| 480×800 px、480×854 px、540×960 px | 72×72 px | 48×48 px | 24×24 px | 36×36 px | 不小于3 px |
| 720×1280 px | 48×48 dp | 32×32 dp | 16×16 dp | 24×24 dp | 不小于2 dp |
| 1080×1920 px | 144×144 px | 96×96 px | 48×48 px | 72×72 px | 不小于6 px |
4.更多详细资料
1、设计规范
1- iOS/Android设计规范——优设网：字体、图标、分辨率、配色、UI元素尺寸
2、切图规范
1- iOS/Android 切图规范
2- Android 切图规范
3- 切图文件命名规范
3、 设计指南
1- 中文版——Material Design 指南
2- 官方英文版——Material Design
3- 中文版——iOS 12人机界面设计指南
4- 官方英文版——iOS Human Interface Guidelines
4、 设计资源
参考文章：
1、http://www.shui-mai.com/2018zuixiniosduanjiemianuishejiguifanzhengli/
2、https://blog.csdn.net/xuaner1996/article/details/79091260
转载：https://blog.csdn.net/m0_37826101/article/details/79715610
查看评论