【轉】設計師如何爲 Android 應用標註尺寸

下面這篇文字是轉載來的,版權歸原作者所有

—————-

對追求高還原的產品來說,設計稿上的精確尺寸標記是必不可少的。但 Android 生態中各種尺寸和密度不同的設備讓這件事情變得麻煩,設計師好不容易搞清楚了什麼是 dp ,什麼是 sp,但 Photoshop 裏沒有這些單位啊,還要換算?這就要了命了。

如果你不想搞清楚這件事的來龍去脈,就先拿這個結論去用吧。

設計 Android 應用的最佳實踐
1. 畫布大小定位 720 x 1280,72 dpi
2. 只使用偶數單位的尺寸,比如 96 px 的列表項高度,16 px 的邊距,64 px 的圖標邊長
3. 只使用 24 pt,28 pt,36 pt 和 44 pt 的字體
4. 設計完成以後,所有尺寸的 px 值除以 2 作爲 dp 數值交給工程師
5. 所有字體的 pt 值除以 2 作爲 sp 數值交給工程師
6. 所有切圖變成三份,分別是原始大小、縮小 1.5 倍,縮小 2 倍,分別作爲 xhdpi,hdpi,mdpi 的資源交給工程師

如果你還有好奇心,可以繼續往下看這個結論是怎麼來的。
相信你已經看過這篇文檔中關於 Android 中各種尺寸單位的介紹,沒看過的最好看一下

http://developer.android.com/guide/topics/resources/more-resources.html#Dimension

在 Android 應用設計中涉及到的單位都是密度無關像素(Density-independent Pixels),這個說法太拗口了,通俗點講,Android 應用設計中只用物理尺寸,類似釐米,英寸這種單位,不用像素。之所以這樣,是由於像素在手機領域說不清楚問題,比方說規定列表項高度是 48 px,在 HTC C510e 上看起來就不錯,但在三星 Galaxy SIII 上看起來就會非常矮,導致很難看,這是因爲這兩個機器的屏幕的 dpi 相差很大,前一個大約 160 dpi,後一個大約 320 dpi。這就是手機屏幕不同帶來的問題,如果不考慮平板,不同主要是密度不同,而不是尺寸不同,也不是分辨率不同,給設計帶來困擾的根本是屏幕密度不同。不幸的是,很少人對這個有概念,通常介紹手機,會說屏幕尺寸,3.5 寸還是 4 寸,會說分辨率,480 x 800 還是 720 x 1280,但通常不會介紹屏幕密度是多少。其實通過尺寸和分辨率可以算出密度來,dpi 的 定義是 dot per inch,即每英寸的像素點,把分辨率和尺寸除一除就能得到。一個不確切的分法是,720 x 1280 的手機很可能接近 320 dpi (Android 裏的 xhdpi),480 x 800 的手機很可能接近 240 dpi (Android 裏的 hdpi)。

Android 選擇的單位是 dp 和 sp,dp 的定義是「在 160 dpi 的屏幕上,1 dp 大約等於 1 px」。這個說法也很拗口,簡單點說,1 dp ≈ 1 / 160 inch,他就是物理界的一長度單位。用這個單位設計就統一了,比方說規定列表項高度是 48 dp,在所有手機上看起來都差不多是 48 / 160 inch 那麼高,雖然在不同手機上它對應了不一樣多的像素點,但這個轉換是 Android 手機完成的,每個 Android 手機都得知道在我這 1 dp 對應多少像素。sp 也是同樣解釋,18 sp 的字在所有手機上看起來應該都差不多大(自己改了字體大小設置的除外)。看到這裏,可能有人會想,那豈不是不同手機顯示的內容不同。確實是這樣,同樣一個列表,在 A 手機上只能顯示五行,但在 B 個手機上就能顯示六行;還是這個列表,在 A 手機上文字左邊的留白就顯得沒有 B 手機多。

鋪陳完了,逐條解釋開始的最佳實踐。

設計師在設計的時候是用不了 dp 的,他不可能拖一個 48 x 48 dp 的框,不可能設置一個 8 dp 的邊距,Photoshop 裏全是 px。於是我們就只有挑一個特定密度的屏幕,在這個特定密度的屏幕上,dp 和 px 的關係是確定,把設計做了,再把 px 轉換成 dp 給工程師。另外有一點是,長度可以乘除一下就解決,圖片是不能除的,圖片必須手動縮放。

我們挑哪一個密度好呢?答案是挑密度最大的,因爲圖片縮小比放大好,放大會失真,選 320 dpi 作爲目標屏幕,爲其他屏幕提供圖片時,只需要縮小。而 320 dpi 屏幕的分辨率最常見的是 720 x 1280,以這個尺寸作爲畫布尺寸,是最帶感的,這樣的設計稿就和應用在最多數的 320 dpi 的機器上運行起來的樣子一樣。當然你可以選其他畫布大小,但再大也不見得方便,這個大小也夠施展了。72 dpi 是 Photoshop 的默認設置,不要改就好,這個數字和後面的換算有關係。

字體的問題,Android 4.0 以後的設計規範中建議只使用四種字號,分別是 12 sp,14 sp,18 sp 和 22 sp,這也是 Android framework 用到的全部字號。我們需要找到在這個畫布上,這些字號和 pt 的對應關係,以及,px 和 dp 的對應關係。有兩種算法:

  • 算法一
    根據 dp 的定義「在 160 dpi 的屏幕上,1 dp 大約等於 1 px」,那麼在 320 dpi 的屏幕上,1 dp 約等於 2 px,我們就是爲 320 dpi 做的設計,所有 px 值除以 2 就是 dp 值。字體略複雜一點,1 pt = 1 / 72 inch,即在 72 dpi 的畫布上,1 pt = 1 px,我們的畫布就是 72 dpi,又有 1 sp 約等於 2 px(同 dp 的定義),所以 1 sp = 2 pt,所有 pt 值除以 2 就是 sp 值。
  • 算法二
    可以想象是把一個 320 dpi 的手機屏幕放大到了 Photoshop 裏,放大倍數是 320 / 72,即手機上的 1 dp,在畫布上就是 320 / 72 dp,而 1 dp = 1 / 160 inch,所以在畫布上就是 2 / 72 inch,而畫布是 72 dpi,所以在畫布上就是 2 px,即手機上的 1 dp 對應畫布上的 2 px。字體的計算一樣,只是多一個在 72 dpi 上,1 pt = 1 px 的轉換。

至此,都算清楚了,在這個畫布上,px 到 dp,pt 到 sp 都是除以 2 的關係。

最後,給 320 dpi 做的圖片,到 240 dpi,160 dpi 上就要分別縮小 1.5 倍和縮小 2 倍。120 dpi 的機器已經很罕見,可以不考慮了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章