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