- 卷首
最近時(shí)常有朋友問(wèn)
做UI
畫板到底建多大？
每種屏幕都要做一版設(shè)計(jì)？
趁坐班
給大家解答一下
希望幫到你
p.s.以移動(dòng)端為例
如有疏漏
望斧正
做UI，到底用什么尺寸？
要知道，光 iOS 設(shè)備的主流尺寸就有四個(gè)（基于 1x 倍率）
320×568 (iPhone 5、5s、SE)
375×667 (iPhone 6–8)
414×736 (iPhone 6–8 Plus)
375×812 (iPhone X)
安卓就更五花八門了，難以統(tǒng)計(jì)，這著實(shí)讓新人設(shè)計(jì)師感到頭疼——?jiǎng)偞蜷_(kāi)ps就卡住了，不是電腦卡，是人腦卡了……到底要建多大的畫板？？？
先拋答案：
iOS：375X667px（1x倍率）或 750X1334px（2x倍率）
Android：360X640px（MDPI）或 720X1280px（XHDPI）
That's it!
注：倍率——蘋果和安卓分別根據(jù)屏幕像素密度的不同，定義了不同倍率的屏幕。iOS 規(guī)定以初代 iPhone 為基準(zhǔn)倍率，也就是一倍倍率，簡(jiǎn)稱 1x（320X480px，163ppi），安卓定義 mdpi（360X640px，160ppi）為基準(zhǔn)倍率，也即 1x。往后更大的屏幕在此基礎(chǔ)上乘以系數(shù)，便有了 2x、3x 的屏幕倍率。
iOS 的基準(zhǔn)倍率為 1x，相當(dāng)于安卓的 MDPI
http://movify.be/designing-at-1x/
WHY？
—
屏幕尺寸那么多，為何只選一個(gè)尺寸來(lái)做設(shè)計(jì)？
看組數(shù)據(jù)先，各屏幕在全球市場(chǎng)上的大致比例↓（截至2018年5月）
http://statcounter.com
占有率排名前兩位的尺寸分別是 360X640、375X667，即 Android 的主流尺寸及 iPhone8 的屏幕尺寸。
所以，按這個(gè)數(shù)據(jù)作圖就能滿足絕大部分使用者了。即，iOS：375X667（750X1334@2x）；安卓：360X640（720X1280@XHDPI）
疑問(wèn)：若以一款主流尺寸做設(shè)計(jì)（iPhone 8尺寸），那么到更大或更小的屏幕上（iPhone 8 Plus、iPhone SE）如何保證設(shè)計(jì)正確顯示？
https://medium.com/uxabc/artboard-size-5f0d457f7b32
回答這個(gè)問(wèn)題，就要談到一個(gè)概念——適配。
今天不講適配，但你大概可以理解為基于一個(gè)尺寸的設(shè)計(jì)其實(shí)是可以通過(guò)適配的方式合理顯示在不同大小的屏幕上的，其做法包含但不僅限于以下：等比縮放、調(diào)整間隙、調(diào)整控件尺寸等……上圖可以看出，iPhone 8 的尺寸是介于 iPhone SE 和 iPhone 8 Plus 之間的，所以它往左右兩邊適配都不會(huì)有太大的跨越，自然不會(huì)扯到蛋……往大可以適配到 iPhone 8 Plus；往小則可以適配到 iPhone SE。
所以，iPhone 8，一個(gè)中間尺寸，同時(shí)也是市場(chǎng)占有率最高的尺寸，無(wú)論從適配或市場(chǎng)占有率的出發(fā)點(diǎn)考慮，用它的尺寸做設(shè)計(jì)是最優(yōu)選項(xiàng)。（補(bǔ)充：iPhone 8 的屏幕尺寸同 iPhone 7，同 iPhone 6，是不是瞬間感覺(jué)占有率爆棚？?。?/span>
iPhone X……？
其實(shí) iPhone X 的屏幕物理寬度和 iPhone 8 是一樣的…只是垂直空間大了一些↓
iPhone X 縱向比 iPhone 8 多顯示一些內(nèi)容罷了。
https://medium.com/uxabc/artboard-size-5f0d457f7b32
安卓？同理。
目前安卓主流屏幕尺寸：360X640（720X1260@XHDPI、1080X1920@XXHDPI），所以，我們以 360X640 或 720X1280 為基準(zhǔn)做設(shè)計(jì)就 OK 咯。
基于以上，這也解釋了主流設(shè)計(jì)軟件的預(yù)設(shè)為何如此了↓
Sketch 的 iOS 畫板預(yù)設(shè)將 iPhone 8 排首位，安卓的直接 360X640
“墨刀”的預(yù)設(shè)
XD 的預(yù)設(shè)
AI 預(yù)設(shè)
PS 預(yù)設(shè)
殊途同歸！
—
肯德基賣現(xiàn)磨咖啡，麥當(dāng)勞也賣；肯德基賣中餐，麥當(dāng)勞也有?？v然是死對(duì)頭，大家也有一些趨同的跡象，最后都有點(diǎn)殊途同歸了。
iOS 和安卓也是如此！前文說(shuō)了，iOS 以 163ppi 為基準(zhǔn)倍率，安卓以 160ppi 為基準(zhǔn)倍率，也就是說(shuō)如果我們以基準(zhǔn)倍率作圖，兩個(gè)平臺(tái)的長(zhǎng)度單位基本可以畫上等號(hào)了 ，即 1 iOS pt ≈ 1 Android dp ≈ 1/160 inch，簡(jiǎn)直想喊三個(gè)字——在一起?。?！更驚喜的是，不管是 360X640（安卓主流尺寸）還是 375X667（iPhone主流尺寸）它們的長(zhǎng)寬比都是16：9?。?！
所以，殊途同歸的現(xiàn)實(shí)意義是什么？你猜到了嗎？
歡迎留言。此刻賣個(gè)關(guān)子~
總結(jié)
—
若以矢量軟件做設(shè)計(jì)，如：Sketch、XD、Figma、Ai等。新建 1x 倍率的畫布就可以，即 iOS：375X667px；安卓：360X640px。
若以位圖軟件做設(shè)計(jì)，如 PS，那么以 PS 自帶的預(yù)設(shè)尺寸即可（iOS 預(yù)設(shè)為 2x 倍率）即：iOS：750X1334px；安卓預(yù)設(shè)是1080X1920px（3x 倍率），但個(gè)人建議以 720X1280px（2x 倍率）設(shè)計(jì)比較好（原因：簡(jiǎn)化一些繁瑣的計(jì)算，盡量避免次像素出現(xiàn)）需要注意的是，PS 里預(yù)設(shè)畫板默認(rèn)為 2x、3x，在此情形下建議將 ppi 設(shè)為 144（針對(duì) 2x 倍率）或 216（針對(duì) 3x 倍率），這樣做是為了和官方的文字排版規(guī)范一一對(duì)應(yīng)（https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/）不展開(kāi)講了，親測(cè)有效。
The End
~希望解了你的惑~
參考文獻(xiàn)：https://medium.com/uxabc/artboard-size-5f0d457f7b32 by Taylor Hu，謝謝！
聯(lián)系客服
