產品經理原型圖怎麼交互

Ⅰ 互聯網產品交互設計的相關流程是什麼,最好詳細一點

談一談互聯網產品設計階段的工作流程

關於互聯網產品設計階段的工作流程，近幾年好像有了一個標準的模式，大家都按照這么一個大概的流程來工作，又好像沒有標准，每個團隊又不盡相同，有的簡單粗暴，有的復雜細致 。之前工作過的幾個東家工作流程都不是很合理，產生了很多經驗教訓。最近在饅頭商學院回爐改造，又講到這塊，自己總結了一下感覺比較合理的工作流程，希望給一些小夥伴參考和啟發。

還想跟大家說一個小的思路，就是讓下游的人在做工作時候都提前一個階段或者兩個階段參與上游工作，不要等著上游有了輸出物後才開始工作，花幾個小時時間，會讓自己的工作思路更清晰，減少很多溝通成本和撕逼。比如在做核心流程時拉著開發負責人一起探討，開發心中有數，等交付原型時，不用產生太大分歧。之前所在團隊在需求分析階段會多次拉著測試一起討論，每次花一兩個小時的時間，省去的是測試階段幾倍的溝通時間。

標准化工作流程主要是為了規避問題，提高效率，不是為了標準的工作流程去做工作，每個公司的流程都被人員配置，項目周期，甚至公司文化影響著，不論什麼樣的流程，能夠達到工作目標的流程就是好流程。

Ⅱ 網頁設計流程,用畫原型圖嗎邏輯誰來設計_web端原型圖怎麼畫

簡單來說，產品經理進行頁面原型設計時，就需要把業務邏輯和交互邏輯講明白，所以不能捨本逐末，慶辯不需要做得特別精美，而是要把握重點，把重心放在分析用戶需求、規劃產品功能上。交互設計師可以根據產品經理的原型圖進行設計。

從使用工拆羨具來看的話，產品經理在做原型時其實只需要Mockplus這樣的快速原型設計工具。只要提前想清楚主要的功能點和交互邏輯，使用工具內置的現成組件，十分鍾就能把原型做完。

交互設計師需要做的是根據產品經理繪制的原型版和相關產品文檔，繪旅差拍制高保真原型，通常交互設計師會使用PS、sketch、XD之類的設計工具，在完成頁面設計後上傳到摹客等協作平台添加交互。完成後也可以直接發鏈接給其他成員審閱，這時候主要看的就是原型呈現的視覺效果了。

Ⅲ 產品經理必備技能 | 如何畫原型

產品經理當然要會畫原型啦~

聊聊怎麼畫原型吧！

在畫原型之前，更重要的事情，就是畫 頁面流程圖 和 信息架構圖 ！假如你沒有這些東西，就開始畫原型，那麼等著你的就是沒完沒了的改改改。

頁面流程圖是以用戶視角，看流程合理性。通常適合於跳轉比較復雜的產品功能，如電商、社交產品。

為什麼要畫頁面流程：

（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確認了沒？？？

Ⅳ 產品經理畫原型圖哪些工具好用，求推薦～

對於產品經理來說，一個好用的設計（畫）原型圖工具是一個橋梁。它既能把自己的構思體現，又是與開發小哥哥的「交流」。

下面我來分享一些大眾款的原型圖設計工具，可以根據自己的需求來選擇。
1.Axure：發展較早的一款原型設計軟體，因而名聲較大。無限畫布，適合做低保真到中保真度的原型。功能很多，也讓學習起來有點難度，網上有很多axure教程就不多說了。本地型軟體，可以下載html文檔預覽，手機預覽不方便。
2.墨刀：國產的一款原型設計協作工具，比起axure來非常容易學會，內置組件很多，創建頁面跳轉也比axure簡單太多。因為是一款在線工具，可以雲端保存工作，這點確實很便捷。另外，通過分享鏈接就可以分享原型給別人看了，如果涉及到跟同事對接什麼的，選擇在線的工具更方便。支持sketch文稿導入和自動標注。個人認為性價比最高。

3.Invision: 可以說目前是國外發展最大的在線原型設計工具，主打「交互原型」和「協作」，支持sketch和ps設計稿導入做交互。近來出的 Invision studio 對標sketch，想滿足更驚喜的設計需要。國外一些大牛公司像airbnb和amazon都在用。不過對於國內用戶來說會有伺服器速度的問題，而且，貴。（土豪公司無視）
4.Marvel: Marvel 也是海外知名度較高的一款原型設計協作工具，支持PS和sketch設計稿導入做交互原型，本身也支持中度保真程度的設計。也有自動標注功能。圖片庫對接unsplash，這樣來自unsplash的很多精美的免費圖片可以直接用。價格比Invision稍便宜。
5.POP（Prototyping on Paper）：這款比較另類，是給拍照的手畫草圖直接做交互。操作輕巧簡單：先用手機拍下草圖原型(存到POP app內)；然後開始編輯圖片的哪個區域（按鈕）鏈接到什麼頁面，添加跳轉鏈接熱區，就可以在手機上給小夥伴們演示了。內嵌的交互動作 如側滑、展開、消失等，即可滿足一般的動態演示需要。但功能較為簡單，對更深的需求無法滿足。
6.Proto.io：也是國外的一款手機原型開發平台。支持在大多數的瀏覽器運行，共享和協作操作方便，可以直接在真實的移動設備上對原型進行測試。擁有較為豐富的UI組件，支持自定義。另外它有不錯的用戶測試功能，支持視頻錄制。並且在移動組件時，能夠實時在畫布看到組件之間的距離。另外由於伺服器的原因，有國內用戶反應速度有點慢；收費較高，性價比一般吧。

