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 啦、不過目前為止運氣很好沒遇到幾個。)

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close