APP切图详细规范终极指南2020

发布网友发布时间：2022-09-21 02:12

共1个回答

热心网友时间：2023-11-09 19:47

我们都知道一套完整的 App 通常会有很多张切图，不管是 iPhone 需要 1x、2x、3x 图档，Android 需要至少 3 种 hdpi、xhdpi、xxhdpi。在庞大的切图数量下如何让负责套图的 RD 快速找到所需图档，档名的命令方式就需要双方统一格式方便大家作业。所以，制定一套非常有效而方便的APP切图命名规范非常有用的。

目前iPhone有10种型号，5种屏幕尺寸，再加上6plus的“降采样”（Downsampling）（1080-1920），还有iPhone6和6+上的放大模式（1125-2001）和默认模式（1242-2208），是不是感觉好恐怖？但是不用怕，我分享一套超简单的适配方法，看完你都不信有这么简单~

UI交付给开发的资料有

开发看到这份标注图，可以自己用上面的数字，乘以1.5得出3X的数字。

iOS图标尺寸： https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/

iPhone Portrait iOS 8，9-Retina HD 5.5 （1242×2208） @3x
iPhone Portrait iOS 8，9-Retina HD 4.7 （750×1334） @2x
iPhone Portrait iOS 7,9-2x （640×960） @2x
iPhone Portrait iOS 7,9-Retina 4 （640×1136） @2x
iPhone Portrait iOS 5,6-1x （320×480） @1x
iPhone Portrait iOS 5,6-2x （640×960） @2x
iPhone Portrait iOS 5,6-Retina4 （640×1136） @2x

LaunchImage:
android: 720 1280
iOS:( 2020年6月30日后强制全部使用LaunchScreen.storyboard显示启动闪屏*)
750x1334 iPhone 8

基本上 App 的切图可分为下面几大类：

背景、按钮、图示、图片、照片、TabBar icon 等。

为了让切图便于管理，通常会依图片性质命名。例如 bg-xxx.png、btn-xxx.png、img-xxx.png、tab-xxx.png。当图档要做给 Retina 屏幕使用时，只要在文档名前加上「@2x」就可以了。如bg-xxx@2x.png、btn-xxx@2x.png 、icon-xxx@2x.png。在命名时 bg-xxx.png 中间的 – 可以改为 _ 。

iOS 上写 Desktop icon 档案命名使用 -，如果切图只给 iOS 使用，可以和 iOS 采用相同的命名方式。请注意 Android 不支援 - 的命名方式，如果图档要运用在 Android 上，请把所有的 - 改成 _ 底线。最好不要把数字或符号当成档名的开头，如 3-icon.png 、+abc.png之类。

前缀是一种简单记忆、节约成本的纯文本标记语言，使用前缀能快速知道切图是用作那一组件类别，好的前缀也无非就以下几种：

后缀一般是来表示切图的颜色、透明度、状态等信息：

通过上述介绍，一般遇到的情况也就这么一些，只需要按照前缀+位置用途+后缀就差不多了，这里列举一些比较好的命名：

1、画布大小定位 720 x 1280 或 1080 x 1920，72 dpi等；
2、只使用偶数单位的尺寸，比如 96 px 的列表项高度，16 px 的边距，64 px 的图标边长；
3、只使用偶数单位 24 pt，28 pt，36 pt等字体大小；
4、设计完成以后，所有尺寸的 px 值除以 2（需要约定的倍数）作为 dp 数值交给工程师；
5、所有字体的 pt 值除以 2 （需要约定的倍数）作为 sp 数值交给工程师；
6、所有切图变成三份，分别是原始大小、缩小 1.5 倍，缩小 2 倍，分别作为 xhdpi，hdpi，mdpi 的资源交给工程师；

只需要全局标出共用字体即可，特殊字体特殊标注。

颜色值一般使用十六进制表示，如 #FFFFFF, #90FFFFFF 其中90两位代表透明度。透明度计算：
225∗透明度百分比转16进制
FF 代表不透明，7F代表半透明，00代表不透明

https://help.apple.com/app-store-connect/#/devd274dd925