開發(fā)小哥：這樣的設(shè)計師請給我來一打！

主動去減少對方的工作量，應(yīng)該算是設(shè)計師和開發(fā)能愉快、高效協(xié)作的秘訣之一了。

畢竟在職場上，大家都喜歡省事，你能幫對方省事，不僅利于更高效的協(xié)作，也能建立一段良好的上下游協(xié)作關(guān)系。尤其是開發(fā)這種極其耗費腦力的技術(shù)活兒～ 不過這種利他思維在職場上其實很容易被設(shè)計師忽略。

所以借著最近的幾點感悟，和大家嘮嘮，設(shè)計師可以從哪些方向減少開發(fā)的工作量，從而讓你們的協(xié)作更高效和諧。

切圖壓縮

之前聽一位開發(fā)朋友抱怨過，每次從代碼中停下來去壓縮動輒幾百 K 的切圖就很煩。

切圖壓縮這活兒說實話并沒有明確的分工，但我的觀點是，設(shè)計師最好去主動承擔這個雜活。畢竟是自己的產(chǎn)出，那就要為結(jié)果負責。這就好比廚子做菜，就需要根據(jù)顧客的喜好忌口做調(diào)整，為顧客負責，也為自己負責。

而且不到 1min 的時間，可以換來 1 次高效的協(xié)作和口碑，從投入產(chǎn)出比來看絕對是值的。

切圖壓縮推薦兩個工具。

1. 熱門工具——TinyPng

地址： https://tinypng.com/

這個工具大家都聽過，無損、壓縮率還賊高，png 和 jpg 的壓縮需求都能滿足，可惜的是并不支持對接安卓時常用的 webp 格式。

2. 冷門寶藏——Squoosh

地址： https://squoosh.app/

谷歌 18 年開發(fā)的在線工具，國內(nèi)非常冷門，但是功能強得一P。

講幾個我覺得很牛的地方：

可視化參數(shù)調(diào)節(jié)

和傳統(tǒng)壓縮工具的黑盒邏輯不同，squoosh 提供全面可視化的參數(shù)，你可以通過參數(shù)的自由調(diào)節(jié)來不斷得調(diào)整體積。

全程對比

squoosh 不像傳統(tǒng)的壓縮工具那樣，下載后才能看到圖片。它可以一邊調(diào)節(jié)參數(shù)一邊觀看原圖對比，充分給予了用戶權(quán)利來在清晰度和體積之間做平衡，避免壓縮了 99%后發(fā)現(xiàn)圖片糊得像坨屎。

支持 webp

對接安卓客戶端開發(fā)時，絕大多數(shù)情況都需要 webp 格式。網(wǎng)上支持 webp 壓縮的要么收費，要么導(dǎo)出的圖片在開發(fā)側(cè)無法正常顯示。squoosh 親測沒有問題！

支持格式轉(zhuǎn)換

figma 比較尷尬的一點是，它不像 sketch 那樣可以導(dǎo)出 webp 格式切圖。而 squoosh 完美解決了這個問題。當然，它也支持轉(zhuǎn)換成其他格式，比如 MozJPEG 和 OxiPNG（分別對應(yīng)了 JPEG 和 PNG）

色值轉(zhuǎn)換（附件下載轉(zhuǎn)換代碼表）

對接安卓開發(fā)時，需要給八位 16 進制色值。

比如#2958FF 這個顏色，為 100%，50%和 10%的透明度時，在安卓開發(fā)側(cè)對應(yīng)的色值，就需要在前面加上兩位代碼來表示各自的透明度。

但問題是，很多自動標注軟件僅支持顯示六位十六進制和 rgb 色值，這就導(dǎo)致安卓開發(fā)需要自己轉(zhuǎn)換。如果我們設(shè)計師額外標注好八位色值，就可以減少開發(fā)額外的工作量，也可以降低后續(xù)的溝通成本。

但是設(shè)計師怎么知道透明度對應(yīng)什么代碼呢？

早給你備好了，文末領(lǐng)取所有透明度對應(yīng)的代碼表。對著轉(zhuǎn)換就行～

切圖命名格式

很多老鐵受一些文章的影響，覺得切圖命名格式一定要遵循「場景_類別_功能_狀態(tài)」的格式。

比如首頁的默認態(tài) icon，格式就命名 tabbar_icon_home_default@2x.png，這樣命名不是不行，而是沒必要。因為到了開發(fā)那邊，他還是會按自己習(xí)慣改的。而且搞這么復(fù)雜，反而提高了開發(fā)小哥的認知成本，降低效率。

最簡單的方法，直接跑開發(fā)那邊看對方是什么樣的命名習(xí)慣，達成共識后按著這個格式來就行。

做可復(fù)用的設(shè)計

設(shè)計產(chǎn)出如果無法被復(fù)用，那就好像我們點外賣用的一次性碗筷，用完即扔。這種低效的產(chǎn)出對接到下游的開發(fā)后，也就導(dǎo)致開發(fā)小哥每次一有新樣式或組件都得重寫代碼，導(dǎo)致代碼冗余、無法復(fù)用。

所以，設(shè)計上盡量去做可復(fù)用的設(shè)計，形成規(guī)范甚至系統(tǒng)，很大程度上就能降低開發(fā)的重復(fù)工作量。

關(guān)于如何做可復(fù)用的設(shè)計，在這篇文章講的很詳細了，有興趣的可以隨時回看～

不要改來改去

中途突然修改，這大概是開發(fā)最怕的一件事了，辛辛苦苦大半天，一改回到解放前。要說是什么樣的體驗，停電時發(fā)現(xiàn)做一半的設(shè)計稿忘保存，差不多就是這種體驗。所以，一旦定稿進入了開發(fā)環(huán)節(jié)，就不要再輕易得修改了。當成自己孩子一樣去捍衛(wèi)它，直到平安落地。

而關(guān)于如何捍衛(wèi)你自己的設(shè)計稿又是另外一個話題了，后面單獨細講～

最后

再獻上八位色值的透明度代碼表，附件下載。

我是 Andrew，下期見。

歡迎關(guān)注作者微信公眾號：「轉(zhuǎn)行人的設(shè)計筆記」