關(guān)于APP標(biāo)注的知識(shí)和文章，網(wǎng)上有大把大把的！而且，老譚繼續(xù)跟大家總結(jié)一下iOS的界面標(biāo)注和Android界面標(biāo)注的區(qū)別和相應(yīng)的規(guī)范。也是回答某一些童鞋的想要知道iOS端和android的標(biāo)注有什么區(qū)別。

到底需要我們標(biāo)注哪些內(nèi)容呢？

所有的APP界面標(biāo)注總結(jié)起來就是：標(biāo)文字，標(biāo)圖片，標(biāo)間距，標(biāo)區(qū)域；

1、iOS端的界面標(biāo)注規(guī)范：

???

需要注意的：

A：我們標(biāo)注的尺寸是像素px，如果技術(shù)那邊的實(shí)際運(yùn)用到技術(shù)中的是像素的一半，即像素的一半=技術(shù)的尺寸(比如 ?2px ?= ?1pt）；例如：“分類”2個(gè)字，我標(biāo)準(zhǔn)的是36px，技術(shù)那邊的尺寸就是18pt；

B：所有文字，行間距的標(biāo)注的尺寸都是偶數(shù)；因?yàn)榧夹g(shù)那邊都是根據(jù)我們的尺寸除以2；

C：顏色的標(biāo)注有的技術(shù)要求16進(jìn)制，有的技術(shù)要求RGB，由于頁面的限制所以我只標(biāo)注了16進(jìn)制的，按16進(jìn)制和RGB都標(biāo)注的是最好的~

顏色的16進(jìn)制例子：#66cc66 ? ? 就是我們常用的顏色值。

顏色的RGB例子：RGB（102，204, 100） 我們H5前端會(huì)用到的

平臺(tái)不一樣，標(biāo)注的方法和相對(duì)應(yīng)的標(biāo)注元素也會(huì)不同。如下圖所示：

2、Android端的界面標(biāo)注規(guī)范：

?

安卓需要標(biāo)注的如上圖案例所示，比如圖片需要標(biāo)注寬高。

圖片距離上下左右的距離，文字大小顏色，這里的文字其實(shí)算兩個(gè)控件，標(biāo)題文字以及說明文字，需要單獨(dú)標(biāo)出等。

3、iOS和Android的界面標(biāo)注圖的區(qū)別匯總。

安卓標(biāo)注

1、設(shè)計(jì)時(shí)，用1280*720的設(shè)計(jì)稿進(jìn)行設(shè)計(jì)

2、切圖時(shí), 切hdpi，xhdpi，xxhdpi三套分辨率的圖標(biāo)和引導(dǎo)頁

3、標(biāo)注時(shí)，距離用DP，字號(hào)用sp

ios標(biāo)注

1、設(shè)計(jì)時(shí)，用1334*750的設(shè)計(jì)稿進(jìn)行設(shè)計(jì)

2、切圖時(shí), 切的@2x，@3x圖標(biāo)和引導(dǎo)頁

3、標(biāo)注時(shí)，距離和字號(hào)用pt或者px

4、APP界面標(biāo)注的目的

為了保證視覺設(shè)計(jì)稿的高品質(zhì)呈現(xiàn)，同時(shí)也是給程序員更好的做界面適配。

一個(gè)好的設(shè)計(jì)標(biāo)注是APP設(shè)計(jì)還原的有效保證，也是提高開發(fā)效率的保障！

5、當(dāng)然，說到了APP界面標(biāo)注，也要跟大家推薦3個(gè)不錯(cuò)的標(biāo)注工具。

（1）pxcook像素大廚

UI設(shè)計(jì)師效率提升利器，讓你專注于設(shè)計(jì)本質(zhì)，不再為標(biāo)注切圖而煩惱，從設(shè)計(jì)到實(shí)現(xiàn)一氣呵成。

（2）parker

Parker是一款運(yùn)行在photoshop中的標(biāo)注插件，它能夠自動(dòng)計(jì)算圖層的尺寸、位置、距離等元素，自動(dòng)為你生成標(biāo)注。它操作簡單，數(shù)據(jù)精確，能夠識(shí)別文字圖層各種屬性，自動(dòng)為你標(biāo)注。從此告別手工標(biāo)注界面的時(shí)代！屬于Cutterman旗下的產(chǎn)品。

（3）標(biāo)你妹 啊

一款UI設(shè)計(jì)師必備的UI自動(dòng)標(biāo)注工具。一款在線的標(biāo)注的工具。

另外更多詳細(xì)的標(biāo)注知識(shí)都在這里！點(diǎn)擊了解APP標(biāo)注知識(shí)