在搬著小板凳坐工程師 Buddy 旁邊送果汁送零食的日子里，我受?Google Material Design?的啟發(fā)，折騰出一套自認(rèn)提高雙方溝通效率的標(biāo)注規(guī)則，心情挺好還為此做了模板，最下面有源文件的下載地址。

本文為作者授權(quán)優(yōu)設(shè)發(fā)布，未經(jīng)作者本人授權(quán)請(qǐng)勿轉(zhuǎn)載，謝謝 ：）

為什么傳統(tǒng)的標(biāo)注方法讓人難受？

沒(méi)錯(cuò)，Markman 是傳說(shuō)中的標(biāo)注神器，看起來(lái)也確實(shí)方便快捷，但是當(dāng)一個(gè)頁(yè)面中，要同時(shí)標(biāo)注間距、大小、顏色和字號(hào)時(shí)，過(guò)多的信息一齊扔給工程師，就會(huì)讓人有些抓狂。比如這樣：

這里的標(biāo)注雖然都有清晰的箭頭指示，但卻并不具有視覺(jué)邏輯，或者說(shuō)呈現(xiàn)出來(lái)的視覺(jué)邏輯并不符合開(kāi)發(fā)邏輯。工程師在搭建一個(gè)頁(yè)面的時(shí)候，會(huì)先去架構(gòu)布局，一塊內(nèi)容一塊內(nèi)容劃分好，接著填充進(jìn)內(nèi)容，最后來(lái)修改視覺(jué)的樣式。那么我們也應(yīng)該按照順序，先告訴人家每個(gè)模塊的間距啦大小啦，再告訴人家用什么字體和顏色，也就是先有布局標(biāo)注，再有樣式標(biāo)注。

用2個(gè)頁(yè)面解釋布局，再用1個(gè)頁(yè)面解釋樣式

這就是我的做法，視覺(jué)稿完成后，每一個(gè)頁(yè)面拿出來(lái)放在左邊，再用三個(gè)畫(huà)板來(lái)說(shuō)明它。

1. 橫向布局：解釋元素左右的外間距、內(nèi)間距和橫向?qū)挾?。（這里要考慮到針對(duì)不同寬度屏幕的適配，標(biāo)注是給固定值還是百分比）
2. 縱向布局：解釋元素的上下間距和高度。（有時(shí)要確保頁(yè)面里最重要的信息——比如一個(gè) CFA btn——在不同屏幕大小中是否都出現(xiàn)在了首屏，判斷標(biāo)注是向上定位還是向下定位 ）
3. 視覺(jué)樣式：字體、字號(hào)、行高、顏色、透明度、圓角。

標(biāo)注信息分類(lèi)之后，我還會(huì)給標(biāo)注本身設(shè)置共享樣式：塊面通常用藍(lán)色的遮罩，區(qū)別不同百分比時(shí)則用紅黃綠的遮罩，數(shù)字間距用紅底白字，視覺(jué)樣式則用藍(lán)底白字，這樣的好處是：對(duì)與設(shè)計(jì)師，可以快捷修改所有標(biāo)注樣式；對(duì)于工程師，快速建立對(duì)這套標(biāo)注視覺(jué)語(yǔ)言的認(rèn)知，明白不同顏色所代表的信息屬性，更方便的找到他所需要的信息。

單獨(dú)拎出可復(fù)用的組件，統(tǒng)一標(biāo)注

設(shè)計(jì)實(shí)現(xiàn)之前，就和工程師們一起統(tǒng)一一套樣式規(guī)范，除了常見(jiàn)的顏色和字體之外，我還會(huì)把通用的 UI 組件拿出來(lái)，一半是針對(duì)系統(tǒng)原生控件的樣式定制（alert/toast/radio btn/switch…），一半則是完全自定義的 UI 組件（產(chǎn)品自己的 UI kit）可以是任何會(huì)高頻復(fù)用的產(chǎn)品功能性的東西，比如這里的 SKU 選擇器和按鈕。

在項(xiàng)目進(jìn)程中，我甚至?xí)凸こ處焸儨贤ê茫缓笤诿總€(gè)組件旁寫(xiě)上這個(gè)組件是誰(shuí)正在實(shí)現(xiàn)或已經(jīng)實(shí)現(xiàn)，附在項(xiàng)目共享文件或者郵件里，避免重復(fù)勞動(dòng)。

統(tǒng)一標(biāo)注的好處不僅是我們自己在后續(xù)的設(shè)計(jì)中可以復(fù)用和遵守， 對(duì)于 web/iOS/Andriod 的工程師而言，也能提高代碼效率同時(shí)保持不同平臺(tái)最終效果的統(tǒng)一，后續(xù)迭代的時(shí)候也不會(huì)出現(xiàn)莫名其妙的樣式和代碼。如果遇到產(chǎn)品的大版本更新，也正好趁此機(jī)會(huì)和工程師們一起好好梳理一遍現(xiàn)有的樣式，清除掉不再使用的樣式，指定好新的層級(jí)。

DOs & DON’Ts

