寫這篇文章的原因呢，是因?yàn)榻K于選股寶不是只有一個(gè)產(chǎn)品狗惹，最近招了個(gè)實(shí)習(xí)生小盆友幫忙。然后捏，懶癌發(fā)作，就想把自己不想畫的電子原型稿交給小朋友做（暫時(shí)先我畫手稿，他畫電子稿）。不過，畢竟是沒有在實(shí)際的產(chǎn)品工作中畫過原型圖，很多習(xí)慣還沒有養(yǎng)成，正好寫篇文章梳理下，同時(shí)會(huì)輔助一些例子來說明吧。

畫圖原則

掉過坑、爬起來、撣一撣，才知道踩的是坑。先說幾個(gè)通過掉坑得出的幾大畫圖原則吧：

1、手稿原型圖優(yōu)先于電子稿原型圖

原型圖是需求的外在體現(xiàn)，邏輯是需求的內(nèi)在體現(xiàn)，兩者并不對(duì)立，反而是相輔相成關(guān)系。

大致理順邏輯才能開始畫原型圖，而畫原型圖的過程又可以檢查邏輯。因此，畫原型圖的過程，也是再次梳理邏輯的過程。

那么，勢必就會(huì)遇到修改，而修改，成本就可大可小了。

對(duì)于手稿來說，想到了就秒秒鐘畫，錯(cuò)了就秒秒鐘擦，驗(yàn)證合適不合適速度飛快；

對(duì)于電子稿來說，想到啥要畫，還得各種拖動(dòng)控件，搞排版，簡直累人累己分分鐘速度小渣渣；

因此，在快速驗(yàn)證或者梳理需求的過程中，強(qiáng)烈推薦用手稿的方式。（p個(gè)s，手稿建議用鉛筆橡皮，我們要環(huán)保嘛～）

你們可以發(fā)現(xiàn)咯，其實(shí)絕大部分的事情基本上都是這樣的：先花絕大多數(shù)的時(shí)間去準(zhǔn)備好寫什么（戰(zhàn)略上），再用很少的時(shí)間去根據(jù)準(zhǔn)備的東西畫圖、寫PPT、做報(bào)告等（戰(zhàn)術(shù)上），這樣的效率相對(duì)比較高。

2、電子稿要“貪靚”

這點(diǎn)的話，是我個(gè)人的需求滿足，其他人有木有要求我就不清楚了。

什么叫“貪靚”？就是要好看。這個(gè)好看，不是說讓你搶了設(shè)計(jì)師的飯碗，把原型圖畫的跟設(shè)計(jì)稿一樣你就最厲害了，而是要保證以下要點(diǎn)：

• 頁面框架要清楚；
• 頁面不影響設(shè)計(jì)；
• 頁面元素要統(tǒng)一；
• 頁面排版要整齊；

我不喜歡過手的東西可以齊整的地方不齊整，可以好看的地方不好看，強(qiáng)迫癥啦。

至于上面提到的四個(gè)點(diǎn)，等下我會(huì)輔助例子進(jìn)行詳細(xì)說明。

3、電子稿不宜占用過多時(shí)間

雖然第二點(diǎn)提到了要好看，但是不能因?yàn)楹每炊鞔晤嵉梗ㄙM(fèi)了大量時(shí)間在電子原型圖上，那就得不償失了。原型圖可以說是需求分析的最后一層了，重點(diǎn)始終是前面的思考。

而為啥很多人畫原型圖慢呢？

因?yàn)楫媹D前不考慮清楚就上軟件呀！

因?yàn)楫媹D習(xí)慣不好就上軟件呀！

因?yàn)閯?dòng)不動(dòng)就上軟件，然后反反復(fù)復(fù)反反復(fù)復(fù)呀！

電子稿需要注意的地方

說完以上的大原則后，接下來結(jié)合實(shí)例，來說說電子稿的一些注意點(diǎn)（避免你又劃上去看，友情提醒：就是上文提到的第二點(diǎn)：原型圖要好看）：

