「原型圖」是我沒轉到產品崗時接觸的第一個詞，就像你接觸的所有東西一樣，最容易讓你接觸到的，往往也是最「膚淺」的。見過一些文章這么分類產品經理，第一檔寫寫文檔、畫畫原型圖。第二檔做做分析，跟進產品的一個模塊。第三檔掌控大局，規劃、推進整個產品。

為什么Ta喜歡讓你畫原型

媒體與外界發聲過分地強調了所謂「產品用戶體驗」的重要。在局外人看來，用戶體驗不過是一個網站、一個APP符合用戶心理操作的一套體系，是個“吐吐槽”，“我覺得”就能搞定的東西。所以在所有“局外人”(包括不懂產品的技術、運營、市場)眼里，產品經理就是這樣一種人。殊不知，所謂用戶體驗并不是一款應用操作上的“爽”，還是整個公司所提供的解決方案的“爽”。從接觸、了解、使用、體驗服務、評價、售后這整整一套流程中，哪怕某個環節的疏忽也有可能造成體驗不好的感覺。

相信在初入產品崗的同學中，大家都常常被分去畫畫原型圖。做這種所謂「動動手」就能完成的工作，也讓很多新手以為抄抄改改界面就是所謂的產品設計了；因此有些人就會停留在這個階段繼而轉崗到了UE，有些人想明白了才算真正進入了產品工作。

那么問題來了：為什么許多垂涎產品崗位的人，會第一個注意到界面的美丑呢？原因很簡單：因為人類都是視覺動物，這是學習成本最低，且不需要深入了解其他東西就能說出個一二三的技能。既然剛入行，就要畫圖的命運改變不了，那么我們就要想著如何把他畫出來，并且畫好。

接到需求后，如何將他變成原型圖？

這是很實際的問題。比較“笨”的人（其實在說自己）。在聽到一個需求后就會立即畫圖，不知道有多少菜鳥會這樣，可能聰明的人會更多吧。

為什么說這樣做很笨？因為大部分情況下，你“聽”到的需求都不是詳細的具體的可執行的。在從產品經理或總監那邊獲得需求之后，以為自己理解了就開始動手畫了，往往畫好之后會推翻的可能性很高。不知道你是不是這樣，我將這樣的行為，稱為「臆想」。

反思一下，站在需求或業務方，對于有價值的信息你收集了嗎？你有跟需求方深入談論這個需求了嗎？真正了解他想要做什么？他想要達到什么效果？什么功能？哪些是他能想出來的規則、流程、邏輯？

收集完了信息，整理一下思緒，思考一下，他這樣做合理嗎？不合理的部分，你能想到更好的解決方案嗎？如果有，你又該如何有理有據的說服別人？那么，整理好自己的思路，再去和需求方碰，直到敲定結果。

當你將需求基本明確后，請召集項目干系人，一起坐下來聊一聊？聊什么？一是告知干系人我們要做這樣一件事情了？二是讓各個職能的人了解一下具體的需求，是否可執行？

因為每個人站在的角度不同，所處的觀察點就會不同，這時候不妨聽取一下大家的意見，適當修改需求。但切記：可以砍的往往是邊邊角角不妨礙主流程的東西；有些產品喜歡緊握用戶體驗的金牌，這樣做有時候會適得其反。如果產品在初期時，體驗可以退居其次，讓功能跑通才是重點。

這種算需求評審會吧，是種考驗情商的東西。你需要說服大家，如果某個點需要調整，不會提高開發成本，那么你可以堅持一下；前提是你需要有站的住腳的理由。如果反之，就大度的放棄吧。

如果這一切的很順利，需求、流程、規則都確定下來后，就開始動腦思考原型了?？催^許多交互書，會做焦點小組，訪談，調查，可用性測試等等，說實話，不知道你們公司有嗎？反正我這里沒有。。

那怎么辦？那就劃船不用槳嘍~業務流程、操作流程、功能模塊都搞出來，再畫圖，畫圖的話，我會先看很多同類或有類似功能的產品，看看這樣的形式是否適合用到我們的產品上，能否進行改良或是有無改進的空間。

