在进行APP切图的前,我们需要做什么?

1 评论 8093 浏览 24 收藏 3 分钟

切图是个技术活,小伙伴们千万不能忽视切图的重要性噢,前文介绍了设计的七大元素,那么我们现在来看看在切图之前,我们需要做什么呢?。

1、  和客户端的技术沟通好

用不同的框架来实现的时候,图会有不一样的切法。例如Tabbar是连背景一起切还是单独把icon做成背景透明的,文字是放在图里还是后面加字。

2、  如何切icon式按钮

有一些小的icon式按钮,不能只切到icon边缘,要考虑到最终实现的时候,是把这个图片做成按钮,和用户交互。所以必须要多留一些透明的边,让能点击的图片在88×88以上,这样用户才保证比较好点到。

3、  图片存储格式

如果可以用PNG24就不用PNG32,如果可以用PNG8就不用PNG32。并且用Fireworks优化大小。

4、  对于不改变可见图形而又需要加大点击区域的图怎么切?

切图的时候建议在可见图形的四周都加上1像素的透明,这是为了放大拉伸而不产生可见区域的图像失真。

5、  切图的高度

对于一个通用的背景图,如文字圆角边框背景,那么切图的时候并不是效果图上有多高就切多高,为了通用而是只需切一行文字的高度就可以了。不过这也不是绝对的,准确的说应该切的高度H=paddingTop+textHeight+paddingBottom,及文字相对背景的上边距+一行文字的高度+文字相对背景的下边距。

6、  切图的宽度

如果是一个通用的背景图,那么他的宽度应该是他在效果图中的最小宽度,也就是说这个背景可能在多处使用到了,就取最小的那个宽度就可以了。比较麻烦的是铺满全屏的时候,这就需要看看你做的效果图的宽屏宽度,所以说做效果图的时候最好是做小屏幕的效果图。有人可能会问点9的图不是可以拉伸、压缩吗,为什么需要参考最小的宽度呢?根据个人经验发现,一个大图在屏幕小的情况下点9图中拉伸的部分会变得颜色更深。

本文来源:微信[设计着]

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. UI设计师:快速完成交付、一键上传Sketch、PS、XD的设计稿,一键下载切图(安卓,IOS,Web),智能标注(配合尺寸,区域,文字,坐标标注),支持切图自动压缩,一键匹配所有平台尺寸,自动生成UI设计规范;

    前端开发:轻松查看智能标注,可显示百分比标注,查看相同元素,复制CSS等;

    产品经理:直观表达需求、快速制作交互原型,支持多种手势交互、动画特效,上传各类型文档进行在线预览(Axure,justinmind,office,confluence等);

    来自四川 回复