UI日常-切图切图怎么破？

此文仅代表个人观点。

特别鸣谢 · 海边来的设计师

作为一名“小小”的UI设计师，切图可以说是我们日常工作的必修课。一些设计师认为切图规范不重要；或是切图是设计助理的活；又或者是单方面认为，开发应该100%的按照我们的切图去写代码。

个人认为，从Ui设计这个角度看，“UI设计”是一个团队协作的过程，“切图”是一个交付设计稿的过程，UI设计师理应在了解产品细节的前提下完成切图，建立简单沟通设计规范，并了解基础组建的开发成本，有必要的话还需配合调整切图。

目录

1.icon的切图规范到底是什么

2.常见切图问题

icon的切图规范到底是什么？

1.基本原则

切图规范其实很简单，就是遵守一点，我们的切图是为了方便开发使用，完成交付过程，而不是为了完成切图这件事。

明确这一点之后，我们再来看如何切图。

2.切图方法

如图，以往我们会使用二倍图下设计，三倍图下切图原则；但日常工作中，我相信大多数人都会嫌麻烦；我们可以“遵守横平竖直原则”，让你的icon不出现虚边。

3.提前与开发沟通，标注特殊元素

沟通，也是设计师的日常之一，我们交付设计稿时，除了提前制定设计规范或遵守原定的设计规范外，还需要和开发沟通点击区域，并在验收的时候去进行点击区域的补漏。

4.切图格式

·注意保持背景为透明通道

如图，使用sketch的同学记得将图层编组，并勾切图只显示编组内容。

·保证图片格式统一、相同模块icon尺寸统一，便于开发使用，另一方面也方便调整及验收。

5.了解页面元素

在项目进行需求评审的时候，是我们了解产品的好时候。个人认为Ui设计师不仅仅是完成视觉效果，更多的是要理解产品逻辑，明确一些交互细节；在图上适当的标注可以有效帮助开发理解设计师的意思，谁也不想工作经常被打断对吧～

常见切图问题

1.每页的重复icon都要切一遍吗？

在没有用类似蓝湖这样的协同工具的时候常常会听到抱怨，开发难道不会自己找图标吗？明明切给他了他为什么他找不到？

曾经，当我的交付切图还是通过文件夹文件名并通过H5查看标注的时候，我也有过这样的困扰，开发总是找不到图，一遍一遍的打断我的工作，让我不厌其烦。

尝试了解原因后我发现，在大量的相似的图中找到开发需要用的图，并且记住它曾经出现过的位置，确实有些强人所难～

那么怎么解决这个问题呢？

我们可以通过Sketch中的创建组件功能，将图标和常用模块创建为组件。然后通过一些团队协作工具，比如蓝湖，进行团队协作。

创建组件功能有什么好处呢？

1.一次切图，对应不同页面相同图标不需要再切，且都可以下载；

2.需要修改设计时只需在组件页面，修改组件；

3.方便页面，相同类型、位置icon的统一性；

4.上传协作平台后，开发可对应页面下载切图，再也不会来打扰你的工作啦～

2.阴影要不要切？

阴影，是个很特殊的存在，近年设计稿上流行各种阴影、弥散效果，对于web和H5的开发来说实现难度可能只是一个css3的样式，但是对于App开发来说，阴影的实现效果真的很高。

比如，有些颜色在白色背景下不显示，有些颜色即使和设计师给的色值一样但是，实现后发现效果差强人意。所以App设计中，设计师如果要用阴影的话可以选择直接切给开发。

3. .9切图

.9.png是png格式，.9为命名后缀的非失真性压缩位图图形。他的原理是安卓环境下，实现标记区域的局部拉升，多用于聊天框、加载文字信息的自适应填充背景。

.9图片制作，如图

用1px，色值为#000的线条，在图片的上下左右，定义拉伸方向和可拉升区域；防止图片圆角等元素被拉伸变形。

总结

·切图四字原则

1.小-尺寸尽可能小

2.不-固定图片外，切图不含文字

3.聊-多和开发同学沟通，和前端聊聊，便于交流

4.便-切图是为了便于开发使用的行为

·切图注意点

1.切图保持偶数；

2.适当留白，便于开发定位；

3.不规则icon可以采用圆心和切图圆心吻合的方式对齐；

4.带投影的button，card都要切图；

5.最重要的是多和开发小哥沟通

特别感谢#海边来的设计师#的指导，感谢小伙伴#海舟#、#小火焰#不吝赐教～么么哒～