從設計到開發的完美交付（工具篇）

設計交付對於UI設計師來講是一項必要的工做流程，設計交付影響着界面的最終實現和各尺寸適配效果。那麼如何作好從設計到開發的交付呢？本文就教一教你們，如何用工具幫助完成從設計到開發的完美交付。

 

1、移交項目
其實在移交具體的設計稿以前，項目的切換和移交更應該處在最前沿。這個時候你就須要使用任務管理工具來幫助你移交項目。任務管理工具能夠確保產品團隊的工做流程井井有理：

 

• 統一整個團隊的工做流程，並使你們能在統一平臺上進行溝通
• 只需幾步點擊，即可維護和監控團隊的多項任務與進程
• 運用自動化系統，對全部團隊成員進行有效的時間跟蹤
• 爲文檔的存儲、共享和檢索建立一箇中心節點
• 避免經過手動去更新與協調項目進度，以節約時間
• 在世界任何角落都能安排與參加虛擬會議

推薦工具：

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

 

 

 

 
2、提供設計稿以及標註切圖
 

很明顯，移交設計稿以及標註切圖是整個交付過程當中最重要的環節了。用戶手中看到的產品界面，並不是設計師的最終效果圖，而是一個個單獨的切圖經由開發技術實現。切圖和標註做爲設計師與開發者之間的橋樑，它的做用很關鍵，合適的切圖、精準的標註位置能夠最大限度的還原效果圖的設計，精妙的切圖和標註更會有事半功倍的效果。

 

固然，目前有不少自動標註和切圖的工具，能幫助你們解決手動標註和切圖的問題，可是還有一些須要注意的點：

 

須要標註的點有哪些？ 

• 文字：字體大小 、顏色
• 佈局控件屬性：控件的寬高、背景色、透明度、描邊和圓角大小（若是有圓角）等
• 列表：列表的高度、顏色、內容上下間距等
• 間距：控件之間的距離、左右邊距
• 段落：行距
• 全局屬性：如導航欄文字大小、顏色，左右邊距，默認間距等，若是你以前跟開發合做過，在這方面開發瞭解就能夠省略了。

何時須要有切圖？

只要是沒有辦法經過代碼來實現的就須要切圖。什麼是代碼沒法實現的呢？好比圖標。若是你不清楚，請跟開發溝通，通常開發都會知道哪些是須要的。
 

切圖應該有幾套？

理論上，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
 

Mockplus 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
 

 

 

 

 
3、展現原型
 

交互式原型能夠很好地說明用於網站的導航結構，以及基本用戶流程，動畫和交互以及網站的內部連接。這種設計的可見性不只有利於客戶的理解，並且也能幫助開發人員在開始構建和繪製網站時的理解。像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
 

剛剛講解了Mockplus iDoc的標註切圖功能板塊，如今來說講它的原型板塊。

 

特色：

• 從設計切換到原型：經過頂部Tab可切換至在原型版塊，在此能夠設置頁面跳轉交互，快速製做高保真可交互原型。從設計軟件一鍵上傳至iDoc，雙擊圖層便可創建交互熱區，多種動畫效果可供選擇，還支持手勢交互、延時自動跳轉等效果。
• 方便的交互演示：點擊演示圖標，即可進入演示狀態。點擊二維碼圖標，可顯示二維碼，使用手機掃碼二維碼即可以在手機上預覽原型。還可發送連接至須要查看原型的人，很是方便。

 

 

 

4、開展移交會議
 

設計人員和開發人員之間的協調和組織是項目成功的關鍵。其實線上談再多，不如線下一次深刻的溝通。那麼開展一次設計和開發的交接會議是一個很好的方法。會議上，你們能夠溝通和探討，講述清楚疑難問題，爲產品開發啓動階段的工做作好準備。

 

推薦工具：

PPT（這個你們都懂，就再也不細說辣）

 

你能夠再看看：

揭祕—高級產品經理的平常工做

超實用的App原型設計工具入門指南，初學者必看

4款協同設計工具-助你打造靈活高效的設計團隊

瞭解這些設計原則，助你打造最佳用戶體驗

【吐血整理】國外產品經理課程推薦，總有一款適合你！