一個產品從0到1，UI設計師參與的所有步驟與所需工具（內附資源下載）。

西瓜設計研究所發表於2017-12-05

本文的前4步適用於公司沒有產品經理的情況下。

Step 1 討論 & 草圖框架

所需工具：紙、筆

與客戶或產品負責人討論，瞭解產品的需求。討論前帶好紙筆，討論時可以畫出大概的框架草圖。

若是外包專案的話，會更會費周折一點，因為對方可能只有大概的需求，功能、流程無法很快落實到紙上，因此這樣的討論和溝通需要重複多次。

Step 2 流程圖

所需工具：Mindnode、百度腦圖

Mindnode下載地址：點選進入下載頁面

結合產品需求和框架草圖，可以用 Mindnode 畫出流程圖，把文字需求更清晰、有條理地展示出來。如下：

或者也可以使用百度腦圖進行繪製：點選進入百度腦圖

Mindnode 是本地使用的，百度腦圖是線上使用的，不過樣式多一些，更適合線上協作。兩者都可以匯出 PDF 檔案。

Step 3 框架圖 & 初步原型

所需工具：Sketch（框架圖）、POP（初步原型）

Sketch這裡就不過多介紹了，大家應該都知道了 : P這裡是 Sketch 軟體（版本 47.1）下載資源：點選進入下載頁面

原型框架素材包：點選進入下載頁面

內含網頁流程圖模板、移動線框包、迷你暗色流程線框圖、iPhone框架模板、Apple Watch互動流程包。

在原型框架素材的基礎上，用 Sketch 畫出符合產品需求的框架圖。如下：

POP—— Prototyping on Paper，一款手機 App，把紙上的東西變為原型。拍照後可在手機上編輯熱區，手機上快速模擬原型動效。

POP 原是由一個僅有3個人的年輕臺灣團隊做出，後被 Marvel 收購，可與你的 Marvel 賬戶打通，Marvel 線上做的原型，這下手機瀏覽起來更方便啦！

POP下載連結：點選進入App Store

Step 4 確定設計稿 & 原型互動

所需工具：Sketch（設計稿）、Axure（原型互動）、Marvel（原型展示）、Principle（互動動效）

Axure 是產品經理必備工具，主要作用就是用來做原型互動的。在沒有設計稿的情況下，可以讓客戶或團隊的其他人瞭解產品的初步原型。也是產品經理與設計師溝通的主要工具之一。

Axure PR 8 下載連結：點選進入下載頁面

作為設計師，我們或許不必用 Axure 了，可以用 Skecth 設計完後，直接上 Marvel，實現高保真互動展示。且 Marvel 有 Sketch 外掛，可以一鍵匯入。

前面講 POP 時提到的，如果你設計的是手機 App，用 Marvel 後，就可以直接在手機上給別人演示啦。

Marvel 外掛下載地址：點選進入下載頁面

而 Principle 主要用於實現較複雜的互動動效，操作比 Marvel 難一些，適合有動畫基礎的人。

Principle 下載地址：點選進入官網

它有本地軟體可提供下載，很多複雜炫酷的原型互動效果都是用 Principle 做出來的。如下：

Step 5 完成設計 & 待開發

所需工具：Zeplin（切圖、設計稿標註）、阿里媽媽（圖示）、Icomoon（圖示）

Zeplin 是配合著 Sketch 非常好用的一款外掛，設計稿完成後，可以直接從 Sketch 匯入到 Zeplin 中。Zeplin 可以幫你自動生成尺碼標註、CSS 樣式程式碼、需匯出的圖片（在 Sketch 中設好切片的設計稿，在 Zeplin 中可以直接匯出），以及共享成員間可以備註和評論。

Zeplin 下載地址：點選進入下載頁面