今天算是25學(xué)堂的一篇關(guān)于APP標(biāo)注最初級(jí)的入門(mén)教程。到底APP標(biāo)注是標(biāo)注哪些東西。

有什么注意事項(xiàng)。很高興你來(lái)到了25學(xué)堂，一個(gè)專(zhuān)門(mén)介紹和分享APP設(shè)計(jì)知識(shí)和APP設(shè)計(jì)工具的網(wǎng)絡(luò)課堂。

今天老譚老師跟大家來(lái)聊聊APP標(biāo)注的三要素：標(biāo)注顏色、標(biāo)注內(nèi)容和標(biāo)注位置。

上圖是非常簡(jiǎn)單的一份關(guān)于APP切圖和標(biāo)注的入門(mén)規(guī)范。值得大家好好的細(xì)看。

看完不明白，就來(lái)聽(tīng)老譚老師的嘮叨。 什么是APP標(biāo)注的三要素？

APP標(biāo)注三要素之標(biāo)注顏色

顏色用16進(jìn)制和RGB表示都可能用得到，建議標(biāo)注顏色時(shí)，兩種色值表達(dá)都標(biāo)上（16進(jìn)制&RGB）。

----------------------------------------------------------------------------------------------------------

APP標(biāo)注三要素之標(biāo)注內(nèi)容

文字需要提供：字體大?。╬x），字體顏色；

頂部標(biāo)題欄的背景色值，透明度；

標(biāo)題欄下方以及Tab bar上方其實(shí)有一條分割線，需要提供色值；

內(nèi)容顯示區(qū)域的背景色；

底部Tab bar的背景色值

----------------------------------------------------------------------------------------------------------

APP標(biāo)注三要素之標(biāo)注位置

所有元素統(tǒng)一距離屏幕最左24px。（這里的24px是全局性的數(shù)據(jù)。APP設(shè)計(jì)師可以直接和工程師溝通，也可以標(biāo)注，推薦標(biāo)注出來(lái)）

1、標(biāo)題欄：背景色，標(biāo)題欄文字大小，文字顏色；

2、Banner：所有撐滿(mǎn)橫屏的大圖，不需要橫向尺寸，把高度標(biāo)出了就可以了；

3、菜單圖標(biāo)：

圖標(biāo)的大小和圖標(biāo)的可點(diǎn)擊區(qū)域不一定一致。

也就是說(shuō)，圖標(biāo)可以做的很小，但是為了保證點(diǎn)擊的準(zhǔn)確性和流暢性，工程師可以把可點(diǎn)擊區(qū)域設(shè)置的很大，這樣標(biāo)注和切圖的時(shí)候就要注意，標(biāo)注的是可點(diǎn)擊區(qū)域的大小，切圖切的也是可點(diǎn)擊區(qū)域的大小，也就是用透明區(qū)域去補(bǔ)上，否則圖片會(huì)模糊。

4、模塊間隔：這個(gè)位置其實(shí)不是太重要，我習(xí)慣標(biāo)注上這里，麻煩能少則少。

5、圖片+文字：這個(gè)應(yīng)該比較常見(jiàn)，只標(biāo)注一個(gè)單位（圖+文）就可以了。

圖片需要標(biāo)注寬高。

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

6、Tab Bar：這個(gè)位置其實(shí)比較特殊，你可以單獨(dú)標(biāo)注圖標(biāo)大小+文字大?。贿€可以圖標(biāo)+文字算作一個(gè)控件，整個(gè)切出來(lái)；我們工程師的習(xí)慣是用整個(gè)的，也就是圖標(biāo)+文字算作一個(gè)ICON。

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

切圖的時(shí)候記得輸出個(gè)偶數(shù)尺寸的切片。

如果各位還有不明白的地方，可以加入25學(xué)堂官網(wǎng)的QQ群來(lái)咨詢(xún)或者學(xué)習(xí)。