• UI 設計
  • 更新:2026-07-14
  • 初版:2014-06-24

iOS、Android 字級單位

「這是靠我自己摸索出來的喔!是拿 App 截圖進 Photoshop 辛辛苦苦比對所量出來的尺寸。」這位 UI 先生/小姐,你知道世界上有 Guideline 這種文件嗎?「比起問別人,自己摸索出來的才記得深刻嘛!」你知道世界上有工程師這號人物嗎?浪費一堆時間在 PS 量半天為了什麼?文件上寫得一清二楚。字級要用是 pt 或是 px 轉頭問問 RD 立刻就有答案了。

iOS App

Color and Typography

對 RD 來說,iOS 的單位沒辦法自己設定,只能填數值。圖片單位是 px 這沒什麼異議,字級倒是一堆人也用 px…你們都不覺得字級標 px 給 RD 後,出來的實品尺寸都有問題嗎?會和 RD 靠北圖片歪了 1px 什麼的,怎麼都不覺得字體小那麼多怪怪的?還是已經對 RD 開罵、說他們都不依標示文件做圖的?

iOS 的字級單位是「pt」

在 iPhone4 剛出的時候我就和老公因為標示尺寸的問題大吵一架並當場做實驗測試過了,包含 1x、2x、pt、px 這幾種情況。不要再因為自己標 px 結果成品和 Mockup 不一樣就責怪 RD 瞎了眼,他們很無辜。

Web

CSS font-size,單位用 px、pt、em 都可以。
本文目的不在於討論Web的字級,知道 1pt 並不等於 1px 就好。
(只有在 72dpi 的特定條件下 1px = 1pt。)

Android App

Dimension
Typography

官方文件直接擺明說了:在 mdpi 的時候 1dp = 1sp = 1px,(dp 是 Android 的螢幕抽象單位;sp 類似 dp,也是抽象單位,字級專用)。但 Photoshop 沒有 sp 可以設,只能設 pt 或 px。如果你是要做 Android 的圖,字級直接設 px 吧,文件沒有直接提到 pt 要怎麼換算成 Android 專用的 dp 或 sp 單位。

官網直接寫明不推薦使用 px,不過那份文件是給 RD 看的,設計師不拿 px 當製圖單位也很難處理。如果你對 Android 螢幕尺寸、各解析度原理似懂非懂,做 mdpi(1x)去縮放給其他尺寸是種比較安全的作法。

題外話

當年我就是數學不好、英文很破,才跑去念設計,想說這條路總可以和數學英文絕緣了吧?事實證明我根本在作夢,以前逃避現實的下場就是現在遭報應,該學的一項也逃不掉。還有,我真的覺得不看 Guideline 的 UI/UX 設計師根本敵方派來的,搞得 RD 做個專案像是 1 打 9,還不能靠人頭數(實力)逼隊友聽話,想辦法補洞填坑還會被靠北自作主張。(也是有腦殘故意搗蛋的 RD 啦、不過目前為止運氣很好沒遇到幾個。)

更多文章

wave
iOS 解析度製圖設定

有人跟我提到:「iOS 在 psd 設計時解析度建議設為 144,這樣文字大小才會是正確的」。當年 iPhone4 剛出的某個晚上我和老公躺在床上聊 iOS 變 2x 了會遇到什麼狀況。聊著聊著兩人就槓上吵架了,也不管當時是凌晨兩點,通通爬起來開燈開電腦,一個翻出 Photoshop、一個翻出 Xcode,打字、設定字型字級、拿出 iPhone 設定一樣的字型字級。之後,我的製圖習慣一直使用 72 dpi

工作清單:切圖

切圖有很多種方法,但切出來的圖只會有兩種:1.可以用。2.被退件。圖切出來會交給 F2E 或 RD 接手,請給他們能夠使用的圖方便作業。有不懂、不確定的部份請在切圖之前就先問過他們要怎麼處理,他們肯定會回答你。(不回答就是他們有很大的機率拿到爛圖拖長自己工時,誰敢不理你啊?)

iPhone 6 及 Plus 製圖建議

iPhone 6 和 Plus 新機一發表,群裡就有人跑來哀號說老闆叫他準備 iPhone6 的適配,可現在什麼文檔都沒有完整啊!在很多細節不明的情況下,我只能建議這種最保險安全的作法:做 @1x,放大給 @2x 和 @3x 用。以下情境預設為做一套 Mockup 要切出各種尺寸的圖。

iOS Guideline 怎麼看?(1)


這是給 UI 看的教學。發現太多人不看Guideline…基礎問題問了又問,明明官方文件擺在那。就算英文看不懂,Google 打下去對岸有很多翻譯成簡中版的。最最少留意一下尺寸吧?(這次的 iOS7 官方文件省略很多沒寫到、建議回頭去看看 iOS6 的Guideline,兩份加起來比較紮實。)

Akane Lee

Akane Lee

內心戲小劇場超多!每個事件背後,都有無數個為什麼,天天和自己的腦內聲音吵架。

Comments

wave
comments powered by Disqus

Press ESC to close