用一篇干货，让你掌握「切图标注」这个知识点！

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

编者按：本文是一篇写给新手的科普指南，从切图的发展史到基础知识，以及常见的术语解释，都有详细的说明，非常适合刚入门的 UI 设计师学习。

一、目的

为了能够满足开发人员对于效果图的高度还原需求。

二、发展

最早开始的切图/标注都是设计师手动进行，花费的时间长不说，开发人员看到的也通常是一个页面标满了混乱不堪的红色尺寸。

经过长时间的改进，如今有了各种软件和插件。设计师只需上传源文件分享链接，开发人员就能在线下载各种尺寸切图，想看元素的标注只需点击相应的元素就会自动出现，还会有相应的代码供开发人员参考；同时支持在线评论修改功能。一个项目一个链接，极大的节省了程序开发的时间成本，减少了很多不必要的沟通与重复切图/标注的概率。

三、设备

在进行切图标注的时候，设计师需要先确认开发的设备是 Android 还是 iOS。

1. iOS

设计师在做图时一般以 iPhone6（750px*1334px）为标准进行界面设计，让开发进行适配。原因是向上和向下适配的时候界面调整的幅度最小，最方便适配。

在 iOS 中所使用的单位是pt，下面介绍一下 pt 和 px 的区别，以及使用 pt 这个单位的原因。

pt 是独立像素的意思，它是绝对长度，物理单位，不随屏幕像素密度变化而变化（和我们日常用到的毫米、厘米是一个意思，只是它要小得多），在非视网膜的 iPhone 上（iPhone 3G），苹果规定 1px=1pt，也就是说 pt 和像素点是一一对应的。但随着 iPhone 4 的到来，高分屏出现了（视网膜屏），这个时候 1pt 对应 2px。所以用固定长度 pt 作为开发单位的好处是：这样可以统一图形在同一种类不同型号设备上图形的大小。而如果用 px 作为单位的话，就乱了套了，因为在不同像素密度的屏幕里面，像素本身大小是不一样的。

如果还是听不明白，看下面的图就很清楚了：

以银色机子的1方块为1px基准，这个方块的大小就当成新的标准尺寸单位，1pt（point, 点），所以在这个机子上1px=1pt，这个点不管搬到哪里就是那么大，现在把它搬到金色的机子上。我们看到方块的大小保持不变，但是它的长/宽就会各涵盖到2px，所以在这个机子上2px=1pt。

在 Retina屏幕下一个点表示2像素，在非Retina屏幕下一个点表示1像素。

在iPhone6 Plus / iPhone7 Plus / iPhone8 Plus / iPhoneX / iPhoneXS / iPhoneXS Max下一个点表示3像素。

所以 iOS 一般只需要切：2倍图、3倍图。

2. Android

Android 的尺寸非常多，非常杂乱，总的来说模式分为：idpi / mdpi / hdpi / xhdpi / xxhdpi / xxxhdpi。

设计师一般以720x1280px做图。

Android开发时间距/长度以 dp 为单位，而设计师的单位为 px，所以下面简单介绍一下 dp 和 px的关系。

在Android 中，以320x480分辨率为基准屏幕，即密度值为160时，1dp=1px。

所以 Android 的切图需要3个尺寸：hdpi / xhdpi / xxhdpi。

dp 和px的换算公式：dp*ppi（像素密度）/160=px；px（160/ppi）=dp

Android 设计时使用 sp 作为字体单位。如在屏幕ppi=160，字体大小为100%时，1sp=1px。

sp 和px 的换算公式：sp*ppi/160=px，sp=px*（160/ppi）

Android 还有一个「点9切图」在这里简单介绍一下。

安卓平台的应用软件开发包的一种特殊的图片形式，文件扩展名为「.9.png」，故称为点9切图。运用点9图可以保证图片在不模糊变形的前提下做到自适应。点9图的出现是安卓机为了适配不同的手机分辨率的解决方案。

点九图格式规定由左侧和上侧来控制图片的拉伸，右侧和下侧控制文字的显示区域。

拉伸区域：当实际程序中设定了对话框的宽高时，横向拉伸区域和纵向拉伸区域就会被拉伸成所需要的宽和高，呈现出于设计稿一样的视觉效果。

内容区域：为了让文字被输入框完整包裹，以达到显示效果的正常，所画黑线的区域就是你文字显示的区域，这样你的文字就不会超出对话框。

四、规范

1. 切图基本规范

• 切图的尺寸必须为偶数
• 同一模块内，切图大小应保持一致
• 如果有背景，尽量用平铺的背景图案来设计（减少程序体积）
• 可点击的部件要把相关状态都切图输出，比如：正常状态、点击状态、不可点击状态
• 输出的切图应当尽可能的压缩大小，以降低 APP 的总大小，提升用户使用时的加载速度（推荐在线压缩：https://tinypng.com）
• 所有的变形字体把它当成 icon 来切
• 切图输出格式：png-24
• 重复的东西只切一个

