【系列文章】

盒飯君帶你一稿設計適配雙端? （375的標注，講得同樣很清晰）

到底用pt還是px標注呢？

對設計圖做標注之iOS篇（解釋了渲染的點和像素是不一樣的）

讓開發(fā)崩潰的標注稿到底

這張標注上的問題有哪些呢？

1)、沒有總寬度

不管設計尺寸是720（360dp），還是1080（540dp）都要明確標示出來。

2）、沒有標出icon和圖片的寬和高。

不是你會把icon切出來給開發(fā)，就感覺圖片放到哪個位置就會完美顯示。icon也是 要適配不同屏幕的所以不管是icon還是文字都是有寬和高的。一定要標注出來。

3)、這個不是標注問題，是icon的規(guī)范問題。

你有沒有發(fā)現(xiàn)如果所有的icon都是圓形的，那么你很容易把它們的寬高畫的一樣， 但是項目中我們不會畫一樣的icon。這樣我們就不能保證每一個icon的寬高都是 一樣的。這時候我們就要有一個熱區(qū)的概念，給每一個icon都加一個一樣寬高的外框， 切圖的時候是按照外框的寬高來切的，這樣就保證了icon的統(tǒng)一，也增加了icon的點擊 面積（熱區(qū)）。當然這樣做你肯定要花費一些精力，但是會使你的設計更加可控，要知道 你不加熱區(qū)的情況下負責的開發(fā)同學也會加上的，這時候你的標注尺寸就變得無效，你要 花費更多精力去協(xié)調。而且、你用markman或像素大廚標注設計稿時，你怎么確定icon的 邊、文字的邊。要知道，不同的字體占用的高度是不一樣的，你要是知道一些CSS知識，你 會發(fā)現(xiàn)不同字體的“padding”是不一樣。

較為完善的標注稿

iicon下面的灰色部分就是我說的熱區(qū)（方便講解才顯示出來），也是我畫圖標的時候的一個參照。這樣icon 就會是一樣的大小。包括圖片的寬高也是，字體下面的灰色是字體所在的位置，這樣的標注圖 給開發(fā)同學就會很好理解