android ui 切图工具,APP切图标注教程:UI设计切图标注的小工具实用技巧
分享关于一篇UI设计师必须要懂的切图标注的小工具实用技巧,让你在跟开发工程师协作的时候更加得心应手。
设计师必备的UI切图小工具如下3大常用工具:
1、切图工具
Assistor PS 也是一款PS的切图标注插件,也被誉为神器;我使用了下,感还可以,但是切图和标注上体验还是不高,但是Assistor PS的其他辅助功能还是很不错的,比如参考线辅助,圆角大小,磁铁功能。
2、标注工具
PxCook(像素大厨),是一款切图标注设计工具软件。自2.0.0版本开始,支持PSD文件的文字,颜色,距离自动智能识别。
优点在于将标注、切图这两项设计完稿后集成在一个软件内完成,支持Windows和Mac双平台。标注功能包括:支持长度,颜色,区域,文字注释;从2.0.0版本开始,整体效率有了很大的提高,值得推荐的是自动智能识别标注。
Parker,和cutterman是同一家的,Parker能够自动计算尺寸、距离、文字大小、阴影、描边圆角、行高等信息,并按照你的需要进行标注, 它极大节省你标注的时间,大幅度提升设计效率。(Parker是收费软件)
Mark Man,也是一款高效的设计稿标注工具,支持 Win / Mac, 可免费使用基础功能,免费版的在体验上也是差强人意,毕竟是免费的,如果需要高级功能也是需要付费的60RMB。
以上工具各有优点和缺点,在选择上主要还是看个人的习惯,哪个用着顺手就选择哪个。
3、页面标注
标注是非常重要的,开发哥哥能不能完美的的还原设计稿,很大一部分取决于我们的标注;如果不清楚你该怎么标,一定要和开发哥哥沟通!
沟通是非常有效解决问题的途径!
在这里我大致的说一下我的标注习惯,不需要将每一张效果图都进行标注,你标注的页面能保证开发能把每个页面都能顺利进行就可以了。
我拿我标注过的页面做个示例:
我们从上面的标注图可以看出,需要标注的内容有:
文字:字体大小、字体颜色
布局控件属性:控件宽高、背景色、透明度、描边、圆角大小
列表:列表高度、列表颜色、列表内内容上下间距
间距:控件之间的距离、左右边距
段落文字:字体大小、字体颜色、行距
全部属性:如导航栏文字大小、颜色,左右边距,默认间距等,你可以提前跟开发哥哥说好,不用标注。
所有的页面标注总结起来就是:标文字,标间距,标大小,标区域
注:标注颜色格式是使用16进制(如:#FF0000),还是RGB(255,0,0)?你需要和开发哥哥商量一下,开他的开发习惯,一般采用16进制色值就好了。
4、界面切图
我还是拿图举例来说明:(有图有真相哈)
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
(3)切图该怎么命名,不会命名怎么办?
切图是需要注意几点:
切图输出格式必须为png24位、png8位、jpg格3种格式
同一模块内,切图大小应保持一致
切图输出大小必须保持为偶数
为了减小包的大小,所有切图尽量压缩后在给开发
视觉调整优化文档,要一目了然,需要注明和效果图不一样的地方是哪里,应该改成什么样,是iOS调整、Android调整还是h5调整等,输出为png和jpg图片格式,最好输出为PDF格式,开发看起来也方便,比如你写了一个颜色值,开发就可以直接复制了。
输出基础控件元素规范
包括(颜色、文字、图标、蒙板、投影、按钮、输入框、或个别控件),
规范是一个庞大而繁琐,极需耐心的工作;过程中注重每一个细节的精准与合理性。
规范的切图与精确的标注
我们的切图和标注,是否规范和精确,直接影响视觉效果的还原度,所以切图和标注一定要做的细致,这样更加有利于提升还原度
iOS开发工程师需要提供的iCON图标只需要几个尺寸:
1024×1024 Retina APP Icon for APP Store(高清屏的APP Store)
512×512 APP Icon for APP Store(普通屏幕的APP Store)
120×120 6以及以下的主屏幕尺寸
180×180 6 plus的主屏幕图标尺寸
58×58 Settings on devices with retina display
87×87 Settings on iPhone 6 Plus
80×80 Spotlight on devices with retina display
注意:iOS系统可以自动把图片裁剪为圆角,所以提交图标的时候,你只需要提交正方形的PNG格式即可。
提供的LaunchImage(启动页)的各项尺寸,我们需要提供4种尺寸给的开发工程师:
640x960px iPhone 4/4s
640x1136px iPhone 5/5s/5c/SE
750x1334px iPhone 6/6S/7
1242x2208px iPhone 6 plus/6S plus/7 plus
2208x1242px iPhone 6 plus/6S plus/7 plus的横屏尺寸,如果我们的APP支持横屏模式,你就需要做一张横屏的启动页。
注意:启动页面一定要是PNG格式的,建议给开发之前将图片全部压缩一下。
现在APP STORE 介绍的截图商店页只需做一套尺寸:750x1334px,就ok了
android ui 切图工具,APP切图标注教程:UI设计切图标注的小工具实用技巧相关推荐
- Java实现动态加载页面_[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新)...
[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新) 0 2014-05-07 18:00:06 使用该控件,可以根据url,参数,加载html记录模板(包含 ...
- python写一个ssh工具_用Python写个自动ssh登录远程服务器的小工具
很多时候我们喜欢在自己电脑的终端直接ssh连接Linux服务器,而不喜欢使用那些有UI界面的工具区连接我们的服务器.可是在终端使用ssh我们每次都需要输入账号和密码,这也是一个烦恼,所以我们可以简单的 ...
- 计算机工具都有什么,电脑上有哪些特别好用的小工具?盘点10大PC工具,个个都精品...
电脑上好用的小工具软件还是非常多的,不同的人可能会有不同的爱好和选择,在这里,我就分享10个我使用最多的软件吧,真的非常实用且好用. 一:Arctime pro. Arctime pro是一款非常强大 ...
- 工具分享:macOS上可以单独设置鼠标滚轮方向的小工具,Mos
背景 用习惯了windows的鼠标,初换成MacOS非常不适应,有一点是因为触控板和鼠标的滚轮的控制方向是反的. 同事介绍了一个小工具,Mos,可以单独设置鼠标的滚轮方向. 链接 https://gi ...
- win10计算机里的工具在哪里设置,win10系统桌面上添加自带日历小工具的设置办法...
win10系统使用久了,好多网友反馈说关于对win10系统桌面上添加自带日历小工具设置的方法,在使用win10系统的过程中经常不知道如何去对win10系统桌面上添加自带日历小工具进行设置,有什么好的办 ...
- android 获取控件高度_安卓开发入门教程UI控件_ProgressBar
什么是ProgressBar ProgressBar是用于提示用户进行等待的UI控件,. 基础样例 1.loading图 效果图 代码 布局文件代码 <ProgressBarandroid:id ...
- android 获取控件高度_安卓开发入门教程UI控件_ImageView
什么是ImageView ImageView是用于显示图片的UI控件. 基础样例 1.展示本地图片 效果图 代码 <ImageViewandroid:layout_width="wra ...
- Android 飞猪日历,移动app中对日期选择器的设计
我很少去关注日期选择设计,但最近在做一个项目的时候,涉及到选日期,一开始只是很简单粗暴的做了个日历表格,后来主设计师跟我说,去参考竞品的日期筛选设计.在参考学习过程中发现移动端的日期选择器设计是个大学 ...
- android 美图 app下载,美图手机相机app下载-美图手机相机 安卓版v1.5.0-PC6安卓网
美图手机相机app是一款很有魅力的美颜相机软件.美图手机相机给大家展示了众多的美颜特效功能以及众多特效素材,使用美图手机相机app可对照片快速美颜,美图手机相机操作也很是简单! 软件介绍 美图手机相机 ...
- android 图片 编辑app,图片编辑工具手机版下载-图片编辑工具app下载8.33.107安卓官方版-西西软件下载...
图片编辑工具app,非常实用的手机端图片处理工具!有时候一些图片简单的修改,还要打开电脑,连接手机传到电脑上相关软件进行改动,最后再传回手机,如果没电脑,难不成还等到有电脑的时候才能解决这个问题吗?现 ...
最新文章
- 车道线检测--Towards End-to-End Lane Detection: an Instance Segmentation Approach
- 访问DBGRIDEH中的行与列
- AC automation 模板
- Python 购物车
- html 使用ajax php函数吗,php – 为什么用AJAX加载html后jQuery更改函数不起作用?
- 嵌入式如何入门,要不要学习Python
- echo怎么把日志清空_shell脚本清空系统message日志
- ARMA模型性质之平稳AR模型得统计性质
- Android编译期代码生成之apt实践入门
- hdb interface驱动是什么_Linux USB 鼠标驱动程序详解
- Delphi TreeView失去焦点也选中
- 如何得到当前程序执行的堆栈
- win10计算机信息更改图,Win10系统怎么修改通知信息的位置【图文】
- BitTorrent详解
- 数据风云、十年变迁(DTCC会议总结)
- 推荐几个不错第 Java 学习网站
- iOS UINavigationController导航条背景透明
- 2004古墓丽影黄金关卡——Lara在电影中:一号门
- html 格式化金额显示
- VxWorks下 canOpen移植心得 stm32 - ppc
热门文章
- CATIA软件VBA二次开发:Excel文件中点坐标数据导入与生成点应用程序编写
- D2D 学习笔记第一课 初始化D2D 画一个矩形
- 游戏运营的十二大组成
- C语言鼠标病毒,鼠标也中毒Windows系统中鼠标乱动是否中了病毒
- 偏向锁,轻量级锁,重量级锁的核心原理
- python中import math用法_Python math.hypot() 方法
- dw中css目标规则命名,css 常用样式命名规则
- 如何恢复计算机我的电脑工具栏,我的电脑工具栏不见了,怎样恢復
- 机械战警原型开发 - 仓田机器人
- xmind打开文件报错