2. 切图输出类型

桌面图标切图输出

app 的桌面图标会被运用在很多不同的地方展示，比如手机桌面、APP store、手机的设置列表，所以 app桌面图标需要很多个不同尺寸的切图输出。两个平台对相应桌面图标设计输出尺寸也不尽相同，在输出的时候要把双平台的这些尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可，手机系统会自动生成圆角效果。

图片类切图输出

图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。同一类型的图片切图一般要保持同样的大小尺寸以便于工程师开发使用。另外一般这些切图的文件较大，在切图过程中需要控制切图文件的大小。

全屏类切图：

局部类切图：

动效元素切图

动效元素切图一般是指在 APP 中加载动效所需要的切图元素，比如 QQ 的下拉加载动效就是由若干张切图连续播放形成的动画效果。这些图片按照序号排序播放我们也把他们叫做序列切图。序列切图是在做 UI设计的过程中必然会遇到的问题，这种切图要求要保证动效播放时的流畅自然，是需要设计师仔细斟酌的。

3. 切图命名规范

通用切图命名：组件_类别_功能_状态@2x.png

举例：tabbar_icon_home_default@2x.png（对应中文：标签栏_图标_主页_默认@2x.png）

模块特有切图命名：模块_类别_功能_状态@2x.png

举例：bill_icon_search_pressed@2x.png（对应的中文为：账单_图标_搜索_默认@2x.png）

常用英文单词表：

• bg（backgrond 背景）
• nav（navbar 导航栏）
• tab（tabbar 标签栏）
• btn（button 按钮）
• img（image 图片）
• del（delete 删除）
• msg（message 提示信息）
• pop（pop up 弹出）
• icon（图标）
• selected（选中）
• disabled（不可点击）
• default（默认）
• pressed（按下）
• back（返回）
• edit（编辑）
• content（内容）
• left/center/right（左/中/右）
• logo（标识）
• login（登录）
• refresh（刷新）
• banner（广告）
• link（链接）
• user（用户）
• download（下载）
• note（注释）

4. 标注规范

• 合理划分，再复杂的页面，信息也不要挤在一起。
• 每一个标注本身也要注意对齐方式，干净整洁的标注能让开发一眼找到所需。
• 任何细节和要求都写清楚，任何决定都要有据可查。

五、软件

现在很多设计交互平台，如：像素大厨/墨刀/摹客iDoc，既满足交互需求，又能有标注切图功能，还能多人在线对最新版本进行评估工作，大大提高了以往的工作效率。希望小伙伴们可以尝试找下适合自己和项目组的设计交互平台。

六、延展

1. 对于开发 Web/iOS/Andriod

• 始终遵循，视觉逻辑符合开发逻辑。
• 标注时需考虑到页面在不同屏幕大小下的变化，间距是否固定，比例是否缩放，图片和按钮宽度是否自适应。
• 统一标注的好处不仅是我们自己在后续的设计中可以复用和遵守，对于开发而言，也能提高代码效率同时保持不同平台最终效果的统一，后续迭代的时候也不会出现莫名其妙的样式和代码。

2. 附上各类单位解释以及单位之间的关系

dpi与ppi的区别

这两个单位都属于分辨率单位，它们都是用来描述屏幕的属性，或者说是性能，所以经常出现混用现象。但是从技术角度说，像素（P）只存在于计算机显示领域，而点（d）只出现于打印或印刷领域。

em/rem/px的区别

首先来说 em 和 px的关系：em是指字体高度，浏览器默认1em=16px，所以0.75em=12px。我们经常会在页面上看到根元素写的 font-size:65%；这样 em 就成了16px*62.5=10em；这是显示在页面的字体大小是10px。这样12px=1.2em，10px=1em，也就是说只需要将你原来的 px数值除以10，然后换上 em作为单位就行了。但是 em 是个相对值，它会根据父级元素的大小而变化，如果嵌套了多个元素，要计算它的大小就很头疼。

这个时候 rem 就出现了，和 em不同的是 rem 总是相对于根元素（如:root{}），而不像 em 一样使用级联的方式来计算尺寸，这种相对单位使用起来更简单更安全。

相信在不久的未来，就可以达到，不需要切图和标注的工艺流程，取代的是更高效的设计软件或者平台，但切图/标注带给我们的也不仅是项目沟通成本上的目的，还能让设计师去了解前端开发，了解各个系统的设计交互细节，审视自己的效果图的缺陷。希望大家在切图标注的环节，好好利用现有的平台，更多的去做设计方法论和交互的沟通，可用性的评估，一起使产品的用户体验更佳。

欢迎添加作者微信：

「超全面！设计新手必备的切图指南」

• 《UI实战教程！从零开始做APP 系列之切图标注篇》
• 《UI新手必备！iOS+Android的切图与标注方法》
• 《基础知识！写给UI设计新手的切图命名规则手册》
• 《新手福利！超全面的UI设计切图规范指南》