為什麼傳統標註讓人抓狂？

Markman是傳說標註神器，看似方便快捷，但頁面同時標註間距、大小、顏色、字號時，過多信息一股腦扔給工程師，讓人抓狂。標註雖有清晰箭頭，但無視覺邏輯，或視覺邏輯不符開發邏輯。工程師搭建頁面：先架構布局分塊、再填充內容、最後改視覺樣式。標註也應按序：先布局標註（間距大小），再樣式標註（字體顏色）。

用3個畫板分層說明：2個布局+1個樣式

視覺稿完成後，每頁面放左側，用三畫板說明：

• 橫向布局：解釋元素左右外間距、內間距、橫向寬度（考慮不同寬度屏幕適配，標註固定值還是百分比）。
• 縱向布局：解釋元素上下間距、高度（確保關鍵信息如CFA btn在不同屏幕是否首屏可見，判斷向上/向下定位）。
• 視覺樣式：字體、字號、行高、顏色、透明度、圓角。

標註信息分類後，給標註本身設置共享樣式：塊面用藍色遮罩，區別百分比用紅黃綠遮罩，數字間距紅底白字，視覺樣式藍底白字。好處：設計師快捷修改所有標註樣式；工程師快速建立視覺語言認知，明瞭不同顏色代表信息屬性，方便找所需信息。

單獨拎出可復用組件，統一標註

設計實現前與工程師統一樣式規範。除常見顏色字體，還把通用UI組件拿出：一半針對系統原生控件樣式定制（alert/toast/radio btn/switch…），一半完全自定義UI組件（產品自有UI kit），任何高頻復用功能性東西（如SKU選擇器、按鈕）。項目進程中與工程師溝通好，組件旁寫誰正在實現/已實現，附共享文件/郵件，避免重複勞動。統一標註不僅設計師復用遵守，對Web/iOS/Android工程師亦提高代碼效率保持跨平台效果統一，後續迭代不會出現莫名樣式代碼。遇大版本更新，趁機梳理現有樣式，清除廢棄，指定新層級。

DOs & DON'Ts

• 始終遵循：視覺邏輯符合工程師開發邏輯。
• 合理劃分：再複雜頁面三步足夠說清，信息別擠一起。
• 考慮不同屏幕變化：間距是否固定、比例是否縮放、圖片按鈕寬度是否自適應。
• 任何細節要求寫清楚寫清楚寫清楚，別指望誰「意會」設計，任何決定有據可查。
• 標注本身注意對齊方式，更乾淨整潔標註讓大家一眼找到所需。

看完可能吐槽：有必要這樣標註多浪費時間？就是追求極致。標註過程會再次審視設計，總發現之前被忽略細節：間距字號顏色是否遵守統一規則、不同屏幕如何適配。耍聰明偷懶：shared style設置好、插件快捷鍵背好、可復用樣式提煉出來，會發現：雖標註時間增加30%，但工程師後期反復溝通時間減少80%。他們首次拿demo給你看，驚喜發現視覺還原度極高，個別微調即可。大家都討厭改改改，一次通過多有成就感。

最後，模板基於foundmyanimal.com（Brooklyn手工動物飾品工作室）redesign concept，圖片素材源自其網站與Instagram，不得轉載。源文件隨便用，I don't give a fuck.

去 Dribbble 看完整設計稿。設計師盆友們、特別是工程師盆友們！覺得有改進處請隨時討論 ~ help me improve : P

Happy designing~
匡

補充

曾寄希望Zeplin，參與內測後寫長郵件給他們，期待1.0發布解決本文所有問題。論偷懶工具重要性啊盆友們……想起昨晚見FB新出Sketch插件，用HTML+CSS實現動態布局。我最常用兩個Sketch插件：

• Sketch Measure——目前最好用標註插件
• Sketch Style Inventory Master——主打自動生成style guide，但最好用的是智能選擇頁面中統一樣式文本圖形

記得GitHub給作者小星星喲~