原文來(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è)面的種類成千上萬(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)物車頁(yè)面左側(cè)的小圈，可點(diǎn)擊區(qū)域要比實(shí)際小圈尺寸大很多。
?這種類型的圖標(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è)類型的標(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)哪里，可能我涉及不到所有類型頁(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è)面的種類成千上萬(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)物車頁(yè)面左側(cè)的小圈，可點(diǎn)擊區(qū)域要比實(shí)際小圈尺寸大很多。
?這種類型的圖標(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è)類型的標(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ū)域；
下期切圖
