A. axure怎麼做web頁面高保真
一般來說，axure的原型分成兩種，低保真和高保真。低保真就是線框圖，主要作用是給研發交付，做開發的參考，只要能能實現講清楚頁面的功能和邏輯就可以了，特點是高效、快速；而高真原型主要是在產品初期給公司領導、用戶演示，除了要完成低保真的功能，對於原型的界面風格和交互都有要求，高保真的原型特點是效果好、更接近真實的產品，但是開發起來很費事件。這兩種原型適用與不同的需求場景。
對於高保真來說，主要要實現以下幾個方面：
1、頁面布局尺寸要准確，最好能夠實現自動適應屏幕；
2、頁面風格，包括顏色、字體、行間距等，都要按照規范設計，這個階段，往往需要UI的介入；
3、交互要能夠實現，至少要實現所有的菜單功能，並且要實現主要細節頁面；
按照上面的要求，高保真的原型除了基本的原件之外，一般都要使用到動態面板、中繼器、內聯框架等元件，需要產品經理能夠對這些元件掌握的比較好。
總得來說，實現一個高保真的原型是比較復雜的，對於新手來說，還是比較困難的。
不過也有一些現成的pc端的高保真原型框架，可以下載直接使用。
B. 繪制線框原型圖的10個要點，做與不做
線框圖是設計過程中的第一步，也是整個設計流程中最重要的步驟之一。線框圖是你想法開始成形的時候。盡管線框圖看起來很簡單，但也可以做得很好或很差。相框圖的好壞可能對最終產品產生重大影響。下面將介紹正確的與錯誤的線框圖。這些技巧可以幫助打造更好的Web和移動端體驗。
線框圖是用戶界面布局的基本框架。線框圖使用使用佔位符，而不是使用真實的界面元素。線框圖被用於早期階段設計和開發過程中，驗證信息架構和用戶流程。
相框圖有助於確定移動端程序或網站的界面功能與視覺框架，所以說線框圖是設計產品過程中的關鍵步驟。線框圖還可以作為產品文檔，指導設計師快速搭建移動端程序或網站。
設計師如何充分利用線框圖，以及應該注意什麼？
如果想繪制好的線框圖，你必須研究用戶需要什麼和他們想要什麼。考慮兩個重要的目標：業務目標和用戶目標。這兩個目標對產品是否成功起著至關重要的作用。線框框架之前的研究將幫助您設定明確的期望，即您想要使用線框圖實現的目標。
繪制線框圖與設計其它步驟的主要區別是要簡單、快速。其中速度尤為重要。你需要快速的用線框圖嘗試很多不同的方案，在為問題提出適當的解決方案之前。線框圖盡可能的保持簡單是至關重要的，因為這可以幫助你避免分心，並且可以清晰地傳達你的想法。
在繪制線框圖框架時，要盡可能多地提出方案。一般而言，提出的設計方案越多，就會越有機會朝最佳解決方案進行迭代。如果能夠在一個想法上產生多種想法和變化，可以讓您看到每個想法的優點和缺點。
線框圖可以說是項目前期的一種溝通工具，它可以幫助其他人理解你的想法。當你與其他童鞋對接時，請確保任何人都可以輕松的看懂並使用線框圖。如果只有一個人能夠理解你的線框，這么說，你的線框圖就是不ok的。
a.向一個與你的項目無關的人展示你的線框，並向他提出一些關於工作的問題。這將有助於你理配汪解應該做些什麼來提高理解力。
b.為你的線框圖進行注釋，使其更易於閱讀和理解。閱讀某些元素或交互的描述要比過看靜態圖像來理解事情要容易得多。
切勿單獨思考。當你與其他人一起集思廣益時，能收獲更多及培神仔更好的解決方案。在設計過程的早期應該多向團隊成員展示線框圖，這有助瞎扮於驗證和改進你的想法。
團隊成員的反饋有助於您改善方案 - 聽取其他成員對你的設計的看法，根據反饋進行重復性修改。
例如：我們電子商務網站的產品中，有結賬頁面，這與許多其他網站類似的。如果你覺得因為一樣可以選擇不繪制產品這個部門的線框圖，而是專注於應用程序中不太明顯的部分。其實這樣會導致你遺漏交互內容，影響用戶體驗。所以請避免這樣的誤區，確保應用程序的每個部分都有線框圖。
當你准備繪制線框圖時，直接使用你最喜歡的電腦軟體工具繪制，這看來是沒有什麼問題的。雖然像 Mockplus 這樣的現代原型開發工具可以在幾分鍾內創建出功能完整的原型，但在最好先用筆和紙勾勒出你的想法，然後才使用電腦軟體。
你有沒有想過為什麼線框經常以灰度創建？灰色防止顏色對你造成的分心，幫助你快速完成繪制。線框圖的主要目的是搭建用戶界面內容並描述應用程序的功能。添加多種顏色可能會導致分心，因此最好避免在線框中使用顏色（除非要突出顯示某些特定元素）。
不要過分關注線框的外觀。線框不是最終設計稿。它們不需要看起來感覺像成最終產品。請記住，線框圖是一種工具，幫助了解界面中視覺或交互設計元素的層次結構。當你過分關注美觀度，你可能會繪制特別精美的線框圖，但可能不會產出真正的解決方案。因此，繪制線框圖要努力讓它們能用，可以輕松傳達你的想法。視覺和交互設計應留在產品設計過程的後期階段。
不要依附於你的個人想法。可能你很難放棄一些你花費了很多時間的某些東西上（特別是當結果本身並不壞時，但卻不符合你設計的產品概念）。但重要的是，線框圖被繪制出來前。你需要嘗試很多不同的選擇（可能10種、50種、甚至100種方案），然後選擇最適合問題的一個（或兩個）方案。
繪制線框圖是用戶體驗設計師的基本技能。時間就是一顆良葯，任何技能都可以慢慢熟練掌握。同樣熟練掌握繪制線框圖技巧的關鍵也在於練習。你做得越多，你就會越好。因此，你平時需要投資更多的時間在相框圖上，這樣在下一次個項目開始時，可以節省大量時間。
原文鏈接：https://medium.com/mockplus/10-dos-and-don-ts-of-wireframing-8a6d0b3429d8
C. 產品界面原型設計排版規則
01字體：類型&字型大小
在原型頁面的文字設計中，字體的選擇方面建議使用蘋方（macOS）或是微軟雅黑（Windows），以便達到更好的顯示效果。
字型大小我個人比較常用的是12、13、14、15、17，偶爾會用9、10、20。
02配色：色彩&界面
在原型頁面的色彩設計中，最好保持一致，無論是文本還是其他圖形、圖片不要使用太多非黑灰白以外的色值。
如果用於演示的產品原型稿件中需要配圖標，則需要保持圖片的一致性，大小及樣式。但在實際的工作中，除了一些指示性比較強的圖標，比如搜索、設置、分享等等，其他的盡量不要使用圖標素材。
組成原型界面的素材也要盡可能的避免混搭，比如從成熟產品中截圖然後應用到自己的產品原型當中。
在Axure9中新增了AdjustColor【顏色調整】，可對圖片可以進行色值調整。
03排版：對齊&間距&留白
在派帶原型頁面的結構設計中，要靈活的枯野使用參考線、對齊、分布等功能，使頁面內容具有良好的可讀性。
從個人習慣來講，無論是間隔還是留白，我會按照5像素的倍數進行設置。留白一般在Style樣式面板中調整Padding值，很多時候，Padding值也能輔助我對組件進行對齊操作。文本之間的行間距偶爾會調整，但會以默認為主。
04案例
以下是一些規范原型頁面示意：
05結束語
對於想要從事產品經理或是交互設計師的新人來講，建議大家在熟悉工具的使用過程中有意識的培養自己的設計規范。在繪制線框圖，或者臨摹其他成熟產品創建高保真原型（實際工作中並不需要創建高保真原型，這邊需要特別注意）的時候，一定要注意以下2點：
線框圖：不建議完全按照蘋果或是安卓，設計規范進行頁面設計沒羨喊。
高保證：不建議像素級臨摹。
D. 網站交互設計：線框圖，原型和視覺稿的區別
首先，他們都是網站的界面和交互方面的模型，但完成度各不相同。
線框圖 —— 更多側重呈現網頁界面的主體結構，極易只要的頁面跳轉和邏輯關系。一目瞭然的了解網頁設計的大致情況。
原型圖 —— 原型添加更多的界面細節以及交互，已然是相當真實的網頁設計模型，能夠進行初略的產品演示和測試。
視覺圖 —— 更進一步豐富視覺、細節以及交互，與最終產品十分接近，方便演示和迭代。
當然，設計師設計過程中，使用的工具也會有所不同。例如，線框圖和原型圖，一般原型設計工具，例如摹客Mockplus, 幾分鍾就能快速完成。它新出的在線全新升級版本，提供更多模板、組件、交互以及狀態設計選擇，高還原度原型設計，輕松打造。
E. web端及移動端原型設計規范
第一次繪制原型圖的時候覺得主要功能表達清晰即可，尺寸大小、元件間距全憑感覺，因此一開始也挨了不少罵。後來慢慢摸索出規律，大概總結如下：
埠類型：
目前長需設計的埠分為：web段（即網頁）、移動端（APP、小程序等移動設備）、IPAD（IPAD是一種移動設備，但也有自己特定的尺寸），智能設備（例如智能電視、智能手錶等等）
由於我更多接觸的是網頁端已經小程序埠，後面會以這兩個為主。
網頁端：
目前市面上顯示器屏幕尺寸為19-21寸，屏幕解析度大概在1280px*800px—1440px*900px之間，前端工程師在寫頁面的時候，寬度一般設為1180px—1220px（當然，這個寬度也不是絕對固定的）。
因此在做產品設計的時候，設計web端產品，寬度會設為1400px作為容器，位於容器上方再畫一個1200px的矩形，內容區域的容器。（PS：內容區域的矩形需與底部容器左右間隔10px，作為留白）
可能有人會問，為什麼要底部容器上面劃出一塊內容區域？
首先，我們要知道， 容器決定產品的邊界 ：
我的理解是：
按照市面上顯示器的解析度，前端頁面可展示的內容區域，平均寬度在1200px，預留出來的空白部分，是為顯示器較大的人群考慮的：屏幕越大，可展示的區域也越大，超過產品本身內容可展示區域的話，會自動留白。
另一方面，為保證開發團隊的成員可查看完整的原型圖，我們需考慮下他們電腦屏幕的解析度可能為1280*800px。
稍稍總結下，就是跟隨大多數人的屏幕尺寸大小，以及方便開發團隊查看。
給大家看我電腦上查看大的原型圖大小，是不是很清晰的看到內容呢？當然，這也是我個人的看法，如果有別的看法的，可以互相交流交流 （我算是個野路子的產品） 。
至於高度的問題，這個是沒有要求的，一般都是根據需要展示的內容來決定的，也就是高度自適應。
講完容器的寬度，接下來講講字體。正常情況下，字體大小都是14px，最小字體12px（字體太小可能就不方便查看）。
字體上，我所在的企業並沒有太多要求，只要求能看懂主要功能就行，所以上面的字體是來自一位B站的up總結的。
移動端：
說明之前，給大家感受下剛入門時候，畫的線框圖，話不多說，先上圖。
（OS：簡直慘不忍睹，當然這並不是給開發的圖紙，而是草稿。由於各種問題，我需要兼顧產品跟UI設計，所以都是輸入高保真原型圖的）
雖然最終效果跟第一版草稿的差距特別大，但這樣讓我知道原型尺寸的重要性。但凡在自己隨手畫的容器上覺得覺得間距大小差不多了，可以了。有這樣的想法，那你離被開發揍一頓就不遠了。
以自己一開始的慘痛經歷說了這么多，接下來聊一聊移動端的設計規范。
常見的移動端多是手機，基本上整個手機都是屏幕既是容器也是內容可視區。常用字體14px，最小字體一般是12px（你懂的，手機屏幕小，字體太小用戶也很難看清的）
上圖是我個人畫線框圖的習慣，並不是標准，只是提供個參考給大家。各個區域的底色，也只是為了便於自己區分，實際上底色並沒有什麼特別多的要求。至於字體，一般都是使用14px的字體。
產品在原型設計上還是有很多規范的，只不過我就職的企業並沒有太多要求，但基本也算通用了，具體情況還是看看自己企業內部有沒有什麼特別的要求。
上述的設計規范僅限於個人習慣，也是非常基礎的部分。如果有別的見解也可以一起分享。像容器內，各類原件的一些規范，後續也會慢慢整理出來。
F. 用案例幫你釐清原型：草圖、低保真以及高保真之間的區別
最近有個朋友向我咨詢：產品設計流程中原型、交互和視覺之間孰先孰後問題，並由此引出了原型低保真、高保真以及視覺稿之間的差異的思考。先解決我朋友的問題，交互是存在原型之中的，即設計原型的過程中也包含著添加交互的過程；而視覺稿呢，則是在原型通過評審之後，再進行設計的產物。三者的前後順序可以大概理解為：原型-交互-視覺。
從建築學的角度來看，大家可以將原型和藍圖（施工方案）對比理解，兩者的區別在於應用場景不一樣：前者應用在移動/互聯網、後者應用到實體施工現場。而接下來是要探討則是原型的三種形態——草圖、低保真原型（線框圖）、高保真原型之間的區別。
手繪草圖
手繪草圖一般應用於產品概念的形成階段。這個階段可能發生的場景頗多：可以是團隊成員之間的頭腦風暴，也可以是個人在收集及整理需求時誕生的靈思妙想，還可以是你在某個明媚陽光下漫步看到樹影婆娑突然萌發的靈感。
在這個美妙的moment，興許你會馬上拿筆把它畫出來，也可能立刻用電腦記下來，還有可能立即停下腳步散落在腳邊的石子劃開來。但無論畫的怎麼樣，都沒關系，因為這個只是靈感發生變化的開始，也就是產品原型的最初樣子——草圖。
手繪草圖是由產品經理來給產品需求描繪出的一個雛形，主要用於梳理及向項目負責人證實產品需求是否確實存在。手繪草圖，不僅可以避免對產品需求的片面理解，在一定程度也可以提高產品經理本人的思維拓展能力。
低保真原型（線框圖）
與草圖相比，線框圖顯得更加完整、飽滿，它明確地表達：內容大綱（什麼東西、信息結構（在哪）、用戶的交互行為描述（怎麼操作）。主要應用在產品需求已經成型無需改動階段，這個時候，產品的業務流程、信息架構都已經確定。產品經理在設計原型時也會遵循一定的規則，比如遵循柵格系統的布局規則、運用格式塔原理進行排版和設計。但這時的原型還是呈現為灰度圖，這也是和高保真原型最大的區別。
線框圖可以幫你平衡保真度與速度。繪圖時不用在意細枝末節，但必須表達出設計思想，不能漏掉任何重要的部分。就像給項目以及一起協作的團隊成員（開發工程師、視覺設計師、文案作者和項目經理），開辟了一條輔助理解設計的通道。說得再明白點，你是在設計城市地圖，地圖上能展現出每一條街道，只不過繪制上做了簡化。看地圖能看出城市的框架，但無法一覽城市的美感。
一般情況下，低保真原型可以適用了大部分場景：包括向UI解說布局排舉納版字體圖標，向前端、後台攻城獅解說功能實現以及交互效果，還可以作為產品樣本對接業務部門，通過溝通確保產品滿足需求。當然，原型到低保真，基本可以作為展示產品經理的能力的參考之一。
高保真原型
與低保真原型相比，高保真原型的最大不同之處在於配色。不是毫無規則的五顏六色，而是符合一定規范的用色。例如上面講到的格式塔原理：接近、相似、封閉、連續、簡單。但是涉及到用色，一般會由專業的UI設計師來設計，產品經理需要做的是把已完成的視覺效果圖按照交互邏輯重新製作。這樣製作出來的高保真原型視覺效果棒，容易傳播並且評判。
但是在很多大公司小公司，根本就不會考慮製作高保真原型，因為耗時太卜答歷長，人力成本也高。在我接觸的項目中，只有給建設銀行的系列產品（如商城、手機銀行等）做用戶體驗測試時有用到。
通常來說，高保真原型常應用於向高層領導進行產品演示或者向投資人演示產品概念，以尋求項目融資；或者邀請真實（潛在）用戶來測試，在正型搜式介入開發階段前，以最接近最終產品的形式考量產品可用性。
以上通過案例幫對原型設計感興趣的同學釐清了草圖、低保真原型（線框圖）、高保真原型之間的區別。
G. 什麼是Axure及產品原型
axureRP是一款快速原型設計工具，它不需要任何編程或寫代碼基礎，就可以設計出交互效果良好的產品原型，常用於互聯網產品設計、網頁設計、UI設計等領域。
作為一款熱門的原型設計工具，它可以完成很多紙和筆畫不出來的事情，特別是高交互的頁面，用動畫效果展現讓人瞬間清楚你要表達的內容。
原型：用線條、圖形描繪出的產品框架，也稱線框圖。
原型設計在整個產品流程中處於最重要的位置，有著承上啟下的作用。何出此言？原型設計之前需求或是功能信息都相對抽象，原型設計的過程就是將抽象信息轉化為具象信息的過程，之後的產品需求文檔（PRD）是對原型設計中的版塊、界面、元素及它們之間的執行邏輯進行描述和說明。所以說，原型設計的重要性無可替代，產品經理應當要對此有絕對的控制和駕馭能力。
話說回來，原型設計雖然很重要也應當是有限度的，原型設計的作用有以下幾點：
1、因為是原型是需求和功能的具象化表達，所以原型可以輔助產品經理與領導、交互、UI和技術的溝通產品思路。
2、因為原型相較於UI稿來說修改更方便，所以原型能提高產品經理的功能設計沒通過評審時返工的工作效率。那axure和騰訊cdc的uiddesigner，還有在線的fluii也可以考慮。其他好像敬蠢指沒有了吧。但除了axure，後兩者所謂的交互其實都是不同的界面截圖之間的切換，說白了就是多節點式結構的ppt，不是真正的交互。axure的思想更接近實際開發，比如通過master實現界面元素的封裝復用，條件判斷，函數，變數。這些功能除了開發工具，原型工具還有誰能比得上axure嗎？
app原型相比網頁，界面結構簡單，但交互復雜得多。界面上的div也不是平鋪的，為了有效亮配利用空間會用到很多層疊，卡片式之類的展示方式。要做這類高保真可交互原型，我覺得非auxre莫屬。比如一個tableview滑動到頂部刷新，底部回彈，不藉助開發只有axure能做出來。
我從07年開始用axure，曾經一度認為做網站原型，axure已經不需要再怎麼改進了。自從做app之後，覺得axure有點根不上時代，但試了其他工具，還是覺得auxre最合適。仔細做過幾個以後，我覺得axure還是完全適合做app原型的。做好以後分享也方便。放到內網，或者axshare上，或者有一個htmlruntime的app，可以在設備上直接瀏覽axure輸出的html。
當然axure作為一個工具，不可能每個環節都是最好的。比如我希望axure能借鑒一下其他工具和開發思想，把ui和素材分離出來，就像換皮膚一樣，一個控制項可以隨便更換圖片素材。這樣pm或者交互用最簡單的線框設計，確定交互以後，可以把設計師的圖貼上去，這樣就100%保真了。
axure對app設計不友好或者說最落伍的地方，就是支持的事件類型太少。交互上無法模擬出多點觸摸，無法模擬設備運動，無法模擬各類感測器或許對一個原型工具來說，要求太高了。AxureRP是美國AxureSoftware
Solution公司旗艦產品，是一個專業的快速原型設計工具，讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟體或Web網站的線框圖、流程圖、原型和規格說明文檔。作為專業的原型設計工具，它能快速、高效的創建原型，同時支持多人協作設計和版本控制管理
產品原型是將抽象的想法、需求轉化為具象產品的過程。同時它可以直觀的呈現給團隊中的其他成員，甚至早期用戶，用於驗證產品的合理性，通過高效、低成本的方式來表達、測試並驗證產品。Axure：發展較早的一款原型設計軟體，因而名聲較大。無限畫布，適合做低保真到中保真度的原型。功能很多，也讓學習起來有點難度，網上有很多axure教程就不多說了。本地型軟體，可以下載html文檔預覽，手機預覽不方便。
產品原型的定義：
1.用線條、圖形描繪出的產品檔滾框架，也稱線框圖。
2.交互設計的結果輸出，可能是一張紙上的幾張圖；原型代表著交互設計的結果，當最終實現的時候，交互流程會和原型保持一致；可以理解為草稿或者叫做參照物
3.原型是一種讓用戶提前體驗產品、交流設計構想、展示復雜系統的方式。就本質而言，原型是一種溝通工具。
另外，目前比較好用的在線原型設計工具有Marvel，Invision，墨刀等等。
希望對您有幫助！有疑問歡迎追問~在界面設計初級或中期，為了能夠方便和其他設計師討論、測試產品相關的設計想法，需要利用各種原型工具將產品模型做出來，一個個界面修改和迭代，必要的時候，還可以製作成動態的模型，直接測試，看看可能會有哪些問題或不足等。
Axure是一款老牌原型設計工具，是目前為止，市面上使用比較普遍的工具，全面支持原型、交互和分享功能。但是，對一些原型設計小白來說，學習難度還是蠻大的，上手較慢。目前國內也有許多優秀的原型設計工具，比如摹客Mockplus，可以說是一款簡化版的Axure。原型製作快速、簡單、高效。原型項目類型全面、交互豐富、拖拽即可實現、團隊分享、協作和評論功能也能實現。適合初期快速繪制原型圖，中期和後期快速協作、迭代和測試。
H. 產品經理必備技能 | 如何畫原型
產品經理當然要會畫原型啦~
聊聊怎麼畫原型吧！
在畫原型之前，更重要的事情，就是畫 頁面流程圖 和 信息架構圖 ！假如你沒有這些東西，就開始畫原型，那麼等著你的就是沒完沒了的改改改。
頁面流程圖是以用戶視角，看流程合理性。通常適合於跳轉比較復雜的產品功能，如電商、社交產品。
為什麼要畫頁面流程：
（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確認了沒？？？
I. 產品原型總返工掌握3個基礎能力，高質量輸出「好看」的原型
原型策劃時，具體的產出物雖然無法用統一的標准去衡量，也無法一概而論規定使用何種規格，但是產品經理們還是可以具體場景具體輸出。
業內通識，畫原型是產品經理的基本功，但是又有多少人思考過，產品經理為什麼需要畫原型。同時也正是很多人因為意識不到畫原型的目的，所以往往就會忽略這個基本功的積累。
根據產品經理的工作內容和崗位職責，先說說需要畫原型的三種場景：
描述需求： 產品經理通過客戶調研或發掘，又或者是老闆or領導直接向下傳達的需求，此時需要產品經理將對方口中所說、心中所想的需求概述可視化，需要形象地描繪出來，以便對方可直觀理解、快速達成共識；
設計協作： 在產品開發流程中，對於確定的需求和功能策劃，需要在進入UI設計階段之前將原型稿確認，便於在正式投入精美的設計之前可以先把產品的方向以及功能結構確定下來，避免因為設計返工造成的內耗；
客戶展示： 對於一些外包服務型公司，在跟甲方或者客戶爸爸確定需求後，需要第一時間將雙方理解的內容快速展示出來，以便快速發現問題然後溝通調整，為之後交付正確的解決方案做准備，也同時盡量避免因前期客戶信息不同步造成的項目風險；
針對以上三個場景，就誕生了三種典型的原型稿繪制形態：草繪線框圖、低保真原型、高保真原型；
草繪線框圖： 三種形態中最為「簡陋」的一種，只展示大概的原型界面框架、關鍵內容和核心的頁面流，可以是手繪或使用軟體工具。該種形態多用於上述第一種場景，更多是內部協作時需要，快速繪制快速調整，以便盡快得到正確的反饋；
低保真原型： 相較於草繪線框圖要完整一些，屬於工作中常見的一種，尤其是在產品職責分工較細的公司，也是經常使用的一種方式。可展示完整的界面框架、頁面內容和頁面流，繪制時多採用黑白灰的視覺風格。該種形態多用於上述第二種場景，多用於在工作流程中的交互、設計協作，在保證原型基礎的規范性基礎上，還可以讓專業的交互、視覺設計師有一定的發揮空間；
高保真原型： 顧名思義，原型的保真度較高，要求原型頁面細節、交互完整且原型視覺飽和，近乎於已開發完成的線上界面，可以親自示範點擊，就像在瀏覽線上產品一樣，只是裡面大多為靜態數據而非真實的線上實時動態交互。該種形態多用於上述第三種場景，即在向客戶交付方案前的成果展示，為了便於趨近真實的產品，方便客戶可以快速理解和決策是否要直接投入開發成本，甚至有時會為了更加逼真，會快速開發一個產品demo以供測試和體驗。
了解了繪制原型的場景，就可以知道自己在實際工作中的原型，到底需要畫到什麼程度了。
當然有些公司會制定規則，要求統一使用某個保真度，還有一些比較規范的公司會有通用的原型規范，可以直接拿過來稍加改動，變成符合業務設計的內容即可復用。 總之，很多時候其實「畫」不是最重要的，而是先搞明白為什麼畫、為誰畫才可以輸出匹配任務場景的成果。
產品經理在日常工作中輸出產品原型時，也應該時刻清晰一點：畫只是過程，不是目的。
從產品創意誕生到產品開發上市，原型在其中的作用堪比承上啟下。承上可描述頂層需求，啟下通過繪制的原型，可以幫助在產品開發流程中下游的設計、技術同事們快速理解、高效開發。
那麼既然想要提高效率，就必須在承上啟下的中間形成標准和規范，因此就需要思考如何能夠在基於公司規范下，快速實現目的以及交付。
產品經理崗位的天然屬性就是協作能力，既然要協作就會有協作對象，在工作中經常需要拿坦培自己的輸出與上下游進行對接，並爭取達成共識。
按照日常的工作內容來講，產品經理的協作對象無非就是市場/銷售、設計/開發，因此產品經理畫的原型也應該既要讓市場運營、銷售人員看得明白，也要讓設計、開發理解的清楚。
通過簡單拆解協作方的需求，就會明白：
市場/銷售人員： 更看重解決方案，需要驗收你晌春畫的原型是否達到他們的需求要求。但因為他們大多屬於非產品相關專業人士，讓謹唯因此就要求你的原型需要形象、直觀，功能邏輯簡潔明了，直接圖形化表述方案即可；
設計/開發人員： 經常和產品經理打交道，對產品的日常輸出也比較清晰，甚至不乏有相關從業經歷的同事，因此如果要滿足他們的要求，你的原型還需要經得起復雜邏輯的推敲和梳理，除了具備主業務流程之外，異常場景的邏輯也理應充分表示；
對設計來講，可能更關注原型的交互樣式和體驗，專業的設計會考量你的原型交互是否符合系統、平台規范，是否還有其它更加符合用戶體驗的設計方式；
對技術來講，可能更關注原型的交互邏輯和性能，會考量功能設計的邏輯性和耦合性，對於正常、異常的邊界閾值是否都定義清晰，甚至還會要求你決定技術方案。
為滿足協作方的需求，或許可以整理出一個完整的、通用的原型標准： 結構可視化、交互高質量、技術可讀性。
與此同時，還可在交付時針對不同交付對象體現對方關注的點，比如前期給市場、銷售驗收時，界面美觀整潔，頁面流轉邏輯清晰，在取得認可的基礎上完善功能設計規范細節以及交互說明，便於後續工作跟進。
如果具備了這些要求，再結合具體的公司規范，你的原型就可以匹配協作方的的價值點，也就會是一個「好看」的原型了。
一份高質量的原型產出，通常要求產品經理們首先要具備相關專業能力，同時還需要有較高的執行力、審美能力、邏輯能力，恰好這些能力也是可以在工作中培養的。
較高的執行力是職場人應具備的通用能力和職業素養。在需求任務傳達後，基於對需求的准確理解，可以快速產出合格的原型，同時在任務前期不必執著於細節，快速將完整的流程、邏輯跑通，然後在完善細節內容，這樣可以有效減少任務延遲的風險；
審美能力的提升雖然不需要像設計人員那樣經常臨摹高質量的作品，但是也需要經常體驗行業標桿產品，通過多次、深度體驗別人的家產品為何如此設計，從而感受產品優良體驗的細膩之處。如蘋果系列的產品，不論是硬體還是軟體界面，都傾注了無數經典的設計原則，是值得我們去思考和體驗的。
邏輯能力在原型上主要表現在描述交互說明方面，一個是書面化的邏輯能力，另一個是業務邏輯能力，這兩個缺一不可。書面化的邏輯能力欠缺，產品想法再完美也會因為別人看不懂而來回扯皮；業務邏輯能力欠缺，書面化能力再強，業務邏輯跑不通、異常場景缺失，直接導致技術無法開發也會來回扯皮。因此為了提高協作效率，減少扯皮內耗，就需要產品經理們提升自己的綜合能力，同時也體現自己對工作負責任的態度。
專業輸出直接體現對當前所從事工作的態度和能力。如果基本的原型產出不合格，很容易被認為是工作態度或者能力不行。能力不行，如果有合適的平台也可以培養，但是態度不行就說明不適合從事相關工作，無法為工作負責，也就很難讓別人信服你可以為他們設計出人人都喜愛的產品。
原型的概念意義和價值不僅體現在互聯網產品上，最早也體現在硬體產品的建模設計、影視劇的分鏡稿等，此類工作場景都是運用「先粗後細」、不同階段交付不同程度成果的思路，通過及時協作來達到最終的目的。
上述的三種程度的原型，其實也是在策劃需求時不同階段的產物，隨著需求的確認，原型也會逐步豐富起來，因此在多數公司也並不是明文規定只允許輸出某種規格的原型文件，還是需要產品經理們根據實際需要、任務周期以及交付目標綜合考量，同時秉承著「先完成、再完美」的繪制思路，在正式交付前可以輸出一份高質量的產品原型。
這里所謂的高質量並不是要求原型有多好看、配色多飽滿，而是在具備上述原型標準的基礎上，在交付時體現出來的理想態，交付時的輸出越貼近理想態，你的原型就越合格，當然也就越「好看」。
由此思考下來，產品經理的原型基本功也就並沒有想像的那麼輕鬆了，自然也不會只是打開axure、墨刀隨便拖幾個矩形、圖標就可以的，而是 需要產品經理在明確原型的場景、交付對象以及需求業務後，通過專業的圖形設計來清晰的表達解決方法的過程。
J. 推薦下幾款web原型設計工具，介紹下其各自的優缺點.
我們公司目前在用的是Axure RP Pro 6.5，這應該也是主流吧；我是測試人員，原型不是我設計，所以不好說優缺點