接下來思考什么呢？簡單的說就是，你的產品核心是什么？這樣設計有沒有突出你要突出的東西，有沒有讓用戶的使用效率提升，用起來很“友好”。這些交互的文章，有很多，大家肯定平時也沒少看啦。

要不要畫高保真的原型圖？

這個問題靠實踐才真正獲得真理，不過各個公司的狀態可能有不同。

原型圖是干嘛的？原型圖是一種表達你想法的工具，它讓你的想法圖像化。那圖像化給誰看？這個就決定了原型圖是否要高保真。給投資人，需要。給技術，不是特別需求。給UI，你需要，尤其是經驗不足的UI。給什么人看，決定了你要達到什么目的，有時候原型圖只需要表述清楚，有時候原型圖，需要傳達給你下游你想表達的東西，哪里是重點，突出什么，想要如何引導用戶使用和查看等等，這時候就要高保真起來。

再說一個類似的東西就是PRD，PRD是干嘛的，就是一種評判產品的標準，他不是特別能推進產品進度的東西，卻是一種呈堂證供和歷史存檔，有時候我會將PRD與圖形化的界面合并起來一起提交給下游。

不過如果我說以上都是扯淡呢，很多情況下高保真低保真PRD都冇用，最后都要靠嘴與勤快的雙腿，文檔什么的都不管事，多溝通，來避免信息上的不對稱。

那么如何讓原型看起來高保真起來？

見過有的畫原型真是厲害，跟真的APP一樣，我比較推崇一半一半吧。有些美觀度，但一些特效交互我就偷懶了；這些就用嘴，網上的案例或是文字描述吧。

第一次畫原型的時候，畫的奇丑無比，這里就不貼出來嚇人了?？偨Y起來，如果想要提高你的畫原型圖水準，下面給幾你幾個方法，真的只是方法論，更多的還需要你不斷的練習。

• 比例
• 布局
• 大小
• 關聯
• 顏色

先說比例，無論是網絡還是現實生活中，我們看起來很和諧的東西都是比例很好的東西，在做原型圖的時候也是一樣。如果你畫的尺寸與真實網頁相差無幾的話，對一般的觀者來說就有很好的效果；而且對于你的下游UI，也能在很快的時間，了解你的意圖，不需要在為你調整比例。我只做過兩次網頁版的設計，經驗寥寥，不過我在畫WEB端的時候，會先確定整體頁面的寬度是1200PX，還是1000PX；確定寬度后登錄/注冊的狀態欄的高度，導航的高度等等；比例這東西滲透到整個原型制作的每個細節。

拿個今天剛畫的原型舉例吧，是web端，這是我第二次畫web端，畫的很爛請見諒。

根據接口、功能、需求、提供的文字等等一些條件權衡后，這個汽車保養的服務，我就只準備在首頁放一些很簡單的東西啦。采用大約1000PX的頁面，考慮到會有小屏幕的人使用，并且該業務后面的預約環節操作會比較集中；內容頁東西不是很多，用大尺寸會顯得很空。

再說布局，這方面沒什么特別深奧的理論來告訴大家，我一般會借鑒其他同類網站的布局，將功能，模塊化先畫好的大的方塊。就好像我們在畫素描的時候，會先將靜物的輪廓畫出，再描繪細節。在原型制作的時候也是一樣：過快的進入細節，會讓你的視野變窄。常用的一些像柵格化，黃金分割都是不錯的布局工具。

接下來說大小，大小能讓一段文字或是一張圖片，甚至是一個區域，達到突出的效果，吸引用戶的視線?？梢詫⒁攸c突出，弱化其他的信息。下圖中，我想將流程提示與下面的操作區別開，產生層次感。在汽車信息部分，突出了車主的汽車品牌名稱，抓住眼球，將更改車輛放到右側，將其弱化。這就是大小所能夠給你帶來的妙處~

