微信產品經理:我的產品之器——Sketch

雷鋒網(公眾號：雷鋒網)按：本文作者John，微信產品經理。感謝覃超推薦過來與讀者們一同分享。John的產品之器系列最近會持續更新，產品經理們可以繼續關注雷鋒網，或者移步其知乎。

最近看知乎的時候發現了一篇很棒的文章，特地拿過來與大家分享，尤其推薦給產品經理或想成為產品經理的你。

以下是原文：

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

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

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

你需要在桌面上，攤開一張紙，用一支筆，去構思你的產品。這裡輸出的線框圖是給自己的，所以你盡情揮灑，只要自己看得懂就行；

有了紙上原型，這個產品的雛形已經在你心中，現在，打開 Sketch把產品的「最終形態」畫出來，不要太在意用色，不必面面俱到。這個階段配合Sketch Mirror，可以邊畫邊給其他人看，聽取其他人的反饋；

動態原型工具太多，我也基本都嘗試過，最終選擇了 Craft，這個還在內測中的工具。動態原型並不是必須的，但是動態原型更接近實際產品體驗，為什麼不再進一步呢。

紙上原型

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

第一步：列印模版

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

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

合理利用這一面紙。空白區域可以對線框圖做標註，背面可以用文字來梳理產品架構。

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

靜態原型

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

第一步：選擇 Sketch 模版

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

    

第二步：創建 Pages

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

第三步：在Artboard裡設計

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

一些奇技淫巧

1. 如何快速上手 Sketch？

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

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

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

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 進行錄屏。

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

雷鋒網註：本文轉載請務必聯繫授權並保留作者完整信息，有興趣可關注John的知乎。

這裡推薦下覃超小魔王，他有一個好玩的公號，講述矽谷和技術背後的故事：覃超帝國興亡史，有興趣的童鞋也可以移步其知乎專欄：覃超帝國興亡史-跨越美利堅之路。

雷鋒網原創文章，未經授權禁止轉載。詳情見轉載須知。