如何做好產品原型

① 產品交互原型用什麼做

國內外很多製作產品交互原型的軟體，下面我分享幾個比較常用的製作原型軟體，希望對你有幫助~

• Axure：發展較早的一款原型設計軟體，因而名聲較大。無限畫布，適合做低保真到中保真度的原型。功能很多，也讓學習起來有點難度，網上有很多axure教程就不多說了。本地型軟體，可以下載html文檔預覽，手機預覽不方便。

• 墨刀：國產的一款原型設計協作工具，比起axure來非常容易學會，內置組件很多，創建頁面跳轉也比axure簡單太多。因為是一款在線工具，可以雲端保存工作，這點確實很便捷。另外，通過分享鏈接就可以分享原型給別人看了，如果涉及到跟同事對接什麼的，選擇在線的工具更方便。支持sketch文稿導入和自動標注。個人認為性價比最高。

• Invision: 可以說目前是國外發展最大的在線原型設計工具，主打「交互原型」和「協作」，支持sketch和ps設計稿導入做交互。近來出的 Invision studio 對標sketch，想滿足更驚喜的設計需要。國外一些大牛公司像airbnb和amazon都在用。不過對於國內用戶來說會有伺服器速度的問題，而且，貴。（土豪公司無視）

• Marvel: Marvel 也是海外知名度較高的一款原型設計協作工具，支持PS和sketch設計稿導入做交互原型，本身也支持中度保真程度的設計。也有自動標注功能。圖片庫對接unsplash，這樣來自unsplash的很多精美的免費圖片可以直接用。價格比Invision稍便宜。

• POP（Prototyping on Paper）：這款比較另類，是給拍照的手畫草圖直接做交互。操作輕巧簡單：先用手機拍下草圖原型(存到POP app內)；然後開始編輯圖片的哪個區域（按鈕）鏈接到什麼頁面，添加跳轉鏈接熱區，就可以在手機上給小夥伴們演示了。內嵌的交互動作 如側滑、展開、消失等，即可滿足一般的動態演示需要。但功能較為簡單，對更深的需求無法滿足。

• Proto.io：也是國外的一款手機原型開發平台。支持在大多數的瀏覽器運行，共享和協作操作方便，可以直接在真實的移動設備上對原型進行測試。擁有較為豐富的UI組件，支持自定義。另外它有不錯的用戶測試功能，支持視頻錄制。並且在移動組件時，能夠實時在畫布看到組件之間的距離。另外由於伺服器的原因，有國內用戶反應速度有點慢；收費較高，性價比一般吧。

有疑問可以追問，滿意請採納，謝謝~

② 產品新人如何做原型圖

作為一個產品新人最急於表現的應該是原型，最薄弱的應該是對需求的整理。因為需求的整理過程是一個去偽辨真的過程和權衡利弊的過程，而這個過程恰恰是新人沒有的工作經驗和容易忽略的部分。而產品原型時有章可循的，可以借鑒的，所以為了打發無聊的時間或盡快出成績和成果，產品新人往往會先從原型下手。那麼什麼是原型，都包括哪些部分？

互聯網行業的產品原型是將需求轉化成產品的一個過程示意圖，通過原型來表達需求點和流程邏輯，同時向UI和技術去表達產品的概念和實現的內容。

產品原型包括規劃總覽、版本規劃、產品目的和目標、業務說明、功能分類、規範文檔、業務邏輯、結構布局、細節說明和邏輯判斷等方面。

這么多的節點需要完成就需要提前對行業和企業有很深入的了解，知道戰略規劃，業務方向和公司的執行層面的能力。最重要的是需求的封閉，一定要知道一個版本的產品無法滿足所有需求，一定要分期分階段來規劃，而且每個階段的重點肯定是不一樣的，不要企圖一口吃個大胖子。

再把需求轉化成產品原型的過程中，一定要注意行業風格、用戶體驗、業務流程、業務邏輯和實現難度方面的配合和平衡，不提倡風格特立而喪失行業特性，也不提倡太過炫酷而提高開發難度和拉長開發周期。

