5年前，我畢業(yè)進(jìn)入一家業(yè)內(nèi)知名的設(shè)計外包公司，正式開啟了UI設(shè)計師的生涯。

在這段經(jīng)歷中，給我的最大感悟就是：千萬不能在整個過程中只是被動地畫圖，然后將成品丟給甲方/程序員就覺得萬事大吉。后續(xù)的“設(shè)計交付 + 走查”缺位，極易造成還原度崩盤。設(shè)計稿和成品巨大的反差會加重需求方的不滿意，最終導(dǎo)致項目夭折和回款困難。

??

之后的幾年，我又陸續(xù)經(jīng)歷了數(shù)家中型互聯(lián)網(wǎng)公司的磨煉后，最終加入了某“福報”大廠。期間我也更看清了高階設(shè)計師貢獻(xiàn)輸出的主要方式，即：頂級的設(shè)計產(chǎn)出 + 無懈可擊的交付過程。

很多新人設(shè)計師初期會只關(guān)注行業(yè)趨勢和手活的提升，而忽略更偏向團(tuán)隊賦能的“設(shè)計交付”（Handoff）環(huán)節(jié)，但后者其實更能甄別設(shè)計師的業(yè)務(wù)深度。畢竟美上天際的設(shè)計圖，落地性無法保證，也只是鏡花水月，完全無法轉(zhuǎn)化為商業(yè)價值。

在下面的部分，我根據(jù)自己的經(jīng)驗列出了一些值得關(guān)注的交付細(xì)節(jié)，供各位設(shè)計師參考。

產(chǎn)品背景和邏輯交付

很多UI設(shè)計師在交付時沒有“解說”的概念，認(rèn)為這屬于交互和產(chǎn)品寫文檔時負(fù)責(zé)的部分，其實不然。尤其對于一些中小型互聯(lián)網(wǎng)公司，如果沒有配齊產(chǎn)品和交互人員，或者缺乏相應(yīng)的產(chǎn)品/交互說明產(chǎn)出，UI設(shè)計師需要適度補足這些缺失的部分。

? ? ? ? ? ? ? ? ?? ? ? ?

具體說來，就是在高保真設(shè)計稿中加入少量的說明解釋類頁面，用最簡潔的語句和配圖快速傳達(dá)任務(wù)的背景和目標(biāo)，以便開發(fā)人員快速進(jìn)入狀態(tài)，準(zhǔn)確理解需求，降低在開發(fā)過程中掉鏈子的幾率。

部分云交付平臺（如摹客、Overflow等）支持上傳后快速連接出流程圖，在實際工作中非常實用?；ㄉ蠋追昼姇r間連接好頁面間跳轉(zhuǎn)關(guān)系并配上說明，開發(fā)同學(xué)理解起來就舒服多了。

? ? ? ? ? ? ? ? ? ? ? ??

設(shè)計稿及圖片素材交付

首先，直接說結(jié)論：用云平臺交付設(shè)計稿，別發(fā)什么壓縮包！

很多Ps時代的設(shè)計師都經(jīng)歷過手動標(biāo)注的過程，之后又逐漸轉(zhuǎn)為了使用插件（如Sketch Measure）導(dǎo)出的HTML交付包的方式。但：類似Sketch Measure這樣的插件大多是個人作品，兼容性和可靠度完全沒有保障；此外，導(dǎo)出壓縮包的方式面對改稿時的痛苦指數(shù)是非常高的。以國外行業(yè)軌跡來看，云交付一定是大勢所趨。

針對國內(nèi)設(shè)計行業(yè)現(xiàn)狀，云平臺大致有圖中的3種選擇：

? ? ? ? ? ? ? ? ? ? ? ?

具體使用方式上都大同小異，下載針對自己設(shè)計軟件的對應(yīng)插件，然后選擇所需的內(nèi)容上傳。成功后直接將鏈接發(fā)給開發(fā)工程師即可，但切記還要確認(rèn)：

• 設(shè)計稿上傳時選擇了正確的設(shè)計倍率（尤其是對于移動端設(shè)計）；

• 所有的素材都已經(jīng)標(biāo)記好切圖，并能正確地在云平臺顯示和下載。重要項目最好下載所有素材逐個檢查，尤其注意圖片質(zhì)量、文件大小和分辨率；

