產(chǎn)品經(jīng)理當(dāng)然要會畫原型啦~
聊聊怎么畫原型吧朋鞍！
在畫原型之前惯雳，更重要的事情朝巫，就是畫頁面流程圖和信息架構(gòu)圖！假如你沒有這些東西石景，就開始畫原型劈猿，那么等著你的就是沒完沒了的改改改。
頁面流程圖
頁面流程圖是以用戶視角潮孽，看流程合理性揪荣。通常適合于跳轉(zhuǎn)比較復(fù)雜的產(chǎn)品功能，如電商往史、社交產(chǎn)品仗颈。
為什么要畫頁面流程：
（1）是交互設(shè)計(jì)/原型設(shè)計(jì)的基本依據(jù)，是邏輯基礎(chǔ)怠堪。如果你都沒想好頁面流轉(zhuǎn)的順序揽乱，那么你畫的原型一定不是可以確定下來的版本
（2）代表了用戶的操作過程，先畫頁面流程圖能迅速發(fā)現(xiàn)體驗(yàn)問題粟矿。有了頁面流程圖，你可以設(shè)身處地想象用戶在使用產(chǎn)品時(shí)的操作流程损拢，發(fā)現(xiàn)其中可能出現(xiàn)的問題
（3）突出頁面重點(diǎn)元素與邏輯關(guān)系陌粹，提升原型的設(shè)計(jì)效率。很多頁面不是全新頁面福压，而是在原有頁面做一些修改掏秩，如果你知道頁面流轉(zhuǎn)順序，那么會給你畫原型減輕很多工作量
頁面流程圖包含：
（1）四方形：業(yè)務(wù)流程中的四方形部分荆姆，異常流程或彈層通常用菱形表示
（2）流向：主干流向和輔助流向
（3）重點(diǎn)元素：每個(gè)流程中蒙幻，重點(diǎn)要體現(xiàn)和表達(dá)的內(nèi)容是什么
畫頁面流程圖的工具：
（1）Axure：畫了頁面流程圖可以緊接著畫原型
（2）ppt：方便講解
需要注意的地方：
（1）回歸業(yè)務(wù)流程，明確主線：頁面流程一定來自于業(yè)務(wù)流程胆筒，一般為業(yè)務(wù)流程中的方形部分邮破。異常流程一般為彈層或彈窗提示诈豌。業(yè)務(wù)流程畫的好，頁面流程就簡單抒和。
（2）明確頁面中的重點(diǎn)元素：功能在頁面中矫渔，有哪些是需要表現(xiàn)元素。增加異常流程的處理邏輯摧莽。增加輔助的幫助頁面庙洼。考慮下游觸發(fā)點(diǎn)（按鈕/鏈接/滑動...)镊辕。
（3）溝通與優(yōu)化：首先要盡可能窮舉涉及的頁面油够，然后做減法，有些頁面合并或刪除征懈。通過原型草圖石咬，優(yōu)化調(diào)整頁面關(guān)鍵元素。與UI受裹、UE碌补、前端研發(fā)多溝通會有更好的效果。
頁面流程圖一般規(guī)則：
頁面流程圖例：
一個(gè)具體案例：
業(yè)務(wù)流程：
頁面流程：
主要是分離出了普通用戶的操作流程棉饶，加異常處理厦章。
對于普通用戶的關(guān)鍵頁面和關(guān)鍵流向：
頁面流程圖：
（1）分離出5個(gè)頁面，確定流程流向
（2）固定元素照藻，例如在“1購物車”中袜啃，“提交訂單”就是下游觸發(fā)點(diǎn)，點(diǎn)擊后流向下一個(gè)頁面幸缕；在“2輸入優(yōu)惠碼”中有關(guān)鍵元素“填寫優(yōu)惠碼”群发，另外還有下游觸發(fā)點(diǎn)“確認(rèn)訂單”...
（3）針對每個(gè)頁面去畫對應(yīng)的原型圖
信息架構(gòu)圖
信息架構(gòu)圖，以產(chǎn)品視角发乔，看包含多少功能點(diǎn)熟妓。適合于層級分明的，如音樂產(chǎn)品栏尚、新聞客戶端起愈、閱讀類產(chǎn)品等。
信息架構(gòu)圖例1：
產(chǎn)品原型設(shè)計(jì)
有了頁面流程圖或信息架構(gòu)圖译仗，現(xiàn)在終于可以開始畫原型啦抬虽。首先，什么是產(chǎn)品原型設(shè)計(jì)纵菌？
產(chǎn)品原型阐污，俗稱線框圖，大概就是草圖的意思吧咱圆。它是產(chǎn)品落地的關(guān)鍵點(diǎn)笛辟，是從虛擬概念到用戶接觸的節(jié)點(diǎn)功氨。同時(shí)也是產(chǎn)品經(jīng)理產(chǎn)出的關(guān)鍵內(nèi)容，上傳下達(dá)隘膘，上給老板疑故，下給UI、UE同事弯菊。
產(chǎn)品從原型到上線的流程：
大公司的產(chǎn)品經(jīng)理只需要做手繪和低保真的部分纵势，小公司可能還要兼職交互設(shè)計(jì)...
案例：
好的原型有什么特點(diǎn)：
（1）整體：頁面結(jié)構(gòu)清晰、跳轉(zhuǎn)關(guān)系明確管钳、與業(yè)務(wù)流程一致钦铁、完整表達(dá)用戶需求
（2）獨(dú)立頁面：功能元素明確有序、位置關(guān)系清晰才漆、不同狀態(tài)變化清晰
（3）交互設(shè)計(jì)：清晰的交互邏輯牛曹、一致交互方式、界面統(tǒng)一
常用工具：
（1）紙筆：自己畫畫醇滥，快速學(xué)習(xí)和定位
（2）白板：多人討論
（3）軟件Axure/Sketch/墨刀：產(chǎn)出正式文檔
案例：
（1）研究流程：業(yè)務(wù)流程->頁面流程
（2）確定頁面框架：大概確定頁面布局和大的框架
（3）畫原型：畫模塊黎比，確定交互細(xì)節(jié)
注意事項(xiàng)：
（1）盡可能用真實(shí)比例、真實(shí)文案鸳玩，使元素更真實(shí)阅虫，也避免在需求評審時(shí)被之一。盡可能真實(shí)模擬極端情況不跟，并示例清楚颓帝。
（2）緊扣需求主體，不橫生枝節(jié)窝革。如果原型需要增加新功能购城，一定要是來源于需求，并且要考慮后端數(shù)據(jù)來源虐译。
（3）不要上顏色瘪板！原型就用黑白灰，不要給UI漆诽、UE挖坑
（4）目錄樹清晰篷帅，閱讀流暢
（5）保存修改記錄，關(guān)鍵修改重新保存文件
畫/改原型的時(shí)間盡量控制在20%工作時(shí)間之內(nèi)拴泌，否則就要問問自己是不是哪里出問題了哦。
用Axure動手畫原型之前的靈魂拷問：
產(chǎn)品需求想明白了沒惊橱？蚪腐？？
產(chǎn)品流程理清楚了沒税朴？回季？家制？
手繪草圖畫了沒？泡一？颤殴？
手繪草圖和Boss確認(rèn)了沒？鼻忠？涵但？
