2016-10-12killifer產(chǎn)品100干貨速遞
▌推薦星級：★★★★★
▌閱讀時間：8min
▌推薦理由：掉過坑太惠、爬起來磨淌、撣一撣，才知道踩的是坑凿渊！趕緊收好這個錦囊~
本文作者：killifer梁只，微信公眾號：killifer
寫這篇文章的原因呢，是因為終于選股寶不是只有一個產(chǎn)品狗惹埃脏，最近招了個實習(xí)生小盆友幫忙搪锣。然后捏，懶癌發(fā)作彩掐，就想把自己不想畫的電子原型稿交給小朋友做（暫時先我畫手稿构舟，他畫電子稿）。不過堵幽，畢竟是沒有在實際的產(chǎn)品工作中畫過原型圖狗超，很多習(xí)慣還沒有養(yǎng)成弹澎，正好寫篇文章梳理下，同時會輔助一些例子來說明吧努咐。
掉過坑苦蒿、爬起來、撣一撣渗稍，才知道踩的是坑刽肠。先說幾個通過掉坑得出的幾大畫圖原則吧：
1、手稿原型圖優(yōu)先于電子稿原型圖
原型圖是需求的外在體現(xiàn)免胃，邏輯是需求的內(nèi)在體現(xiàn)音五，兩者并不對立，反而是相輔相成關(guān)系羔沙。
大致理順邏輯才能開始畫原型圖躺涝，而畫原型圖的過程又可以檢查邏輯。因此扼雏，畫原型圖的過程坚嗜，也是再次梳理邏輯的過程。
那么诗充，勢必就會遇到修改苍蔬，而修改，成本就可大可小了蝴蜓。
對于手稿來說碟绑，想到了就秒秒鐘畫，錯了就秒秒鐘擦茎匠，驗證合適不合適速度飛快格仲；
對于電子稿來說，想到啥要畫诵冒，還得各種拖動控件凯肋，搞排版，簡直累人累己分分鐘速度小渣渣汽馋；
因此侮东，在快速驗證或者梳理需求的過程中，強烈推薦用手稿的方式豹芯。（p個s悄雅，手稿建議用鉛筆橡皮，我們要環(huán)保嘛～）
你們可以發(fā)現(xiàn)咯告组，其實絕大部分的事情基本上都是這樣的：先花絕大多數(shù)的時間去準備好寫什么（戰(zhàn)略上）煤伟，再用很少的時間去根據(jù)準備的東西畫圖、寫PPT、做報告等（戰(zhàn)術(shù)上）便锨，這樣的效率相對比較高围辙。
2、電子稿要“貪靚”
這點的話放案，是我個人的需求滿足姚建，其他人有木有要求我就不清楚了。
什么叫“貪靚”吱殉？就是要好看掸冤。這個好看，不是說讓你搶了設(shè)計師的飯碗友雳，把原型圖畫的跟設(shè)計稿一樣你就最厲害了稿湿，而是要保證以下要點：
- 頁面框架要清楚；
- 頁面不影響設(shè)計押赊；
- 頁面元素要統(tǒng)一饺藤；
- 頁面排版要整齊；
我不喜歡過手的東西可以齊整的地方不齊整流礁，可以好看的地方不好看涕俗，強迫癥啦。
至于上面提到的四個點神帅，等下我會輔助例子進行詳細說明再姑。
3、電子稿不宜占用過多時間
雖然第二點提到了要好看找御，但是不能因為好看而主次顛倒元镀，花費了大量時間在電子原型圖上，那就得不償失了萎坷。原型圖可以說是需求分析的最后一層了凹联，重點始終是前面的思考。
而為啥很多人畫原型圖慢呢哆档？
因為畫圖前不考慮清楚就上軟件呀！
因為畫圖習(xí)慣不好就上軟件呀住闯！
因為動不動就上軟件瓜浸，然后反反復(fù)復(fù)反反復(fù)復(fù)呀！
說完以上的大原則后比原，接下來結(jié)合實例插佛，來說說電子稿的一些注意點（避免你又劃上去看，友情提醒：就是上文提到的第二點：原型圖要好看）：
1）頁面框架要清楚
很多初手畫原型圖量窘，一般是畫多少頁面就重建多少page雇寇，并且每個page都是平行關(guān)系。在這種情況下，想通過看原型圖的目錄來了解產(chǎn)品的頁面關(guān)系锨侯，完全是懵掉的嫩海，和你對接的設(shè)計和開發(fā)也可能分分鐘狗帶。
比較合適的方式是囚痴，畫原型圖之前先搞清楚頁面與頁面之間的關(guān)系叁怪，在頁面目錄中根據(jù)頁面關(guān)系建立好空的頁面后，再進行具體頁面的設(shè)計深滚。
舉例如下圖：
左邊：為平行關(guān)系的頁面奕谭；
右邊：為有主次的頁面（頁面名字亂起的哈）；
2）頁面不影響設(shè)計師的視覺
這點和大家天天嘴里說的“高保真原型圖”恰恰相反痴荐。
為什么呢血柳？
產(chǎn)品經(jīng)理需求分析完成后，需要拿著原型圖和設(shè)計師進行直觀溝通生兆，溝通清楚之后难捌，設(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)格水準差異巨大组去，那么設(shè)計師有可能會從你找的集中icon風(fēng)格中挑選一種好點的來做鞍陨。
當然，以上是不負責的揣測从隆，設(shè)計師到底如何做本身就是一種對設(shè)計師自身的要求诚撵，這點我們暫且不談。
不能幫助設(shè)計師設(shè)計沒有關(guān)系键闺，但是去干擾設(shè)計師設(shè)計那就罪過了寿烟。
當然，如果貴司沒有設(shè)計師辛燥，那么筛武，又是另當別論啦尔许。（不要設(shè)計師的團隊一定是對自己
的產(chǎn)品自信心爆棚吧Ｍ）
3）頁面元素要統(tǒng)一
畫原型圖的時候沸手，勢必會用到很多軟件中自帶的控件曲稼。一開始沒有形成自己習(xí)慣的時候，可能會有以下情況：
同一個頁面內(nèi)同一種控件代表好多種行為硕噩；
同一個頁面內(nèi)同一種控件表示同一個行為假残，不同頁面之間同一種控件表示好多種行為；
舉例如下圖：
左邊：代表占位符炉擅，不可點擊辉懒；代表按鈕，可點擊谍失；
右邊：比較混亂眶俩，兩個控件亂用，不能點擊的地方用了按鈕快鱼，能點擊的地方又用了占位符颠印；
4）頁面排版要整齊
這點處女座的產(chǎn)品經(jīng)理應(yīng)該不會有疑問吧？哈哈抹竹。排版整齊主要指：
該左右對齊的地方對齊线罕；
該上下居中的地方上下居中；
間隔該一致就一致窃判；
舉例如下圖：
左邊：上下钞楼、左右都對齊；
右邊：額袄琳，紅色標記的都沒有對齊嘛询件；
可能看到這里的小童鞋們會覺得，艾瑪唆樊，好麻煩呀宛琅，感覺要遵守這么多規(guī)則，畫個圖還不得累成狗呀逗旁？
事實上并不會好咩嘿辟？下面瑤子哥哥教點大家都知道的小技巧：
1、善用輔助線
輔助線能夠幫助你分分鐘對齊片效，并且無時不刻闊以用到它：畫整體頁面仓洼、畫局部部件等等都闊以。用過office大件套的孩紙們都懂得堤舒。
下圖中紅色框內(nèi)的四根輔助線我是必定會有的；藍色框內(nèi)的線是拖動了控件時系統(tǒng)會出現(xiàn)的（說這個感覺自己好智障）
怎么用輔助線哺呜，就看個人習(xí)慣咯舌缤。
2、善用母版
會多處用到的一整塊的東西盡量用母版，為啥国撵？
- 如果你采用到處復(fù)制粘貼的方法的話陵吸，那么如果有修改，你就得一次一次的修改好多地方介牙，浪費時間壮虫；
- 如果你采用每次都自己重新畫的話，那比上面還慘环础，應(yīng)該沒這種童鞋吧囚似？
同時，母版順便解決了排不齊的問題线得，畢竟饶唤，大部件拖起來容易排整齊的多。
Convert to Master起來~
3贯钩、善用組合
很多童鞋一開始的時候都不喜歡用組合募狂，反正畫完都一樣嘛對不對 ？不對角雷！
萬一你下個版本要把整坨東西換到另一個位置上去呢祸穷？萬一你整個頁面要出現(xiàn)類似的東西好多遍呢？
雖然第二點剛說過要善用母版勺三，但是母版也不是越多越好雷滚。
在不是全局出現(xiàn)的情況下，闊以把相關(guān)控件組合起來檩咱，不管是單頁面上的復(fù)制粘貼還是挪動揭措，都會非常方便，同時又無形之中解決整齊問題刻蚯。
相比于鼠標拖個范圍選中一大坨東西來說绊含，組合實在是顯得太干凈了，蛤蛤炊汹。
Ctrl+G起來~
4躬充、不要過度用case里的花哨功能
曾幾何時，我也是天天玩面板讨便、中繼器玩的飛起的孩紙充甚，現(xiàn)在最多用的就是頁面跳轉(zhuǎn)，實在不行了也用用面板之間的設(shè)置功能霸褒。
當然伴找，中繼器啥的在某些地方還是很好用的，不過废菱，移動端產(chǎn)品基本沒有用到的機會技矮，反正畫了這么久了抖誉，就沒用到過。
不過衰倦，做后臺的產(chǎn)品童鞋可能需要袒炉，然而我還是覺得中繼器操作起來還是有點麻煩。
5樊零、不要過度用條件判斷
這個多數(shù)可能會出現(xiàn)在高保真原型圖上面吧我磁，會要求每個控件都能夠按照本身的邏輯條件出現(xiàn)相應(yīng)的行為。
聽起來好像很簡單驻襟？不就是頁面跳來跳去嘛~不就是面板出不出現(xiàn)嘛~
圖樣惹夺艰，你去判斷個登錄注冊流程再說簡單！
我記得剛做產(chǎn)品的時候塑悼，跟著一個產(chǎn)品經(jīng)理妹紙分工畫原型圖劲适，我發(fā)現(xiàn)她每次都把所有控件的條件都列出來，當時覺得好牛逼啊厢蒜，為了不慫and整體原型圖保持一致霞势，然后就花樣作死了。
下圖是當時做的登錄注冊流程斑鸦，應(yīng)該平均一個控件上至少都有5愕贡、6個判斷條件吧。
現(xiàn)在想想巷屿，真是醉了固以。可以用文字補充清清楚楚說明白的事情嘱巾，非要折騰原型圖憨琳，何必呢？
另外旬昭，補充一下第4和第5點篙螟，過度用花哨功能和條件判斷，會引起另外一個世紀大問題问拘，那就是控件的命名遍略！
做大量條件判斷或者復(fù)雜的case是會需要指向某個控件的，那么對于控件的命名就需要一套規(guī)則骤坐，而這點绪杏，一開始的時候你是沒有意識到的。
然后意識到的時候纽绍，你會開始這樣來回：
“恩蕾久，這個是輸入框，那就叫它輸入框吧”
“哎呀拌夏，那個也是輸入框哎腔彰，叫编，重名了，那把第一個改成輸入框1霹抛，第二個叫“輸入框2”吧”
“哎呀，又不行了卷谈，這么多頁面這么多輸入框杯拐，得加上頁面才行，叫他“xx頁面-用戶名輸入框”吧”
直接給跪了世蔗。
而這點就要向開發(fā)們學(xué)習(xí)一下啦端逼，他們寫代碼都有一套命名規(guī)則哇。忘記哪個開發(fā)告訴我污淋，好的命名意味著這人對自己有要求顶滩！
好啦，以上就是暫時想到的有關(guān)于原型圖的事兒寸爆，若有遺漏礁鲁，求留言指出喲。