• 界面細(xì)節(jié)是否有重點信息遺漏，可以借助平臺自帶的一些標(biāo)尺、卡片、圖釘?shù)裙ぞ哐a充說明；

• 如有復(fù)雜交互或動效，考慮補充GIF / 視頻供開發(fā)人員理解和參考。

? ? ? ? ? ? ? ? ? ? ? ??

“設(shè)計倍率”對于很多經(jīng)驗較淺的設(shè)計師是個難點，如果沒有十足把握可以選擇摹客這種自帶全平臺切換算法的云平臺，這樣即使選擇錯誤也可以在云平臺二次修改。素材檢查也是很多設(shè)計師都會忽略的點，很多時候就是這一步把關(guān)不嚴(yán)，導(dǎo)致最終界面還原度不足。

圖標(biāo)交付

圖標(biāo)具有一定特殊性，交付方式往往不局限于傳統(tǒng)圖片格式交付，還有SVG雪碧圖、字體圖標(biāo)庫等等特殊方式可以使用。

• 傳統(tǒng)圖片格式（PNG、Webp等）交付時，注意內(nèi)容四周透明區(qū)域大小的正確，同時還要準(zhǔn)備hover / disable 等不同狀態(tài)下的版本；

• SVG雪碧圖的方式一般需要特定的插件導(dǎo)出資源包。這種方式導(dǎo)出后可以上傳到云平臺的網(wǎng)盤中，并和開發(fā)溝通好。

• 字體圖標(biāo)庫（iconfont）的方式需要先轉(zhuǎn)換好svg，并保存在字體圖標(biāo)網(wǎng)站上，最后通過網(wǎng)站打包。最后同樣需要上傳好 + 溝通好。

設(shè)計規(guī)范及組件交付

部分云交付平臺擁有全面的設(shè)計規(guī)范管理功能，開發(fā)交付時，除了能提供必備的圖層信息和CSS樣式代碼外，還能提供變量名稱（Variables）、組件代碼（Snippet），樣式表（Stylesheet）等更多專業(yè)的開發(fā)信息。

以國內(nèi)相關(guān)功能較完善的摹客平臺為例：

• 在設(shè)計軟件中封裝好了組件，上傳后平臺就能夠自動識別，并可以綁定組件代碼、添加關(guān)聯(lián)鏈接或其他描述信息；

? ? ? ? ? ? ? ? ?? ? ? ?

• 之后，所有使用了該組件的設(shè)計稿，開發(fā)人員都能輕易地獲取到和組件模塊的開發(fā)信息，大大提升開發(fā)效率和還原準(zhǔn)確度；

? ? ? ? ? ? ? ? ? ? ? ??

• 平臺還能自動識別頁面使用的顏色和字體，并集中歸納。手動編輯相關(guān)變量名稱信息后，就可以導(dǎo)出開發(fā)所需的樣式表文件，非常方便。

? ? ? ? ? ? ? ? ?? ? ? ?

動效交付

最后簡單提一下動效的推薦交付方式：

• 一般場景：視頻（Mp4）或動圖（Gif、Apng、Webp）格式是最推薦的，效果可控度高。不同方式主要是幀率、質(zhì)量、兼容性方面有區(qū)別，具體差異不贅述，可自行檢索。

• Lottie / JSON 方式必須要借助AE插件導(dǎo)出，同時對動畫內(nèi)容有一定要求，比如不支持表達(dá)式和Alpha通道等，使用前需要做好規(guī)劃。

• SVGA的方案對內(nèi)容本身限制較少，但是需要在代碼中載入一個微型的播放器，建議提前和開發(fā)人員商量。

• 動效說明書的方式只適合復(fù)雜度不太高、且必須100%由前端實現(xiàn)的場景。

總結(jié)

總體來說，選擇一款足夠好的云交付平臺是事半功倍的關(guān)鍵。近年一些自帶交付功能的在線設(shè)計工具（如Figma）崛起，但從訪問速度、易用性和功能豐富性的角度來說，依然和專業(yè)的云交付平臺有著不小的差距，所以我依然建議使用獨立的交付平臺來保證交付品質(zhì)。

最后要說的是，再完美的設(shè)計交付流程也不能代替設(shè)計走查，后續(xù)的持續(xù)檢查依然是必不可少的。至于“如何做好設(shè)計走查”就是另一篇文章的內(nèi)容了，敬請各位期待。