文/andylizapp剪图基础知识点及注意事项1.考虑适应安卓各种复杂分辨率,比如主流1280X720,800X480,640X480,480X320,各种非主流分辨率。2.9工件png3、PNG24+jpg4.交互控件应不小于
文/andylizapp剪图基础知识点及注意事项
1.考虑适应安卓各种复杂分辨率,比如主流1280X720,800X480,640X480,480X320,各种非主流分辨率。
2.9工件png
3、PNG24+jpg
4.交互控件应不小于最小可操作尺寸:android规格为48dp。
5.图片中的视觉元素应尽可能位于文档的中心,以便于对齐和标记。
6.尽量避免代码使用图片,如单色色值、渐变、文字、分割线等。
7.考虑控件的通用性。
总之,剪图是个技术活。所以朋友们一定不要忽视车途的魅力!
按钮的设计
1.真正能点击的区域要尽量大,至少不小于一个手指的宽度。那样的话,点击的命中率要高,不然会有一种“点击不敏感”的感觉。当然不是真的不敏感,而是没有点击操作的区域。(用户可以忽略这些原因,多为用户着想)。
2.对于单选按钮和复选框,至少应该有三个图片:正常,点击和选择。有时候为了方便不能只画两张图:正常和选中。这种情况在点击的过程中也有“反应慢”的感觉,因为毕竟点击状态下没有图像变化。
排版设计
对于整体设计,要尽量考虑可用性和实用性,而不是可用性。我自己的经历是这样的。
1.任何响应点击或其他事件的部分都应该尽量与屏幕周围的边框保持一定的距离。如果非要把这部分放在屏幕边缘,最好放大操作区域。因为在屏幕边缘点击不是那么好用(如果设备配了保护套,在屏幕边缘会很费劲),至少我用过的带边框的设备,也就是说用手直接在屏幕边缘点击,大多数情况下是点不到的。
2.背景和内容的对比一定要合适。作为美术基础,这个大家都懂,但是很多时候在设计的时候都会犯这样的错误。你的设计必须考虑使用环境,比如在阳光下。如果对比度不够,在强光环境下效果不好,背景和内容会融为一体,难以分辨。
3.尽可能少使用对话框。特别是网页中会有很多对话框。久而久之,人们会对对话框感到厌恶(至少我是这么认为的)。如果能以更好的方式提示,尽量避免使用对话框。如果必须的话,建议一个接口不要超过两个接口。永远都是对话框的应用,最后弹开的都是用户。
4.简单的界面。这有两层意思。一是界面的功能清晰简洁,二是类似的操作尽量在一个界面中完成。这两点看似有冲突,其实不然。如果界面简洁,功能统一,不如重新设计。
比如用户信息输入功能,第一界面完成用户名输入和密码,然后进入第二界面设置头像。个人觉得这样的界面太罗嗦了。既然都是用户信息的功能,就可以设计成界面。这样可以把整个功能做得更紧凑,用更少的接口更简单。
5.使用某些动画。用动画做界面过渡,让人感觉更柔和,更亲近。现在的应用太多,功能太强大。如果你的应用需要脱颖而出,它必须与众不同。有时候一些简单的动画会给你的应用增加色彩。
6.整体布局。我不是专业美工,但是我看过很多优秀的应用,应该有发言权,呵呵。优秀的应用都有共同点,现在就来总结一下。无论出于什么考虑,界面都要避免左右布局严重失衡,当然也是刻意设计成不对称的。比如在界面的底栏,有两个横向排版的按钮,所以两个按钮要整体居中。如果是左或右,就会有左右不平衡的感觉。要么左重右轻,要么左轻右重。好像有些比较空。
7.屏幕改编。Android开发中最麻烦的一个问题就是屏幕适配的问题。硬件厂商太多,屏幕尺寸太多。一个好的应用程序应该适应尽可能多的屏幕。在UI设计的过程中,要考虑如何在屏幕变宽、变高、变窄、变短的过程中适应UI。总的来说,有一个原则就是屏幕改编不要改变整体布局,就是布局不变,只拉伸图形(关键是怎么拉伸)。其实屏幕改编也是一些经验,慢慢了解吧,呵呵。
用APP剪图前需要做到以下六点:
1.和客户的技术沟通好。当用不同的框架实现时,图会有不同的切割方法。比如Tabbar是一起剪切背景还是单独让图标透明,文字是放在图片里还是加在后面。
2.有一些小图标按钮,不能只剪到图标边缘。而是要考虑到最后实现的时候,把这个图片做成一个按钮,和用户进行交互。所以需要多留一些透明的边缘,这样可以点击的图片可以是88×88以上,用户才能保证更好的点击。
3.个人强迫症。如果可以用PNG24,就不要用PNG32。如果可以用PNG8,就不要用PNG32。并用Fireworks优化尺寸。
4.对于不改变可见图形但需要增加点击面积的图形。所以在裁剪图片的时候,建议在可见图片周围增加1个像素的透明度,就是在不产生图像失真的情况下,在可见区域进行放大拉伸。
5.剪切图片的高度。对于一般的背景图片,比如文字边框为圆形的背景,在裁剪图片时,并没有效果图上的高度那么高,一般只能裁剪一行文字的高度。然而,这不是绝对的。准确的说应该是高度h = padding top+text height+padding bottom,文字相对于背景的上边距+一行文字的高度+文字相对于背景的下边距。
6.剪切图片的宽度。如果是一般的背景图,那么它的宽度应该是效果图中最小的宽度,也就是说背景可能会用到很多地方,所以就取最小的宽度。麻烦的是全屏覆盖的时候,要看你的效果图的宽屏宽度,所以做效果图的时候最好做小屏效果图。
可能有人会问,点9的图形不能拉伸压缩吗?为什么需要参考最小宽度?根据个人经验,大图屏幕小的时候,画面拉伸的部分会变暗。