產品原型理論上給企業做，哈哈，廢話。產品原型應該是作為產品生命周期中一個重要的環節和參考標准，通過對產品原型的理解去開展工作，那麼誰需要產品原型呢？1-自己需要，產品需要通過輸出成果來升職加薪，而原型正是成果的體現，另外通過原型傳遞自己對產品的理解和表達，為下一個版本規劃提供參考依據，更是為了日常溝通的需要。2-運營和提出需求的人，對於提需求的人一定要給人家反饋，讓人家看看自己是不是詞不達意，是不是真正的抓到了需求的核心意思。3-UI需要，UI需要根據原型去判斷自己的工作量和大體的結構布局，然後評估自己的工作量和尋找素材。4-開發需要，開發根據原型的設計來評審業務流程是不是正確，結構是不是完整，實現難度大不大，大體的人員配置和開發周期的評估。5-測試需要，測試根據原型做測試用例和測試參考。6-企業需要，鐵打的營盤流水的兵，總有新人換舊人，企業需要留檔案留下資料，來避免換人的成本過高。

說到為什麼這么做，我覺得有兩個原因吧，一個是好記性不如爛筆頭，一個是避免背鍋。產品的很多東西都是細節上的面對面溝通，千萬不要以為溝通過了就不用體現在書面材料上，往往是這些細節的東西最後會給你惹上麻煩。所以，為了自己能快速有效的和同事溝通和交流，一定要把溝通的內容更新下，保證你這個環節是最新最准確的信息存儲。另外，很多時候很多環節是銜接不緊密的，如果不做書面更新，相互之間是可以扯皮和背鍋的。尤其是開發和產品在工作上簡直是天生的對手，而雙方無論爭吵的多激烈，最終都逃不過需求不明確和通知不到位兩個問題，而這兩個問題其實就是沒有書面化並及時的傳達給對方手裡的問題。所以，為了避免給你事業上找不要的麻煩，還是要懂得記錄下產品原型和更新需求。

一般情況下會在人和事上遇到困難。

在事情上，比如，自己對需求的目標和量化沒搞明白就著急上手，需求的變更和原來的預測變化很大，老闆會突然加活進來導致自己的節奏被打亂都會形成一定的困難。這個時候一定要穩住，分析問題出在了哪裡。如果是需求的了解不明確，則一定要提高自己對需求分析的能力和基本功。如果是加大了工作量，則按照優先和緊急的二維象限去分析該怎麼調整自己的節奏。如果是需求的變動挺大，一定要通知到所有需要通知的人，把新的需求和新的做法通知到位避免信息不暢而按照原來的做法去實現。

在人的原因上，一般是溝通不暢和配合度不夠。無論是老闆還是其他部門，一定要充分溝通，了解他們的真實想法，也傳遞給他們你現在的工作狀態和工作內容，做到有的放矢。關於配合度的問題，就涉及到工作排期，先看工作排期是不是合格，新的排期的優先順序和原來的計劃的對比程度，該怎麼做才能銜接好，只有給別人把工作銜接好，別人才能舒服的配合你做事情。

產品的工作也是需要KPI考核的，但是產品的工作一般是定性的，很難量化。我們有幾個維度可以參考，1-對需求的理解程度，2-產品完成進度，3-測試指標量化，4-內部評價，5-市場反饋等來取考慮產品，所以一定要把握好自己的考核標准，根據考核標准去分配時間和精力。

想知道更多關於產品和互聯網行業新鮮事的粉絲，可以搜索微信公眾號「」「宅力宅力說」來了解更多信息

③ 如何做好原型圖和prd