之后是關聯，我們發現當信息堆在一起時，會分辨不出他們的之間的關系，而且有些毫無關系的信息放在一起，會讓人感覺非常的莫名其妙。做產品就需要具備一定的歸納與總結能力，相信這點大家都不會含糊的。這個世界有種東西叫留白，留白就能很好給你關聯或不關的視覺感受。將有關聯的東西湊近，另外一組離他們遠一點，效果立竿見影，這種張弛的感覺，會讓你的原型美觀不少的。

最后是顏色，顏色一樣可以達到突出重點的目的，但是控制顏色也是件技術活兒， 控制不當就會“花”。比如上圖，本來設計的時候在「服務地址」的地方，我是突出了「更改」；但是在與技術和接口方溝通后發現更改城市會改變價格，那么就給用戶一些提示吧~突出一下，盡量弱化更改，避免用戶做這個操作，所以我就用顏色來加重了提示。

基本上按照上面的思路去思考，就能畫出能看到的過去的原型圖了。但是經過UI的加工后，你才會發現：原型圖果然還是原型圖。人就是這樣不容易滿足，而且我們也確實不應該滿足，當一個畫圖人。

那么該如何慢慢擺脫“畫圖人”的頭銜

我很喜歡一個理論叫“用戶體驗五要素”；這個方法論很厲害，能讓你在任何問答與思考中保持一個邏輯思路清晰的狀態。

他包括以下五個層次：

戰略層

網站的范圍基本上是由網站的戰略層（strategy）所決定的。這些戰略不僅僅包括了經營者想從網站得到什么，還包括了用戶想從網站得到什么。就我們的網上書店的例子而言，一些戰略目標是顯而易見的：用戶想要買書，我們想要賣出它們。另一些目標可能并不是那么容易說清楚的。

范圍層

結構層確定網站各種特性和功能的最合適的組合方式，而這些特性和功能就構成了網站的范圍層（scope）。有些賣書的網站提供了一個功能，使用戶可以保存之前的郵寄地址，這樣他們可以再次使用它。這個功能——或任何一個功能——是否應該成為網站的功能之一，就屬于范圍層要解決的問題。

結構層

與框架層相比更抽象的是結構層（structure），框架則是結構的具體表達方式?？蚣軐哟_定了我們的結賬頁面上交互元素的位置；而結構層則用來設計用戶如何到達某個頁面，并且在他們做完事情之后能去什么地方?？蚣軐佣x了導航條上各項的排列方式，允許用戶可以瀏覽書籍的不同類別；結構層則確定哪些類別應該出現在那里。

框架層

在表現層之下是網站的框架層（skeleton）：按鈕、表格、照片和文本區域的位置?？蚣軐佑糜趦灮O計布局，以達到這些元素的最大效果和效率——使你在需要的時候，能記得標識并找到購物車的按鈕。

表現層

在表現層（surface），你看到的是一系列的網頁，有圖片和文字組成。一些圖片是可以點擊的，從而執行某種功能。例如把你帶到購物車里去。一些圖片就只是圖片，比如一本書的封面或網站自己的標志。

當他人讓你介紹產品時你可以這么思考；當你在思考一款新產品時你可以這么思考；當你在做產品規劃時候請思考一下。等等等等。。真的很厲害，大家可以經常拿出來做做練習。其實產品經理在「產品」方面的造詣，就是不斷的深入這幾個要素！越是深入產品的功力越的強，有表入里，層層遞進。

最近有聽「大師」說：孩子，解決問題才是產品該做的事，你就少看點交互、體驗類的東西吧。

「我」說：大師，請您下山看下，我們這凡人界，再說吧。呵呵。

#專欄作家#

辛超，微信公眾號：pmnote，人人都是產品經理專欄作家。九櫻天下產品經理，關注社區共享經濟領域，曾任藍標集團策劃經理，負責運營百萬級粉絲微博賬號，現轉崗產品，擅長產品設計與運營。希望未來自己打造的產品，能讓世界變得更好一點點。

本文原創發布于人人都是產品經理，未經許可，不得轉載。