UI 經驗談——在 1x 倍率下做設計

最新 07-12

-卷首-

純技術文章一篇。

經驗之談，比較乾澀……

可以說很乾！

照著做就對了。

在 1x 像素密度下做設計的好處

不在 1x 倍率下做設計也不是不行，只是到後面你會發瘋，畢竟設計師中沒幾個人數學好的……

p.s. 此文所有論述基於軟體 Sketch；基於我本人的項目經驗並參考了一部分國外文章。

廢話少說。為什麼我建議大家在 1x 倍率下做設計，好處呢？？

好處1

- 避免計算

如果你不在 1x 倍率下做設計，等著你的將是無盡的計算！是的！無盡……我們知道，移動設備的屏幕五花八門，光 iOS 設備就 3 個倍率，安卓的主流倍率更是高達 5 個。相信我，如果你不聽我的，那麼在後期切圖和標註這倆環節上你會無比痛苦，設計過程也不好受。

舉個栗子：

假如你在 2x 倍率下做設計，將以下像素（px）轉換成點（Pt）：字體為 36 px 大小，左右頁邊距為 40 px，「天頭」（上邊距）為 20 px。

好！我就問你，如果在 3x 倍率的屏幕中呢？這些數值怎麼換算？？？要知道，程序員開發用得單位可不是 px 而是 pt（以 iOS 開發為例）！你大概要跟程序員說：「Hey！大哥，頁邊距可是 16.66 pt 了喲~~」——這大概瘋了吧？

你看程序員 GG 會不會噴你~

好處2

- iOS 和 Android 統一了！

簡直棒呆！iOS 和 Android 之間長度單位一一對應了！天啦！！簡直不敢相信！

且慢，好像哪裡不對？！iOS 開發單位是 pt，Android 的開發單位是 dp，怎麼就一樣呢？名字都不一樣。相信我，這是經過計算的，pt 是在 163 ppi 下誕生的，與像素一一對應；dp 是在 160 ppi 下誕生的，與像素一一對應（見下圖）也就是說，pt=1/163 inch，dp=1/160 inch。對，幾乎一樣！數值差異可能在小數點好幾位後才體現，忽略不計咯~不要矯情。

http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/

好處3

- 切圖直出！

好的，若你是在 2x 倍率下做得設計，想導出一些切圖。對於 iOS，您需要導出 0.5x（實際是 1x），1x（實際是 2x）和 1.5x（實際是 3x）

玩數字遊戲嗎？？不搞亂就算阿彌陀佛了！！

對於 Android，有五種尺寸。您將導出為 0.5x（實際是 1x / mdpi），0.75x（實際是 1.5x / hdpi），1x（實際是 2x / xhdpi）1.5x（實際是 3x / xxhdpi）和 2x（實際是 4x / xxxhdpi）

然而，當在 1x 倍率下設計時，這一切都變得乾淨、清晰。以 1x 輸出實際上得到的就是 1x 的切圖！！簡單、高效！

以下是 Sketch 中從 1x 和 2x 導出的對比

左邊基於 1x 倍率，右邊基於 2x 倍率

好處4

- 與開發 GG 使用的單位一致了！

程序員們開發時不使用像素為單位~他們用 pt 和 dp。

YES！在 1x 倍率下設計時，像素與 pt、dp 是一致的，所以你在 Sketch 里長度單位已然和程序員 GG 們一致了，這樣的好處是你們終於可以無障礙交流了，因為你們使用了一致的長度單位。完全不需要換算！

反例，如果你在 2x 倍率下作圖，你跟程序員描述一個 50 px 的長度時，他得除以 2，也就是 25 pt，然後才能用於他的開發環境！損人不利己是也……

好處5

- 預覽無壓力

不要以為在 1x 倍率下作圖在手機上預覽就會模糊。完全不用擔心，不管你用 Sketch Mirror 還是 Skala Preview，都沒問題~我保證！Perfect~

好處6

- 文件更小

您的設計文件將會更小，特別是包含一些點陣圖圖像時。如果您在 Sketch 中有許多畫板，你的電腦難免會卡頓。但在 1x 倍率下，畫板的尺寸就小了很多，電腦和人腦的壓力自然也就小了很多~

好處7

- 防患於未然~

YES！天知道以後還會出什麼倍率的手機，反正屏幕像素密度越來越大~~不用怕！反正在 1x 倍率下設計又不用的擔心咯~~出圖直接乘以係數就 OK 啦！

好處8

- 避免欺騙性

對的，在 2x 倍率下，也就是高像素密度的屏幕里，往往會有一些看上去很美的東西而導致設計師犯一些錯誤，比如，高分屏下總是能顯示更多的細節，設計師往往會過於刻畫它們，而忽視了當它們出現在 1x 倍率屏幕中的樣子，其實往往那些細節就會丟失或失效。

總結

以上言論基於個人經驗，因為我曾在此問題上吃過苦！是的，我有過一次以 2x 倍率為基準做設計，之後切圖和標註的時候差點沒煩死我自己，好在我們的開發很給力，自己寫了一個程序來幫我計算並糾正。總之，如果你們使用 Sketch 做 UI 設計，記得新建畫板的時候以一倍的倍率來設置（見下圖所示，其實 Sketch 已經把這個列為默認尺寸了，不要自作聰明地去改它們就好），百利而無一害！相信我。