本帖适用对象:ui designer, android developer
清楚记得在facebook上某个社团,曾经有人问过android支持multiple screen,究竟要出多少套不同density的切图?
追求极致与显示完美的设计师会切多套图,但在网路行业这样飞快的敏捷开发节奏,我只出一套标注与切图,惟有不得已的情况下,大多是小适配手机有显示的问题,才会多切mdpi或ldpi的图。除了工作效率更快之外,原因无它,apk的档案大小会影响留存率!尤其是工具类的app。
在开始讲解我的工作习惯之前,如果你还不是很清楚android如何支持不同density萤幕的话,可以先k一下官网的developer guide:http://developer.android.com/intl/zh-tw/guide/ practices/screens_support.html#support
不管是用illustrator或是sketch,一般我都把canvas size设定成720*1136(不包含status与navigation bar),主要是为了xhdpi density的切图尺寸,但标注的时候仍要使用baseline(mdpi)为基准,换算每2px等于1dp。
标注(layout/measurement)虽然主要标注的单位是dp,但有时候也会用到sp或px,以及百分比,怎么决定要用什么单位呢?
1.所有可操作的控件或是具体 影响可读性的元件,你希望在不同density萤幕上actual/physical size显示是一致的,都要用dp,我自己的习惯是文字也都用dp为显示单位,之前文章提到过的iconfont,也是一样。
2.如果是希望文字能随着用户在设定参数里的显示字级大小变化,才使用sp,且前提要考虑你所有的版面设计支持响应式设计(responsive design)原则之外,也不担心字级大小变化而影响到版面的配置与美感,更重要的是在那小萤幕里寸土寸金,文字变大了,一屏能显示的内容也就少了,也可能因此失去一些流量。
3.用到px的情况是比较少的,主要会在一些装饰性的设计元件,例如:圆角、分隔线等,会使用px单位。但这不是铁律,全看画面的配置或整体设计规范,来定义各元件的显示参数即可。
▲上图为dp, sp, px三种单位类型的标注参照图,找到对应的颜色即可。4.如果画面不是同类型控件的堆叠(例如:list、grid等),而是有一个较大的元件或单一图片的时候(例如:tutorial, welcome page),我会用百分比去进行width或是margin的定义。
▲示意图里紫色部份,便是依画面高度百分比比例决定位置的范例
切图(asset/resource)从flat design到material design,视觉设计的趋势都以大量的色块为主,因此大多是产出png格式的图片,有用到渐层色或非要带alpha channel就产出24bit的格式,少于256色则使用8bit即可。而不管是多少位元的图片,一律都会再压缩,习知的工作就属web版压缩器tinypng了,如果想要再追求更精减的压缩,则可以考虑imagealpha,它则可以设定颜色数量的参数,这套工具则需要下载client app。jpg则视点阵图的复杂情况,去调整压缩比,就不多赘述了,通常这类型的图片尽可能是放在cdn,从云端拉下来,除非其必要性,才会放在client。
以上是设计android ui时应该要有标注观念,如果有更好的方法或观点,也欢迎交流分享。