UI ： 2019年iOS/Android UI设计规范（1）

---

推荐： 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倍（[email protected]）、2倍（[email protected]）、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 XS Max	1242×2688 px	414×896 pt	458PPI	132px	132px	147px	@3x
iPhone X、XS	1125×2436 px	375×812 pt	458PPI	132px	132px	147px	@3x
iPhone XR	828×1792 px	414×896 pt	326PPI	88px	88px	98px	@2x
iPhone6P、6SP、7P、8P	1242×2208 px	414×736 pt	401PPI	60px	132px	147px	@3x
iPhone6 - 6S - 7 - 8	750×1334 px	375×667 pt	326PPI	40px	88px	98px	@2x
iPhone5 - 5C - 5S	640×1136 px	320×568 pt	326PPI	40px	88px	98px	@2x
iPhone4 - 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 11人机界面设计指南
4- 官方英文版——iOS Human Interface Guidelines

4、 设计资源

1- Apple设计资源——Sketch、PS、XD的设计模版

---

参考文章：
1、http://www.shui-mai.com/2018zuixiniosduanjiemianuishejiguifanzhengli/
2、https://blog.csdn.net/xuaner1996/article/details/79091260