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

為什么Ta喜歡讓你畫原型

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

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

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

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

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

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

反思一下，站在需求或業(yè)務(wù)方，對于有價值的信息你收集了嗎？你有跟需求方深入談?wù)撨@個需求了嗎？真正了解他想要做什么？他想要達(dá)到什么效果？什么功能？哪些是他能想出來的規(guī)則、流程、邏輯？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 比例
• 布局
• 大小
• 關(guān)聯(lián)
• 顏色

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

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

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

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

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

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

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

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

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

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

他包括以下五個層次：

戰(zhàn)略層

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

范圍層

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

結(jié)構(gòu)層

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

框架層

在表現(xiàn)層之下是網(wǎng)站的框架層（skeleton）：按鈕、表格、照片和文本區(qū)域的位置?？蚣軐佑糜趦?yōu)化設(shè)計布局，以達(dá)到這些元素的最大效果和效率——使你在需要的時候，能記得標(biāo)識并找到購物車的按鈕。

表現(xiàn)層

在表現(xiàn)層（surface），你看到的是一系列的網(wǎng)頁，有圖片和文字組成。一些圖片是可以點擊的，從而執(zhí)行某種功能。例如把你帶到購物車?yán)锶?。一些圖片就只是圖片，比如一本書的封面或網(wǎng)站自己的標(biāo)志。

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

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

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

#專欄作家#

辛超，微信公眾號：pmnote，人人都是產(chǎn)品經(jīng)理專欄作家。九櫻天下產(chǎn)品經(jīng)理，關(guān)注社區(qū)共享經(jīng)濟(jì)領(lǐng)域，曾任藍(lán)標(biāo)集團(tuán)策劃經(jīng)理，負(fù)責(zé)運(yùn)營百萬級粉絲微博賬號，現(xiàn)轉(zhuǎn)崗產(chǎn)品，擅長產(chǎn)品設(shè)計與運(yùn)營。希望未來自己打造的產(chǎn)品，能讓世界變得更好一點點。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。