1. 始終遵循，視覺(jué)邏輯符合工程師的開(kāi)發(fā)邏輯。
2. 合理劃分，再?gòu)?fù)雜的頁(yè)面，用三步也足夠能說(shuō)清楚，信息不要擠在一起。
3. 考慮到頁(yè)面在不同屏幕大小下的變化，間距是否固定，比例是否縮放，圖片和按鈕寬度是否自適應(yīng)。
4. 任何細(xì)節(jié)和要求都寫(xiě)清楚寫(xiě)清楚，寫(xiě)，清，楚，不要指望任何人“意會(huì)”你的設(shè)計(jì)，任何決定都要有據(jù)可查。
5. 每一個(gè)標(biāo)注本身也要注意對(duì)齊方式，更干凈整潔的標(biāo)注能讓大家一眼找到所需。

好了，看完之后大概會(huì)有人吐槽說(shuō)有必要么這樣的標(biāo)注多浪費(fèi)時(shí)間啊，就是要追求極致?。ㄑ鎏臁?/p>

• 在做標(biāo)注的過(guò)程中，你會(huì)再次仔細(xì)審視自己的設(shè)計(jì)，總會(huì)發(fā)現(xiàn)之前被忽略/沒(méi)考慮周全的細(xì)節(jié)，比如間距字號(hào)顏色是否遵守了統(tǒng)一的規(guī)則，比如不同屏幕大小如何適配。
• 耍聰明會(huì)偷懶的話，shared style 設(shè)置好，插件快捷鍵背好，能復(fù)用的樣式提煉出來(lái)，你便會(huì)發(fā)現(xiàn)，雖然投入到標(biāo)注的時(shí)間增加了30%，但是和工程師后期反復(fù)溝通的時(shí)間減少了80%。
• 他們?nèi)绻谝淮文?demo 給你看，你還會(huì)驚喜的發(fā)現(xiàn)有很高的視覺(jué)還原度，個(gè)別小細(xì)節(jié)微微調(diào)整就好了。大家都討厭改改改，一次通過(guò)多有成就感呢。

最后，這次模板是我自己的一個(gè) redesign concept， 基于foundmyanimal.com，（一家 base 在 Brooklyn 的工作室，手工制作非常有愛(ài)的銘牌、項(xiàng)圈等動(dòng)物飾品）圖片素材全部源自其網(wǎng)站和 Instagram，不得轉(zhuǎn)載。

至于我的源文件，大家隨便用，I don’t give a fuck.

去 Dribbble?—?看我的完整設(shè)計(jì)稿。

去?微盤(pán)??—?下載 measurement_template.Sketch

當(dāng)然，這是一套還不夠嚴(yán)謹(jǐn)不夠科學(xué)的自創(chuàng)標(biāo)注，設(shè)計(jì)師盆友們，特別是工程師盆友們！覺(jué)得有任何值得改進(jìn)的地方請(qǐng)隨時(shí)跟我討論~ help me improve : P

Happy designing~

匡

補(bǔ)充

是的我曾經(jīng)也很寄希望于?Zeplin，參與第一批內(nèi)測(cè)后就寫(xiě)了長(zhǎng)長(zhǎng)的自帶說(shuō)明配圖的郵件給他們，期待 1.0 的發(fā)布，那就可以解決我這篇文章里寫(xiě)的所有問(wèn)題了。論偷懶工具的重要性啊盆友們……想起昨晚看見(jiàn)?FB 新玩出來(lái)的 sketch 插件，用 HTML+CSS 實(shí)現(xiàn)的動(dòng)態(tài)布局。

這是我自己最常用的兩個(gè) Sketch 插件：

• Sketch Measure—?目前最好用的標(biāo)注插件
• Sketch Style Inventory Master?—?主打功能是幫你自動(dòng)生成設(shè)計(jì)稿中的 style guide，但最好用的卻是可以智能選擇頁(yè)面中統(tǒng)一樣式的文本和圖形

記得在 Github 上給作者小星星喲~

靜電的Sketch教程合集持續(xù)更新中：

1. 《SKETCH設(shè)計(jì)教室！從零開(kāi)始學(xué)APP設(shè)計(jì)利器SKETCH（一）》
2. 《SKETCH設(shè)計(jì)教室！從零開(kāi)始學(xué)APP設(shè)計(jì)利器SKETCH（二）》
3. 《SKETCH設(shè)計(jì)教室！帶你了解超好用的SKETCH插件》
4. 《想要一稿過(guò)不加班？SKETCH絕配神器MIRROR搶先體驗(yàn)》

靜電的Xcode教程合集持續(xù)更新中：

1. 《搞定一像素不求人！為設(shè)計(jì)師量身打造的XCODE教程（1）》
2. 《搞定一像素不求人！為設(shè)計(jì)師量身打造的XCODE教程（2）》
3. 《零代碼搞定交互動(dòng)畫(huà)！為設(shè)計(jì)師量身打造的XCODE教程（3）》
4. 《搞定Tab bar交互！為設(shè)計(jì)師量身打造的XCODE教程（4）》

原文地址：Hi,我是匡

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量97萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：