火星网校
UI设计中如何切图？切图标准是什么？
一、界面切图
切图之前务必要和你的工程师搭档沟通一下，该如何去切才能配合他的开发。
所有设计尺寸，都应该尽量使用偶数。技术开发使用的尺寸是设计稿像素尺寸的一半，也就是说，如果你用PS 设计页面使用了24px 的字体，技术那边就是设置为12px，所以标注的时候务必使用偶数，为了保证最佳的设计效果，避免出现0.5 像素的虚边。
输出两套切图：为了达到最好的视觉效果，切图输出两套尺寸即@2x 和@3x。如果你使用IPhone 6 尺寸做设计稿，那么切片输出就是@2x，扩大1.5 倍就是@3x 了。
@2x @3x 是开发工具Xcode 软件需要的UI 资源，命好名称后，IOS 设备会自动的选取合适尺寸。
共用资源：输出一张切图即可。
切片的输出格式：位图格式：PNG 24，PNG 8，JPG。在JPG 和PNG 两种格式图片大小相差不是很大的情况下，推荐使用PNG；如果图片大小相差很大，使用JPG，尽量节省文件大小。在PS 中，文件菜单→存储为Web 所用格式。
二、图标切图
精确切图: 沿着图标四周自身大小切图。
交互切图：图标元素较小时，保证操作的有效性，需将点击范围和图标一起切出。
由于图片图标在界面中受到交互效果影响，如果有不同状态，每一种不同的状态都需要进行切片输出。
三、命名规则
由于输出的切图较多，所以需要一个有序的命名规则。命名规则并不是统一的规范，不同的公司不同的工程师有着自己不同的命名规范和命名习惯，只要方便自己查找，也能使开发者看得懂即可。
个人习惯的命名方式是：“界面或者功能+ 控件名+ 状态.png”名称应使用英文命名( 中文不识别，推荐小写字母)，不要以数字或者符号当作开头，使用下划线进行连接；举个例子：一个主页的处于正常状态的确定按钮：home_sure_normal@2x.png
按钮（btn）有几种状态：
一般（normal）：btn_xxx_normal.png
点击（pressed）：btn_xxx_pressed.png
不能点击（disabled）：btn_xxx_disabled.png
选中（selected）：btn_xxx_selected.png
常见控件名称：
icon（图标） img（图片） list（列表） menu（菜单） bar（栏） statusbar（状态栏） navbar（导航栏）
tabbar（标签栏） toolbar（工具栏）
switch（切换开关） radio（单选框） checkbox（复选框）
bg（背景）
下一篇 做设计的时候要如何选择颜色呢？
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
可灵年化5亿美元谷歌带队出海安徽举办省级漫剧大赛AI设计日报0623
可灵正推进从快手分拆独立运营，内部方向为2027年初递交港股上市申报 来源：上海证券报（2026-06-17） AI短剧"产......
-
火星时代
-
腾讯又放大招这款AI工具让游戏美术效率提升300是真革命还是噱头
但对于追求极致细节的资深原画师来说，自动化程度高也意味着部分控制权让渡，需要适应 实测体验：响应速度确实惊艳，比传统生图的等待......
-
2026年，AI短剧早已不是"写一段提示词等生成"的粗放阶段真正拉开差距的，是谁先把从立项到出片的整套工业化流程跑通 过去做A......
-
什么是负面提示词？ 在AI绘画中，我们通常用正向提示词告诉模型想要什么——比如"一个穿红色连衣裙的女孩站在海边"这时候你需要一......
-
做AI漫剧最头疼的是什么？不是剧情写不好，不是场景出不来——是角色脸上的表情 想写角色开心，只会一句"他开心地笑了"；想写难过......
