一個產品從0到1,UI設計師參與的全部步驟與所需工具(內附資源下載)。

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


Step 1 討論 & 草圖框架

所需工具:紙、筆程序員

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

如果外包項目的話,會更會費周折一點,由於對方可能只有大概的需求,功能、流程沒法很快落實到紙上,所以這樣的討論和溝通須要重複屢次。微信



Step 2 流程圖

所需工具:Mindnode、百度腦圖app

Mindnode下載地址:點擊進入下載頁面框架



結合產品需求和框架草圖,能夠用 Mindnode 畫出流程圖,把文字需求更清晰、有條理地展現出來。以下:工具



或者也可使用百度腦圖進行繪製:點擊進入百度腦圖動畫


Mindnode 是本地使用的,百度腦圖是線上使用的,不過樣式多一些,更適合線上協做。二者均可以導出 PDF 文件。ui



Step 3 框架圖 & 初步原型

所需工具:Sketch(框架圖)、POP(初步原型)prototype

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 下載地址:點擊進入下載頁面



Zeplin 幫咱們解決了大部分開發前的準備工做,但有 Icons 的設計稿咱們還須要用到 Iconfont 或 Icomoon。

要找 Icons 素材,能夠上 Iconfont,由阿里媽媽 MUX 打造,它有許多成套的彩色免費 Icon Set。也能夠用做 Icons 轉 Font 供程序員使用。

阿里媽媽圖標庫網址:點擊進入官網



Icomoon 和阿里媽媽是同樣的,但更棒的是它的編輯功能,設計師們不再須要去糾結怎麼把 Icon 調到畫布居中的問題了,它能夠挪動、旋轉、放大縮小,居中、去色一個 Icon 等(雖然界面看起來有點挫)。

Icomoon 網址:點擊進入官網



Tips 進度管理

所需工具:Trello(任務管理)、Bearychat(團隊溝通)

在此過程當中,咱們或許會須要用到任務管理軟件,例如 Trello:點擊進入官網



Trello 是國外很是火的任務管理軟件,聽說擁有 1900 萬註冊用戶,國際紅十字會、谷歌、美國迪爾公司都在使用。

看板樣式擅長處理流程化任務,適用於產品研發設計等。以下:


因爲是英語界面,如果團隊中有人對此不適應則可能沒法很好得協做。這種狀況可使用中國版本的相似產品,如TowerTeambition

Bearychat 是中國版的 Slack,聊天羣組 + 工具集成,取代 QQ 或微信做爲團隊工做中的及時聊天溝通工具。有在線版和本地版。下載與具體功能可上官網查看:點擊進入官網


- END -



西瓜設計研究所

互聯網創業 | UI設計 | 開發資源 | 教程

未經容許請勿轉載,煩請留言獲取受權

© 西瓜設計研究所

相關文章
相關標籤/搜索