今天25學(xué)堂跟大家來(lái)聊一聊?Android APP標(biāo)注尺寸入門(mén)教程和app標(biāo)注工具。

眾所周知，對(duì)追求高還原的移動(dòng)APP產(chǎn)品來(lái)說(shuō)，移動(dòng)APP設(shè)計(jì)稿上的精確尺寸標(biāo)記是必不可少的的一步。很多設(shè)計(jì)師都抱怨APP程序員做的效果太差，跟設(shè)計(jì)圖相差太多，你有沒(méi)有提供最規(guī)范的Android APP界面標(biāo)注尺寸呢？ 有沒(méi)有提供設(shè)計(jì)師的UI設(shè)計(jì)規(guī)范給程序員呢？

其實(shí)，作為一名移動(dòng)APP設(shè)計(jì)師，這些我們都應(yīng)該在于Android程序員溝通好的基礎(chǔ)上，盡最大的努力為他們提供最全的設(shè)計(jì)規(guī)范和設(shè)計(jì)標(biāo)注、測(cè)量等信息。

下面是某安卓設(shè)計(jì)師的實(shí)踐和工作總結(jié)。值得參考，也可以說(shuō)是設(shè)計(jì) Android APP的最佳實(shí)踐：

1. 畫(huà)布大小定位 720 x 1280，72 dpi

2. 只使用偶數(shù)單位的尺寸，比如 96 px 的列表項(xiàng)高度，16 px 的邊距，64 px 的圖標(biāo)邊長(zhǎng)

3. 只使用 24 pt，28 pt，36 pt 和 44 pt 的字體

4. 設(shè)計(jì)完成以后，所有尺寸的 px 值除以 2 作為 dp 數(shù)值交給工程師

5. 所有字體的 pt 值除以 2 作為 sp 數(shù)值交給工程師

6. 所有切圖變成三份，分別是原始大小、縮小 1.5 倍，縮小 2 倍，分別作為 xhdpi，hdpi，mdpi 的資源交給工程師

具體的如下圖：

下面是一些解答你疑問(wèn)的安卓術(shù)語(yǔ)啦！

為什么要選擇720*1280來(lái)作為設(shè)計(jì)稿，而且分辨率設(shè)置為72

因?yàn)?320 dpi 屏幕的分辨率最常見(jiàn)的是 720 x 1280，以這個(gè)尺寸作為畫(huà)布尺寸，是最帶感的，這樣的設(shè)計(jì)稿就和應(yīng)用在最多數(shù)的 320 dpi 的機(jī)器上運(yùn)行起來(lái)的樣子一樣。

而且挑密度最大的，因?yàn)閳D片縮小比放大好，放大會(huì)失真，選 320 dpi 作為目標(biāo)屏幕，為其他屏幕提供圖片時(shí)，只需要縮小。

72 dpi 是 Photoshop 的默認(rèn)設(shè)置，不要改就好，這個(gè)數(shù)字和后面的換算有關(guān)系。

Android 4.0 以后的設(shè)計(jì)規(guī)范中建議只使用四種字號(hào)，分別是 12 sp，14 sp，18 sp 和 22 sp，這也是 Android framework 用到的全部字號(hào)。

下面25學(xué)堂根據(jù)前輩的一些經(jīng)驗(yàn)，分享2個(gè)安卓字體的換算方式：

有兩種算法：

算法一

根據(jù) dp 的定義「在 160 dpi 的屏幕上，1 dp 大約等于 1 px」，那么在 320 dpi 的屏幕上，1 dp 約等于 2 px，我們就是為 320 dpi 做的設(shè)計(jì)，所有 px 值除以 2 就是 dp 值。字體略復(fù)雜一點(diǎn)，1 pt = 1 / 72 inch，即在 72 dpi 的畫(huà)布上，1 pt = 1 px，我們的畫(huà)布就是 72 dpi，又有 1 sp 約等于 2 px（同 dp 的定義），所以 1 sp = 2 pt，所有 pt 值除以 2 就是 sp 值。

算法二

可以想象是把一個(gè) 320 dpi 的手機(jī)屏幕放大到了 Photoshop 里，放大倍數(shù)是 320 / 72，即手機(jī)上的 1 dp，在畫(huà)布上就是 320 / 72 dp，而 1 dp = 1 / 160 inch，所以在畫(huà)布上就是 2 / 72 inch，而畫(huà)布是 72 dpi，所以在畫(huà)布上就是 2 px，即手機(jī)上的 1 dp 對(duì)應(yīng)畫(huà)布上的 2 px。字體的計(jì)算一樣，只是多一個(gè)在 72 dpi 上，1 pt = 1 px 的轉(zhuǎn)換。

至此，都算清楚了，在這個(gè)畫(huà)布上，px 到 dp，pt 到 sp 都是除以 2 的關(guān)系。

最后，給 320 dpi 做的圖片，到 240 dpi，160 dpi 上就要分別縮小 1.5 倍和縮小 2 倍。

第二部分：常用的一些APP標(biāo)注工具

第一個(gè)：馬克鰻

第二個(gè)：苦逼APPUI設(shè)計(jì)師的標(biāo)注切圖的利器—PxCook