ui設計師如何讓開發心服口服
筆者在初期做ui設計過程中，經常被開發找，有時候是設計稿顏色、字體不統一，交互方式不清晰，文件更新不同步，版本變動考慮太少，導致經常需要請開發喝咖啡。
在markman時代，我們自己的設計標注都很亂，開發也不愿仔細看，后來就憑開發感覺寫代碼了，最后做出來的東西是“開發的設計”。
后來有了sketch，沒有重要情況不需要標注了，設計師從美工脫離出來，這時候設計稿的統一性就非常重要了，如果首頁字體顏色還是333333，進入二級頁面就是303030。這種情況不要怪開發做出來的東西不能看。在設計的源頭沒有做好，這是最差設計師的做法。
隨著工作的深入，開始學習md design的組件庫的做法，在昨晚設計稿后，把設計共同的元素提取出來，保證這些控件、模塊可以復用、顏色字體統一標注，開發看后也會一目了然。
在最基本的做好之后，我開始思考開發工程師的實現邏輯。工程師在搭建一個頁面的時候，會先去架構布局，一塊內容一塊內容劃分好，接著填充進內容，最后來修改視覺的樣式。所以我也按照這個順序，先開大每個模塊的間距，字體和顏色，布局標注，樣式標注和距離。再一次改版時間后，開發群里給了一陣好評。
總結下，做完設計稿后，輸出給開發的是：
1、設計總稿sketch和png
2、設計標注稿，設計標注稿要包括：（摘）
（1）橫向布局：解釋元素左右的外間距、內間距和橫向寬度。（這里要考慮到針對不同寬度屏幕的適配，標注是給固定值還是百分比）
（2）縱向布局：解釋元素的上下間距和高度。（有時要確保頁面里最重要的信息——比如一個 CFA btn——在不同屏幕大小中是否都出現在了首屏，判斷標注是向上定位還是向下定位 ）
（3）視覺樣式：字體、字號、行高、顏色、透明度、圓角等
舉個例子：
標注信息分類之后，給標注本身設置共享樣式：塊面通常用藍色的遮罩，區別不同百分比時則用紅黃綠的遮罩，數字間距用紅底白字，視覺樣式則用藍底白字。
這樣的好處是：對于設計師，可以快捷修改所有標注樣式；對于工程師，快速建立對這套標注視覺語言的認知，明白不同顏色所代表的信息屬性，更方便的找到所需要的信息。
3、組件庫
設計實現之前，就和工程師們一起統一一套樣式規范，除了常見的顏色和字體之外，把通用的 UI 組件拿出來，一半是針對系統原生控件的樣式定制（alert/toast/radio btn/switch…），一半則是完全自定義的 UI 組件（產品自己的 UI kit）可以是任何會高頻復用的產品功能性的東西，比如這里的 SKU 選擇器和按鈕。
在項目進程中，甚至會和工程師們溝通好，然后在每個組件旁寫上這個組件是誰正在實現或已經實現，附在項目共享文件或者郵件里，避免重復勞動。
統一標注的好處不僅是我們自己在后續的設計中可以復用和遵守， 對于 web/iOS/Andriod 的工程師而言，也能提高代碼效率同時保持不同平臺最終效果的統一，后續迭代的時候也不會出現莫名其妙的樣式和代碼。如果遇到產品的大版本更新，也正好趁此機會和工程師們一起好好梳理一遍現有的樣式，清除掉不再使用的樣式，指定好新的層級。
以下是一個牛的標注，我覺得開發一定很愛他，轉到我日記里了：
