工欲善其事，必先利其器。

從idea，到product，中間的可謂要經(jīng)歷幾番曲折， 產(chǎn)品定位確定決定產(chǎn)品的生死，產(chǎn)品功能需求的確定決定著開(kāi)發(fā)的周期和試錯(cuò)的成本，互聯(lián)網(wǎng)拼的就是快，所以要做 MVP（最小化可行產(chǎn)品），當(dāng)然，在這之前，還可以通過(guò)高保真原型的方式去演示產(chǎn)品。

整理一下從產(chǎn)品構(gòu)思到項(xiàng)目執(zhí)行階段，產(chǎn)品原型交付階段的一些工作方法和工具：

1、想法

首先根據(jù)產(chǎn)品形態(tài)繪制用戶流程圖比如注冊(cè)登錄流程，購(gòu)物類APP用戶的購(gòu)物流程，有助于思考產(chǎn)品涉及的頁(yè)面和功能；接下來(lái)需要把APP的功能分類匯總，用思維導(dǎo)圖整理出產(chǎn)品的結(jié)構(gòu)框架，為設(shè)計(jì) APP 界面做參考。

構(gòu)思階段用鉛筆畫(huà)一下草圖就 OK，當(dāng)確定之后，就需要整理進(jìn) PRD 文檔里。

示例流程圖

流程圖軟件推薦 VISIO 和 OmniGraffle，簡(jiǎn)單的流程圖 Powerpoint 也可以

示例思維導(dǎo)圖

思維導(dǎo)圖軟件推薦 Xmind 和 MindNode

2、靈感

一個(gè)好的設(shè)計(jì)靈感的一定是來(lái)源于日常素材的積累，在你看過(guò)N個(gè)APP，N種設(shè)計(jì)方案，熟悉設(shè)計(jì)模式之后，看到一個(gè)需求，你就已經(jīng)腦補(bǔ)出 APP 的模樣。

推薦靈感啟發(fā)網(wǎng)站：Behance、Dribble

dribbble

素材整理工具：Pixave、Ember、Inboard…通過(guò)對(duì)圖片進(jìn)行打標(biāo)簽、分類快速建立你的素材庫(kù)，而且很方便進(jìn)行檢索。

你可能會(huì)問(wèn)，「有專業(yè)的UI/UX設(shè)計(jì)師，產(chǎn)品還需要對(duì)設(shè)計(jì)這么深入么？」，一方面，對(duì)于設(shè)計(jì)，我是真心的熱愛(ài)，我會(huì)拿出精力去研究；另一方面，我的觀點(diǎn)是，UI 設(shè)計(jì)是基于你的原型去做界面設(shè)計(jì)，會(huì)受到一定的局限。如果是高級(jí)一點(diǎn)的設(shè)計(jì)師，會(huì)加入自己的經(jīng)驗(yàn)和思考進(jìn)行設(shè)計(jì)，初級(jí)的 UI，可能直接基于你的原型去設(shè)計(jì)了。對(duì)于色彩的搭配、icon 的繪制等UI 設(shè)計(jì)更有發(fā)言權(quán)，但是你的產(chǎn)品結(jié)構(gòu)，排版布局，在一開(kāi)始就影響了設(shè)計(jì)的思路。

3、草圖

紙和筆

紙和筆是最好的工具，沒(méi)有之一，可以快速把你腦補(bǔ)的界面畫(huà)出來(lái)。

推薦使用帶有手機(jī)框架的點(diǎn)狀草稿紙，方便根據(jù)實(shí)際物理尺寸控制元素的大小。

原型紙

如果你是一個(gè)追求細(xì)節(jié)的處女座，或者是追求完美的天秤座，可以嘗試這個(gè)尺子。

原型尺

提供一個(gè)可打印的模板，Marvel App 提供：點(diǎn)此下載

4、設(shè)計(jì)

這個(gè)階段可以把手繪的設(shè)計(jì)稿做成原型，高保真模型可以定義包含顏色、界面元素的UI交互設(shè)計(jì)稿，也可以定義為灰度無(wú)色彩包含交互邏輯的相對(duì)高保真，我認(rèn)為，對(duì)于產(chǎn)品，是后者。產(chǎn)品更多的精力放在界面和人之間的交互和界面與界面之間的邏輯。

