2016-10-12killifer產(chǎn)品100干貨速遞
▌推薦星級：★★★★★
▌閱讀時間：8min
▌推薦理由：掉過坑、爬起來、撣一撣，才知道踩的是坑！趕緊收好這個錦囊~
本文作者：killifer，微信公眾號：killifer
寫這篇文章的原因呢，是因?yàn)榻K于選股寶不是只有一個產(chǎn)品狗惹，最近招了個實(shí)習(xí)生小盆友幫忙。然后捏，懶癌發(fā)作，就想把自己不想畫的電子原型稿交給小朋友做（暫時先我畫手稿，他畫電子稿）。不過，畢竟是沒有在實(shí)際的產(chǎn)品工作中畫過原型圖，很多習(xí)慣還沒有養(yǎng)成，正好寫篇文章梳理下，同時會輔助一些例子來說明吧。
掉過坑、爬起來、撣一撣，才知道踩的是坑。先說幾個通過掉坑得出的幾大畫圖原則吧：
1、手稿原型圖優(yōu)先于電子稿原型圖
原型圖是需求的外在體現(xiàn)，邏輯是需求的內(nèi)在體現(xiàn)，兩者并不對立，反而是相輔相成關(guān)系。
大致理順邏輯才能開始畫原型圖，而畫原型圖的過程又可以檢查邏輯。因此，畫原型圖的過程，也是再次梳理邏輯的過程。
那么，勢必就會遇到修改，而修改，成本就可大可小了。
對于手稿來說，想到了就秒秒鐘畫，錯了就秒秒鐘擦，驗(yàn)證合適不合適速度飛快；
對于電子稿來說，想到啥要畫，還得各種拖動控件，搞排版，簡直累人累己分分鐘速度小渣渣；
因此，在快速驗(yàn)證或者梳理需求的過程中，強(qiáng)烈推薦用手稿的方式。（p個s，手稿建議用鉛筆橡皮，我們要環(huán)保嘛～）
你們可以發(fā)現(xiàn)咯，其實(shí)絕大部分的事情基本上都是這樣的：先花絕大多數(shù)的時間去準(zhǔn)備好寫什么（戰(zhàn)略上），再用很少的時間去根據(jù)準(zhǔn)備的東西畫圖、寫PPT、做報告等（戰(zhàn)術(shù)上），這樣的效率相對比較高。
2、電子稿要“貪靚”
這點(diǎn)的話，是我個人的需求滿足，其他人有木有要求我就不清楚了。
什么叫“貪靚”？就是要好看。這個好看，不是說讓你搶了設(shè)計師的飯碗，把原型圖畫的跟設(shè)計稿一樣你就最厲害了，而是要保證以下要點(diǎn)：
- 頁面框架要清楚；
- 頁面不影響設(shè)計；
- 頁面元素要統(tǒng)一；
- 頁面排版要整齊；
我不喜歡過手的東西可以齊整的地方不齊整，可以好看的地方不好看，強(qiáng)迫癥啦。
至于上面提到的四個點(diǎn)，等下我會輔助例子進(jìn)行詳細(xì)說明。
3、電子稿不宜占用過多時間
雖然第二點(diǎn)提到了要好看，但是不能因?yàn)楹每炊鞔晤嵉梗ㄙM(fèi)了大量時間在電子原型圖上，那就得不償失了。原型圖可以說是需求分析的最后一層了，重點(diǎn)始終是前面的思考。
而為啥很多人畫原型圖慢呢？
因?yàn)楫媹D前不考慮清楚就上軟件呀！
因?yàn)楫媹D習(xí)慣不好就上軟件呀！
因?yàn)閯硬粍泳蜕宪浖缓蠓捶磸?fù)復(fù)反反復(fù)復(fù)呀！
說完以上的大原則后，接下來結(jié)合實(shí)例，來說說電子稿的一些注意點(diǎn)（避免你又劃上去看，友情提醒：就是上文提到的第二點(diǎn)：原型圖要好看）：
1）頁面框架要清楚
很多初手畫原型圖，一般是畫多少頁面就重建多少page，并且每個page都是平行關(guān)系。在這種情況下，想通過看原型圖的目錄來了解產(chǎn)品的頁面關(guān)系，完全是懵掉的，和你對接的設(shè)計和開發(fā)也可能分分鐘狗帶。
比較合適的方式是，畫原型圖之前先搞清楚頁面與頁面之間的關(guān)系，在頁面目錄中根據(jù)頁面關(guān)系建立好空的頁面后，再進(jìn)行具體頁面的設(shè)計。
舉例如下圖：
左邊：為平行關(guān)系的頁面；
右邊：為有主次的頁面（頁面名字亂起的哈）；
2）頁面不影響設(shè)計師的視覺
這點(diǎn)和大家天天嘴里說的“高保真原型圖”恰恰相反。
為什么呢？
產(chǎn)品經(jīng)理需求分析完成后，需要拿著原型圖和設(shè)計師進(jìn)行直觀溝通，溝通清楚之后，設(shè)計師就會開始設(shè)計。
那么，原型圖對于設(shè)計師而言，是一個便于理解需求的工具亦或是忘記需求時的查看工具，從這個角度說，就不該給工具賦予一些其他角色，比如影響設(shè)計師的設(shè)計感覺。
舉例如下圖：
左邊：用固有的占位圖或者按鈕來表示一些需要的內(nèi)容；
右邊：用不知道從哪里找來的風(fēng)格不同的icon拼湊；
人對看到的東西會產(chǎn)生印象，設(shè)計師看到你找來的icon們，腦中同樣也會有相應(yīng)的反應(yīng)：
如果你找的風(fēng)格比較一致也還看著闊以，那么設(shè)計師有可能會按照你找的icon風(fēng)格來做；
如果你找的風(fēng)格水準(zhǔn)差異巨大，那么設(shè)計師有可能會從你找的集中icon風(fēng)格中挑選一種好點(diǎn)的來做。
當(dāng)然，以上是不負(fù)責(zé)的揣測，設(shè)計師到底如何做本身就是一種對設(shè)計師自身的要求，這點(diǎn)我們暫且不談。
不能幫助設(shè)計師設(shè)計沒有關(guān)系，但是去干擾設(shè)計師設(shè)計那就罪過了。
當(dāng)然，如果貴司沒有設(shè)計師，那么，又是另當(dāng)別論啦。（不要設(shè)計師的團(tuán)隊一定是對自己
的產(chǎn)品自信心爆棚吧！）
3）頁面元素要統(tǒng)一
畫原型圖的時候，勢必會用到很多軟件中自帶的控件。一開始沒有形成自己習(xí)慣的時候，可能會有以下情況：
同一個頁面內(nèi)同一種控件代表好多種行為；
同一個頁面內(nèi)同一種控件表示同一個行為，不同頁面之間同一種控件表示好多種行為；
舉例如下圖：
左邊：代表占位符，不可點(diǎn)擊；代表按鈕，可點(diǎn)擊；
右邊：比較混亂，兩個控件亂用，不能點(diǎn)擊的地方用了按鈕，能點(diǎn)擊的地方又用了占位符；
4）頁面排版要整齊
這點(diǎn)處女座的產(chǎn)品經(jīng)理應(yīng)該不會有疑問吧？哈哈。排版整齊主要指：
該左右對齊的地方對齊；
該上下居中的地方上下居中；
間隔該一致就一致；
舉例如下圖：
左邊：上下、左右都對齊；
右邊：額，紅色標(biāo)記的都沒有對齊嘛；
可能看到這里的小童鞋們會覺得，艾瑪，好麻煩呀，感覺要遵守這么多規(guī)則，畫個圖還不得累成狗呀？
事實(shí)上并不會好咩？下面瑤子哥哥教點(diǎn)大家都知道的小技巧：
1、善用輔助線
輔助線能夠幫助你分分鐘對齊，并且無時不刻闊以用到它：畫整體頁面、畫局部部件等等都闊以。用過office大件套的孩紙們都懂得。
下圖中紅色框內(nèi)的四根輔助線我是必定會有的；藍(lán)色框內(nèi)的線是拖動了控件時系統(tǒng)會出現(xiàn)的（說這個感覺自己好智障）
怎么用輔助線，就看個人習(xí)慣咯。
2、善用母版
會多處用到的一整塊的東西盡量用母版，為啥？
- 如果你采用到處復(fù)制粘貼的方法的話，那么如果有修改，你就得一次一次的修改好多地方，浪費(fèi)時間；
- 如果你采用每次都自己重新畫的話，那比上面還慘，應(yīng)該沒這種童鞋吧？
同時，母版順便解決了排不齊的問題，畢竟，大部件拖起來容易排整齊的多。
Convert to Master起來~
3、善用組合
很多童鞋一開始的時候都不喜歡用組合，反正畫完都一樣嘛對不對 ？不對！
萬一你下個版本要把整坨東西換到另一個位置上去呢？萬一你整個頁面要出現(xiàn)類似的東西好多遍呢？
雖然第二點(diǎn)剛說過要善用母版，但是母版也不是越多越好。
在不是全局出現(xiàn)的情況下，闊以把相關(guān)控件組合起來，不管是單頁面上的復(fù)制粘貼還是挪動，都會非常方便，同時又無形之中解決整齊問題。
相比于鼠標(biāo)拖個范圍選中一大坨東西來說，組合實(shí)在是顯得太干凈了，蛤蛤。
Ctrl+G起來~
4、不要過度用case里的花哨功能
曾幾何時，我也是天天玩面板、中繼器玩的飛起的孩紙，現(xiàn)在最多用的就是頁面跳轉(zhuǎn)，實(shí)在不行了也用用面板之間的設(shè)置功能。
當(dāng)然，中繼器啥的在某些地方還是很好用的，不過，移動端產(chǎn)品基本沒有用到的機(jī)會，反正畫了這么久了，就沒用到過。
不過，做后臺的產(chǎn)品童鞋可能需要，然而我還是覺得中繼器操作起來還是有點(diǎn)麻煩。
5、不要過度用條件判斷
這個多數(shù)可能會出現(xiàn)在高保真原型圖上面吧，會要求每個控件都能夠按照本身的邏輯條件出現(xiàn)相應(yīng)的行為。
聽起來好像很簡單？不就是頁面跳來跳去嘛~不就是面板出不出現(xiàn)嘛~
圖樣惹，你去判斷個登錄注冊流程再說簡單！
我記得剛做產(chǎn)品的時候，跟著一個產(chǎn)品經(jīng)理妹紙分工畫原型圖，我發(fā)現(xiàn)她每次都把所有控件的條件都列出來，當(dāng)時覺得好牛逼啊，為了不慫and整體原型圖保持一致，然后就花樣作死了。
下圖是當(dāng)時做的登錄注冊流程，應(yīng)該平均一個控件上至少都有5、6個判斷條件吧。
現(xiàn)在想想，真是醉了。可以用文字補(bǔ)充清清楚楚說明白的事情，非要折騰原型圖，何必呢？
另外，補(bǔ)充一下第4和第5點(diǎn)，過度用花哨功能和條件判斷，會引起另外一個世紀(jì)大問題，那就是控件的命名！
做大量條件判斷或者復(fù)雜的case是會需要指向某個控件的，那么對于控件的命名就需要一套規(guī)則，而這點(diǎn)，一開始的時候你是沒有意識到的。
然后意識到的時候，你會開始這樣來回：
“恩，這個是輸入框，那就叫它輸入框吧”
“哎呀，那個也是輸入框哎，，重名了，那把第一個改成輸入框1，第二個叫“輸入框2”吧”
“哎呀，又不行了，這么多頁面這么多輸入框，得加上頁面才行，叫他“xx頁面-用戶名輸入框”吧”
直接給跪了。
而這點(diǎn)就要向開發(fā)們學(xué)習(xí)一下啦，他們寫代碼都有一套命名規(guī)則哇。忘記哪個開發(fā)告訴我，好的命名意味著這人對自己有要求！
好啦，以上就是暫時想到的有關(guān)于原型圖的事兒，若有遺漏，求留言指出喲。
