ui設(shè)計(jì)師如何讓開發(fā)心服口服
筆者在初期做ui設(shè)計(jì)過程中仪召，經(jīng)常被開發(fā)找，有時候是設(shè)計(jì)稿顏色雨膨、字體不統(tǒng)一擂涛，交互方式不清晰，文件更新不同步聊记，版本變動考慮太少撒妈，導(dǎo)致經(jīng)常需要請開發(fā)喝咖啡。
在markman時代排监，我們自己的設(shè)計(jì)標(biāo)注都很亂狰右，開發(fā)也不愿仔細(xì)看，后來就憑開發(fā)感覺寫代碼了舆床，最后做出來的東西是“開發(fā)的設(shè)計(jì)”棋蚌。
后來有了sketch，沒有重要情況不需要標(biāo)注了挨队，設(shè)計(jì)師從美工脫離出來附鸽，這時候設(shè)計(jì)稿的統(tǒng)一性就非常重要了，如果首頁字體顏色還是333333瞒瘸，進(jìn)入二級頁面就是303030坷备。這種情況不要怪開發(fā)做出來的東西不能看。在設(shè)計(jì)的源頭沒有做好情臭，這是最差設(shè)計(jì)師的做法省撑。
隨著工作的深入，開始學(xué)習(xí)md design的組件庫的做法俯在，在昨晚設(shè)計(jì)稿后竟秫，把設(shè)計(jì)共同的元素提取出來，保證這些控件跷乐、模塊可以復(fù)用肥败、顏色字體統(tǒng)一標(biāo)注，開發(fā)看后也會一目了然愕提。
在最基本的做好之后馒稍，我開始思考開發(fā)工程師的實(shí)現(xiàn)邏輯。工程師在搭建一個頁面的時候浅侨，會先去架構(gòu)布局纽谒，一塊內(nèi)容一塊內(nèi)容劃分好，接著填充進(jìn)內(nèi)容如输，最后來修改視覺的樣式鼓黔。所以我也按照這個順序央勒，先開大每個模塊的間距，字體和顏色澳化，布局標(biāo)注崔步，樣式標(biāo)注和距離。再一次改版時間后缎谷，開發(fā)群里給了一陣好評刷晋。
總結(jié)下，做完設(shè)計(jì)稿后慎陵，輸出給開發(fā)的是：
1眼虱、設(shè)計(jì)總稿sketch和png
2、設(shè)計(jì)標(biāo)注稿席纽，設(shè)計(jì)標(biāo)注稿要包括：（摘）
（1）橫向布局：解釋元素左右的外間距捏悬、內(nèi)間距和橫向?qū)挾取＃ㄟ@里要考慮到針對不同寬度屏幕的適配润梯，標(biāo)注是給固定值還是百分比）
（2）縱向布局：解釋元素的上下間距和高度过牙。（有時要確保頁面里最重要的信息——比如一個 CFA btn——在不同屏幕大小中是否都出現(xiàn)在了首屏，判斷標(biāo)注是向上定位還是向下定位 ）
（3）視覺樣式：字體纺铭、字號寇钉、行高、顏色舶赔、透明度扫倡、圓角等
舉個例子：
標(biāo)注信息分類之后，給標(biāo)注本身設(shè)置共享樣式：塊面通常用藍(lán)色的遮罩竟纳，區(qū)別不同百分比時則用紅黃綠的遮罩撵溃，數(shù)字間距用紅底白字，視覺樣式則用藍(lán)底白字锥累。
這樣的好處是：對于設(shè)計(jì)師缘挑，可以快捷修改所有標(biāo)注樣式；對于工程師桶略，快速建立對這套標(biāo)注視覺語言的認(rèn)知语淘，明白不同顏色所代表的信息屬性，更方便的找到所需要的信息际歼。
3惶翻、組件庫
設(shè)計(jì)實(shí)現(xiàn)之前，就和工程師們一起統(tǒng)一一套樣式規(guī)范蹬挺，除了常見的顏色和字體之外维贺，把通用的 UI 組件拿出來它掂，一半是針對系統(tǒng)原生控件的樣式定制（alert/toast/radio btn/switch…）巴帮，一半則是完全自定義的 UI 組件（產(chǎn)品自己的 UI kit）可以是任何會高頻復(fù)用的產(chǎn)品功能性的東西溯泣，比如這里的 SKU 選擇器和按鈕。
在項(xiàng)目進(jìn)程中榕茧，甚至?xí)凸こ處焸儨贤ê美伲缓笤诿總€組件旁寫上這個組件是誰正在實(shí)現(xiàn)或已經(jīng)實(shí)現(xiàn)，附在項(xiàng)目共享文件或者郵件里用押，避免重復(fù)勞動肢簿。
統(tǒng)一標(biāo)注的好處不僅是我們自己在后續(xù)的設(shè)計(jì)中可以復(fù)用和遵守， 對于 web/iOS/Andriod 的工程師而言蜻拨，也能提高代碼效率同時保持不同平臺最終效果的統(tǒng)一池充，后續(xù)迭代的時候也不會出現(xiàn)莫名其妙的樣式和代碼。如果遇到產(chǎn)品的大版本更新缎讼，也正好趁此機(jī)會和工程師們一起好好梳理一遍現(xiàn)有的樣式收夸，清除掉不再使用的樣式，指定好新的層級血崭。
以下是一個牛的標(biāo)注卧惜，我覺得開發(fā)一定很愛他，轉(zhuǎn)到我日記里了：
