设计教程

UI设计师给Android开发者提供图片资源前，必须解决的3个问题和Android切图知识点分享

3044

目前来说，我们可以按照手机屏幕的标准把800x480理解为hdpi，480x320为mdpi，320x240为ldpi，根据最新的数据显示，Android所有手机中hdpi和mdpi占有九成以上的比例；还有1280x720、1920x1080等高分辨率的android手机界面。

问题一：800x480、480X320、320X240分辨率的手机需要不同的图片资源；

答：按照经济方便的角度来说，一般开发Android APP的时候会考虑设计hdpi和mdpi的图片资源，所以也是需要设计两套图的，很多为了节省工作量直接用一套hdpi的图片资源，在mdpi的时候直接压缩，这样图片质量会损失很大，所以最好还是尽量使用两套资源图片；

问题二：如何设计三套图片资源来满足这3种分辨率的手机，这三套图片资源之间有什么样的大小比例关系？

答：视觉在根据交互原型进行设计的时候，可以考虑以mdpi，也就是320x480为蓝本进行设计，因为Android一般采用dp为单位，而我们设计的时候一般是px为单位的，这个就涉及到一个单位转换的问题，而在mdpi下，px和dp是1：1的关系，这样在标注坐标的时候能够很方便的进行单位转换，例如我们以320x480为蓝本的话，在photoshop测量的间距为10px，我们在给到RD时的坐标可以直接标注为10dp；因为dp的单位是可以程序自己去适配不用dpi屏幕的，所以就算设计三套不同dpi的图，一般也只用对mdpi的设计图进行坐标定位，这个坐标的标注可以用在所有dpi的资源上；

现在Android又添加了xhdpi（类似iPhone4的960x640的分辨率，还有更高级别的1280x720、1920x1080）的支持，假如我们在设计有（xhdpihdpi/mdpi/ldpi）四套不同dpi的图片资源时，因为之前提到以mdpi为蓝本做第一个dpi的设计，相应的我们把mdpi的比例设定为1，相应的不同dpi的图片资源尺寸的比例关系可以是xhdpi：hdpi：mdpi：ldpi等于2：1.5：1：0.75，也就是说，第一套图为mdpi的资源图片，xhpi可以大小调整到200%，hdpi可以调整到150%，ldpi则是75%；

问题三：UI设计师设计图片和切图的时候有没有技巧？可否先设计一套，然后按照比率缩放呢？

答：视觉设计的时候就像前面说到的一样，可以优先以320x480的大小去设计一套，在用到不同dpi的时候，可以把320x480设计psd里所有APP要用到的控件单独做一个控件库的psd，psd的所有控件图层是基于形状工具绘制的，每个分辨率都做一个控件库的psd，然后可以直接让美工根据控件库的psd切图给RD使用了，先做完mdpi的控件psd后，其它dpi的控件库的psd可以依照上面说到的比例关系进行大小的调整，例如，hdpi的控件psd也就是把mdpi里的每个控件放大到150%，有时候放大缩小psd里的图片会有些半透明的虚边，细微调整即可，如果在设计mdpi的时候，每个控件的大小能够尽量的被4整除，那么基本上就可以直接放大和缩小控件大小而不用担心虚边的问题，当然也不能完全限制在大小被4整除的死胡同里，这样也容易局限视觉设计，只是在视觉设计完成后，可以尽量的去调整在，如果视觉上有些控件在大小调整到被4整除的范围里，界面整体的比如不太合适，或者很影响视觉设计，也不必去过分强求。

【相关知识的扩充】

Android：

如果开发者比较牛，最好请提供矢量图，矢量UI图哦

如果美工比较牛，最好请提供9patch的png

如果不追求全屏幕尺寸匹配的话，请给需要适配的分辨率一样准备一张UI，资源图元素分离，按照适配屏幕像素，要是能提供每个尺寸下每个元素的位置px就更好了

iOS：

iOS有5种分辨率——iPhone 480，iPhone 960，iPhone 1136，iPad 768，iPad 1536——要做几个，记得提供几个的UI图

全部图的坐标做好都是按照非Retina算（可以使用Float值）

资源图需要准备普通的和Retina的图.

通用：

所有资源图最好标注层次，应为都是PNG所以透明部分也要特殊标注出来

再一个就是交互设计和美工要把界面切换时候的顺序标注出来