移動端 UI 適配最佳實踐（下）

時間 2019-11-10

標籤移動適配最佳實踐欄目無線简体版

原文原文鏈接

前兩篇更多的是理論部分，這篇主要是實踐。html

身爲攻城獅的你，是否曾想過：若是設計師能按邏輯像素來標註，是多麼美好！可現實是，你不得不拿着標註再除個 2 或 3佈局

身爲設計師的你，是否曾想過：攻城獅實現的 UI 可以和同設計稿同樣，可現實是，你不得不忍受着，某些地方差幾個像素或次像素post

本篇可能不能解決全部問題，但但願能解決一部分問題字體

關於倍率的思考

前兩篇談到了邏輯像素和倍率，當 UI 元素的長度單位爲邏輯像素時，系統在渲染時會根據倍率自動換算成物理像素。google

正由於如此，攻城獅寫佈局文件時用邏輯像素爲單位。攻城獅就想了：若是設計師給的標註是以邏輯像素爲單位的，想必是極好的。設計師就想了，若是以邏輯像素標註是方便了你，但是對我有好處沒？設計

答案是有的，大大的有！好比快速切出 2X，3X 的資源等等。那麼問題來了，該怎麼作？htm

How to

本文以 photoshop 爲例。資源

photoshop 裏默認點/派卡大小爲 72 點 / 英寸，而新建文檔時，設置分辨率爲 72 像素 / 英寸（這也是默認值），那麼在該文檔上 1 英寸上有 72 個點、1 英寸上有 72 個像素，即 1 點 = 1 像素。若是改變分辨率會怎麼樣？咱們試試。將分辨率設置爲 216，此時文檔上 1英寸仍是 72 個點，可是 1英寸上有 216 個像素，即 1 點 = 3 像素。回憶下，前面已經討論到：當倍率爲 1 時，1 邏輯像素 = 1 像素；當倍率爲 3 時，1 邏輯像素 = 3 像素。也就是說 photoshop 中的點就是邏輯像素。文檔

聰明的你，已經明白了吧，更改文檔分辨率便可更改倍率，這樣就能夠快速導出 2X，3X的圖啦！來幾張圖get

設置photoshop的標尺單位爲點

假設這是你的設計稿，如圖所示，32px asset (32dp @ MDPI) 即 32 邏輯像素在倍率爲 1 時，長度爲 32 像素。

如上圖所示：分辨率爲 72 px/in，文檔大小 32 points，像素大小 32 px

將分辨率設置爲 216 px/in（只更改這一個值），你會看到像素大小自動變爲 96 px，而文檔大小沒有變化。此時，你的設計稿會怎樣？（須要在矢量圖層上設計，不然圖會變虛，設計師們懂的）

96px asset (32dp @ XXHDPI) 即 32 邏輯像素在倍率爲 3 時，長度爲 96 像素

全部的單位都是以點爲單位的，也就是攻城獅們須要的邏輯像素單位咯。既可以快速導出不一樣倍率的資源圖，又能方便攻城獅們，皆大歡喜！

幾點小建議

在矢量圖層上設計且分辨率爲 1X
文檔（畫布）大小的設置

一般，對於手機，設計 5 英寸的，對於平板，設計 9 英寸的，就能夠覆蓋絕大多數機型了。例如：設計稿基於 360 x 640 dp，分辨率爲 72 ppi，此時你想在 720 x 1280 px 的手機上看一看效果，很簡單，這個倍率爲 2 ，只需將分辨率設爲 144 ppi ；那 1080 x 1920 px 呢？倍率爲3咯，分辨率改爲 216 ppi 便可。