移动UI设计尺寸

移动端一堆分辨率的设备?碎片化?没接触过?

莫慌,跟着老司机走。


概念

1.像素密度-PPI

每英寸面积的像素数量。

iPhone 3gs的屏幕像素是320x480,iPhone 4s的屏幕像素是640x960。都是3.5寸的手机。

尺寸没变,变的是像素的个数。


2.倍率与逻辑像素

苹果以普通屏为基准,给Retina屏定义了一个2倍的倍率(iPhone 6plus除外,它达到了3倍)。

实际像素除以倍率,就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同,它们的显示效果就是相同的。(可能原始素材图不一样)


3.实战解决

以iPhone 5s为例,屏幕的分辨率是640x1136,倍率是2。

浏览器会认为屏幕的分辨率是320x568,仍然是基准倍率的尺寸。

所以在制作页面时,只需要按照基准倍率来就行了。

在准备资源图的时候,需要准备2倍大小的图,通过代码把它缩成1倍大小显示,保证清晰。


4.一些逻辑像素

ios

iPhone5s 逻辑像素320x568 倍率为2

iPhone 6 逻辑像素375x667  倍率为2


安卓

都说Android碎片化严重,但它现在反而比iOS好处理。

因为如今的Android屏幕逻辑像素已经趋于统一了:360x640。


wap

比较流行的做法是按照iPhone 5的尺寸来设计。倍率2,逻辑像素320x568。

这样的做法比较实在,倍率2的屏幕无论在iOS还是Android方面都是主流,而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平,页面加载速度快。当然,缺点就是在倍率3的设备上看,图片不是特别清晰。

如果追求图片质量,愿意牺牲加载速度,那么可以按照最大的屏幕来设计。也就是iPhone 6 plus的尺寸,倍率3,逻辑像素414x736。


总结

移动端的尺寸比PC端复杂,关键就在倍率。

但也正因为倍率的存在,把大大小小的屏幕拉回到同一水平线,得以保证一套设计适应各种屏幕。站在这条水平线的角度看,会发现它很好理解。


原文链接:http://www.jianshu.com/p/d1c6b78fe9e3

推荐阅读更多精彩内容

  • 从原理开始介绍一下移动端设计尺寸规范右键“在新标签页中打开图片”看 初涉移动端设计和开发的同学们,基本都会在尺寸问...
    老夫的天阅读 150,465评论 20 222
  • 写给移动端设计和开发的同学们,理清关于尺寸的所有细节。 现象 首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片...
    木糖醇阅读 996评论 0 11
  • 初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白,感觉有必要写...
    滕的世界阅读 7,385评论 1 11
  • 当下,恐怖袭击依旧弥漫在我们的生活,困扰着我们,带来的是对自己的不安和对袭击者的痛恨。 曾经的我也是这样思考着,...
    sosBlue阅读 460评论 0 0
  • 开学刚过一周,开年的大计划里有教育笔记的,硬是强迫自己写下这周的工作所看所思所感。 从上个周末就开工了,为的是班级...
    撒哈拉C阅读 71评论 0 0
  • 爱是一种奢侈品。如同巴黎橱窗里的狐皮大衣,那么眩目,那么迷人,可是上面的标价会让人清醒过来。只能远远地看着,别幻想...
    梓青彦阅读 203评论 0 4
  • 接到大婷给我打来的电话的时候我正窝在床上啃着干巴巴的面包,电脑里放着美剧。接电话的时候不小心碰倒了手边的果汁,湿了...
    茄辣西西阅读 897评论 0 4
  • 这样写一样还是不方便。
    你大爷的取个名字这么难阅读 50评论 0 0