超全面的 UI 工作流程指南（六）：切图标注

编者按：完整的 UI 设计流程到是怎样的？从需求到产上线，要经历多个阶，每个阶有哪些应该掌握的基础知识，本次优设独专题为你从零开始梳 UI 工作流程，适合手阅读习。

当界面设稿之后，设师需对图标行切片，提供给发程师。切图与标注是为了够满足开发人员对于效果图的还原需求，直接影响到工程师对设计效果的还原，并且是设计师重要的输物之一。合适、精准的切图可最大限地还原设计图，起到事半功倍的效果。

通常我们只需对 icon 与图片行切图即可，文字、线条一些标准的几何形状不需切图的，例如搜索框只需标注中描述它的尺寸、圆角小、背景色、不透明度即可，发程师可以用码实这种效果。

切图基本规范

1. 切图的尺寸必须为偶数；
2. 同一模，切图大小应保持一致；
3. 如果背景，尽用平的背景图案设（减少程序体积）；
4. 可击部件要把相关状态都切图输出，比如：正常状态、击状态、不可击状态；
5. 输出的切图应当尽可能的压缩大，以降低 APP 的总大，提升用户使用的加载速度（推在线压缩：https://tinypng.com）；
6. 所有的变形字把它当成 icon 来切；
7. 切图输格式：png-24；
8. 重复的东只切一。

切图输出类型

1. 图标切图输出

桌图标切图输出

App 桌图标会被运用在很多不地，比如手桌、APP store、手设列表，所以 app 桌图标需要很多个不尺寸切图输出。两个平台应桌图标设计输出尺寸也不尽相，在输出时候要把双平台尺寸全部输出切图。桌图标切图需要提供图标切图即可，手系统会自动生成圆效。

系统图标切图输出

一套图配平台：iOS平台（iPhone 6plus版本除外）安卓平台公用 44*44px 切图素，即可实一套切图配两平台的发。

配屏幕：了配 iPhone 6plus、iPhone 7plus，单独切一套比原 44*44px 切图 1.5 倍的切图，即 66*66px 小的切图。

APP功图标

图标是可有留白区域的，建议图标尺寸尽量要过多。

2. 图片类切图输出

图类切图主要是指启动页、新手引导页、默认提示、告图等需要完整切图的图。同一类型的图切图一般要持同样的尺寸大小，以便工程师开使用。另外一般切图的文件大，在切图程中需要控切图文件的大小。

屏类切图

类切图

3. 动效元素切图

动效素切图一是指在 app 中加载动效所需要的切图素。

gif 动图切图一般分为三种：

一是只需要给到 gif 图效的分即可。

△ 城易logo

二，导出序列图片压缩打包给发人员。

三导出 json 。

Airbnb 开发了款动效神：Lottie，这是个将 After Effects 动画提供任意个 iOS，macOS，Android 有 React Native 原生 APP 文件库。这些动画过个叫 Bodymovin 开 After Effects 插件，以 JSON 文件形进输出。Lottie 过 JSON 格下载动画数据并实时提供开发者。

相关链接

• Lottie官方：Lottie 官方地址
• bodymovin：GitHub 址（安装方法：https://www.uisdc.com/lottie-make-loading-animation）
  若安装不成功，在下面的网址中下载其他版插件：bodymovin版地址：https://github.com/bigxixi/bodymovin_cn
• lottie-ios：GitHub 地址
• lottie-android：GitHub 址

何导出json动画文件

打开 AE，首选项 – 常规，将允许脚写文件和访问网络选项勾选上。

窗口 – 扩展 – Bodymovin，选择合成和存路径，点击 Render 导出 data.jason 文件，把该文件给 iOS 开 （其他同理），具下图：

里设置选择 Demo ，以导出 html 文件，在浏览器查看动画效果。选择 Glyphs 将字转换成图形形状。

导出文件：

在测试结果：以直接上传 json 文件，以提前道动画是否有问题，付给开。

址：https://nicolasjengler.github.io/bodymovins-json-tester/dist/

切图命名规范

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

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

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

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

3. 常用英文单词表

标注软件

现如今市场已有很多设计交互平台，如：国内墨刀、蓝湖、摹客等，国 Figma、invision 等，各自都有优秀特，既满足交互需求，又能有标注切图功能，选择适合自己团队工具与开发起协作即可。

1. Figma

支持 sketch 导入，Figma 也像 Zeplin 样，标注页距与尺寸，并支持各图片格、尺寸、形态输出，开发员也有相应代码可用参考，分享链接即可。

2. 墨刀

支持 sketch 上传页面至客户端，分享链接即可。支持多种切图格式载，开发人员有相应的代码可参考，操作简单清晰。

3. 蓝湖

支持软件 PS、sketch 上传在标注，在设计源文件上切图，开人在上下载，且有相应的代码用参考，分享链接即。

注：本系列文章优设独家专题，请勿转载。

欢迎添加作者微信交流：