话不多说,直接进入主题,教你如何在初创团队快速高效so easy做设计。
如何改进工作流以实现一份设计稿支持多个尺寸?
移动设计全面进入“杂屏”时代
注:本人没有全职做过移动产品设计师,只是再艰难的产品路上摸索出了一点移动设计的皮毛,如有大神请轻喷~
指手机屏幕垂直和水平方
1,选择一种尺寸作为设计和开发基准,按照iOS的设计规范设计640*1136像素的设计图,此版本既可作为android wvga hdpi 480*800的设计图。
2,
一,了解尺寸
1,相关名词解释
PX(Pixel像素):不同设备显示效果相同
Screen Size(屏幕尺寸、物理尺寸):一般所说的手机屏幕大小如1.6英寸、1.9英寸、2.2英寸,都是指的对角线的长度,而不是手机面积
Resolution(分辨率):指手机屏幕垂直和水平方向上的像素个数。比如分辨率是480*320,则指设备垂直方向有480个像素点,水平方向有320个像素点。
Dpi(dots per inch像素密度):
Density(密度):指每平方英寸中的像素数。 Density=Resolution/Screen sizdensity的值为dpi/160,见取值 1.5 , 1.0
Dip(Device-independent pixel,设备独立像素):同dp,可作长度单位,不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA、HVGA和QVGA 推荐使用这个,不依赖像素。dip和具体像素值的对应公式是dip值=设备密度/160* pixel值,可以看出在dpi(像素密度)为160dpi的设备上1px=1dipSp(ScaledPixels放大像素):主要用于字体显示(best for textsize)。根据 google 的建议,TextView 的字号最好使用 sp 做单位,而且查看TextView的源码可知 Android 默认使用 sp 作为字号单位。
2,IOS分辨率及其他
![](https://img.haomeiwen.com/i440817/2bfe7454dd9803ad.png)
3,android分辨率及其他
![](https://img.haomeiwen.com/i440817/839d4fd0de543ca5.jpg)
hdpi,对应800*480的手机。主流机型,很多。如小米1 ,1s 三星 htc 等
xdpi,对应1280*720的手机。三星Galaxy系列和华为p6.
xxdpi,对应1080*1920的手机。小米手机,华为荣耀手机系列为主加上 htc one。
下面是当面流行的安卓手机的屏幕尺寸和分辨率:
小米 3和小米4 屏幕尺寸和分辨率: 5英寸 1920×1080像素
魅族MX2 屏幕尺寸和分辨率: 4.4英寸 1280×800像
魅族MX3 屏幕尺寸和分辨率: 5.1英寸 1800×1080像素
HTC one屏幕尺寸和分辨率: 4.7英寸 1920×1080像素
华为荣耀6屏幕尺寸和分辨率: 5英寸 1920×1080像素
华为p6屏幕尺寸和分辨率: 4.7英寸 1280×720像素
华为p7屏幕尺寸和分辨率: 5英寸 1920×1080像素
注:图像来源于网络
4,IOS和Android尺寸时间的转化关系
pixel值=dip值*设备密度/160
引入dp/dip的原因:
过去,程序员通常以像素为单位设计计算机用户界面。例如,定义一个宽度为300像素的表单字段,列之间的间距为5个像素,图标大小为16×16像素 等。这样处理的问题在于,如果在一个每英寸点数(dpi)更高的新显示器上运行该程序,则用户界面会显得很小。在有些情况下,用户界面可能会小到难以看清 内容。与分辨率无关的度量单位可以解决这一问题
如何计算密度(请参照原帖:http://www.devdiv.com/thread-28610-1-1.html);
1.标准是240*320画在1.5*2平方inch上。那么像每平方英寸有240*320/(1.5*2)=25600点,也就是一平方英寸的像素点为25600,所以dpi取为它的平方根160;如果你的dpi是120,那么它的密度就是0.75.
2.密度不只是与width有关,还与height有关,所以不管width是1.8还是1.3,它的密度都有可能是1;比如width是1.8,只要它 的height是3/1.8的话,如果pixel为240*320的话,它的密度仍旧是1;同样如果width为1.3,只要它的 height为3/1.3的话,像素点为240*320,则密度也是1.
3.320*480/(1.5*2)得到单位平方英寸的点为51200,所以单位平方英寸是240*320画在1.5*2屏幕的2倍。但是这是平方英寸啊,算密度的时候要开平方的啊,所以应该是2开平方,是1.414吧,大致密度为1.5。
如何做到与密度无关:
如果屏幕密度为160,这时dp和sp和px是一样的。1dp=1sp=1px,但如果使用px作单位,如果屏幕大小不变(假设还是3.2寸),而屏 幕密度变成了320。那么原来TextView的宽度设成160px,在密度为320的3.2 寸屏幕里看要比在密度为160的3.2寸屏幕上看短了一半。但如果设置成160dp或160sp的话。系统会自动将width属性值设置成320px的。 也就是160 * 320 / 160。其中320 / 160可称为密度比例因子。也就是说,如果使用dp和sp,系统会根据屏幕密度的变化自动进行转换。官方文档总结的计算公式为:pixels = dps * (density /160).
Android把所有的屏幕分辨率也分为四种尺寸:小,普通,大,超大(分别对应:small, normal, large, and extra large).
二、标图
1,区要分别表土或者转化关系
IOS使用十进制RGB色值,Android使用十六进制,IOS可以绘制圆角和阴影,Android更更倾向用.9.png
2,标图软件推荐
http://www.25xt.com/appdesign/7401.html
1)markman
2)PxCook
亮点提示:①dp&px自动换算,切图按命名自动输出
②将标注、切图这两项设计完稿后最棘手的两个工作集成在一个软件内完成,流程很顺畅,而且支持Windows和Mac双平台
3)Sketch.app Measure
特点:这是一款Sketch设计软件的插件,只适合苹果电脑使用。
1、https://github.com/utom/sketch-measure下载最新的版本, 并解压;
2、打开 Sketch.app, Menu (菜单) -> Plugins (插件) -> Reveal Plugins Folder… (显示插件文件夹…);
3、将解压的文件夹复制到 Plugins Folder(插件文件夹)
三、切图篇
1,
2,切图工具
网友评论