UI设计科普 | UI设计有哪些规范？如何正确地进行APP切图？

上期为大家科普了

APP的交互线框设计

本期来为大家科普一下

APP UI规范及切图适配

本文介绍APP规范切图全过程

感兴趣的请关注我们

一.APP UI规范

APP UI规范，一般头部写明APP名字，适配图片尺寸，一般以1倍DP,或者2倍PX

来做规范。

1.标准色信息层级（示例）

2.标准字信息层级（示例）

3.图标尺寸信息层级，功能图标分类（示例）

4.控件尺寸，控件状态（示例）

5.页面尺寸（示例）

二.苹果IOS系统APP的切图适配

我们都知道一套完整的App通常会有很多张切图，不管是iPhone需要1x、2x、

3x图档，或者Android需要至少3种hdpi、xhdpi、xxhdpio命令方式就需要双

方统—格式方便大家作业。

所以，制定一套非常有效而方便的APP切图命名规范非常有用的。

所以，IOS需要给到的程序员的切片常见为2套：2x切图（以750px为宽度尺寸

为基准切图）3x切图（以1242px为宽度尺寸为基准切图）坐标标注图，一般UI的

标注以750px 2倍图为坐标标注图（以750px为宽度尺寸为基准标注）

图9-3 单位换算表左边是苹果IOS系统，右边是ANRDOID系统

PT和DP系统是程序员把资源进行换算后，他们只要用一套代码比例来管理3个尺

寸的素材的一种换算方法，在一倍图的情况下，1DP=1PT=1PX,在二倍图的情况

下，1DP=1PT=2PX,在三倍图的情况下，1DP=1PT=3PX。

这么换算像素和DP之间的比例，和程序沟通尺寸和坐标的时候，需要说明这个切

片是在几倍图下的。

图9-4 双平台多分辨率适配优先级方案

一套图适配2个平台多套分辨率。一般如果IOS和ANDROID都要适配的话，一般

先做IOS 750X1334版，再使用切图工具CUTTERMAN,免费软件，官网有下载和

教程，切2倍和3倍图。

再缩放源文件到720X1280再切3套ANDROID, 1.5倍,2倍和3倍图。

IPHONEX的尺寸因为用户少，有些公司不做这个分辨率。

图9-5 苹果UI界面尺寸规范

图9-6 苹果UI图标尺寸规范

切图注意事项：

在750px2倍图的切片尽量为偶数，标注像素和间距尽量也为偶数，如果非要有奇

数，请保证左边的左边为偶数，奇数放在右边。

图标和控件的切片的图片格式为24位带8位透明通道的png,少数BANNER类和运

营类图片可以为PNG,动画尽可能用png序列帧，尽可能不要使用GIF。

IOS图片命名规范，图片资源需要备有1倍图、2倍图、3倍图，3倍图命名规则为

添加后缀@Nx；2倍图命名规则为：添加后缀@2x；例如：1倍图：icon.png, 2

倍图则为：

icon@2x.png, 3倍图则为：icon@3x.png;

Android目前常见的有3种不同的dpi模式：

hdpi xhdpi xxhdpi分别为1.5倍，2倍和3倍。

因为Android的图片

图9-7 IOS苹果图标规范示例

苹果启动图标设计1024*1024PX,png格式，常见2倍是120*120px, 3倍是

180*180px,不能透明底，透明的部分补白色苹果的字体一般是苹方，尺寸如下

图9-8 IOS苹果字体规范

切片的命名规则为：模块—类别—功能—状态.png

例如:nav_button_search_normal.png

图9-9 切片命名规范

三.ANDROID屏幕适配

1.釆用720*1280分辨率来进行设计。（设计时，采用偶数值进行设计，方便dp

和px的转换）

2.Android的话，目前基本以720px 2倍图为基础坐标标注图，也有一些公司开

始直接做1080px3倍资源了。

3.切图了，首先在720*1280 T进行切图，可以完全适配720*1280的机型。

切图资源

4.分别适配 480*800、1080*1920

图9-10 ANDROID屏幕适配尺寸

切图工具：

cuttemian.cn/zh Cutterman

标注工具：

getmarkman.eom/# 马克鳗

今天的内容就到这里，我们下期再见！

更多精彩内容，尽在《UI设计精品必修课》

点击左下角阅读原文可直接购买

- 推荐阅读-