UI : 2022年iOS/Android UI设计规范(1)

UI : 2022年iOS/Android UI设计规范(1)1.设计稿与切片稿a.尺寸设计稿:iPhone6750*1334【2倍】切图稿:iPhone62208*1242【3倍】Android1920*1080设计稿选择750*1334px的原因:IOS:向上和向下适配的时候界面调整的幅度最小,最方便适配Android:设计时只需做最小的设计调整,提升设计效率b.切图IOS切图——3份:………

1.设计与切图

设计 PhotoShop Sketch / XD
设计稿 750×1624 px 375×812 pt
iPhone切图稿 1284×2778 px 428×926 pt
Android切图稿 1440×2560 px 360×640 dp
切图 Asset
iOS 3倍(name@3x.png)、2倍(name@2x.png)、1倍(name.png)
Android mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi

2.字体

字体 英文 中文
iOS 10+ SF UI Text (小于19pt)、SF UI Display(大于20pt) 苹方
iOS 9 Helvetica Neue 冬青黑
Android Roboto 思源黑体 / Noto

3.尺寸

iPhone 分辨率 ppi 状态栏 导航栏 主页指示器 标签栏 Asset
iPhone 12/13 Pro Max 1284×2778 px 428×926 pt 458 ppi 132px 132px 102 px 147px @3x
iPhone 12/13、12/13 Pro 1170×2532 px 390×844 pt 460 ppi 132px 132px 102 px 147px @3x
iPhone 12/13 mini 1125×2436 px 375×812 pt 476 ppi 132px 132px 102 px 147px @3x
iPhone XS Max、11 Pro Max 1242×2688 px 414×896 pt 458 ppi 132px 132px 102 px 147px @3x
iPhone X、XS、11 Pro 1125×2436 px 375×812 pt 458 ppi 132px 132px 102 px 147px @3x
iPhone XR、11 828×1792 px 414×896 pt 326 ppi 88px 88px 68 px 98px @2x
iPhone 6P、6SP、7P、8P 1242×2208 px 414×736 pt 401 ppi 60px 132px 147px @3x
iPhone 6、6S、7、8 750×1334 px 375×667 pt 326 ppi 40px 88px 98px @2x
iPhone 5、5C、5S 640×1136 px 320×568 pt 326 ppi 40px 88px 98px @2x
iPhone 4、4S 640×960 px 320×480 pt 326 ppi 40px 88px 98px @2x
iPhone、iPod Touch 1、2、3 320×480 px 320×480 pt 163 ppi 20px 44px 49px @1x
Android 分辨率 启动图标 操作栏图标 上下文图标 系统通知图标 像素比(1dp)
mdpi (160dpi) 360×640 px 48×48 px 32×32 px 16×16 px 24×24 px 1 px
hdpi (240dpi) 540×960 px 72×72 px 48×48 px 24×24 px 36×36 px 1.5 px
xhdpi (320dpi) 720×1280 px 96×96 px 64×64 px 32×32 px 48×48 px 2 px
xxhdpi (480dpi) 1080×1920 px 144×144 px 96×96 px 48×48 px 72×72 px 3 px
xxxhdpi (640dpi) 1440×2560 px 192 x 192 px 128×128 px 64×64 px 96×96 px 4 px

4.更多资料

设计指南

1、 中文版————Material Design 指南
2、 官方英文版——Material Design
3、 中文版————iOS 12人机界面设计指南
4、 官方英文版——Human Interface Guidelines

设计资源

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

切图规范

1、 iOS/Android 切图规范
2、 Android 切图规范
3、 切图文件命名规范

设计规范

1、UI设计规范整理汇总———界面尺寸、控件间距、版式设计、文字设计、设计适配、标注、切图(2018.06)

2、 iOS / Android设计规范——优设网:字体、图标、分辨率、配色、UI元素尺寸 (2017.09)


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

今天的文章UI : 2022年iOS/Android UI设计规范(1)分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/5259.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注