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 的版面尺寸

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

從 Apple 官方文件 Adaptivity and Layout - Visual Design - iOS - Human Interface Guidelines - Apple Developer 中我截取幾支手機的尺寸。

  • iPhone XS Max 1242px × 2688px
  • iPhone XS 1125px × 2436px
  • iPhone 8 750px × 1334px

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

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

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

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

Akane Lee

Akane Lee

幫助你快速學會 UI/UX 實用技巧,結合理論與實作,短時間內擺脫設計瓶頸,讓你每個專案都能交出滿意的成果!

Comments

wave
comments powered by Disqus

Press ESC to close