原文來自ui中國-BAT_LCK
標注之前一定要跟開發溝通好，標注之前一定要跟開發溝通好，標注之前一定要跟開發溝通好
這里的標注軟件用的是我第一期推薦的PxCook(像素大廚)，先標一個空白文檔，看看都需要什么吧。
這里要說一句，PxCook雖然可以自動讀取顏色，但是還不能對PSD文檔里設置的透明度讀取，所以如果你用了透明色，推薦你用文字標注直接寫出來原色值以及透明度。
基本上我并不使用PXCook里面的顏色標注工具，而是使用文字標注工具，因為要標識兩種色值，PxCook只能顯示一種色值。
一般我的習慣是PS和標注軟件同時打開，因為有時候標注軟件并不能完全的把PSD文件里的東西標注出來，所以標注也要靈活運用，如果無法標注，就到PS里查看一下，然后再使用文字標注說明一下。
標注顏色是使用16進制，還是RGB：
都用得到，要看實現什么東西。索性把16進制和RGB都給標出來，也省的工程師一遍遍找了。
建議標注顏色時，兩種色值表達都標上(16進制&RGB)。
你需要標注的內容有：
1.文字需要提供：字體大小(px),字體顏色；
2.頂部標題欄的背景色值，透明度；
3.標題欄下方以及Tab bar上方其實有一條分割線，需要提供色值；
4.內容顯示區域的背景色(如果是全部頁面白色，那就和工程師說一句就好啦)；
5.底部Tab bar的背景色值。
因為頁面的種類成千上萬，我想每種頁面都講一下，但是不現實，所以我希望可以舉一反三。
下面的是一個比較普通的首頁頁面，但是基本上一款APP中應該標的元素都有了~
一般頁面你需要標注這些地方：
所有元素統一距離屏幕最左24px(這種全局性的數據可以直接和工程師溝通，也可以標注，推薦標注出來)
1.標題欄：背景色，標題欄文字大小，文字顏色(不再贅述)；
2.Banner：所有撐滿橫屏的大圖，不需要橫向尺寸，把高度標出了就可以了;
3.菜單圖標：
?圖標的大小和圖標的可點擊區域不一定一致，也就是說，圖標可以很小，但是工程師可以把可點擊區域設置的很大，這樣標注 ? ? 和切圖的時候就要注意，你標注的是可點擊區域的大小，切圖切的也是可點擊區域的大小，也就是用透明區域去補上。在設計 ? ? 的時候就要考慮可點擊區域的范圍，比如X寶購物車頁面左側的小圈，可點擊區域要比實際小圈尺寸大很多。
?這種類型的圖標需要標注圖標點擊區域大小，圖標距離屏幕最左最右以及上下的距離。至于圖標的間距，因為有些時候可能 ? ? ? 設計師不能完全做到1px不差，所以我基本不標，交給工程師，設置為等距離(還是要和你的搭檔溝通怎么去標注）；
4.模塊間隔：這個位置其實不是太重要，我習慣標注上這里，麻煩能少則少。
5.圖片+文字：這個應該比較常見，只標注一個單位(圖+文)就可以了。
圖片需要標注寬高，因為工程師要設置圖片區域，從后臺調取，可以這么說，軟件里除了橫屏撐滿的圖，基本上所有的圖片都要標注寬高。
圖片距離上下左右的距離，文字大小顏色，這里的文字其實算兩個控件，標題文字以及說明文字，需要單獨標出。
Tab Bar：
這個位置其實比較特殊，你可以單獨標注圖標大小+文字大小；還可以圖標文字算作一個控件，整個切出來；
我們工程師的習慣是用整個的，也就是圖標+文字算作一個ICON，所以我基本不怎么標注單獨的圖標(這里可以和你的搭檔去溝通一下，看他是什么開發習慣)。
關于列表頁類型的標注問題
一款APP的設計稿從設計到切圖③
· 介紹一下工作流程以及后期切圖資源的輸出 ·
還是要再說一句，我寫的不是一種規范，只是一種工作方法，所以一定要靈活~
第一期 ? 一款APP的設計稿從設計到切圖①
第二期 ? 一款APP的設計稿從設計到切圖②
本期只講標注的問題，頁面怎么標，標哪里，可能我涉及不到所有類型頁面，但舉一反五足夠了；切片輸出以及切片命名我們下期再說(如果有錯誤，請一定要及時幫我指出，我不想誤人子弟)。
標注是重中之重，工程師能不能完整的還原設計稿，很大一部分取決于標注；如果不清楚你該怎么標，別怕丟人(我知道有些設計師，特別是剛接觸工作的設計師并不敢張嘴去問)，一定要和工程師溝通！包括怎么標，怎么切。
每個工程師實現效果的方法不同，我在這里所說的，是我的標注習慣，也就是我們工程師的開發習慣，但應該適用于大部分的設計師和工程師。
不需要每一張效果圖都進行標注，你標注的頁面能保證工程師開發每個頁面的時候都能順利進行即可；當然，這要看跟你配合的工程師的習慣，比如我現在搭檔的兩位IOS工程師，一位要求我全都要標注，另一位要求我標注代表性頁面就好(記得標注之前一定要溝通清楚)。
這里的標注軟件用的是我第一期推薦的PxCook(像素大廚)，先標一個空白文檔，看看都需要什么吧
這里要說一句，PxCook雖然可以自動讀取顏色，但是還不能對PSD文檔里設置的透明度讀取，所以如果你用了透明色，推薦你用文字標注直接寫出來原色值以及透明度。
基本上我并不使用PXCook里面的顏色標注工具，而是使用文字標注工具，因為要標識兩種色值，PxCook只能顯示一種色值。
一般我的習慣是PS和標注軟件同時打開，因為有時候標注軟件并不能完全的把PSD文件里的東西標注出來，所以標注也要靈活運用，如果無法標注，就到PS里查看一下，然后再使用文字標注說明一下。
如果你有更好的標注軟件，歡迎推薦給我以及更多人！
標注顏色是使用16進制，還是RGB：
都用得到，要看實現什么東西。索性把16進制和RGB都給標出來，也省的工程師一遍遍找了。
建議標注顏色時，兩種色值表達都標上(16進制&RGB)。
你需要標注的內容有：
1.文字需要提供：字體大小(px),字體顏色；
2.頂部標題欄的背景色值，透明度；
3.標題欄下方以及Tab bar上方其實有一條分割線，需要提供色值；
4.內容顯示區域的背景色(如果是全部頁面白色，那就和工程師說一句就好啦)；
5.底部Tab bar的背景色值。
因為頁面的種類成千上萬，我想每種頁面都講一下，但是不現實，所以我希望可以舉一反三。
下面的是一個比較普通的首頁頁面，但是基本上一款APP中應該標的元素都有了~
一般頁面你需要標注這些地方：
所有元素統一距離屏幕最左24px(這種全局性的數據可以直接和工程師溝通，也可以標注，推薦標注出來)
1.標題欄：背景色，標題欄文字大小，文字顏色(不再贅述)；
2.Banner：所有撐滿橫屏的大圖，不需要橫向尺寸，把高度標出了就可以了;
3.菜單圖標：
?圖標的大小和圖標的可點擊區域不一定一致，也就是說，圖標可以很小，但是工程師可以把可點擊區域設置的很大，這樣標注 ? ? 和切圖的時候就要注意，你標注的是可點擊區域的大小，切圖切的也是可點擊區域的大小，也就是用透明區域去補上。在設計 ? ? 的時候就要考慮可點擊區域的范圍，比如X寶購物車頁面左側的小圈，可點擊區域要比實際小圈尺寸大很多。
?這種類型的圖標需要標注圖標點擊區域大小，圖標距離屏幕最左最右以及上下的距離。至于圖標的間距，因為有些時候可能 ? ? ? 設計師不能完全做到1px不差，所以我基本不標，交給工程師，設置為等距離(還是要和你的搭檔溝通怎么去標注）；
4.模塊間隔：這個位置其實不是太重要，我習慣標注上這里，麻煩能少則少。
5.圖片+文字：這個應該比較常見，只標注一個單位(圖+文)就可以了。
圖片需要標注寬高，因為工程師要設置圖片區域，從后臺調取，可以這么說，軟件里除了橫屏撐滿的圖，基本上所有的圖片都要標注寬高。
圖片距離上下左右的距離，文字大小顏色，這里的文字其實算兩個控件，標題文字以及說明文字，需要單獨標出。
Tab Bar：
這個位置其實比較特殊，你可以單獨標注圖標大小+文字大小；還可以圖標文字算作一個控件，整個切出來；
我們工程師的習慣是用整個的，也就是圖標+文字算作一個ICON，所以我基本不怎么標注單獨的圖標(這里可以和你的搭檔去溝通一下，看他是什么開發習慣)。
關于列表頁類型的標注問題
普通的列表有兩種方法(去問你的搭檔，他喜歡用什么方法)：
1.標出行高，行內元素居中；
2.標出行內元素，元素上下間距，確定行高；
每種元素的位置如何確定：
通常標注的都是元素距離屏幕最左側的距離，比如上圖的圖標元素距離左側24px，文字元素距離左側100px。
標注這個東西沒有固定的方法，工程師的開發習慣不同，標注方法還不同呢。
該怎么標注雖然可以在網上找到方法，但那不一定適合你，一定和自己的搭檔勤溝通，方法是死的，人是活的……
所有的頁面其實都差不多，標文字，標圖片，標間距，標區域；
下期切圖