相信做產品的對原型圖和prd都是再熟悉不過的了，雖然說這兩個「技能」不能說是做產品中最重要的兩項，但是一定是做的最多的兩項之一。這兩點雖然非常基礎，但是也不是那麼容易做好的。來到公司之前我自己做過兩個產品的prd和原型圖，第一次是在學校團隊做的社交軟體。那時候寫prd的時候沒有模板，竟然也沒有想過去找一個模板參考一下，當時就憑著感覺自己摸索了一套邏輯先寫著，然後給團隊里的研發小夥伴看，他們說能看懂我表達的意思就是OK的。那時候的原型圖更是簡陋，直接用墨刀整了個「草圖」，雖說是草圖，但是基本上整個風格和UI的圖都是我找的，然後就直接用上了。後來去公司實習了，公司規模不大，prd有一個模板參考，但是不是很詳細，我硬是把自己覺得更詳細的prd（就是我自己摸索出來的那一套，現在看來就是「根本不能用！」）給帶我的人看，可能他也覺得我寫的比公司的詳細，於是讓我比對著公司的模板加入了自己的想法。當時我去之前是一個程序員畫了原型草圖，大家可想而知，那效果！然後我就在程序員面前擺弄了一番墨刀原型，在他眼裡，我畫的可美了（說明一下，那個部門第一次做APP，所以當時只有程序員，還沒有產品）。就這樣，自我感覺原型和prd做的還不錯的我就來到了現在的公司.......整天被師父說「prd寫的不全面，加，加，加！！！！」「原型圖畫的太丑了，改，改，改！！！」在此，我還是非常感謝師父的高要求，讓我學到了不少（剛剛還在噴我文章寫的，嘖嘖嘖）。那接下來就來說說自己學到的如何寫好prd和畫好原型圖。

Prd篇

一份完整的prd要做到全面：除了讓程序員，UI和UE能完全看懂要做什麼，要怎麼做（邏輯要非常清晰），還得考慮到和產品，功能相關的所有邊緣情況。說的通俗一點，就是讓人在能找到所有與需求相關的東西的情況下還找不到任何可以拉出來扯皮的。因為產品狗要對自己的產品負責，你不做好就等著背鍋吧。

一，首先從整體來看，要按功能模塊來寫。我以前自己摸索的是按頁面來寫，就是先描述這個頁面是什麼，有什麼，有哪些控制項，用戶場景的使用流程是什麼。一直以來我都覺得自己描述的又有邏輯又詳細，一來就直接被師父否了。然而我並不是那麼容易妥協的人，我得知道為啥我的邏輯有問題，你的好在哪。於是師父拿出了他經常說的「你居然敢質疑我！」說完之後就開始詳細解釋了：按照頁面來寫，如果不同頁面功能有重合怎麼辦；其次按功能寫是一個邏輯流，如果按頁面來就會漏掉一些關鍵點，因為它沒有一條清晰的線；最後很多控制項不是我們設計的，是UE設計的，我們只需要把邏輯說清楚，不要搶別人活。好吧，我覺得說的很有道理，但是打翻自己的邏輯重新樹立一套邏輯還是不容易的，所以當時琢磨了好久才能按照師父教我的邏輯梳理文檔。

二，從細節來看，主要記錄三個重要的方面

1，需求說明/修改：說明為什麼做/修改這個功能。最開始寫這部分的時候我很容易就寫成了這是什麼功能，為了讓用戶怎樣怎樣。後來在師父的點撥下才了解到是站在公司產品的角度上寫為什麼要做。知道為什麼嗎？因為程序員總是質疑產品，這個功能為什麼做，意義是什麼。（潛台詞是：能不做就不做吧，我們事多著呢）

例子：當前防蹭網功能只能對已經連接過路由的設備進行「加入黑名單」的操作，並不能對嘗試攻擊網路的設備進行真正的預防。

2，功能描述：說明用戶可以做什麼操作以及可以看到哪些內容

例子：

（1）進入到防蹭網的已連接頁面可以查看已連接設備的信息：①設備名稱，②接入時間，③接入網路類型，④接入次數，⑤總陌生設備數和總接入次數

（2）點擊對應設備進入詳情頁面；

a.可以查看信息：①設備使用歷史流量曲線圖，②設備上下線時間，③設備使用總流量，④設備總連接時長。

b.可以進行的操作：①標記為家庭設備，②加入黑名單。

（3）進入黑名單列表，可以查看/移除已被加入黑名單的設備。

