算上創(chuàng)業(yè)，我做產(chǎn)品差不多三年。我一直在問(wèn)自己，做產(chǎn)品經(jīng)理最重要的特質(zhì)是什么？甚至在一次內(nèi)部交流會(huì)上，我也問(wèn)過(guò)小龍這個(gè)問(wèn)題。很多人覺(jué)得做產(chǎn)品很輕松，寫(xiě)個(gè)文檔，提個(gè)需求給設(shè)計(jì)和開(kāi)發(fā)，然后扯皮，「產(chǎn)品經(jīng)理不需要硬技能」，「不會(huì)寫(xiě)代碼就去做產(chǎn)品」，「人人都是產(chǎn)品經(jīng)理」。

我覺(jué)得不是這樣的，不然這三年來(lái)我應(yīng)該過(guò)的很輕松才對(duì)。我每天都焦慮，沒(méi)有好的想法焦慮，碰到技術(shù)問(wèn)題焦慮，業(yè)務(wù)數(shù)據(jù)不上漲焦慮，如果沒(méi)有「做一個(gè)偉大產(chǎn)品」的理想，我應(yīng)該早就放棄了。做產(chǎn)品，一點(diǎn)都不輕松。但「焦慮」并不是一個(gè)產(chǎn)品經(jīng)理的特質(zhì)，想辦法解決問(wèn)題，用好的辦法解決才是。

產(chǎn)品的每一個(gè)階段都要解決大量問(wèn)題。需求分析階段，我們搞清楚了為什么要做這個(gè)需求。下一個(gè)階段就是把想法變成讓用戶(hù)（包括老板）實(shí)際可體驗(yàn)的東西，即產(chǎn)品原型。產(chǎn)品原型并不是直接上手 Sketch，畫(huà)完給老板看。我的最佳實(shí)踐是產(chǎn)品原型有三個(gè)子階段：

1. 紙上原型。你需要在桌面上，攤開(kāi)一張紙，用一支筆，去構(gòu)思你的產(chǎn)品。這里輸出的線框圖是給自己的，所以你盡情揮灑，只要自己看得懂就行；
2. 靜態(tài)原型。有了紙上原型，這個(gè)產(chǎn)品的雛形已經(jīng)在你心中，現(xiàn)在，打開(kāi) Sketch把產(chǎn)品的「最終形態(tài)」畫(huà)出來(lái)，不要太在意用色，不必面面俱到。這個(gè)階段配合Sketch Mirror，可以邊畫(huà)邊給其他人看，聽(tīng)取其他人的反饋；
3. 動(dòng)態(tài)原型。動(dòng)態(tài)原型工具太多，我也基本都嘗試過(guò)，最終選擇了 Craft，這個(gè)還在內(nèi)測(cè)中的工具。動(dòng)態(tài)原型并不是必須的，但是動(dòng)態(tài)原型更接近實(shí)際產(chǎn)品體驗(yàn)，為什么不再進(jìn)一步呢。

紙上原型

紙上原型最大的特點(diǎn)就是極速，不用在意字體，顏色等細(xì)節(jié)，只需要構(gòu)思整個(gè)產(chǎn)品的大致形態(tài)。紙上原型最佳實(shí)踐：

第一步：打印模版

從A4模版選擇一個(gè)合適的硬件機(jī)型，比如iPhone 6，單面打印出來(lái)。

第二步：不斷探索產(chǎn)品形態(tài)，輸出線框圖

合理利用這一面紙?？瞻讌^(qū)域可以對(duì)線框圖做標(biāo)注，背面可以用文字來(lái)梳理產(chǎn)品架構(gòu)。

因?yàn)椴荒苌婕肮緲I(yè)務(wù)，這里我以 iMessage 為例。

靜態(tài)原型

我用 Sketch 已經(jīng)兩年多了，從 3.0 版本開(kāi)始就把 Sketch 列為主力設(shè)計(jì)工具。對(duì)于「產(chǎn)品經(jīng)理要不要懂設(shè)計(jì)」，我的理解是不僅要懂，而且要精。和設(shè)計(jì)師不同，產(chǎn)品經(jīng)理的設(shè)計(jì)稿偏向于思考用設(shè)計(jì)解決問(wèn)題，而不是視覺(jué)傳達(dá)。

Sketch 最佳實(shí)踐

第一步：選擇 Sketch 模版

開(kāi)始一個(gè)項(xiàng)目前，從模版創(chuàng)建一個(gè)項(xiàng)目。在前一篇文章「產(chǎn)品之器?Ulysses」中提到過(guò)，我很討厭重復(fù)工作，所以對(duì) Sketch 我也有自己做的模版，包含 iOS 標(biāo)準(zhǔn)控件，還有微信里用到的氣泡等控件，加上 Style Guideline，常用圖標(biāo)等。

第二步：創(chuàng)建 Pages

對(duì)于不同版本，很多人通過(guò)不同的 Sketch 文件名來(lái)區(qū)分，比如 xxx-v1，xxx-v2。這樣做有個(gè)壞處，一個(gè)項(xiàng)目分散在不同的文件中。我是通過(guò)不同 Pages 來(lái)進(jìn)行文件版本控制，每一個(gè)版本里面包含了完整方案。

