一张图解释手机端8px原理
2013-12-09 09:0066
1. 我们先看市场上常用的屏幕精度尺寸 这时候我们统一用的是视觉常用的px为单位。
2. 我们假定320的是1,那么其他相对应的尺寸就应该如上所述。 为何定320为1呢?因为已经约定俗成啦。
3. 我们举个栗子,在320为基数的时候设定为4(px)时,所有的 屏幕换算之后都是整数,这样我们的视觉元素就不会变形模糊。 而在设定为2(px)的情况下,最低精度的屏幕就会出现非整数。 这就是常说的8px原理啦(640情况下)~
ps: 由于目前240的机子慢慢被淘汰,所以如果项目不需要适配该尺寸的话, 8px原理也可以变成4px原理。
4. 既然320是基数,那为什么我们平时新建文件的时候要选640呢? 因为我们视觉工作时,需要设计高清的元素,方便给开发缩小, 否则一旦向量元素,放大就会模糊。当然,如果你想保证完美, 开960也是可以的。(交互的同学就不需要考虑这个问题)
5. 那为什么有dp呢?其实dp是个基数,就好像当初设1一样。 这在视觉进行标注的时候,方便和开发沟通的一种方式。 这样在开发的过程中,开发同志们能自己去换算。 假定320情况下为1dp,那么各屏幕尺寸的dp与px之间的换算 如上所述。
比如:当我们建立了640的文件,那么我们在标注的时候,就 应该总起一句“假定在320的情况下1dp=1px”,这样一来, 我们只需要以dp为单位,标一套标注就可以了,而不用每个尺 寸标一套。
源:淘宝网UED
最新文章
-
微信创始人张小龙首次公开演讲(官方无删减版)
微信创始人张小龙首次公开演讲(官方无删减版) -
如何通过APP看到产品战略层面
产品经理拿到一款产品的时候,不能只能看到表面信息,而是要能看到产品背后的信息。 -
基于用户的“真需求”创新产品
产品创新是保证企业在竞争激烈的市场上长久生存的关键,今天,我们就围绕产品创新和用户研究分享一些看法。 -
有一种交互设计研究验证叫“设计走查”
如何在最短的时间内对自己的产品做出检验,确保其在定位、设计、营销计划等多个环节,在可视范围内是正确的,需要一套比较科学、完善的方法去做出检测。 -
你为什么离不开微信?
张小龙说用完即走,你却爱不释手; 到底是什么让你离不开微信? -
移动互联时代APP的发展方向
现在我们已经走上了移动互联网时代,无论是企业还是公司,都会经过网络竞争中争取有利的优势,较为传统的产品竞争逐渐向互联网竞争转型,出现了很多数据云大数据等等 -
AI 时代产品经理的机遇和挑战
AI 时代产品经理的机遇和挑战 -
前1%与前10%的产品经理差距在哪?
前1%与前10%的产品经理差距在哪? -
你有哪些策略应对不断的需求变更?
你有哪些策略应对不断的需求变更? -
如何运营天猫【十亿俱乐部】商家页面?
如何运营天猫【十亿俱乐部】商家页面?