3，約束性描述：說明整個功能描述裡面相關的規則，主要有顯示規則，欄位規則，防呆規則。這部分相對來說比較難，因為很多點都不容易想到。除了這些，還有很重要的：異常情況怎麼處理，極值是怎樣的，顯示內容及其格式應該是怎樣的。

例子：

1.設備列表顯示規則：

a.已連接的設備列表為已連接的陌生設備，即不包括本機和家庭設備。

b.可顯示/編輯在線設備和離線設備。

c.列表頁最多有50台設備，當設備數超過50台以後，按時間順序自動刪除。

d.當前無陌生設備接入時顯示：無陌生設備接入網路。

2.設備列表欄位規則：

a接入次數：每次下線後再上線連接為1次。

b.接入次數超過99次顯示為99+。

3.總陌生設備數和總接入次數：

a.按接入設備和設備接入次數的總和計算。

b.接入設備最多為50台，接入次數超過99次顯示為99+

在開始寫的時候很容易犯的錯是將功能描述和約束條件弄混淆，但是弄清楚功能描述主要是站在用戶的角度寫的，約束條件站在開發的角度寫的，多寫幾次修改修改就會好很多。

原型圖篇

關於原型圖其實能說的不多，因為每個人的審美不同，但是有些細節需要提一下。

1，這個也要根據公司的情況而定，比如公司有UI和UE的就不用特別注意美觀，重點就應該放在重要的元素，完整度，邏輯清晰。反倒應該以簡潔的界面為主（不要加入自己的設計想法，會誤導別人的）。因為這時候我們的「用戶」是UI，UE和開發，讓他們理解有什麼元素，怎樣看的清楚最重要。如果在公司沒有UI和UE的情況下，就需要注意界面的美觀和交互了。

2，細節，比如去掉Axure裡面那些控制項的邊框，對齊，顏色統一。

3，標注，prd裡面很多重要的約束條件標注在對應的頁面會更方便程序員開發。

4，沒有時間就不要做酷炫的交互了，因為沒用，沒人看。甚至可以不用做交互，只需要有邏輯的把頁面畫全就好了。

其實不同的公司有不同的架構，所以對需求文檔和原型圖的要求是不同的，不過不管要求如何，都一定想清楚自己寫文檔的邏輯。還有邏輯也是可以優化的，不能死守自己的那一套邏輯，不好的就要改，讓自己一直有進步。都說新人得踏踏實實做好手頭上的事，所以看似很簡單的文檔和原型圖就需要我們多用心做好，做好這一步了，基礎就打踏實了，然後朝著尋找更好的需求努力！

④ 如何提高產品原型圖的質量