1、頁面框架要清楚

很多初手畫原型圖，一般是畫多少頁面就重建多少page，并且每個(gè)page都是平行關(guān)系。在這種情況下，想通過看原型圖的目錄來了解產(chǎn)品的頁面關(guān)系，完全是懵掉的，和你對(duì)接的設(shè)計(jì)和開發(fā)也可能分分鐘狗帶。

比較合適的方式是，畫原型圖之前先搞清楚頁面與頁面之間的關(guān)系，在頁面目錄中根據(jù)頁面關(guān)系建立好空的頁面后，再進(jìn)行具體頁面的設(shè)計(jì)。

舉例如下圖：

左邊：為平行關(guān)系的頁面；

右邊：為有主次的頁面（頁面名字亂起的哈）；

2、頁面不影響設(shè)計(jì)師的視覺

這點(diǎn)和大家天天嘴里說的“高保真原型圖”恰恰相反。

為什么呢？

產(chǎn)品經(jīng)理需求分析完成后，需要拿著原型圖和設(shè)計(jì)師進(jìn)行直觀溝通，溝通清楚之后，設(shè)計(jì)師就會(huì)開始設(shè)計(jì)。

那么，原型圖對(duì)于設(shè)計(jì)師而言，是一個(gè)便于理解需求的工具亦或是忘記需求時(shí)的查看工具，從這個(gè)角度說，就不該給工具賦予一些其他角色，比如影響設(shè)計(jì)師的設(shè)計(jì)感覺。

舉例如下圖：

左邊：用固有的占位圖或者按鈕來表示一些需要的內(nèi)容；

右邊：用不知道從哪里找來的風(fēng)格不同的icon拼湊；

人對(duì)看到的東西會(huì)產(chǎn)生印象，設(shè)計(jì)師看到你找來的icon們，腦中同樣也會(huì)有相應(yīng)的反應(yīng)：

如果你找的風(fēng)格比較一致也還看著闊以，那么設(shè)計(jì)師有可能會(huì)按照你找的icon風(fēng)格來做；

如果你找的風(fēng)格水準(zhǔn)差異巨大，那么設(shè)計(jì)師有可能會(huì)從你找的集中icon風(fēng)格中挑選一種好點(diǎn)的來做。

當(dāng)然，以上是不負(fù)責(zé)的揣測，設(shè)計(jì)師到底如何做本身就是一種對(duì)設(shè)計(jì)師自身的要求，這點(diǎn)我們暫且不談。

不能幫助設(shè)計(jì)師設(shè)計(jì)沒有關(guān)系，但是去干擾設(shè)計(jì)師設(shè)計(jì)那就罪過了。

當(dāng)然，如果貴司沒有設(shè)計(jì)師，那么，又是另當(dāng)別論啦。（不要設(shè)計(jì)師的團(tuán)隊(duì)一定是對(duì)自己的產(chǎn)品自信心爆棚吧?。?/p>

3、頁面元素要統(tǒng)一

畫原型圖的時(shí)候，勢必會(huì)用到很多軟件中自帶的控件。一開始沒有形成自己習(xí)慣的時(shí)候，可能會(huì)有以下情況：

同一個(gè)頁面內(nèi)同一種控件代表好多種行為；

同一個(gè)頁面內(nèi)同一種控件表示同一個(gè)行為，不同頁面之間同一種控件表示好多種行為；

舉例如下圖：

左邊：代表占位符，不可點(diǎn)擊；代表按鈕，可點(diǎn)擊；

右邊：比較混亂，兩個(gè)控件亂用，不能點(diǎn)擊的地方用了按鈕，能點(diǎn)擊的地方又用了占位符；

4、頁面排版要整齊

這點(diǎn)處女座的產(chǎn)品經(jīng)理應(yīng)該不會(huì)有疑問吧？哈哈。排版整齊主要指：

該左右對(duì)齊的地方對(duì)齊；

該上下居中的地方上下居中；

間隔該一致就一致；

舉例如下圖：

