產品之器? Sketch

01-25

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

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

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

紙上原型。你需要在桌面上，攤開一張紙，用一支筆，去構思你的產品。這裡輸出的線框圖是給自己的，所以你盡情揮灑，只要自己看得懂就行；
靜態原型。有了紙上原型，這個產品的雛形已經在你心中，現在，打開 Sketch把產品的「最終形態」畫出來，不要太在意用色，不必面面俱到。這個階段配合Sketch Mirror，可以邊畫邊給其他人看，聽取其他人的反饋；
動態原型。動態原型工具太多，我也基本都嘗試過，最終選擇了 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 自己畫一遍，每個圖標自己畫一遍，邊畫邊琢磨蘋果的設計師是怎麼解決問題的。這裡推薦一些其他快速入門的教程：

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

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