1、AxureRP（RapidPrototyping）Axure（讀音為Ack-Sure）無疑是目前最受關注的原型開發工具，其能通過組件的方式幫助網站或軟體設計師快速建立帶有注釋的原型（流程、線框），並憑借自定義可重用的元件、動態面板以及豐富的script能夠建立基本功能或頁面邏輯的動態演示文件。
Axure借鑒了office的界面，能夠讓用戶快速上手，並且提供了豐富的組件樣式修改，使得通過其能夠創建低保真、高保真甚至接近於實際效果的界面。
然而最讓人稱道的是，Axure的豐富的腳本模式，可以通過點擊和選擇能夠快速完成界面元素的交互，如鏈接、state切換、動態變化等效果，使得Axure能夠生成十分接近於真實產品的原型。
另一方面，Axure能夠導入其他人創建的元件庫，使得Axure能夠滿足絕大多數類型產品的設計。
但Axure仍然有一個讓人頭痛的問題：對於中文的支持不太友好。
在小部分元件上輸入中午的時候，經常需要像碰運氣似的反復切換輸入法，破壞了咱們設計師的用戶體驗。
瑕不掩瑜，Axure仍然是交互設計師的首選原型工具。
2、MicrosoftOfficeVisioVisio在2000年被微軟收購，並在2002年成為office2003套件中的一個組件，最新版本是2007。
Visio能夠獲得推薦的原因是因為Visio的適用性非常之廣，從網站界面、資料庫模型，到平面布置到工藝流程，Visio都提供了相應的元件庫和模板來進行快速創建。
相較Axure而言，Visio更適合於傳統行業的生產或流程設計，或者軟體及互聯網行業中的信息、數據和流程的說明，而不太適用於web界面。
因為其的基於web的元件庫還是比較少，並且形式和結構也更類似於word中的形工具，因此在原型開發效率上都有所不足。
3、BalsamiqMockups這個基於AdobeAIRRuntime的工具實在是有讓人眼前一亮的感覺，手繪風格的元件樣式粗獷淋漓，能創建接近於紙上手繪的原型文件。
其提供了豐富的手繪風格的web常用元件，包括常用的html控制項、以及一些組合控制項，如多媒體控制器、標簽頁、列表、Iphone界面元件等。
Mockups最值得贊賞之處在於其提供的多數組件都可定製外觀，對於中文的支持也不錯（選擇View>UseSystemFonts）。
4、MockflowMockflow和以上工具最大的不同在於Mockflow是一項基於AdobeFlex技術開發在線服務，提供了與BalsamiqMockups基本相似的功能，甚至更豐富的組件，雖然其元件定製化不夠強大，但其提供的元件庫默認樣式卻非常適合用來做商業產品原型的搭建。
有一個讓愛不釋手的功能是模板，可以設置基於任何頁面的模板來進行新的頁面設計。
與其他模板工具相比，mockflow有一個非常特色的功能，基於web的存儲可以在任意電腦上聯機打開，同時可以其他人進行快速的分享，並收集在線反饋意見，非常適合虛擬團隊的原型設計交流。
雖然在線服務的基本帳號只能創建一個文件，但單個文件卻沒有限制頁數，因此也基本上足夠使用。
5、PencilsketchPencil是一款基於Firefox的擴展組件，安裝之後即可在Firefox的工具菜單中打開Pencil的繪面板。
功能比較簡單，僅能用以日常簡單工作的輔助說明。
提供的默認元件都是基於軟體工程，因此更適合用於windows桌面程序的簡易界面搭建，或者是基本的頁面功能說明，並不適用於嚴肅的原型開發，但好在體積小、又輕便，能夠方便將網頁中的元素直接拖到或者復制到當前的畫布中，這也是Pencil安裝在Firefox所帶來的便利之一。
更多工具…在以上列舉的原型開發工具都是較為常用的，也是在國內的交互設計師們比較常討論的，但其實和Axure功能相似的軟體還有很多，下面也就一些簡單說明：
6、GUIDesignStudio這是一款真的非常強大的原型製作工具，沒有在上面推薦的原因是因為還沒有實際體驗過，但沖著這工程級的界面設計就沒有去嘗試的沖動，但是從官方網站的截和視頻演示來看，這款軟體的操作模式和前面的原型工具大有不同。
Axure之類多是基於頁面的原型設計，對於web網站盡管很實用，但是對於軟體界面的流程設計卻略顯繁瑣。
而GUIDesignStudio卻另闢蹊徑，直接以建立元素與元素之間的關聯的方式來自動化的創建動作流程，而從視頻演示來看，這樣的確很大程度上提升了軟體界面原型搭建的效率。
7、PrototypeComposerSerena公司免費提供的原型開發工具，功能確實強大，提供了基於項目管理主要流程的產出物文檔模板、原型工具以及開發流程式控制制，這個軟體的開發理念非常好，用這一款工具來滿足項目開發流程中各個環節的溝通和決策。
但軟體的學習和使用成本比較高，要了解其中的全部功能，貌似需要花不少時間。
另外軟體的效率和穩定性還有待提高，試用的過程中多次出錯及停止響應。
8、LucidSpec由Elegance科技推出的LucidSpec是一款很類似Pencil的原型工具，僅僅是提供了更多控制項。
不過LucidSpec強調了生成干凈的說明文檔的功能，這可能是針對於多數原型工具的自動化生成規范的冗餘而言的，不過老實說LucidSpec提供的原型界面太過簡陋，並且生成的說明文檔也未見優化有怎樣的提升。
視頻介紹
9、IriseProfessionalEditionIrise與其他原型工具相比其中一個特色在於提供了樣本數據的功能，這是類似於excel表的一個樣本資料庫，可以通過界面元素直接獲取樣本資料庫中的數據，這樣所生成的原型甚至可以使動態數據更新的。
10、AdobeReaderAdobereader。
沒錯。
其實理論上任何可以創建形和文本的工具都可以用來原型開發，因為原型本身就是對於業務邏輯和功能界面的模擬或模擬，因此有何理由不能使用PDF格式。
BoxandArrow的這篇文章《PDFPrototype》提醒了，所有的原型工具都只是工具，而不是設計本身。
另外這里的也可參考一下但個人推薦：原型Axure7.0UIDesigner思維MindmanagerXmind流程Visio2013EDrawMax知識有道雲筆記印象筆記時間TodolistWorktile形PhotoshopColorpix交互快現UIDesiger

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

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

