❶ 產品經理必備技能 | 如何畫原型
產品經理當然要會畫原型啦~
聊聊怎麼畫原型吧！
在畫原型之前，更重要的事情，就是畫 頁面流程圖 和 信息架構圖 ！假如你沒有這些東西，就開始畫原型，那麼等著你的就是沒完沒了的改改改。
頁面流程圖是以用戶視角，看流程合理性。通常適合於跳轉比較復雜的產品功能，如電商、社交產品。
為什麼要畫頁面流程：
（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確認了沒？？？
❷ 產品經理，如何像設計原型那樣設計自己的簡歷
又到了年底跳槽大遷徙的時期，在這里記下自己簡歷心得（可任意噴）和設計簡歷原型的奇思怪想獻給各位產品新人寶寶們，希望對各位寶寶有拋磚引玉之效。用原型輔助設計自己的簡歷對於面試產品的人來說，形式上算不上什麼奇異技巧，但是可以直觀的給面試官展示你的原型交互功底，以及將自己作為產品時，產品結構的設計思路。
混了這么長時間的產品汪，我的感受是，在做產品前一定要對需求進行深度分析，產品可以做，但一定要往對的方向做，好比醫生在對病人進行望聞問切後的診斷，明明得的闌尾炎，非得按照腹瀉來治，可憐那病人會有好結果么。so，咨詢了些異常挑剔的HR們，得到的反饋是她們最關注的就是三點：項目、經驗、項目經驗。簡歷RP說到底還是個人簡歷，像個人信息、項目經驗、教育培訓、個人評價等簡歷常態的東西還是要展示。這么多信息如何重點展示，以下做個示例。
首頁簡要介紹「你是誰，你要干什麼，你做過什麼」，個人信息中我選擇將主要展示的「姓名、求職意向、聯系方式」與次要關注的「出生、性別、郵箱、學歷、居住地」信息採用鏡面翻轉形式展示，一來可以為重頭「項目經歷」騰出重要位置，其次通過翻轉形式避免個人信息過多文字堆砌，滑鼠移入頭像時，頭像顯示為個人微信二維碼（哪知道會不會加好友，先放上）。項目經歷欄目中簡要說明各項目公司、時間、崗位、內容。然後是簡要的的項目經歷和個人評價的顯示，各欄目可通過點擊「更多」按鈕，跳轉到對應欄目。底部導航中提供各欄目快速入口"首頁" "項目" "教育" "培訓" "評價"。
項目經歷中蒙版顯示項目內容，若多個項目可通過添加「下一頁」按鈕和蒙版底部「項目進度條」顯示當前所在的項目。
教育經歷中分兩個模塊：所學專業內容和在校期間榮獲獎項。信息內容較少，採用直接平鋪展示。
簡歷可以有多種風格，但是盡量簡潔，因為HR可能沒有那麼多時間去欣賞你的簡歷。
❸ 初級產品經理-如何高效繪制AXURE原型
原型是產品經理或者交互設計師所設計的某一需求或者某一問題的具體的解決方案。繪制原型的工具有很多，我們公司大多的產品用的都是Axure。用這個軟體，高保真或者低保真原型都能做的很好。那麼，怎樣的原型才適合團隊交流？
畢竟繪制出來的原型並不是只給自己看的，還要講解給團隊里的成員，UI/前端/開發。特別是進行小組內評審的時候，通過演示原型，需要向他們講解產品內部的邏輯、具體的頁面、動效等，還要向他們詢問設計是否合理，能否實現等，靜心傾聽他們的意見。這時候，原型就是一個思維傳達的工具，將你的想法，翻譯並灌輸給你的團隊成員。同樣，原型是也團隊的交流工具，針對繪制出來的原型，每個人都可以談談自己的看法，交流思想，完善原型不足的地方。
所以原型繪制出來，必須要有基本的交付標准。
一、原型設計的基本交付標准
1.清楚------讓他人能明白產品是干什麼的，包括什麼功能，有哪些頁面。
需要清楚地表達頁面有哪些內容模塊
需要清楚地表達模塊內部的構成元素
2.清晰------讓隊友知道具體有哪些要求，指導他們如何做
【1】功能操作
某一個功能可以進行哪些操作，點擊/滑鼠懸浮/拖動等操作，以及頁面會有什麼反應。（方便開發的工作）。
【2】操作路徑
有一些操作是要跳轉頁面，跳轉的路徑需要標清楚，跳到哪去了，涉及哪些頁面，頁面之間是如何聯系的。防止用戶迷失。
【3】點擊狀態
一些鏈接，按鈕，需要標明它初始的時候是什麼樣，滑鼠懸浮有什麼效果（顏色/下劃線/提示語等），點擊的樣式變化，以及點擊後的樣式。（這些可以為前端的工作提供方便）
【4】信息組合
相關的信息需要組合在一起，比如一些基本信息，姓名/性別/年齡等最好放一塊，不要分開。不相關的保持距離。
【5】位置排序
頁面的布局應該適應用戶的習慣，瀏覽方式、工作任務。突出強調重點，方便用戶的工作。一些數據可以思考一下它們的排列方式，按什麼排序，能方便用戶查找，仍舊是「以用戶為中心」。
3.周全-----產品的各種細節，不能疏忽
【1】交互狀態
某些重要的操作，交互樣式是怎樣的，效果如何，最好單獨抽出來做成高保真，演示給他人看，讓他們對產品有深入的體驗和感受。
【2】數據顯示
原型上涉及的相關數據做好有真實的案例，將需要獲取的關鍵數據全部展示出來，比如一篇文章，需要的數據：作者、發布時間、瀏覽量、喜歡數、收藏數等，方便開發准備必要的數據介面。
【3】異常考慮
需要考慮一些突發情況的應對，比如斷網、載入太慢、數據已經被刪除了、數據找不到了、沒有訪問許可權等等情況。
【4】配套頁面
產品里的一些功能可能和其他產品有關聯，需要將可能涉及的其他頁麵包括到項目內。比如頁面在wap上手機的瀏覽樣式、一些發送給用戶的消息/簡訊的內容和樣式等等。
4.基本審美
【1】對齊
【2】間距
【3】顏色
【4】字體
推薦大家看看《寫給大家看的設計書》這類易上手的書籍。
5.基本規范
【1】頁面尺寸
web的寬度有960px、1000px、1200px，App有安卓、iphone5、iphone6等，需要與已有的產品保持統一的尺寸。
【2】字體大小
標題可以是18px或者16px，內容可以是14px。既要考慮用戶是否看到清，又要考慮美觀。
【3】顏色
原型不要有太多的顏色，堅持黑白灰，除非要突出，可以用其他的顏色。
【4】彈窗
彈唱的樣式最好做統一，彈窗名+內容+操作按鈕+關閉
【5】元件
不在原型正文添加過多的截圖、圖標樣式，會對UI的設計造成干擾。
二.Axure的快捷使用技巧
工欲善其事必先利其器，工具使用的越嫻熟，才能節省大量時間用於方案的思考。下面將簡要分享Axure繪制原型時的一些快捷操作：
首先在頂部菜單欄中找到<視圖>，把需要的部件顯示，就可以設置了。
1.組件庫的建立（能提高效率，保證產品層面的統一一致）
2.母版的使用（適用於多頁面通用的部分，修改後，集體自動更新）
3.設置頁面樣式（頁面的字體、背景能一次性設置好）
4.元件的交互樣式
5.元件組合
把要組合的原件用滑鼠框在一起，按住ctrl+G，成為組合後就可方便復制拖動了。許下按住ctrl+shift+G，也可以點擊選中後，點擊下圖的兩個圖標來組合和取消組合。
6.對齊、居中、平均分布
選中要對其的內容，選擇一種分布樣式，就能快速得到整齊的原型樣式，而不用一個個手動調整。
7.輸入框類型的設置（預設好類型）
一些輸入框，可能需要設置默認文字，可以直接選中了輸入框後，在原件屬性里設置提示文字和一些限制。
8.元件的提示語
有些文字需要有滑鼠懸浮顯示提示語的動作，可以直接在原件的屬性里設置「原件提示」，輸入要顯示的內容，即可。
三、製作原型的過程
1.梳理功能點-------------------將需求轉化為功能清單，標出重要等級（前提是需求已經梳理清楚）
2.規劃產品結構----------------用Xmind或者筆和紙等工具畫出產品有幾個頁面，每個頁麵包含哪些元素
3.整理原型目錄----------------用Axure添加原型的幾個頁面，考慮頁面之間的跳轉關系
4.設計頁面的布局（打格子）-----用不同的色塊，方框來表示這部分將要表示什麼板塊，設計好頁面的布局
5.填充各模塊的細節----------在方框里把具體的信息和數據填充完整
6.增加少量的交互動作--------------體現在一些涉及到任務的操作
7.頁面注釋-------------完善交互說明
8.審查自檢------------------功能是否覆蓋完全；頁面有沒有缺失；流程是否明確；狀態是否完備
四、原型應用中的經驗
因為我多是負責後台系統的優化，所以是直接和開發打交道，如果涉及前台頁面，就需要UI先將原型做成圖片，再由前端製作含有動效的demo，開發再按照demo開發。但是不論哪種，繪制出來的原型一定需要讓隊友都明白你的邏輯和要表達的重點。
第一次負責項目的時候，我用的是高保真，畫完整的原型就花了一星期多，各種動作和交互，恨不得做個虛擬的產品。但是和開發講了原型後，等來驗收項目的時候，才發現，開發大部分都沒有按照原型上的動作來，甚至連細節都有遺漏。一個個催著補上後，我開始思考這種方式是不是不太劃算，太費事費力，結果又不太好。
後來我看了我上級繪制的原型，都是以靜態頁面為主，可以說是低保真，但是每一種情況都詳細地用圖文描述清楚，點擊之後是什麼樣子，將要獲取什麼數據，失敗了會怎麼樣都有。而且這種方式，完成的特別快。於是我就選取低保真模式的開始畫原型，結果發現，開發有時候並不能將一些動作做好。
於是我開始「T式原型 」。「T式原型 」就是大部分是以低保真鋪展開，將整個產品的邏輯都直接呈現出來，再在某些需要重點描述的地方用高保真描述深入。所以，我的原型大部分是以 低保真+注釋說明和高保真+動作演示 的組合。 不過對於交互簡單的產品來說，低保真模型足夠了 。
每個產品繪制原型的習慣和風格都有所不同，但關鍵還是需要進行小組會議來向隊友們講解原型和邏輯，在開發的過程中，需要多溝通。
另外，分享大家關於AXURE學習的網站，可以在裡面找到免費的軟體安裝包和教學課程。
https://www.axure.com.cn/
如果對文章感興趣，歡迎評論留言，堅持喜歡的事情，加油~