当前位置: 首页 >> APP设计教程_APPUI设计教程_UI设计教程_网页设计师加油站 >> 阅读正文

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

目前来说,我们可以按照手机屏幕的标准把800×480理解为hdpi,480×320为mdpi,320×240为ldpi,根据最新的数据显示,Android所有手机中hdpi和mdpi占有九成以上的比例;还有1280×720、1920×1080等高分辨率的android手机界面。
问题一:800×480、480X320、320X240分辨率的手机需要不同的图片资源;

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

ios-chicun

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

答:视觉在根据交互原型进行设计的时候,可以考虑以mdpi,也就是320×480为蓝本进行设计,因为Android一般采用dp为单位,而我们设计的时候一般是px为单位的,这个就涉及到一个单位转换的问题,而在mdpi下,px和dp是1:1的关系,这样在标注坐标的时候能够很方便的进行单位转换,例如我们以320×480为蓝本的话,在photoshop测量的间距为10px,我们在给到RD时的坐标可以直接标注为10dp;因为dp的单位是可以程序自己去适配不用dpi屏幕的,所以就算设计三套不同dpi的图,一般也只用对mdpi的设计图进行坐标定位,这个坐标的标注可以用在所有dpi的资源上;
现在Android又添加了xhdpi(类似iPhone4的960×640的分辨率,还有更高级别的1280×720、1920×1080)的支持,假如我们在设计有(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%;article_03_pic1

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

答:视觉设计的时候就像前面说到的一样,可以优先以320×480的大小去设计一套,在用到不同dpi的时候,可以把320×480设计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所以透明部分也要特殊标注出来
再一个就是交互设计和美工要把界面切换时候的顺序标注出来
还有一个就是字体,如果是特殊字体,元素图最好就把字给嵌上去,程序为了几个字加字体资源很浪费空间的,再一个版权的问题……
最后一个就是如果有动画的话,最好提供Gif参考,或者其他动画参考,方便最后程序检查实现效果。

 

1、APP设计和切图基本知识点以及注意事项【APP设计干货】

2、Android尺寸标注设计大全和Android切图规范

3、《Android UI界面设计指南规范》相关资料下载【设计干货】

4、APP图标模板规范大全官方版,包括iOS6,iOS7和Android应用程序图标模板(含PSD源文件)

5、Android、iphone APP界面设计尺寸官方版

分享一下,与TA一见钟情~~

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

本文地址:http://www.25xt.com/allcode/4269.html

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。