⑥ 原型設計產品應該符合哪些原則標准

你好，原型設計要符合以下原則標准：

• 用戶中心：原型設計應該從用戶的角度出發，考慮用戶的需求和體驗。

• 簡潔明了：原型設計應該簡潔明了，避免過多的冗餘信息。

• 交互設計：原型設計應該考慮用戶和產品之間的交互，提供易於操作的界面。

• 可測試性：原型設計應該具有可測試性，方便進行用戶體驗測試。

• 可擴展性：原型設計應該具有可擴展性，能夠適應未來的變化。

• 美觀大方：原型設計應該有良好的視覺效果，美觀大方。

• 規范化：原型設計應該遵循設計規范，保證產品的一致性和可維護性。

也不僅限於此，在這里推薦一本書《用戶體驗要素：以用戶為中心的產品設計（原書第2版）》

⑦ 反思產品原型到底什麼最重要

兩個關鍵點讓我反思這個問題：

1.之前用墨刀原型做用戶調研的時候，我覺得一個日期寫的不準確不影響測試結果，跟被調研者解釋一下就好了。後來發現用戶在不清楚產品設計的時候，會根據這些細節來理解產品，信息點不能高度還原的話影響測試效果；

2.最近出產品設計的時候，發現溝通起來特別的費勁，僅從我自身找原因：（1）文案不夠細致；（2）沒有標注信息優先順序；因為沒有設計需求評審這個環節，所以對方在不看需求文檔，無法理解需求；導致出來的設計需求層級不清楚；（3）自身不了解設計規范；導致反工；

總之，1、產品原型突出信息層級要比畫的好看重要；2、文案准確性要比畫的好看重要；3、需要設計需求評審。

多改進，最近狀態不夠好～精力有限，不貪心，像我這樣碌碌無為的人，一點都不夠酷～～～

⑧ 如何快速進行網站/App產品原型設計

方法/步驟
1、對用戶需求進行文字描述。
用文字描述這個軟體，需要哪些功能。要怎樣的結構，開始是怎樣，過程是怎樣，有哪些要注意的。（這階段其實就是把重點給挑選出來，以免後續的產品設計過程中，遺漏了重點項目）

2、草圖設計階段。
這個階段，可以天馬行空，不用拘泥於傳統。也就是自由創作，將思想，以圖形形式表達出來。當然，不拘泥於傳統不意味著就要排除傳統。傳統有傳統的優點。在這里建議，創業如果已有很多創新點了，那麼設計上面的創新可以部分忽略。遵照傳統也被允許。PS:草圖設計階段並不一定就要用到Axure，遇到的畫不出來的元素，用文字表達即可。

3、確認主體結構。
這個階段，是將產品的使用邏輯優化好。配合用戶使用習慣，行為特點，將結構弄得簡單易用而內容豐富。這個階段就要用Axure開始進行操作了。而顯然，這個階段我們的Axure如果含有很多方便添加的元素，如Iphone外殼等，進程就可以快很多。所以，最好提前到網上下載相關的axure元素庫。

