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

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

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

切圖壓縮

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

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

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

切圖壓縮推薦兩個(gè)工具。

1. 熱門工具——TinyPng

地址： https://tinypng.com/

這個(gè)工具大家都聽(tīng)過(guò)，無(wú)損、壓縮率還賊高，png 和 jpg 的壓縮需求都能滿足，可惜的是并不支持對(duì)接安卓時(shí)常用的 webp 格式。

2. 冷門寶藏——Squoosh

地址： https://squoosh.app/

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

講幾個(gè)我覺(jué)得很牛的地方：

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

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

全程對(duì)比

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

支持 webp

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

支持格式轉(zhuǎn)換

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

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

對(duì)接安卓開(kāi)發(fā)時(shí)，需要給八位 16 進(jìn)制色值。

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

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

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

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

切圖命名格式

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

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

最簡(jiǎn)單的方法，直接跑開(kāi)發(fā)那邊看對(duì)方是什么樣的命名習(xí)慣，達(dá)成共識(shí)后按著這個(gè)格式來(lái)就行。

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

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

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

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

不要改來(lái)改去

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

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

最后

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

我是 Andrew，下期見(jiàn)。

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