第三步：在Artboard里設(shè)計(jì)

在Artboard里面設(shè)計(jì)每一個(gè)界面，在設(shè)計(jì)的過(guò)程中同步使用 Mirror，實(shí)時(shí)在手機(jī)里看效果。每設(shè)計(jì)完成一個(gè)版本，拿給同事看，聽(tīng)聽(tīng)他們的反饋，從反饋中提取可改進(jìn)的地方進(jìn)行優(yōu)化。最終得到一份基本完整的 Sketch 文件。

一些奇技淫巧

1. 如何快速上手 Sketch？

入門(mén) Sketch 最好方法是系統(tǒng)截屏，把 iOS 系統(tǒng)里面每一個(gè)原生 App 自己畫(huà)一遍，每個(gè)圖標(biāo)自己畫(huà)一遍，邊畫(huà)邊琢磨蘋(píng)果的設(shè)計(jì)師是怎么解決問(wèn)題的。這里推薦一些其他快速入門(mén)的教程：

• Sketch 官方教程
• Design + Code by MengTo
• 也許過(guò)不久，我也會(huì)出一套上手視頻，誰(shuí)知道呢：）

2. 常用的 Sketch 的模版庫(kù)有哪些？

模版能夠減少很多「重復(fù)發(fā)明輪子」，這里提供一些好用的模版

• iOS 10 UI Kit. 新鮮出爐的 iOS 10 模版；
• iOS 9 UI Kit. Facebook Design Team 出品的 iOS 模版庫(kù)；
• Apple Watch GUI. Meng To 出的一套 Apple Watch 模版；
• 資源庫(kù)。你想要的所有模版，這里都能找到。

3. 怎么做自己的 Sketch 模版？

好的模版雖然能夠滿(mǎn)足基本需求，但是根據(jù)自己的實(shí)際需求打造自己的設(shè)計(jì)模版必不可少。一個(gè)自己的設(shè)計(jì)模版以下部分必不可少：

• UI Bars. 包括 Navigation Bars, Search Bars, Status Bars, Tab Bars, Toolbars等；
• UI Views. Action Sheets, Activity Views, Alerts, Collections, Image Views, Maps, Pages, Popovers, Scroll Views, Split Views, Tables, Text Views, Web Views等；
• UI Controls. Buttons, Edit Menus, Labels, Page Controls, Pickers, Progress Indicators, Refresh Content Controls, Segmented Controls, Sliders, Steppers, Switches, Text Fields等；
• Icons. 包含App Icon，系統(tǒng)常用 Icon等；
• Sytle Guidelines. 包括 Colors, Typography等。

4. 常用 Sketch 插件有哪些？

Sketch 強(qiáng)大之處在于能夠使用第三方插件，這極大提升了生產(chǎn)力，甚至你可以自己寫(xiě)插件提高效率。我常用的插件包括：

• Content Generator. 通過(guò)快捷鍵能夠填充頭像等；
• Measure. 用來(lái)給其他人做標(biāo)注用；
• Craft. Invision 出品的強(qiáng)大的 Sketch 插件，包含 Library, Photos, Type, Duplicate, Prototype 這五個(gè)部分，其中 Prototype就是我們接下來(lái)要介紹的動(dòng)態(tài)原型工具。

動(dòng)態(tài)原型

上一節(jié)輸出的靜態(tài)原型，已經(jīng)能夠讓我們進(jìn)入到產(chǎn)品的下一個(gè)階段。作為錦上添花的動(dòng)態(tài)原型，能夠更直觀讓用戶(hù)體驗(yàn)。動(dòng)態(tài)原型工具市面上一大把，Origami、Pixate、Framer、Keynote，甚至 Xcode，每一個(gè)工具我都用過(guò)一段時(shí)間，最終，我選擇了 Craft 作為動(dòng)態(tài)原型設(shè)計(jì)工具。

做動(dòng)態(tài)原型的一個(gè)原則是：快速。如果在這個(gè)階段浪費(fèi)太多時(shí)間，得不償失。Craft 就是能夠直接在 Sketch 軟件里面進(jìn)行動(dòng)態(tài)原型設(shè)計(jì)的工具。Craft 最佳實(shí)踐：

第一步：在 Sketch 里面設(shè)計(jì)

設(shè)置初始界面，定義不同界面之間的跳轉(zhuǎn)，Craft 也提供了基本的輸入狀態(tài)等。更多教程

第二步：使用 Invision App 體驗(yàn)

在 Sketch 里面做好基本的頁(yè)面跳轉(zhuǎn)和動(dòng)態(tài)效果之后，可以使用 Invision App 進(jìn)行預(yù)覽。如果需要呈現(xiàn)在 Keynote 上面可以使用 Mac 系統(tǒng)提供的 QuickTime Player 進(jìn)行錄屏。

以上，我們把一個(gè)想法變成了一個(gè)可體驗(yàn)的動(dòng)態(tài)原型。

本文作者@王稷豪?，微信產(chǎn)品經(jīng)理，文章首發(fā)于知乎專(zhuān)欄「產(chǎn)品日經(jīng)」，關(guān)注作者知乎，獲取「產(chǎn)品之器」最新文章。

本文由 @王稷豪 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。