左邊：上下、左右都對(duì)齊；

右邊：額，紅色標(biāo)記的都沒有對(duì)齊嘛；

可能看到這里的小童鞋們會(huì)覺得，艾瑪，好麻煩呀，感覺要遵守這么多規(guī)則，畫個(gè)圖還不得累成狗呀？

畫圖技巧

事實(shí)上并不會(huì)好咩？下面瑤子哥哥教點(diǎn)大家都知道的小技巧：

1、善用輔助線

輔助線能夠幫助你分分鐘對(duì)齊，并且無時(shí)不刻闊以用到它：畫整體頁面、畫局部部件等等都闊以。用過office大件套的孩紙們都懂得。

下圖中紅色框內(nèi)的四根輔助線我是必定會(huì)有的；藍(lán)色框內(nèi)的線是拖動(dòng)了控件時(shí)系統(tǒng)會(huì)出現(xiàn)的（說這個(gè)感覺自己好智障）

怎么用輔助線，就看個(gè)人習(xí)慣咯。

2、善用母版

會(huì)多處用到的一整塊的東西盡量用母版，為啥？

1. 如果你采用到處復(fù)制粘貼的方法的話，那么如果有修改，你就得一次一次的修改好多地方，浪費(fèi)時(shí)間；
2. 如果你采用每次都自己重新畫的話，那比上面還慘，應(yīng)該沒這種童鞋吧？

同時(shí)，母版順便解決了排不齊的問題，畢竟，大部件拖起來容易排整齊的多。

Convert to Master起來~

3、善用組合

很多童鞋一開始的時(shí)候都不喜歡用組合，反正畫完都一樣嘛對(duì)不對(duì) ？不對(duì)！

萬一你下個(gè)版本要把整坨東西換到另一個(gè)位置上去呢？萬一你整個(gè)頁面要出現(xiàn)類似的東西好多遍呢？

雖然第二點(diǎn)剛說過要善用母版，但是母版也不是越多越好。

在不是全局出現(xiàn)的情況下，闊以把相關(guān)控件組合起來，不管是單頁面上的復(fù)制粘貼還是挪動(dòng)，都會(huì)非常方便，同時(shí)又無形之中解決整齊問題。

相比于鼠標(biāo)拖個(gè)范圍選中一大坨東西來說，組合實(shí)在是顯得太干凈了，蛤蛤。

Ctrl+G起來~

4、不要過度用case里的花哨功能

曾幾何時(shí)，我也是天天玩面板、中繼器玩的飛起的孩紙，現(xiàn)在最多用的就是頁面跳轉(zhuǎn)，實(shí)在不行了也用用面板之間的設(shè)置功能。

當(dāng)然，中繼器啥的在某些地方還是很好用的，不過，移動(dòng)端產(chǎn)品基本沒有用到的機(jī)會(huì)，反正畫了這么久了，就沒用到過。

不過，做后臺(tái)的產(chǎn)品童鞋可能需要，然而我還是覺得中繼器操作起來還是有點(diǎn)麻煩。

5、不要過度用條件判斷

這個(gè)多數(shù)可能會(huì)出現(xiàn)在高保真原型圖上面吧，會(huì)要求每個(gè)控件都能夠按照本身的邏輯條件出現(xiàn)相應(yīng)的行為。

聽起來好像很簡單？不就是頁面跳來跳去嘛~不就是面板出不出現(xiàn)嘛~

圖樣惹，你去判斷個(gè)登錄注冊(cè)流程再說簡單！

我記得剛做產(chǎn)品的時(shí)候，跟著一個(gè)產(chǎn)品經(jīng)理妹紙分工畫原型圖，我發(fā)現(xiàn)她每次都把所有控件的條件都列出來，當(dāng)時(shí)覺得好牛逼啊，為了不慫and整體原型圖保持一致，然后就花樣作死了。

下圖是當(dāng)時(shí)做的登錄注冊(cè)流程，應(yīng)該平均一個(gè)控件上至少都有5、6個(gè)判斷條件吧。