Ⅳ 產品經理應該如何與 UI 設計師溝通

產品原型完成後下一個環節就要交給設計師了，一個產品最終的模樣決定權也在設計師手上。美觀性是給用戶的第一印象，如果產品的美觀性不夠好的話，那麼產品 給用戶的印象也會打折扣。其實在做產品原型的時候，很多公司都會要求高保真原型，高保真原型要從兩個角度去評判，第一是原型的界面做的很逼真，在原型上就 已經添加了色彩元素，這樣的做法會使得需求方更易理解產品。第二是原型的交互，原型中加入更好的交互，會使原型更加真實，一來利於更好的表達產品人員的想 法，第二也便於後續利用原型做用戶測試。但是在工作中我會發現，如果在原型中加入色彩元素太多的話對設計師來說會是一種干擾。於設計師而言，產品就是需求 方，所以設計師可能想當然的以為原型中的色彩元素就是產品喜歡的，自己設計的過程中也會採用這種顏色。況且互聯網公司中常常會有這樣的場景，因為產品急著 上線而把時間卡的很緊，這時候設計師往往會因為時間緊，而難以產生好的想法，設計出來的頁面也難免不會太理想。所以我在制定產品排期的時候也總是希望盡量 給設計師多留一些時間。不過話又說回來，像我剛才所說的這種情況，也要因設計師而言，能力優秀或者經驗豐富的設計師還是會完全發揮自己的才能。

說到設計評審，我個人的原則一直是尊重設計師的想法。設計前一定要跟設計師詳細的做產品介紹，講解產品中的功能點和文字，以及產品背後所隱藏或希望表達的含義。雖然說UI設計師負責的是美化界面，但是美化的背後也要有其思想，而且這樣的溝通後，也便於避免設計師設計出來的頁面與期望的有較大出入。產品人員對於UI的 設計也會有一些自己的想法，設計前可以與設計師溝通，但是就我個人而言一直都不希望產品人員過多的把自己的想法強加給設計師，甚至精確到頁面中某個地方畫 個什麼圖案，雖然說這樣可能設計出來的東西比較符合期望，但是長期以來這樣的做法會束縛設計師，而且也可能會引起設計師的反感。所以可以先讓設計師自由發 揮，畢竟設計師是專業的，他們的想法或許會超過產品人員。而產品人員可以在設計師設計了幾版之後仍不滿意的情況下才與設計師詳細的溝通自己的想法。

Ⅵ 交互設計中原型圖和線框圖

首先，我們需答滾搏要搞清楚的一點就是線框圖不是真正意義上的原型。許多設計師和產品經理，甚至是經驗豐富的設計大牛往往也很容易混餚這些專業術語。什麼是線框圖什麼是原型什麼時候使用線框圖什麼時候使用原型

提供信息和功能——線框圖，我該如何互動或如何使用——原型。

什麼是線框圖

線框圖是一種低保真且靜態的呈現方式，設計師通常使用紙筆來表達自己的想法。只要能明確表達內容大綱，信息結構，布局，用戶界面的視覺以及交互行為描述即可。就像建築藍圖一樣，藍圖也就是施工方案，詳細描述改如何建造建築。繪制線框圖重點就是要快，明確表達自己的設計想法清祥，它不是美術作品，無需過多的視覺效果。黑白灰則是它的經典用色。

什麼時候使用線框圖

線框圖(Wireframe)是軟體或者網站設計過程中非常重要的一個環節。線框圖常常適用於非正式場合，用於團隊內部的討論。

花費成本

線框圖的花費成本可以說是零，只要有紙筆，或白板就能完成你的想法的構建。不過有的產品經理用Word，有的用Photoshop等。但一般不作為用戶測試。

什麼是原型

原型通常是中高保真的呈現形式。以接近最終產品的形式來考量產品的可用性。它能夠實現和驗證你的設計理念。原型是程序開發過程中的重要步驟，並且允許我們進行一些初步的測試。

什麼時候使用原型

原型常用備迅於做早期測試，以確保你的想法符合目標市場。在產品發布之前，沒有原型和對用戶的測試，這個產品註定是失敗的。在原型設計階段花費的時間，可以避免額外的工作和成本。相對於紙上的產品設計文檔，產品原型更加有效，這樣可以讓所有的測試人員以及用戶知道你產品的創意所在。

Ⅶ 初級產品經理-如何高效繪制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/

如果對文章感興趣，歡迎評論留言，堅持喜歡的事情，加油~