火星网校
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期学员王佳蕊作品
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
此番调整与三年前网易高调“出海”的姿态形成强烈反差 与此同时，自2024年起，由知名MMO制作人Jack Emmert领导的奥......
-
收购之后，忽然科技承诺Cocos会全面回归永久免费、纯粹开源的路线，同时借助忽然科技的全球流量资源，为开发者提供更多价值它证明......
-
工具集中，dgaTension节点与dgaDelta节点发挥着关键作用它们基于每个顶点，对角色网格的两种状态进行细致比较，分别......
-
以Maya为核心的工业级制作流程，让中国团队掌握了从高精度建模、动态捕捉到光影渲染的全链路技术其前身“王琦电脑动画工作室”成立......
-
捕获一只少东家！ 1 前言 Hello,大家好，我是火星时代广州校区3D模型大师班的学员苏颖，很荣幸可以和大家分享我第五阶段的......
-
有央企、也有外企，有影视公司、也有游戏公司！收喜报都收到手抽筋了！
又到了星仔最最最中意的晒喜报环节啦！！想想大家第一个月刚打开软件时的一脸蒙圈，夜夜肝作业到教室关门的咬牙坚持，再到毕业时拿上写......
