欧美精品在线一区二区三区_亚洲女同精品视频_日韩一区免费_国产欧美久久久精品免费_国产这里只有精品_僵尸再翻生在线观看_久久99精品国产一区二区三区_亚洲免费一区二区_女教师淫辱の教室蜜臀av软件_中文字幕国产一区二区

一個產(chǎn)品從0到1，UI設(shè)計師參與的所有步驟與所需工具（附下載資源）

2024-6-21 濤濤

本文的前4步適用于公司沒有產(chǎn)品經(jīng)理的情況下。

【Step 1 討論 & 草圖框架】

所需工具：紙、筆

與客戶或產(chǎn)品負(fù)責(zé)人討論，了解產(chǎn)品的需求。討論前帶好紙筆，討論時可以畫出大概的框架草圖。

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

【Step 2 流程圖】

所需工具：Mindnode、百度腦圖

Mindnode 下載地址：點擊進(jìn)入下載頁面

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

或者也可以使用百度腦圖進(jìn)行繪制：點擊進(jìn)入百度腦圖

Mindnode 是本地使用的，百度腦圖是線上使用的，不過樣式多一些，更適合線上協(xié)作。兩者都可以導(dǎo)出 PDF 文件。

【Step 3 框架圖 & 初步原型】

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

Sketch 這里就不過多介紹了，大家應(yīng)該都知道了 : P 這里是 Sketch 軟件（版本 47.1）下載資源：點擊進(jìn)入下載頁面

原型框架素材包：點擊進(jìn)入下載頁面

內(nèi)含網(wǎng)頁流程圖模板、移動線框包、迷你暗色流程線框圖、iPhone框架模板、Apple Watch交互流程包。

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

POP —— Prototyping on Paper，一款手機(jī) App，把紙上的東西變?yōu)樵汀Ｅ恼蘸罂稍谑謾C(jī)上編輯熱區(qū)，手機(jī)上快速模擬原型動效。

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

POP 下載鏈接：點擊進(jìn)入App Store

【Step 4 確定設(shè)計稿 & 原型交互】

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

Axure 是產(chǎn)品經(jīng)理必備工具，主要作用就是用來做原型交互的。在沒有設(shè)計稿的情況下，可以讓客戶或團(tuán)隊的其他人了解產(chǎn)品的初步原型。也是產(chǎn)品經(jīng)理與設(shè)計師溝通的主要工具之一。

Axure PR 8 下載鏈接：點擊進(jìn)入下載頁面

作為設(shè)計師，我們或許不必用 Axure 了，可以用 Skecth 設(shè)計完后，直接上 Marvel，實現(xiàn)高保真交互展示。且 Marvel 有 Sketch 插件，可以一鍵導(dǎo)入。

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

Marvel 插件下載地址：點擊進(jìn)入下載頁面

而 Principle 主要用于實現(xiàn)較復(fù)雜的交互動效，操作比 Marvel 難一些，適合有動畫基礎(chǔ)的人。

Principle 下載地址：點擊進(jìn)入官網(wǎng)

它有本地軟件可提供下載，很多復(fù)雜炫酷的原型交互效果都是用 Principle 做出來的。如下：

【Step 5 完成設(shè)計 & 待開發(fā)】

所需工具：Zeplin（切圖、設(shè)計稿標(biāo)注）、阿里媽媽（圖標(biāo)）、Icomoon（圖標(biāo)）

Zeplin 是配合著 Sketch 非常好用的一款插件，設(shè)計稿完成后，可以直接從 Sketch 導(dǎo)入到 Zeplin 中。Zeplin 可以幫你自動生成尺碼標(biāo)注、CSS 樣式代碼、需導(dǎo)出的圖片（在 Sketch 中設(shè)好切片的設(shè)計稿，在 Zeplin 中可以直接導(dǎo)出），以及共享成員間可以備注和評論。

Zeplin 下載地址：點擊進(jìn)入下載頁面