iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK

目 录

iOS Design Guidelines

iOS设计尺寸规范

字体(苹方)

中文字体:PingFang SC

英文字体:SF UI Text 、SF UI Display

其中SF UI Text适用与小于19pt的文字,SF UI Display适用于大于20pt的文字

iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK-设计酷-设计酷COOK-这设计很酷COOL

 

元素 字重 字号(pt) 行距 字间距
Title 1 Light 28pt 34pt 13pt
Title 2 Regular 22pt 28pt 16pt
Title 3 Regular 20pt 24pt 19pt
Headline Semi-Bold 17pt 22pt -24pt
Body Regular 17pt 22pt -24pt
Callout Regular 16pt 21pt -20pt
Subhead Regular 15pt 20pt -16pt
Footnote Regular 13pt 18pt -6pt
Caption 1 Regular 12pt 16pt 0pt
Caption 2 Regular 11pt 13pt 6pt

 

元素 字号(pt) 字重 字距(pt) 类型
Nav Bar Title 17 Medium 0.5 Display
Nav Bar Button 17 Regular 0.5 Display
Search Bar 13.5 Regular 0 Text
Tab Bar Button 10 Regular 0.1 Text
Table Header 12.5 Regular 0.25 Text
Table Row 16.5 Regular 0 Text
Table Row Subline 12 Regular 0 Text
Table Footer 12.5 Regular 0.2 Text
Action Sheets 20 Regular / Medium 0.5 Display

点和像素 Points and Pixels

iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK-设计酷-设计酷COOK-这设计很酷COOL

图标 Icon

应用图标 App Icon

iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK-设计酷-设计酷COOK-这设计很酷COOL

 

设备名称 应用图标 App Store图标 Spotlight图标 设置图标
iPhone X, 8+, 7+, 6s+, 6s 180 x 180 px 1024 x 1024 px 120 x 120 px 87 x 87 px
iPhone X, 8, 7, 6s, 6, SE,5s, 5c, 5,
4s, 4
120 x 120 px 1024 x 1024 px 80 x 80 px 58 x 58 px
iPhone 1, 3G, 3GS 57 x 57 px 1024 x 1024 px 29 x 29 px 29 x 29 px
iPad Pro 12.9, 10.5 167 x 167 px 1024 x 1024 px 80 x 80 px 58 x 58 px
iPad Air 1 & 2, Mini 2 & 4,
3 & 4
152 x 152 px 1024 x 1024 px 80 x 80 px 58 x 58 px
iPad 1, 2, Mini 1 76 x 76 px px 1024 x 1024 px 40 x 40 px 29 x 29 px

自定义图标 Custom Icons

设备名称 导航栏和工具栏图标尺寸 标签栏图标尺寸
iPhone 8+, 7+, 6+, 6s+ 66 x 66 px 75 x 75 px  最大144 x 96 px
iPhone 8, 7, 6s, 6, SE 44 x 44 px 50 x 50 px  最大96 x 64 px
iPad Pro, iPad, iPad mini 44 x 44 px 50 x 50 px  最大96 x 64 px

分辨率和显示规格 Resolutions and Display

iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK-设计酷-设计酷COOK-这设计很酷COOL

 

设备名称 屏幕尺寸 PPI Asset 竖屏点(point) 竖屏分辨率(px)
iPhone X 5.8 in 458 @3x 375 x 812 1125 x 2436
iPhone 8+, 7+, 6s+, 6+ 5.5 in 401 @3x 414 x 736 1242 x 2208
iPhone 8, 7, 6s, 6 4.7 in 326 @2x 375 x 667 750 x 1334
iPhone SE, 5, 5S, 5C 4.0 in 326 @2x 320 x 568 640 x 1136
iPhone 4, 4S 3.5 in 326 @2x 320 x 480 640 x 960
iPhone 1, 3G, 3GS 3.5 in 163 @1x 320 x 480 320 x 480
iPad Pro 12.9 12.9 in 264 @2x 1024 x 1366 2048 x 2732
iPad Pro 10.5 10.5 in 264 @2x 834 x 1112 1668 x 2224
iPad Pro, iPad Air 2, Retina iPad 9.7 in 264 @2x 768 x 1024 1536 x 2048
iPad Mini 4, iPad Mini 2 7.9 in 326 @2x 768 x 1024 1536 x 2048
iPad 1, 2 9.7 in 132 @1x 768 x 1024 768 x 1024

配色

iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK-设计酷-设计酷COOK-这设计很酷COOL

UI组件布局 UI Element Layout

状态栏 Status Bar

iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK-设计酷-设计酷COOK-这设计很酷COOL

导航栏 Navigation Bar

iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK-设计酷-设计酷COOK-这设计很酷COOL

搜索栏 Search Bar

iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK-设计酷-设计酷COOK-这设计很酷COOL

标签栏 Tab Bar

iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK-设计酷-设计酷COOK-这设计很酷COOL

列表视图 Table View

iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK-设计酷-设计酷COOK-这设计很酷COOL

弹出 Modals

iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK-设计酷-设计酷COOK-这设计很酷COOL

提示框 Alerts

iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK-设计酷-设计酷COOK-这设计很酷COOL

切换 Segment Controls

iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK-设计酷-设计酷COOK-这设计很酷COOL

滑动条 Sliders

iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK-设计酷-设计酷COOK-这设计很酷COOL

切换按钮 Switch

iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK-设计酷-设计酷COOK-这设计很酷COOL
分页阅读: 1 2 3 4 下一页

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或 联络我们。
找不到素材资源介绍文章里的示例图片?
对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
部分资源为什么要收费?
文章页标注的费用不是文章中软件文件的售价,而是网站运营费用以及各教程的编辑以及录制的人工费用,毕竟资源整理不易,您的支持是我们坚持的信念!
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!

2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!

3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!

5. 如有链接无法下载、失效或广告,请联系管理员处理!

6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

7. 如遇到加密压缩包,默认解压密码为"www.shejicook.com",如遇到无法解压的请联系管理员!


设计酷-设计酷COOK-这设计很酷COOL » iOS/Android/WEB设计尺寸规范及切图命名-设计酷COOK

发表评论

323+

本站勉强运行

45+

用户总数

80+

资源总数

0+

今日更新

2020-9-16

最后更新时间


开通皇帝享更多特权,建议使用 QQ 登录