本文共：2132字，9张图片。 预计阅读时间：7 分钟
写一下UI的基础知识，利用软实力来增强与工程团队协作的能力。 标准化裁剪不仅可以提高整个团队的工作效率，还可以大大缩短设计狮和程序员之间的沟通成本。 好的切割图纸为设计图纸的准确实现和完美实施提供了坚实的保障。
剪下来的图是什么？ 互联网产品是由一组逻辑页面通过链接组成，实现某些特殊功能，以服务不同的需求和受众。 页面中最基本的元素是色块、文字和图片。 色块的作用是拉开页面不同信息之间的层次，创造出美观的布局； 文字用于展示内容，对比、突出重点，呈现信息流； 图片用于丰富页面。 度和知名度，表现出多样性。 剪图一方面是对图片的处理，更重要的是，另一方面是对复杂样式的处理。 我们经常以剪图的形式呈现复杂的样式，以降低开发难度和开发成本。
图像裁剪原则 1、图像裁剪资源大小必须为偶数
因为1px是智能手机可以识别的最小单位。 换句话说，在智能手机上游戏ui切图命名规范，1个像素无法分为两部分。 因此，如果是奇数个抠图，手机系统会自动拉伸抠图，导致抠图元素边缘模糊，导致开发出来的APP界面效果与原来的设计效果相差甚远。
2.图像切割倍率考虑主流兼容机型。
图标削减产出是削减资源产出的关键一环。 由于开发时各个机型的屏幕分辨率不同，需要针对一些大屏机型进行适配。 现在主流要输出@2x和@3x的抠图。 对于近几年的大屏手机来说，适配比例应该是3x。
3.控制切割尺寸
当用户的网速和网络环境未知时，必须考虑用户打开产品时的加载速度、APP安装包的大小等问题。 因此，需要在保证质量的情况下尽可能减小剪切图像的尺寸。
图片切割的类型 1.开始图标切割
APP的启动图标往往象征着整个产品的形象游戏ui切图命名规范，起到一定的识别作用。 应用场景一般在手机桌面、应用商店、手机设置列表上，因此应用桌面图标需要进行多次不同大小的切割输出。 剪切图片时，只需提供直角图标剪切图片，手机系统会自动生成圆角效果。
2.图标剪切图片
在iOS和Android的@2x切割中橙光游戏，图标可以使用常见的44*44px切割，可以实现一套切割来适应两个平台。 这同样适用于 @3x 尺寸 66*66px。
3.图片类切割输出
对于广告图片、入门页、新手引导页等类型的图片剪切，应保持相同的尺寸以实现标准化。
4.动态元素切割
动效元素切割一般是指app中加载动效所需的切割元素。 采用连续帧的方法来输出动画。 不过这种方法可能用的比较少。 现在大多使用GIF图片或者lottie动画。 （下一篇我会重点介绍lottie动画）
5. 可拉伸元件的切割
可拉伸元素一般是指可以展开的输入框、聊天对话框等。 在iOS中，这种切割方法称为平铺切割，在Android中，这种切割方法称为点九切割方法。
通常在项目中
IOS：基于750*1334的设计，根据实际项目开发标准，需要裁剪出两组图片@2x和@3。 剪出公共页面导航栏中按钮（40x40px）的选中状态。 直接输出的剪切图片为@2x图片，@2x的1.5倍图片为@3x。
Android：基于720*1280设计。 由于尺寸不同、多样，需要切割多组图像以适应不同的机器，即mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi。 直接输出的剪切图像为xhdpi； 它们对应的倍数关系是1,1.5,2,3,4。
切割图命名规范 1. 产品 module_category_function_status.png
示例：Discovery_icon_search_click 状态
2.场景_模块_状态.png
示例：Login_Button_Default 状态
3.产品模块_场景_次要场景_状态.png
示例：Button_Personal_Settings_Default State
【场景和二级场景】：一般指应用的一级页面和二级页面。
例如：个人页面-场景、个人页面-次场景中的设置页面
【模块】：一般指页面中的一些块，也指背景图片。 例如，背景、按钮、图标都是模块。
【功能】：一般指页面或模块中需要操作或点击的某个点，如上图，发现页面中的搜索图标。
【状态】：一般指当前剪切图像的状态区分。 对于按钮来说，有默认状态、点击状态、按下状态、不可点击状态等。网页上的按钮也有悬停状态。
注意：所有名称只能是小写英文字母。 不要仅仅为了美观或像通常输入英语那样将第一个字母大写。 不可能是中国人。 否则的话，对于开发者来说就没有意义，因为还是要自己做。 再改一下。
注意：iOS 剪切图片需要以@2x 和@3x 后缀命名。 Android剪切图片无法添加（添加好像会报错）。 Android一般会将不同放大倍数的图片放在不同的文件夹中。
如今，UI裁剪工作已经变得越来越方便游戏角色，比如国产的Blue Lake协作插件、PxCook等很多优秀的工具。 具体工具和使用方法这里不详述。 您可以前往官方网站了解更多信息：
蓝色泻湖：
pxcook：
3. 基本名词规范列表 名词命名：
操作命名：
状态命名：
iOS切图命名栗子：
common_nav_btn_back_s@2x.png
common_nav_btn_back_s@3x.png
common_tab_demand_s@2.png
common_tab_me_n@2.png
common_tab_me_s@2.png
...
Android图片切栗子：（将不同放大倍数的图片放在不同的文件夹中）
common_nav_btn_menu_n.png
common_nav_btn_menu_s.png
common_nav_btn_back_n.png
common_nav_btn_back_s.png
common_nav_btn_close_n.png
common_nav_btn_close_s.png
common_nav_btn_eidt_n.png
...
这篇文章太长了，先写到这里。 稍后我会写物理像素和逻辑像素，以及如何完美引入九点剪切图像和动画等关键点。 由于本人能力有限，文章中还存在很多不足之处。 请纠正我。
注：部分图片及文字来源于网络。 如需转载请留言并添加链接。 谢谢。
好文章，正在看❤️
