設計交付對於UI設計師來說是一項必要的工作流程，設計交付影響著介面的最終實現和各尺寸適配效果。那麼如何做好從設計到開發的交付呢？本文就教一教大家，如何用工具幫助完成從設計到開發的完美交付。
一、移交專案
其實在移交具體的設計稿之前，專案的切換和移交更應該處在最前沿。這個時候你就需要使用任務管理工具來幫助你移交專案。任務管理工具可以確保產品團隊的工作流程井然有序：
- 統一整個團隊的工作流程，並使大家能在統一平臺上進行溝通
- 只需幾步點選，便可維護和監控團隊的多項任務與程式
- 運用自動化系統，對所有團隊成員進行有效的時間跟蹤
- 為文件的儲存、共享和檢索建立一箇中心節點
- 避免通過手動去更新與協調專案進度，以節約時間
- 在世界任何角落都能安排與參加虛擬會議
推薦工具：
1. Droptask
通過擁有哈佛大學、可口可樂和迪士尼等世界知名品牌的背書，Droptask給使用者帶來了一個靈活易用的任務管理框架。它在設計上引入了人們熟悉的文氏圖形（Venn diagram），並允許在顏色上進行定製。較之其他任務管理軟體，它有著最短的學習曲線。
特點：
- 具有趣味性引導檢視和各個任務的工作流檢視
- 可為每個任務新增備註、受讓人、標籤、清單、提醒和附件
- 使用滑動條（slide bar）來選擇和管理任務的緊迫性、優先順序、進度、以及工作量
- 可在任何需要的時候訪問並檢視任務的歷史記錄
- 可建立單獨的類別或專案，再使用拖曳操作將任務重新定位到他處
- 監控和管理每個成員的任務通知
提供整合的軟體：
- Dropbox、Google Calendar、Outlook和Google Drive
2. ActiveCollab
ActiveCollab是為小型團隊和一般企業提供的，用於管理與組織工作流程的另一款強大工具。它在此領域已深耕十年，憑藉其易用性和靈活性，它廣受眾多的學術機構和政府組織類使用者的歡迎。可以用它來管理專案的各個方面，包括：時間跟蹤、團隊協作或產品計價。
特點：
- 能在單個皮膚上建立並組織各項任務，並能按照截止日期、標籤或人員進行篩選
- 可為每項任務選擇受讓人、新增提醒、註釋、以及檔案，以供團隊共享
- 可將各種任務按照甘特圖、列狀檢視或列表檢視進行組合
- 可將日曆與特定事件的任務進行同步
- 使用秒錶來跟蹤某個任務所花費的總工時
- 為正在進行中任務的數量生成報告
提供整合的軟體：
- Slack、Quickbooks、Google Drive、Dropbox、Asana和Zapier。
3. Trello
無需多介紹，Trello是最好的任務管理工具之一，它定義了各種基礎性的任務管理。Trello的特點在於：其互動式的簡單看板，能方便您快速地將任務從一欄目拖拽到另一個之上。它的免費計劃不限制任何使用者數、皮膚（board）數和清單數量，這些正是小型和初創型企業亟需擁有的功能與服務。
特點：
- 靈活的看板模式，能以卡片、皮膚和列表的形式儲存各項建立的任務
- 使用者可以在卡片中建立各種清單，並能給每項任務的績效投票
- 發電子郵件到皮膚（Email-to-board）的功能，允許使用者將他們的電子郵件直接轉換到皮膚和卡片上
- 能夠為每個包含有任務的皮膚分配任務、附加檔案、新增說明和進度清單
- 可在皮膚和卡片上新增帶有表情包的評論，以便與團隊中其他成員進行實時溝通
提供整合的軟體：
- Google Hangouts、Zapier、Google Calendar和GitHub
二、提供設計稿以及標註切圖
很明顯，移交設計稿以及標註切圖是整個交付過程中最重要的環節了。使用者手中看到的產品介面，並非設計師的最終效果圖，而是一個個單獨的切圖經由開發技術實現。切圖和標註作為設計師與開發者之間的橋樑，它的作用很關鍵，合適的切圖、精準的標註位置可以最大限度的還原效果圖的設計，精妙的切圖和標註更會有事半功倍的效果。
當然，目前有很多自動標註和切圖的工具，能幫助大家解決手動標註和切圖的問題，但是還有一些需要注意的點：
需要標註的點有哪些？
- 文字：字型大小 、顏色
- 佈局控制元件屬性：控制元件的寬高、背景色、透明度、描邊和圓角大小（如果有圓角）等
- 列表：列表的高度、顏色、內容上下間距等
- 間距：控制元件之間的距離、左右邊距
- 段落：行距
- 全域性屬性：如導航欄文字大小、顏色，左右邊距，預設間距等，如果你之前跟開發合作過，在這方面開發瞭解就可以省略了。
什麼時候需要有切圖？
- 只要是沒有辦法通過程式碼來實現的就需要切圖。什麼是程式碼無法實現的呢？比如圖示。如果你不清楚，請跟開發溝通，一般開發都會知道哪些是需要的。
切圖應該有幾套？
- 理論上，iOS我們需要切3套圖，分別是@1x，@2x和@3x，這樣做是為了更好的適配；而在實際工作中，iOS只需要切2套圖就可以，分別為：@2x和@3x。
- Android，尺寸比較多，需要切片的也就多，通常MDPI，HDPI，XHDPI，XXHDPI和XXXHDPI等。
其他
- 輸出格式：切圖輸出格式必須為png24位、png8位、jpg 3種格式，推薦PNG。
- 尺寸為偶數：切圖輸出大小必須保持為偶數。單數切圖的話，手機系統就會自動拉伸切圖，從而導致切圖元素邊緣模糊，造成開發出來的APP介面效果與原設計效果差距甚遠。
- 為了減小包的大小，所有切圖儘量壓縮後再給開發。圖片大了，多了，不利於使用者在使用app過程中載入頁面，因此圖片切圖要儘量壓縮圖片檔案的大小。
當然，以上需要考慮的點，找對了工具自然能幫你順利解決。從Sketch、PS等設計工具中，通過外掛將設計稿上傳到標註切圖工具裡，即刻自動生成標註、一鍵下載切圖：
推薦工具：
1. 摹客iDoc
摹客iDoc是更快更簡單的產品協作設計。主要功能有智慧標註、一鍵切圖、多樣批註、互動原型、全貌畫板、團隊管理，真正實現了從產品到開發只要一個文件。這裡主要講解其出色的標註和切圖功能。
特點：
- 支援下載選中切圖和全部切圖；選擇各式倍率，可一鍵下載；
- 通過選中、hover和使用不同的快捷鍵，可以切換四種標註模式：無選中標註（兩個圖層之間的距離）、圖層間標註（兩圖層間的間距）、多選標註（多個圖層之間的距離）、百分比標註（標註的百分比值）；
- 可在單位轉化皮膚中轉化度量單位；自動生成樣式程式碼，可一鍵複製貼上；
- 比較令我驚喜的一個功能是放大鏡功能。按住z鍵，會彈出放大鏡，可以檢視微小的細節。如果放大倍數不夠也可以通過在按住z鍵的同時使用“+/-”鍵調整放大倍數。很多時候標註密密麻麻的，設計元素又很小，有這個放大鏡功能就不用愁了。
- 可切換到圖層樹。圖層樹展示了所有圖層和圖層的層級關係，單擊圖層可在Canvas中顯示出來。
外掛支援：
- Sketch
- Adobe XD CC
- Photoshop
2. Zeplin
特點：
- 支援下載選中切圖和全部切圖。
- 在Dashboard中雙擊任意一個Page就可進入到Canvas；單擊選中一個圖層，滑鼠Hover到另一圖層上，即可檢視圖層間的標註；
- 右側皮膚展示了詳細的資訊，包括X/Y、寬/高、色值、陰影、字型、文字內容等；
- 可以通過點選“+”按鈕將色值、字型等新增到Styleguide中，非常的方便。
外掛支援：
- Sketch
- Adobe XD CC
- Figma
- Photoshop
三、展示原型
互動式原型可以很好地說明用於網站的導航結構，以及基本使用者流程，動畫和互動以及網站的內部連結。這種設計的可見性不僅有利於客戶的理解，而且也能幫助開發人員在開始構建和繪製網站時的理解。像Invision和Marvel這樣的工具可以很好地建立互動原型。更棒的是，像Adobe XD和Mockplus iDoc這兩個工具，原型設計是其中一個出色的內建功能，通過簡單地單擊選項卡，設計人員可以輕鬆地將設計過渡到原型。
推薦工具：
1. Adobe XD
作為設計軟體領域的領導者，Adobe 當然也有相當犀利的工具應戰——Adobe XD。這是一款簡單易用且的快速互動設計、產品原型製作軟體！可用於 UX、UI 設計以及快速製作設計原型稿。使用者可在短時間內就能輕鬆製作出互動的 APP 介面、網頁原型，並將創意輕鬆展現給他人。
特點：
- 從設計切換到原型：在畫板之間拖動線條，為原型增添活力。建立疊加以堆放內容，實現更為真實的體驗 - 不再需要為鍵盤、選單和對話方塊複製畫板。為頁首和頁尾設定固定位置，以便在檢視者進行滾動操作時，頁首和頁尾的位置保持不變。
- 支援匯入其他應用程式檔案。可在XD中直接開啟 Adobe Photoshop CC、Illustrator CC、Photoshop、Sketch 中的檔案。檔案將自動轉換為 XD 文件，畫板和圖層原封不動。
2. 摹客iDoc
剛剛講解了摹客iDoc的標註切圖功能板塊，現在來講講它的原型板塊。
特點：
- 從設計切換到原型：通過頂部Tab可切換至在原型版塊，在此可以設定頁面跳轉互動，快速製作高保真可互動原型。從設計軟體一鍵上傳至iDoc，雙擊圖層即可建立互動熱區，多種動畫效果可供選擇，還支援手勢互動、延時自動跳轉等效果。
- 方便的互動演示：點選演示圖示，便可進入演示狀態。點選二維碼圖示，可顯示二維碼，使用手機掃碼二維碼便可以在手機上預覽原型。還可傳送連結至需要檢視原型的人，非常方便。
四、開展移交會議
設計人員和開發人員之間的協調和組織是專案成功的關鍵。其實線上談再多，不如線下一次深入的溝通。那麼開展一次設計和開發的交接會議是一個很好的方法。會議上，大家可以溝通和探討，講述清楚疑難問題，為產品開發啟動階段的工作做好準備。
推薦工具：
PPT（這個大家都懂，就不再細說辣）