4、美化原型。
這個階段，首先要確認自己需要哪些地方做美化。然後能搜索到的就搜索，不能搜索到的，就只能用Photoshop或其它繪圖軟體進行編輯了。當然，有的公司可以出錢請視覺設計師設計，也是很快捷的一個辦法。

⑨ 原型設計是什麼，該怎麼使用它

我們首先明確兩個定義：

原型的定義：

• 用線條、圖形描繪出的產品框架，也稱線框圖。

• 交互設計的結果輸出，可能是一張紙上的幾張圖；原型代表著交互設計的結果，當最終實現的時候，交互流程會和原型保持一致；可以理解為草稿或者叫做參照物

• 原型是一種讓用戶提前體驗產品、交流設計構想、展示復雜系統的方式。就本質而言，原型是一種溝通工具。

原型設計的定義：

• 線框圖描繪的是頁面功能結構，它不是設計稿，也不代表最終布局，線框圖所展示的布局，最主要的作用是描述功能與內容的邏輯關系。

• 原型圖是最終系統的代表模型或者模擬，比線框圖更加真實、細致。

其次，了解原型設計的作用，主要有兩點：

1. 溝通： 因為是原型是需求和功能的具象化表達，所以原型可以輔助產品經理與領導、交互、UI和技術的溝通產品思路。雖然需求文檔也是可以滿足溝通需求的，通過用例將交互寫到設計描述文檔中，但是原型可以更詳細地解釋交互。

2. 測試：因為原型相較於UI稿來說修改更方便，所以原型能提高產品經理的功能設計沒通過評審時返工的工作效率。沒有哪一家互聯網公司可以不經過測試，就直接上產品和服務。原型在識別問題、減少風險、節省成本等方面有著不可替代的價值。



該如何使用原型設計，那麼原型設計工具就是必不可缺的。

又選擇什麼工具來製作原型？主要考慮以下幾個因素（排名分先後）：

1. 熟悉程度和獲得工具的便利度；

2. 所需的時間和精力；

3. 可復用的代碼/框架；

4. 為測試創建可用的原型；

5. 價格和學習曲線。

目前比較好用的在線原型設計工具有Marvel，Invision，墨刀等等。

希望對你幫助~

有任何疑問可以追問，滿意請採納，謝謝~

⑩ 在畫產品原型之前我們還應該做什麼

一、首先要解決的是設計什麼產品的問題？

我們在做產品時，學會問5個問題。

一問：誰會用這個產品？

二問：TA為什麼用？

三問：TA在什麼時間用？

四問：TA在哪裡用？

五問：TA用了產品會推薦給其他人嗎？

在解答這五個問題之後，基本我們把用戶是誰、痛點、消費時間、消費地點、產品優勢進行了分析。然後再進行產品的試錯，彎路就會少走很多。

通常，使用5W2H分析法也可以解決

What（用戶要什麼？） 例如：用戶要極品裝備；

Why（為什麼要？） 例如因為他們要增強戰力；

Where（從哪兒得到？） （where）裝備從BOSS身上得到；

When（我們什麼時候做？） （when）我們國慶節做這個活動；

Who（對誰做？） （who）針對所有玩家；

Howmuch（給多少？） （howmuch）BOSS爆率設定為XX；

How（怎麼做？） （how）活動以怪物攻城形式進行。

二、產品風格要符合產品的調性

什麼是產品的調性？就是人與產品之間建立條件反射。就想一想到TT，大家第一反應十有八九就是杜蕾斯；一想到社交工具，第一反應是微信；一想到購物，第一個反應是淘寶。

1、產品色彩風格要符合調性

設計界面不僅僅要高大上，還要根據業務類別設計界面。比如淘寶要設計成集市的感覺，天貓商城要設計成高端商城的感覺。

2、給產品賦予情懷

從技術層面來說，產品是開發出來的。 從業務層面來說，產品是運營出來的。每個產品根據Ta的業務，會有它的情懷所在。比如攜程做旅遊，以藍色為主，主打商務出行。再比如做美國旅遊，由於美國的文化是開放的，具備多元化的特點，所以網站的色彩應該奔放一些。