原文來(lái)自u(píng)i中國(guó)-BAT_LCK
標(biāo)注之前一定要跟開(kāi)發(fā)溝通好跨释，標(biāo)注之前一定要跟開(kāi)發(fā)溝通好卡者，標(biāo)注之前一定要跟開(kāi)發(fā)溝通好
這里的標(biāo)注軟件用的是我第一期推薦的PxCook(像素大廚)妥曲，先標(biāo)一個(gè)空白文檔，看看都需要什么吧钓株。
這里要說(shuō)一句您单，PxCook雖然可以自動(dòng)讀取顏色斋荞，但是還不能對(duì)PSD文檔里設(shè)置的透明度讀取，所以如果你用了透明色虐秦，推薦你用文字標(biāo)注直接寫(xiě)出來(lái)原色值以及透明度平酿。
基本上我并不使用PXCook里面的顏色標(biāo)注工具，而是使用文字標(biāo)注工具悦陋，因?yàn)橐獦?biāo)識(shí)兩種色值蜈彼，PxCook只能顯示一種色值。
一般我的習(xí)慣是PS和標(biāo)注軟件同時(shí)打開(kāi)俺驶，因?yàn)橛袝r(shí)候標(biāo)注軟件并不能完全的把PSD文件里的東西標(biāo)注出來(lái)幸逆，所以標(biāo)注也要靈活運(yùn)用，如果無(wú)法標(biāo)注痒钝，就到PS里查看一下秉颗，然后再使用文字標(biāo)注說(shuō)明一下。
標(biāo)注顏色是使用16進(jìn)制送矩，還是RGB：
都用得到蚕甥，要看實(shí)現(xiàn)什么東西。索性把16進(jìn)制和RGB都給標(biāo)出來(lái)栋荸，也省的工程師一遍遍找了菇怀。
建議標(biāo)注顏色時(shí)凭舶，兩種色值表達(dá)都標(biāo)上(16進(jìn)制&RGB)。
你需要標(biāo)注的內(nèi)容有：
1.文字需要提供：字體大小(px),字體顏色爱沟；
2.頂部標(biāo)題欄的背景色值帅霜，透明度；
3.標(biāo)題欄下方以及Tab bar上方其實(shí)有一條分割線呼伸，需要提供色值身冀；
4.內(nèi)容顯示區(qū)域的背景色(如果是全部頁(yè)面白色，那就和工程師說(shuō)一句就好啦)括享；
5.底部Tab bar的背景色值搂根。
因?yàn)轫?yè)面的種類(lèi)成千上萬(wàn)，我想每種頁(yè)面都講一下铃辖，但是不現(xiàn)實(shí)剩愧，所以我希望可以舉一反三。
下面的是一個(gè)比較普通的首頁(yè)頁(yè)面娇斩，但是基本上一款A(yù)PP中應(yīng)該標(biāo)的元素都有了~
一般頁(yè)面你需要標(biāo)注這些地方：
所有元素統(tǒng)一距離屏幕最左24px(這種全局性的數(shù)據(jù)可以直接和工程師溝通仁卷，也可以標(biāo)注，推薦標(biāo)注出來(lái))
1.標(biāo)題欄：背景色犬第，標(biāo)題欄文字大小锦积，文字顏色(不再贅述)；
2.Banner：所有撐滿橫屏的大圖瓶殃，不需要橫向尺寸充包，把高度標(biāo)出了就可以了;
3.菜單圖標(biāo)：
?圖標(biāo)的大小和圖標(biāo)的可點(diǎn)擊區(qū)域不一定一致，也就是說(shuō)遥椿，圖標(biāo)可以很小，但是工程師可以把可點(diǎn)擊區(qū)域設(shè)置的很大淆储，這樣標(biāo)注 ? ? 和切圖的時(shí)候就要注意冠场，你標(biāo)注的是可點(diǎn)擊區(qū)域的大小，切圖切的也是可點(diǎn)擊區(qū)域的大小本砰，也就是用透明區(qū)域去補(bǔ)上碴裙。在設(shè)計(jì) ? ? 的時(shí)候就要考慮可點(diǎn)擊區(qū)域的范圍，比如X寶購(gòu)物車(chē)頁(yè)面左側(cè)的小圈点额，可點(diǎn)擊區(qū)域要比實(shí)際小圈尺寸大很多舔株。
?這種類(lèi)型的圖標(biāo)需要標(biāo)注圖標(biāo)點(diǎn)擊區(qū)域大小，圖標(biāo)距離屏幕最左最右以及上下的距離还棱。至于圖標(biāo)的間距载慈，因?yàn)橛行r(shí)候可能 ? ? ? 設(shè)計(jì)師不能完全做到1px不差，所以我基本不標(biāo)珍手，交給工程師办铡，設(shè)置為等距離(還是要和你的搭檔溝通怎么去標(biāo)注）辞做；
4.模塊間隔：這個(gè)位置其實(shí)不是太重要，我習(xí)慣標(biāo)注上這里寡具，麻煩能少則少秤茅。
5.圖片+文字：這個(gè)應(yīng)該比較常見(jiàn)，只標(biāo)注一個(gè)單位(圖+文)就可以了童叠。
圖片需要標(biāo)注寬高框喳，因?yàn)楣こ處熞O(shè)置圖片區(qū)域，從后臺(tái)調(diào)取厦坛，可以這么說(shuō)帖努，軟件里除了橫屏撐滿的圖，基本上所有的圖片都要標(biāo)注寬高粪般。
圖片距離上下左右的距離拼余，文字大小顏色，這里的文字其實(shí)算兩個(gè)控件亩歹，標(biāo)題文字以及說(shuō)明文字匙监，需要單獨(dú)標(biāo)出。
Tab Bar：
這個(gè)位置其實(shí)比較特殊小作，你可以單獨(dú)標(biāo)注圖標(biāo)大小+文字大型だ选；還可以圖標(biāo)文字算作一個(gè)控件顾稀，整個(gè)切出來(lái)达罗；
我們工程師的習(xí)慣是用整個(gè)的，也就是圖標(biāo)+文字算作一個(gè)ICON静秆，所以我基本不怎么標(biāo)注單獨(dú)的圖標(biāo)(這里可以和你的搭檔去溝通一下粮揉，看他是什么開(kāi)發(fā)習(xí)慣)。
關(guān)于列表頁(yè)類(lèi)型的標(biāo)注問(wèn)題
一款A(yù)PP的設(shè)計(jì)稿從設(shè)計(jì)到切圖③
· 介紹一下工作流程以及后期切圖資源的輸出 ·
還是要再說(shuō)一句抚笔，我寫(xiě)的不是一種規(guī)范扶认，只是一種工作方法，所以一定要靈活~
第一期 ? 一款A(yù)PP的設(shè)計(jì)稿從設(shè)計(jì)到切圖①
第二期 ? 一款A(yù)PP的設(shè)計(jì)稿從設(shè)計(jì)到切圖②
本期只講標(biāo)注的問(wèn)題殊橙，頁(yè)面怎么標(biāo)辐宾，標(biāo)哪里，可能我涉及不到所有類(lèi)型頁(yè)面膨蛮，但舉一反五足夠了叠纹；切片輸出以及切片命名我們下期再說(shuō)(如果有錯(cuò)誤，請(qǐng)一定要及時(shí)幫我指出敞葛，我不想誤人子弟)誉察。
標(biāo)注是重中之重，工程師能不能完整的還原設(shè)計(jì)稿制肮，很大一部分取決于標(biāo)注冒窍；如果不清楚你該怎么標(biāo)递沪，別怕丟人(我知道有些設(shè)計(jì)師，特別是剛接觸工作的設(shè)計(jì)師并不敢張嘴去問(wèn))综液，一定要和工程師溝通款慨！包括怎么標(biāo)，怎么切谬莹。
每個(gè)工程師實(shí)現(xiàn)效果的方法不同檩奠，我在這里所說(shuō)的，是我的標(biāo)注習(xí)慣附帽，也就是我們工程師的開(kāi)發(fā)習(xí)慣埠戳，但應(yīng)該適用于大部分的設(shè)計(jì)師和工程師。
不需要每一張效果圖都進(jìn)行標(biāo)注蕉扮，你標(biāo)注的頁(yè)面能保證工程師開(kāi)發(fā)每個(gè)頁(yè)面的時(shí)候都能順利進(jìn)行即可整胃；當(dāng)然，這要看跟你配合的工程師的習(xí)慣喳钟，比如我現(xiàn)在搭檔的兩位IOS工程師屁使，一位要求我全都要標(biāo)注，另一位要求我標(biāo)注代表性頁(yè)面就好(記得標(biāo)注之前一定要溝通清楚)奔则。
這里的標(biāo)注軟件用的是我第一期推薦的PxCook(像素大廚)蛮寂，先標(biāo)一個(gè)空白文檔，看看都需要什么吧
這里要說(shuō)一句易茬，PxCook雖然可以自動(dòng)讀取顏色酬蹋，但是還不能對(duì)PSD文檔里設(shè)置的透明度讀取，所以如果你用了透明色抽莱，推薦你用文字標(biāo)注直接寫(xiě)出來(lái)原色值以及透明度范抓。
基本上我并不使用PXCook里面的顏色標(biāo)注工具，而是使用文字標(biāo)注工具岸蜗，因?yàn)橐獦?biāo)識(shí)兩種色值尉咕，PxCook只能顯示一種色值。
一般我的習(xí)慣是PS和標(biāo)注軟件同時(shí)打開(kāi)璃岳，因?yàn)橛袝r(shí)候標(biāo)注軟件并不能完全的把PSD文件里的東西標(biāo)注出來(lái)，所以標(biāo)注也要靈活運(yùn)用悔捶，如果無(wú)法標(biāo)注铃慷，就到PS里查看一下，然后再使用文字標(biāo)注說(shuō)明一下蜕该。
如果你有更好的標(biāo)注軟件犁柜，歡迎推薦給我以及更多人！
標(biāo)注顏色是使用16進(jìn)制堂淡，還是RGB：
都用得到馋缅，要看實(shí)現(xiàn)什么東西扒腕。索性把16進(jìn)制和RGB都給標(biāo)出來(lái)，也省的工程師一遍遍找了萤悴。
建議標(biāo)注顏色時(shí)瘾腰，兩種色值表達(dá)都標(biāo)上(16進(jìn)制&RGB)。
你需要標(biāo)注的內(nèi)容有：
1.文字需要提供：字體大小(px),字體顏色覆履；
2.頂部標(biāo)題欄的背景色值蹋盆，透明度；
3.標(biāo)題欄下方以及Tab bar上方其實(shí)有一條分割線硝全，需要提供色值栖雾；
4.內(nèi)容顯示區(qū)域的背景色(如果是全部頁(yè)面白色，那就和工程師說(shuō)一句就好啦)伟众；
5.底部Tab bar的背景色值析藕。
因?yàn)轫?yè)面的種類(lèi)成千上萬(wàn)，我想每種頁(yè)面都講一下凳厢，但是不現(xiàn)實(shí)账胧，所以我希望可以舉一反三。
下面的是一個(gè)比較普通的首頁(yè)頁(yè)面数初，但是基本上一款A(yù)PP中應(yīng)該標(biāo)的元素都有了~
一般頁(yè)面你需要標(biāo)注這些地方：
所有元素統(tǒng)一距離屏幕最左24px(這種全局性的數(shù)據(jù)可以直接和工程師溝通找爱，也可以標(biāo)注，推薦標(biāo)注出來(lái))
1.標(biāo)題欄：背景色泡孩，標(biāo)題欄文字大小车摄，文字顏色(不再贅述)；
2.Banner：所有撐滿橫屏的大圖仑鸥，不需要橫向尺寸吮播，把高度標(biāo)出了就可以了;
3.菜單圖標(biāo)：
?圖標(biāo)的大小和圖標(biāo)的可點(diǎn)擊區(qū)域不一定一致，也就是說(shuō)眼俊，圖標(biāo)可以很小意狠，但是工程師可以把可點(diǎn)擊區(qū)域設(shè)置的很大，這樣標(biāo)注 ? ? 和切圖的時(shí)候就要注意疮胖，你標(biāo)注的是可點(diǎn)擊區(qū)域的大小环戈，切圖切的也是可點(diǎn)擊區(qū)域的大小，也就是用透明區(qū)域去補(bǔ)上澎灸。在設(shè)計(jì) ? ? 的時(shí)候就要考慮可點(diǎn)擊區(qū)域的范圍院塞，比如X寶購(gòu)物車(chē)頁(yè)面左側(cè)的小圈，可點(diǎn)擊區(qū)域要比實(shí)際小圈尺寸大很多性昭。
?這種類(lèi)型的圖標(biāo)需要標(biāo)注圖標(biāo)點(diǎn)擊區(qū)域大小拦止，圖標(biāo)距離屏幕最左最右以及上下的距離。至于圖標(biāo)的間距，因?yàn)橛行r(shí)候可能 ? ? ? 設(shè)計(jì)師不能完全做到1px不差汹族，所以我基本不標(biāo)萧求，交給工程師，設(shè)置為等距離(還是要和你的搭檔溝通怎么去標(biāo)注）顶瞒；
4.模塊間隔：這個(gè)位置其實(shí)不是太重要夸政，我習(xí)慣標(biāo)注上這里，麻煩能少則少搁拙。
5.圖片+文字：這個(gè)應(yīng)該比較常見(jiàn)秒梳，只標(biāo)注一個(gè)單位(圖+文)就可以了。
圖片需要標(biāo)注寬高箕速，因?yàn)楣こ處熞O(shè)置圖片區(qū)域酪碘，從后臺(tái)調(diào)取，可以這么說(shuō)盐茎，軟件里除了橫屏撐滿的圖兴垦，基本上所有的圖片都要標(biāo)注寬高。
圖片距離上下左右的距離字柠，文字大小顏色探越，這里的文字其實(shí)算兩個(gè)控件，標(biāo)題文字以及說(shuō)明文字窑业，需要單獨(dú)標(biāo)出钦幔。
Tab Bar：
這個(gè)位置其實(shí)比較特殊，你可以單獨(dú)標(biāo)注圖標(biāo)大小+文字大谐１鲤氢；還可以圖標(biāo)文字算作一個(gè)控件，整個(gè)切出來(lái)西潘；
我們工程師的習(xí)慣是用整個(gè)的卷玉，也就是圖標(biāo)+文字算作一個(gè)ICON，所以我基本不怎么標(biāo)注單獨(dú)的圖標(biāo)(這里可以和你的搭檔去溝通一下喷市，看他是什么開(kāi)發(fā)習(xí)慣)相种。
關(guān)于列表頁(yè)類(lèi)型的標(biāo)注問(wèn)題
普通的列表有兩種方法(去問(wèn)你的搭檔，他喜歡用什么方法)：
1.標(biāo)出行高品姓，行內(nèi)元素居中寝并；
2.標(biāo)出行內(nèi)元素，元素上下間距腹备，確定行高食茎；
每種元素的位置如何確定：
通常標(biāo)注的都是元素距離屏幕最左側(cè)的距離，比如上圖的圖標(biāo)元素距離左側(cè)24px馏谨，文字元素距離左側(cè)100px。
標(biāo)注這個(gè)東西沒(méi)有固定的方法附迷，工程師的開(kāi)發(fā)習(xí)慣不同惧互，標(biāo)注方法還不同呢哎媚。
該怎么標(biāo)注雖然可以在網(wǎng)上找到方法，但那不一定適合你喊儡，一定和自己的搭檔勤溝通拨与，方法是死的，人是活的……
所有的頁(yè)面其實(shí)都差不多艾猜，標(biāo)文字买喧，標(biāo)圖片，標(biāo)間距匆赃，標(biāo)區(qū)域淤毛；
下期切圖
