火星网校
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期学员王佳蕊作品
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
本文是关于Unreal Engine基础学习的全面指南，适合初学者以及想要提升技能的开发者。
-
一个深度解析无基础UE5短期培训的文章，了解短期培训的重要性，以及火星时代教育如何帮助零基础学员快速掌握UE5。
-
对比各类视频剪辑软件，分析并推荐专业而质量上乘的视频剪辑软件培训机构
-
C++编程学习中心致力于为学子提供深度和广度的C++编程知识，火星时代教育则为学习者提供威谛教学环境。
-
了解虚拟现实技术的价值和应用，并探索专业的VR技术培训班，提升你的技能和知识
-
为寻求高质量室内培训方案的人提供一些指引，并介绍火星时代教育的专业服务。
