產品之器 · Sketch
算上創業,我做產品差不多三年。我一直在問自己,做產品經理最重要的特質是什么?甚至在一次內部交流會上,我也問過小龍這個問題。很多人覺得做產品很輕松,寫個文檔,提個需求給設計和開發,然后扯皮,「產品經理不需要硬技能」,「不會寫代碼就去做產品」,「人人都是產品經理」。
我覺得不是這樣的,不然這三年來我應該過的很輕松才對。我每天都焦慮,沒有好的想法焦慮,碰到技術問題焦慮,業務數據不上漲焦慮,如果沒有「做一個偉大產品」的理想,我應該早就放棄了。做產品,一點都不輕松。但「焦慮」并不是一個產品經理的特質,想辦法解決問題,用好的辦法解決才是。
產品的每一個階段都要解決大量問題。需求分析階段,我們搞清楚了為什么要做這個需求。下一個階段就是把想法變成讓用戶(包括老板)實際可體驗的東西,即產品原型。產品原型并不是直接上手 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 自己畫一遍,每個圖標自己畫一遍,邊畫邊琢磨蘋果的設計師是怎么解決問題的。這里推薦一些其他快速入門的教程:
- 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 進行錄屏。
以上,我們把一個想法變成了一個可體驗的動態原型。
本文作者@王稷豪?,微信產品經理,文章首發于知乎專欄「產品日經」,關注作者知乎,獲取「產品之器」最新文章。
本文由 @王稷豪 授權發布于人人都是產品經理,未經作者許可,禁止轉載。
sketch之前團隊里面推行了很久,但是很難推行下去,原因在于:
1)sketch僅有mac,無windows。團隊內部不能保證大家都有,特別是前端用的是mac
2)sketch導出的格式極為有限,默認導出png,jpg
3)sketch極易上手,但是導出為其他格式需要裝插件,pdf要裝插件,標注要裝插件
4)sketch無法做交互,即前端只看sketch設計稿無法知道點擊哪里,又去向哪里,動態效果是什么
5)sketch標注要裝插件,國外大神做的measure,和我自己按照一個開源腳本修改的導出插件,直接輸出帶導航的html格式的標注結果??梢宰屒岸苏蘸J畫瓢重畫頁面
基本上,sketch適合做視覺稿,也適合產品經理輸出一些漂亮的設計稿(不一定是頁面,可以是ppt的報表,可以是各種信息圖),而不適合做原型設計,因為sketch只有一個優點(就足夠了):
快!快!快!
所謂的動態原型,我沒能理解。是演示型,還是可操作型?
這什么軟件,英文太高大上了,還要收費的感覺、、、、還是用我的AX>>>
我覺得畫原型之間需要多做一步,就是畫畫流程圖或者功能結構圖
小龍 是張小龍嗎 ? 膜拜 大神
不,是李小龍了,會用雙截棍的,葉問的徒弟。