移动端ui设计尺寸需要掌握的知识.docx

/
移动端 UI 设计尺寸需要掌握的知识
UI 设计师在设计移动 APP 时非常容易犯错误，不好把握屏幕的尺寸，实际应有起来也
很头疼，为了解决这个问题，莱茵教育

UI

讲师就为大家整理做移动

UI

师如何实际应用，
供大家学习。
之前我说过， 我们要以逻辑像素尺寸来思考界面。 体现到设计过程中， 就是要把单位设置成逻辑像素。 打开 PS 的首选项——单位与标尺界面， 把尺寸和文字单位都改成点 (Point)

。
这里的点也就是 pt ，无论设计 iOS 、Android 还是 Web 应用，单位都用它。当然，各平台
单位名称还是要记住的。这里我们用的只是它的原理，不用在意名称。
要调节倍率，则通过图像大小里的 DPI 来控制。这个 DPI ，其实就是 PPI ，像素密度。
有个常识大家都知道，屏幕上的设计 DPI 设成 72 ，印刷品设计 DPI 设成 300 。为什么是这
两个数字 ?
首先说 300 ，这和人眼的分辨能力有关。由于 1 英寸是固定长度，每 1 英寸有多少个
像素点决定了画质清晰程度。之前说过，这就是像素密度，也就是 DPI 。 DPI 达到 300 以
上，其细腻程度就会给人真实感，像真实世界中的物件。相反， DPI 只有 10 的话，在你一
个食指指节大小的长度内只有 10 个像素，这明显就是马赛克了。所以印刷品要设成 300 ，
才能保证清晰。
再说 72 ，这有一定的历史原因。最早的图形设计是在 mac 电脑上进行的， mac 本身
的显示器分辨率就是 72 。 PS 中把图像 DPI 也设成 72 ，就能保证屏幕上显示的尺寸和打印
/
尺寸相同，便于设计。 72 的 PC 显示器分辨率逐渐成为一种默认的行业标准，这套规则就
这么沿用下来。
现在回到正题， 我们怎么通过 DPI 来调节倍率 ?既然屏幕本身的分辨率是 72 ，DPI 设成
72 刚好是 1 倍尺寸，那设成 72 的两倍就是倍率为 2 的屏幕了，就这么简单。
下面来看看 3 个平台各自的画布设置：
IPhone
iPhone 的屏幕尺寸各不相同，我说的是逻辑像素尺寸，这确实是让人很头疼的事情。
如果想用一套设计涵盖所有 iPhone ，就要选择逻辑像素折中的机型。
从市场占有率数据来看，目前最多的是
iPhone5/5s
的屏幕。倍率为 2 ，逻辑像素 320
×568
。上升势头最猛，未来有望登上第一的是
iPhone 6
的屏幕。 倍率为 2 ，逻辑像素