高保真可以降低溝通的成本，產(chǎn)品的邏輯、流程、布局、操作狀態(tài)的展現(xiàn)，能夠快速的讓團(tuán)隊(duì)成員理解。

原型設(shè)計(jì)的工具有很多，面向 Web 為主的Axure RP、面向移動(dòng)設(shè)計(jì)的Justmind、還有在線的墨刀等。

這里強(qiáng)烈推薦 Sketch，專業(yè)的移動(dòng)APP界面設(shè)計(jì)軟件，產(chǎn)品也可以用來(lái)做原型。

Sketch

Sketch 是一款適用于所有設(shè)計(jì)師的矢量繪圖應(yīng)用。矢量繪圖也是目前進(jìn)行網(wǎng)頁(yè)，圖標(biāo)以及界面設(shè)計(jì)的最好方式。但除了矢量編輯的功能之外，我們同樣添加了一些基本的位圖工具，比如模糊和色彩校正。我們盡力讓 Sketch容易理解并上手簡(jiǎn)單，有經(jīng)驗(yàn)的設(shè)計(jì)師花上幾個(gè)小時(shí)便能將自己的設(shè)計(jì)技巧在Sketch中自如運(yùn)用。對(duì)于絕大多數(shù)的數(shù)字產(chǎn)品設(shè)計(jì)，Sketch 都能替代Adobe Photoshop，Illustrator 和 Fireworks?！浴秙ketch用戶手冊(cè)》

Sketch 提供了 iOS、Andriod系統(tǒng)的原生控件，可以直接使用。

ios UI Template

Material Design Template

作為產(chǎn)品，不需要做什么復(fù)雜的炫酷的設(shè)計(jì)的情況下，這個(gè)工具，基本上一個(gè)小時(shí)左右你就上手了。

學(xué)習(xí)資料：

1. Sketch 中文手冊(cè)
2. Medium Sketch合集
3. Design + Code

素材網(wǎng)站：

1. sketch app sources
2. sketch repo
3. UI8（付費(fèi)）

5、演示

無(wú)論是給客戶，還是給 Boss，以及團(tuán)隊(duì)成員，演示交互效果是必不可少的一環(huán)。

手繪草圖、低保真模型的演示可以通過(guò) POP APP，拍照然后創(chuàng)建頁(yè)面與頁(yè)面之間的連接進(jìn)行演示。

POP

此外針對(duì)Sketch 輸出的高保真模型?？梢酝ㄟ^(guò)交互工具來(lái)做演示。

silverflows是一款直接在 Sketch 里做原型的工具，不過(guò)前端時(shí)間被 invision 收購(gòu)了，計(jì)劃集成在 invision labs 出品的 Craft2.0版本中，還是非常值得期待的，BTW，Craft 是 Sketch 中功能非常強(qiáng)大的一款插件。

推薦一下：Flinto、Principle和 Marvel， 三款工具都可以實(shí)現(xiàn)直接導(dǎo)入 Sketch 設(shè)計(jì)稿，然后設(shè)計(jì)頁(yè)面之間的點(diǎn)擊跳轉(zhuǎn)以及轉(zhuǎn)場(chǎng)動(dòng)畫(huà)，值得一提的是 Principle 支持時(shí)間線，你可以做視差滾動(dòng)的效果。

Marvel

切記不要花費(fèi)太多的時(shí)間在炫酷的效果上，可能會(huì)拖慢項(xiàng)目的進(jìn)度，能夠達(dá)到基本的演示效果就可以。

tips：可以通過(guò)手機(jī)連接 mac，通過(guò) Quicktime 錄屏的方式，將手機(jī)屏幕投影到投影儀上進(jìn)行演示。

6、協(xié)作

如果需要將原型展示給團(tuán)隊(duì)成員，進(jìn)行實(shí)時(shí)討論，可以實(shí)時(shí)標(biāo)記，這樣子能夠節(jié)省溝通成本，提高效率。

推薦幾款實(shí)時(shí)協(xié)同標(biāo)記的工具 invision、zeplin、以及國(guó)內(nèi)的Bearyboard。

invision

原型設(shè)計(jì)僅僅是產(chǎn)品經(jīng)理的一小部分工作，產(chǎn)品經(jīng)理的工作重心應(yīng)該在用戶調(diào)研、需求分析、產(chǎn)品規(guī)劃上

作者The_One，微信：742606520，歡迎交流

本文由 @The_One?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。