Adobe XD 製圖版面尺寸

粉絲團有學生跑來問：「老師～為什麼 Adobe XD 預設的手機尺寸和官方文件數值不一樣啊！？我要聽哪個的？」

呃…這和解析度有關…

前情提要

之前在 px、pt、dp、sp 大混戰文中提到 dpi 是每一英吋裡的「點」數量，所以下圖左邊的方塊裡一個橫排有 2 格，dpi 是 2 。右邊的方塊裡一個橫排有 4 格，dpi 是 4。

px 指的是螢幕上最小單位，所以上圖左邊的方塊裡「紅色的一格」是 1px。右方方塊裡「紅色的一格」也是 1px。

上圖有 3 種不同尺寸的積木，如果要拿這三種積木拼出同樣尺寸的圖形（全部使用「1 單位」的積木），是不是紅色積木所需的塊數最少，藍色小積木需要最多塊？但紅色大積木邊緣鋸齒明顯，藍色小積木邊緣比較平滑？

套入 Apple 官方給的這張圖，如果最大塊的紅色積木對應 1x，黃色積木對應 2x，藍色積木如果是 3x。

手機的螢幕解析度越來越高這件事，你可以想像成「同樣的尺寸裡可以塞下更多的積木」，解析度越高，可以塞進去的積木就越多，每一單位（1px）的積木尺寸就越小，成品就會越精緻。

學生問：「老師～為什麼 Adobe XD 預設的手機尺寸和官方文件數值不一樣啊！？我要聽哪個的？」

哎呀單位都是 px 但數字真的不一樣呢～

要把「解析度」考慮進去啊！

官方 iPhone 8 尺寸 750px × 1334px 除以 2不就是 XD 寫的 375 x 667 了？可能是因為工程師刻 UI 單位是 @1x，且 @1x 設計師做圖最不容易出現數學換算之類的誤差，所以Adobe 以 1x 數值為基準。

Adobe XD 在製圖上都是向量，輸出時可選擇 1x、2x、3x，放大縮小什麼的不用自行換算煩惱。也就是說，設計師只要把注意力放在 UI 設計上，不需要額外花精力去計算切圖的 px 數值。