現(xiàn)在想想，真是醉了?？梢杂梦淖盅a(bǔ)充清清楚楚說明白的事情，非要折騰原型圖，何必呢？

另外，補(bǔ)充一下第4和第5點(diǎn)，過度用花哨功能和條件判斷，會(huì)引起另外一個(gè)世紀(jì)大問題，那就是控件的命名！

做大量條件判斷或者復(fù)雜的case是會(huì)需要指向某個(gè)控件的，那么對(duì)于控件的命名就需要一套規(guī)則，而這點(diǎn)，一開始的時(shí)候你是沒有意識(shí)到的。

然后意識(shí)到的時(shí)候，你會(huì)開始這樣來回：

“恩，這個(gè)是輸入框，那就叫它輸入框吧”

“哎呀，那個(gè)也是輸入框哎，，重名了，那把第一個(gè)改成輸入框1，第二個(gè)叫“輸入框2”吧”

“哎呀，又不行了，這么多頁面這么多輸入框，得加上頁面才行，叫他“xx頁面-用戶名輸入框”吧”

直接給跪了。

而這點(diǎn)就要向開發(fā)們學(xué)習(xí)一下啦，他們寫代碼都有一套命名規(guī)則哇。忘記哪個(gè)開發(fā)告訴我，好的命名意味著這人對(duì)自己有要求！

好啦，以上就是暫時(shí)想到的有關(guān)于原型圖的事兒，若有遺漏，求留言指出喲~

PS一下：

昨天公眾號(hào)里發(fā)了這篇文章之后，有些產(chǎn)品童鞋就發(fā)消息或者留言了，覺得邏輯、業(yè)務(wù)、溝通能力才是最重要的，原型圖根本無所謂好嘛，格局啥時(shí)變這么低了。

這個(gè)觀點(diǎn)老實(shí)說，我覺得比較幼稚吧。

沒有錯(cuò)，對(duì)行業(yè)的理解、對(duì)用戶的感知、強(qiáng)邏輯、強(qiáng)溝通確實(shí)很重要，但是，工欲善其事，必先利其器的道理大家也應(yīng)該都要懂：

1. 原型圖能直觀的體現(xiàn)需求內(nèi)容，能促進(jìn)溝通的效率；
2. 數(shù)據(jù)分析能分別從大用戶群和小用戶中發(fā)現(xiàn)用戶習(xí)慣，從而優(yōu)化產(chǎn)品；
3. 各種用戶研究方法可以幫助我們?nèi)ジ玫牧私庥脩?、剖析用戶?/li>

我個(gè)人是非常提倡合理的用好工具來幫助我們更好、更快、更有效率的去做事，因此，本文列舉了一些我個(gè)人認(rèn)為可以避免浪費(fèi)時(shí)間的點(diǎn)，但我并不鼓吹畫原型圖有多強(qiáng)。

從這些留言中，我突然發(fā)現(xiàn)有一顆包容心，可能是當(dāng)下產(chǎn)品經(jīng)理們最缺乏的。客觀的看待所有事物，取長補(bǔ)短，而不是一味的隨著自己的認(rèn)知去鄙視、去嫌棄。

同時(shí)，我也認(rèn)為產(chǎn)品經(jīng)理們一定不要好高騖遠(yuǎn)，可以志存高遠(yuǎn)，但一定要腳踏實(shí)地吧。你覺得“懂行業(yè)、懂用戶”比較重要，但是老實(shí)說，這六個(gè)字是需要不斷摸索不斷積累的才慢慢會(huì)有的，并不是你會(huì)說這六個(gè)字，你就比畫原型圖的童鞋們高級(jí)了。

ps的有點(diǎn)多，像噴子了。下周打算寫一篇相關(guān)主題的文章吧。

#專欄作家#

killifer，微信公眾號(hào)：killifer，金融資訊&工具類產(chǎn)品經(jīng)理。腦洞大、笑點(diǎn)低、間歇性“有毛病”的理工科實(shí)力逗比少女。

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