很多新人設計師初期會只關注行業趨勢和手活的提升，而忽略更偏向團隊賦能的“設計交付”（Handoff）環節，但后者其實更能甄別設計師的業務深度。畢竟美上天際的設計圖，落地性無法保證，也只是鏡花水月，完全無法轉化為商業價值。
在下面的部分，我根據自己的經驗列出了一些值得關注的交付細節，供各位設計師參考。
產品背景和邏輯交付
很多UI設計師在交付時沒有“解說”的概念，認為這屬于交互和產品寫文檔時負責的部分，其實不然。尤其對于一些中小型互聯網公司，如果沒有配齊產品和交互人員，或者缺乏相應的產品/交互說明產出，UI設計師需要適度補足這些缺失的部分。
具體說來，就是在高保真設計稿中加入少量的說明解釋類頁面，用最簡潔的語句和配圖快速傳達任務的背景和目標，以便開發人員快速進入狀態，準確理解需求，降低在開發過程中掉鏈子的幾率。
部分云交付平臺（如摹客、Overflow等）支持上傳后快速連接出流程圖，在實際工作中非常實用?；ㄉ蠋追昼姇r間連接好頁面間跳轉關系并配上說明，開發同學理解起來就舒服多了。
設計稿及圖片素材交付
首先，直接說結論：用云平臺交付設計稿，別發什么壓縮包！
很多Ps時代的設計師都經歷過手動標注的過程，之后又逐漸轉為了使用插件（如Sketch Measure）導出的HTML交付包的方式。但：類似Sketch Measure這樣的插件大多是個人作品，兼容性和可靠度完全沒有保障；此外，導出壓縮包的方式面對改稿時的痛苦指數是非常高的。以國外行業軌跡來看，云交付一定是大勢所趨。
針對國內設計行業現狀，云平臺大致有圖中的3種選擇：
具體使用方式上都大同小異，下載針對自己設計軟件的對應插件，然后選擇所需的內容上傳。成功后直接將鏈接發給開發工程師即可，但切記還要確認：
- 設計稿上傳時選擇了正確的設計倍率（尤其是對于移動端設計）；
- 所有的素材都已經標記好切圖，并能正確地在云平臺顯示和下載。重要項目最好下載所有素材逐個檢查，尤其注意圖片質量、文件大小和分辨率；
- 界面細節是否有重點信息遺漏，可以借助平臺自帶的一些標尺、卡片、圖釘等工具補充說明；
- 如有復雜交互或動效，考慮補充GIF / 視頻供開發人員理解和參考。
“設計倍率”對于很多經驗較淺的設計師是個難點，如果沒有十足把握可以選擇摹客這種自帶全平臺切換算法的云平臺，這樣即使選擇錯誤也可以在云平臺二次修改。素材檢查也是很多設計師都會忽略的點，很多時候就是這一步把關不嚴，導致最終界面還原度不足。
圖標交付
圖標具有一定特殊性，交付方式往往不局限于傳統圖片格式交付，還有SVG雪碧圖、字體圖標庫等等特殊方式可以使用。
- 傳統圖片格式（PNG、Webp等）交付時，注意內容四周透明區域大小的正確，同時還要準備hover / disable 等不同狀態下的版本；
- SVG雪碧圖的方式一般需要特定的插件導出資源包。這種方式導出后可以上傳到云平臺的網盤中，并和開發溝通好。
- 字體圖標庫（iconfont）的方式需要先轉換好svg，并保存在字體圖標網站上，最后通過網站打包。最后同樣需要上傳好 + 溝通好。
設計規范及組件交付
部分云交付平臺擁有全面的設計規范管理功能，開發交付時，除了能提供必備的圖層信息和CSS樣式代碼外，還能提供變量名稱（Variables）、組件代碼（Snippet），樣式表（Stylesheet）等更多專業的開發信息。
- 在設計軟件中封裝好了組件，上傳后平臺就能夠自動識別，并可以綁定組件代碼、添加關聯鏈接或其他描述信息；
- 之后，所有使用了該組件的設計稿，開發人員都能輕易地獲取到和組件模塊的開發信息，大大提升開發效率和還原準確度；
- 平臺還能自動識別頁面使用的顏色和字體，并集中歸納。手動編輯相關變量名稱信息后，就可以導出開發所需的樣式表文件，非常方便。
動效交付
最后簡單提一下動效的推薦交付方式：
- 一般場景：視頻（Mp4）或動圖（Gif、Apng、Webp）格式是最推薦的，效果可控度高。不同方式主要是幀率、質量、兼容性方面有區別，具體差異不贅述，可自行檢索。
- Lottie / JSON 方式必須要借助AE插件導出，同時對動畫內容有一定要求，比如不支持表達式和Alpha通道等，使用前需要做好規劃。
- SVGA的方案對內容本身限制較少，但是需要在代碼中載入一個微型的播放器，建議提前和開發人員商量。
- 動效說明書的方式只適合復雜度不太高、且必須100%由前端實現的場景。
總結
總體來說，選擇一款足夠好的云交付平臺是事半功倍的關鍵。近年一些自帶交付功能的在線設計工具（如Figma）崛起，但從訪問速度、易用性和功能豐富性的角度來說，依然和專業的云交付平臺有著不小的差距，所以我依然建議使用摹客這樣獨立的交付平臺來保證交付品質。
原文地址：UI中國
作者：摹客產品協作設計
轉載請注明：學UI網》獨家曝光！大廠設計師的交付細節全公開
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務