做UI，到底用什么尺寸？

- 卷首

最近时常有朋友问

做UI

画板到底建多大？

每种屏幕都要做一版设计？

趁坐班

给大家解答一下

希望帮到你

p.s.以移动端为例

如有疏漏

望斧正

做UI，到底用什么尺寸？

要知道，光 iOS 设备的主流尺寸就有四个（基于 1x 倍率）

• 320×568 (iPhone 5、5s、SE)

• 375×667 (iPhone 6–8)

• 414×736 (iPhone 6–8 Plus)

• 375×812 (iPhone X)

安卓就更五花八门了，难以统计，这着实让新人设计师感到头疼——刚打开ps就卡住了，不是电脑卡，是人脑卡了……到底要建多大的画板？？？

先抛答案：

iOS：375X667px（1x倍率）或 750X1334px（2x倍率）

Android：360X640px（MDPI）或 720X1280px（XHDPI）

That's it!

注：倍率——苹果和安卓分别根据屏幕像素密度的不同，定义了不同倍率的屏幕。iOS 规定以初代 iPhone 为基准倍率，也就是一倍倍率，简称 1x（320X480px，163ppi），安卓定义 mdpi（360X640px，160ppi）为基准倍率，也即 1x。往后更大的屏幕在此基础上乘以系数，便有了 2x、3x 的屏幕倍率。

iOS 的基准倍率为 1x，相当于安卓的 MDPI

http:///designing-at-1x/

WHY？

—

屏幕尺寸那么多，为何只选一个尺寸来做设计？

看组数据先，各屏幕在全球市场上的大致比例↓（截至2018年5月）

http://

占有率排名前两位的尺寸分别是 360X640、375X667，即 Android 的主流尺寸及 iPhone8 的屏幕尺寸。

所以，按这个数据作图就能满足绝大部分使用者了。即，iOS：375X667（750X1334@2x）；安卓：360X640（720X1280@XHDPI）

疑问：若以一款主流尺寸做设计（iPhone 8尺寸），那么到更大或更小的屏幕上（iPhone 8 Plus、iPhone SE）如何保证设计正确显示？

https:///uxabc/artboard-size-5f0d457f7b32

回答这个问题，就要谈到一个概念——适配。

今天不讲适配，但你大概可以理解为基于一个尺寸的设计其实是可以通过适配的方式合理显示在不同大小的屏幕上的，其做法包含但不仅限于以下：等比缩放、调整间隙、调整控件尺寸等……上图可以看出，iPhone 8 的尺寸是介于 iPhone SE 和 iPhone 8 Plus 之间的，所以它往左右两边适配都不会有太大的跨越，自然不会扯到蛋……往大可以适配到 iPhone 8 Plus；往小则可以适配到 iPhone SE。

所以，iPhone 8，一个中间尺寸，同时也是市场占有率最高的尺寸，无论从适配或市场占有率的出发点考虑，用它的尺寸做设计是最优选项。（补充：iPhone 8 的屏幕尺寸同 iPhone 7，同 iPhone 6，是不是瞬间感觉占有率爆棚？！）

iPhone X……？

其实 iPhone X 的屏幕物理宽度和 iPhone 8 是一样的…只是垂直空间大了一些↓

iPhone X 纵向比 iPhone 8 多显示一些内容罢了。

https:///uxabc/artboard-size-5f0d457f7b32

安卓？同理。

目前安卓主流屏幕尺寸：360X640（720X1260@XHDPI、1080X1920@XXHDPI），所以，我们以 360X640 或 720X1280 为基准做设计就 OK 咯。

基于以上，这也解释了主流设计软件的预设为何如此了↓

Sketch 的 iOS 画板预设将 iPhone 8 排首位，安卓的直接 360X640

“墨刀”的预设

XD 的预设

AI 预设

PS 预设

殊途同归！

—

肯德基卖现磨咖啡，麦当劳也卖；肯德基卖中餐，麦当劳也有。纵然是死对头，大家也有一些趋同的迹象，最后都有点殊途同归了。

iOS 和安卓也是如此！前文说了，iOS 以 163ppi 为基准倍率，安卓以 160ppi 为基准倍率，也就是说如果我们以基准倍率作图，两个平台的长度单位基本可以画上等号了 ，即 1 iOS pt ≈ 1 Android dp ≈ 1/160 inch，简直想喊三个字——在一起！！！更惊喜的是，不管是 360X640（安卓主流尺寸）还是 375X667（iPhone主流尺寸）它们的长宽比都是16：9！！！

所以，殊途同归的现实意义是什么？你猜到了吗？

欢迎留言。此刻卖个关子~

总结

—

若以矢量软件做设计，如：Sketch、XD、Figma、Ai等。新建 1x 倍率的画布就可以，即 iOS：375X667px；安卓：360X640px。

若以位图软件做设计，如 PS，那么以 PS 自带的预设尺寸即可（iOS 预设为 2x 倍率）即：iOS：750X1334px；安卓预设是1080X1920px（3x 倍率），但个人建议以 720X1280px（2x 倍率）设计比较好（原因：简化一些繁琐的计算，尽量避免次像素出现）需要注意的是，PS 里预设画板默认为 2x、3x，在此情形下建议将 ppi 设为 144（针对 2x 倍率）或 216（针对 3x 倍率），这样做是为了和官方的文字排版规范一一对应（https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/）不展开讲了，亲测有效。

The End

~希望解了你的惑~

参考文献：https:///uxabc/artboard-size-5f0d457f7b32  by Taylor Hu，谢谢！