⑴ 產品經理必備技能 | 如何畫原型
產品經理當然要會畫原型啦~
聊聊怎麼畫原型吧！
在畫原型之前，更重要的事情，就是畫 頁面流程圖 和 信息架構圖 ！假如你沒有這些東西，就開始畫原型，那麼等著你的就是沒完沒了的改改改。
頁面流程圖是以用戶視角，看流程合理性。通常適合於跳轉比較復雜的產品功能，如電商、社交產品。
為什麼要畫頁面流程：
（1）是交互設計/原型設計的基本依據，是邏輯基礎。如果你都沒想好頁面流轉的順序，那麼你畫的原型一定不是可以確定下來的版本
（2）代表了用戶的操作過程，先畫頁面流程圖能迅速發現體驗問題。有了頁面流程圖，你可以設身處地想像用戶在使用產品時的操作流程，發現其中可能出現的問題
（3）突出頁面重點元素與邏輯關系，提升原型的設計效率。很多頁面不是全新頁面，而是在原有頁面做一些修改，如果你知道頁面流轉順序，那麼會給你畫原型減輕很多工作量
頁面流程圖包含：
（1）四方形：業務流程中的四方形部分，異常流程或彈層通常用菱形表示
（2）流向：主幹流向和輔助流向
（3）重點元素：每個流程中，重點要體現和表達的內容是什麼
畫頁面流程圖的工具：
（1）Axure：畫了頁面流程圖可以緊接著畫原型
（2）ppt：方便講解
需要注意的地方：
（1）回歸業務流程，明確主線：頁面流程一定來自於業務流程，一般為業務流程中的方形部分。異常流程一般為彈層或彈窗提示。業務流程畫的好，頁面流程就簡單。
（2）明確頁面中的重點元素：功能在頁面中，有哪些是需要表現元素。增加異常流程的處理邏輯。增加輔助的幫助頁面。考慮下游觸發點（按鈕/鏈接/滑動...)。
（3）溝通與優化：首先要盡可能窮舉涉及的頁面，然後做減法，有些頁面合並或刪除。通過原型草圖，優化調整頁面關鍵元素。與UI、UE、前端研發多溝通會有更好的效果。
頁面流程圖一般規則：
頁面流程圖例：
一個具體案例：
業務流程：
頁面流程：
主要是分離出了普通用戶的操作流程，加異常處理。
對於普通用戶的關鍵頁面和關鍵流向：
頁面流程圖：
（1）分離出5個頁面，確定流程流向
（2）固定元素，例如在「1購物車」中，「提交訂單」就是下游觸發點，點擊後流向下一個頁面；在「2輸入優惠碼」中有關鍵元素「填寫優惠碼」，另外還有下游觸發點「確認訂單」...
（3）針對每個頁面去畫對應的原型圖
信息架構圖，以產品視角，看包含多少功能點。適合於層級分明的，如音樂產品、新聞客戶端、閱讀類產品等。
信息架構圖例1：
有了頁面流程圖或信息架構圖，現在終於可以開始畫原型啦。首先，什麼是產品原型設計？
產品原型 ，俗稱 線框圖 ，大概就是草圖的意思吧。它是產品落地的關鍵點，是從虛擬概念到用戶接觸的節點。同時也是產品經理產出的關鍵內容，上傳下達，上給老闆，下給UI、UE同事。
產品從原型到上線的流程：
大公司的產品經理只需要做手繪和低保真的部分，小公司可能還要兼職交互設計...
案例：
好的原型有什麼特點：
（1）整體：頁面結構清晰、跳轉關系明確、與業務流程一致、完整表達用戶需求
（2）獨立頁面：功能元素明確有序、位置關系清晰、不同狀態變化清晰
（3）交互設計：清晰的交互邏輯、一致交互方式、界面統一
常用工具：
（1）紙筆：自己畫畫，快速學習和定位
（2）白板：多人討論
（3）軟體Axure/Sketch/墨刀：產出正式文檔
案例：
（1）研究流程：業務流程->頁面流程
（2）確定頁面框架：大概確定頁面布局和大的框架
（3）畫原型：畫模塊，確定交互細節
注意事項：
（1）盡可能用真實比例、真實文案，使元素更真實，也避免在需求評審時被之一。盡可能真實模擬極端情況，並示例清楚。
（2）緊扣需求主體，不橫生枝節。如果原型需要增加新功能，一定要是來源於需求，並且要考慮後端數據來源。
（3）不要上顏色！原型就用黑白灰，不要給UI、UE挖坑
（4）目錄樹清晰，閱讀流暢
（5）保存修改記錄，關鍵修改重新保存文件
畫/改原型的時間盡量控制在20%工作時間之內，否則就要問問自己是不是哪裡出問題了哦。
產品需求想明白了沒？？？
產品流程理清楚了沒？？？
手繪草圖畫了沒？？？
手繪草圖和Boss確認了沒？？？
⑵ 產品經理如何畫好原型圖
產品經理在繪制原型圖時，常常會遇到一個棘手問題：如何讓原型圖看起來既專業又符合產品設計需求？其實，繪制原型圖的關鍵在於把握好幾個核心要素，從而讓原型圖達到既美觀又實用的效果。
首先，從視覺設計角度出發，我們需要確保原型圖的布局合理、元素間的距離適中。這不僅有助於提升用戶體驗，還能確保產品設計的直觀性和易理解性。對於交互細節，要仔細規劃每個元素的尺寸、顏色和位置，使之在視覺上形成和諧統一的整體。同時，適當的留白可以有效避免設計過於擁擠，使原型圖更加清爽。
其次，功能邏輯的清晰表達是原型圖製作的另一大要點。產品經理需要將產品的核心功能和流程清晰地展現出來，讓用戶在第一眼就能理解產品的操作邏輯。為此，可以採用步驟圖、流程圖等工具輔助說明，確保每個步驟和功能都一目瞭然。同時，對於復雜的功能交互，可以通過標注、注釋等形式，對關鍵操作進行詳細描述，幫助用戶更好地理解和使用產品。
此外，原型圖的交互設計同樣重要。在設計交互效果時，產品經理需考慮用戶體驗，確保交互操作流暢自然。例如，按鈕的點擊反饋、滾動效果、動畫過渡等，都需要精心設計，使其既符合用戶預期，又能增加產品的趣味性和吸引力。同時，交互設計還應與視覺設計相協調，避免出現設計風格上的沖突。
最後，產品經理在繪制原型圖時，還需注重細節處理。比如字體、字型大小的選擇要考慮到可讀性和美觀性；圖標和圖形的使用要保持一致性，避免給用戶造成混淆。同時，考慮到不同設備和屏幕尺寸的適配，原型圖的設計應具備一定的靈活性，以便在實際開發中進行調整和優化。
綜上所述，繪制原型圖的關鍵在於把握好視覺設計、功能邏輯、交互設計以及細節處理這幾個核心要素。通過不斷地實踐和學習，產品經理能夠逐漸提升原型圖繪制技能，為產品設計與開發工作打下堅實的基礎。