[导读] UI教程有很多,大家一定会眼花缭乱,不止从何下手,今天带给大家基础课程,从零开始学习APP 系列之切图标注。UI 设计师从零开始做一个App 要经历哪些流程?这个系列的文章会为新手
UI教程有很多,大家一定会眼花缭乱,不止从何下手,今天带给大家基础课程,从零开始学习APP 系列之切图标注。UI 设计师从零开始做一个App 要经历哪些流程?这个系列的文章会为新手一一讲解。本篇会为你讲解切图标注的要点和技巧,实用高效,新手来收。
一. 切图工具和标注工具
1. 切图工具:
Cutterman:一款PS的插件,切图非常方便,但不支持绿色免安装版本PS,而且对PS版本要求比较高,针对CS 6的已经不维护更新了。推荐安装官方完整版PS CC及以上版本,目前cutterman最新版为3.2.0版本。

Assistor PS 也是一款PS的切图标注插件,也被誉为神器;我使用了一下,感觉还可以,但是切图和标注上体验还是不高,但是Assistor PS的其他辅助功能还是很不错的,比如参考线辅助,圆角大小,磁铁功能。

2. 标注工具:
PxCook(像素大厨),是一款切图标注设计工具软件。自2.0.0版本开始,支持PSD文件的文字,颜色,距离自动智能识别。
优点在于将标注、切图这两项设计完稿后集成在一个软件内完成,支持Windows和Mac双平台。标注功能包括:支持长度,颜色,区域,文字注释;从2.0.0版本开始,整体效率有了很大的提高,值得推荐的是自动智能识别标注。

Parker,和cutterman是同一家的,Parker能够自动计算尺寸、距离、文字大小、阴影、描边圆角、行高等信息,并按照你的需要进行标注, 它极大节省你标注的时间,大幅度提升设计效率。(U妹现在一直用Parker进行标注)
但是,Parker并不是免费的,而是一款付费软件,需要60RMB。

Mark Man,也是一款高效的设计稿标注工具,支持 Win / Mac, 可免费使用基础功能,免费版的在体验上也是差强人意,毕竟是免费的,如果需要高级功能也是需要付费的60RMB。

以上工具各有优点和缺点,在选择上主要还是看个人的习惯,哪个用着顺手就选择哪个。
二. 页面标注
标注是非常重要的,开发哥哥能不能完美的的还原设计稿,很大一部分取决于我们的标注;如果不清楚你该怎么标,一定要和开发哥哥沟通!
沟通是非常有效解决问题的途径!
在这里我大致的说一下我的标注习惯,不需要将每一张效果图都进行标注,你标注的页面能保证开发能把每个页面都能顺利进行就可以了。
我拿我标注过的页面做个示例:

我们从上面的标注图可以看出,需要标注的内容有:
文字:字体大小、字体颜色
布局控件属性:控件宽高、背景色、透明度、描边、圆角大小
列表:列表高度、列表颜色、列表内内容上下间距
间距:控件之间的距离、左右边距
段落文字:字体大小、字体颜色、行距
全部属性:如导航栏文字大小、颜色,左右边距,默认间距等,你可以提前跟开发哥哥说好,不用标注
所有的页面标注总结起来就是:标文字,标间距,标大小,标区域
注:标注颜色格式是使用16进制(如:#FF0000),还是RGB(255,0,0)?你需要和开发哥哥商量一下,根据他的开发习惯,一般采用16进制色值就好了。
三. 界面切图
我还是拿图举例来说明:

icon_alipay.png→iPhone 1-3代的手机(已经不考虑了)
icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7对应尺寸,这就是我们通常所说的2倍图
icon_alipay@3x.png→iPhone6P/6SP/7P使用的尺寸,这就是3倍图
可以简单的理解为倍数关系,如果你使用750x1334px(iPhone 6/6S/7)尺寸做设计稿,那么切片输出就是@2x,缩小2倍就是@1x,扩大1.5倍就是@3x了。
总结
1. 到底哪些资源需要切图,哪些不需要切图?
只要是无法用代码来实现和表达出来的,就需要切图
如果实在不清楚要不要切图,多和开发沟通,他会告诉你哪些是需要你切图的
2. 切图需要切几套?(这里我只以iOS作为标准)
理论上,我们需要切3套图,是为了更好的适配
在实际工作中,iOS只需要切2套图就可以,分别为:@2x和@3x
注意:切图是需要注意几点
切图输出格式必须为png24位、png8位、jpg格3种格式
同一模块内,切图大小应保持一致
切图输出大小必须保持为偶数
为了减小包的大小,所有切图尽量压缩后再给开发
- 上一篇:UI初学者提升用户体验的小方法
- 下一篇:UI设计配色_UI设计中色彩在搭配中的秩序
免责声明:
丝路教程网的部分文章信息来源于网络以及网友投稿,本网站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,如权利人发现存在误传其作品情形,请及时与本站联系。
从零开始学习APP系列的切图标注
的相关文章- UI设计切图的原则与规范_UI设计切图输出类型
- 26岁0基础学室内设计还晚不晚?
- 小白做室内设计师要多久_室内设计课程费用
- 小白学习室内设计要注意什么?
- UI切图的命名规范
- 新手如何学习室内设计
- 来南京丝路教育学手绘,零基础到设计师一步到
- 零基础学习室内设计需要哪些知识
- Revit教程:Revit洞口尺寸标注
- Revit管路(风管)附件标注尺寸显示问题
- Revit对于布图期间轴网的快速标注
- 如何Revit让标注的文字不可见
- 如何让开发人员按照UI标注还原设计?
- CAD标注文字的小技巧
- 零基础学室内设计
- 零基础学室内设计有哪些内容?
- 简单6步帮UI设计师高效完成切图
- Revit建筑专业快速标注工具