算上創業，我做產品差不多三年。我一直在問自己，做產品經理最重要的特質是什么？甚至在一次內部交流會上，我也問過小龍這個問題。很多人覺得做產品很輕松，寫個文檔，提個需求給設計和開發，然后扯皮，「產品經理不需要硬技能」，「不會寫代碼就去做產品」，「人人都是產品經理」。

我覺得不是這樣的，不然這三年來我應該過的很輕松才對。我每天都焦慮，沒有好的想法焦慮，碰到技術問題焦慮，業務數據不上漲焦慮，如果沒有「做一個偉大產品」的理想，我應該早就放棄了。做產品，一點都不輕松。但「焦慮」并不是一個產品經理的特質，想辦法解決問題，用好的辦法解決才是。

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

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

紙上原型

紙上原型最大的特點就是極速，不用在意字體，顏色等細節，只需要構思整個產品的大致形態。紙上原型最佳實踐：

第一步：打印模版

從A4模版選擇一個合適的硬件機型，比如iPhone 6，單面打印出來。

第二步：不斷探索產品形態，輸出線框圖

合理利用這一面紙?？瞻讌^域可以對線框圖做標注，背面可以用文字來梳理產品架構。

因為不能涉及公司業務，這里我以 iMessage 為例。

靜態原型

我用 Sketch 已經兩年多了，從 3.0 版本開始就把 Sketch 列為主力設計工具。對于「產品經理要不要懂設計」，我的理解是不僅要懂，而且要精。和設計師不同，產品經理的設計稿偏向于思考用設計解決問題，而不是視覺傳達。

Sketch 最佳實踐

第一步：選擇 Sketch 模版

開始一個項目前，從模版創建一個項目。在前一篇文章「產品之器?Ulysses」中提到過，我很討厭重復工作，所以對 Sketch 我也有自己做的模版，包含 iOS 標準控件，還有微信里用到的氣泡等控件，加上 Style Guideline，常用圖標等。

第二步：創建 Pages

對于不同版本，很多人通過不同的 Sketch 文件名來區分，比如 xxx-v1，xxx-v2。這樣做有個壞處，一個項目分散在不同的文件中。我是通過不同 Pages 來進行文件版本控制，每一個版本里面包含了完整方案。

第三步：在Artboard里設計

在Artboard里面設計每一個界面，在設計的過程中同步使用 Mirror，實時在手機里看效果。每設計完成一個版本，拿給同事看，聽聽他們的反饋，從反饋中提取可改進的地方進行優化。最終得到一份基本完整的 Sketch 文件。

一些奇技淫巧

1. 如何快速上手 Sketch？

入門 Sketch 最好方法是系統截屏，把 iOS 系統里面每一個原生 App 自己畫一遍，每個圖標自己畫一遍，邊畫邊琢磨蘋果的設計師是怎么解決問題的。這里推薦一些其他快速入門的教程：

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

2. 常用的 Sketch 的模版庫有哪些？

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

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

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

好的模版雖然能夠滿足基本需求，但是根據自己的實際需求打造自己的設計模版必不可少。一個自己的設計模版以下部分必不可少：

• 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，系統常用 Icon等；
• Sytle Guidelines. 包括 Colors, Typography等。

4. 常用 Sketch 插件有哪些？

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

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

動態原型

上一節輸出的靜態原型，已經能夠讓我們進入到產品的下一個階段。作為錦上添花的動態原型，能夠更直觀讓用戶體驗。動態原型工具市面上一大把，Origami、Pixate、Framer、Keynote，甚至 Xcode，每一個工具我都用過一段時間，最終，我選擇了 Craft 作為動態原型設計工具。

做動態原型的一個原則是：快速。如果在這個階段浪費太多時間，得不償失。Craft 就是能夠直接在 Sketch 軟件里面進行動態原型設計的工具。Craft 最佳實踐：

第一步：在 Sketch 里面設計

設置初始界面，定義不同界面之間的跳轉，Craft 也提供了基本的輸入狀態等。更多教程

第二步：使用 Invision App 體驗

在 Sketch 里面做好基本的頁面跳轉和動態效果之后，可以使用 Invision App 進行預覽。如果需要呈現在 Keynote 上面可以使用 Mac 系統提供的 QuickTime Player 進行錄屏。

以上，我們把一個想法變成了一個可體驗的動態原型。

本文作者@王稷豪?，微信產品經理，文章首發于知乎專欄「產品日經」，關注作者知乎，獲取「產品之器」最新文章。

本文由 @王稷豪 授權發布于人人都是產品經理，未經作者許可，禁止轉載。