美文网首页
设计篇-app设计(一)

设计篇-app设计(一)

作者: Cynthia_fu | 来源:发表于2019-01-31 09:37 被阅读8次

 话不多说,直接进入主题,教你如何在初创团队快速高效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分辨率及其他

iPhone 6 plus有两种显示模式,标准模式分辨率为1242x2208,放大模式分辨率为1125x2001(即iPhone 6的1.5倍)。

     3,android分辨率及其他

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,切图工具

相关文章

网友评论

      本文标题:设计篇-app设计(一)

      本文链接:https://www.haomeiwen.com/subject/hqgyqttx.html