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

如题所述

第1个回答  2022-06-08

我们都知道一套完整的 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」就可以了。如[email protected][email protected][email protected]。在命名时 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

相似回答
大家正在搜