旅遊app產品原型怎麼做

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

原型設計是整個產品面市之前的一個框架設計。以網站注冊作為例子,整個前期的交互設計流程圖之後,就是原形開發的設計階段,簡單的來說是將頁面的模塊、元素、人機交互的形式，利用線框描述的方法，將產品脫離皮膚狀態下更加具體跟生動的進行表達。
畫原型只是一個由想法變成圖紙的過程，類似於建房子，在落筆之前更要想清楚建成什麼樣？
工具方面目前用的比較多的有axure、mockplus、墨刀，還有很多，直接搜索就能找到

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

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

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

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

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

Ⅲ 如何用Axure快速製作APP交互原型

創建屬於自己的元件庫

原型製作工具的核心功能無非就是通過元件的堆砌組合，來展示產品的目標形態和效果。Axure自帶的只是一些最基本的元件，而網上的元件庫龐雜混
亂，很難找到滿足需求並且稱心的元件，並且大部分都是點陣圖格式，根本無法修改顏色寬度等數值，製作出來的交互又怎麼能達到精美的水準要求呢？

還好Axure提供了「創建部件庫」的功能，能夠支持我們製作一份屬於自己的元件庫。我們可以通過軟體自帶的基本元件搭配組合出我們常用的圖標、控制項，製作完成後，每次應用的時候還能根據實際情況調整顏色、大小、線寬的數值，從而才能實現交互稿統一完美的風格。

比如，APP中經常會用到一些主頁、分享、搜索、消息....各種圖標，或者我們每次遇到喜歡的圖標，都可以用Axure畫出來，以備不時之需。下邊以圖標為例講一下製作元件庫的具體步驟。

一、創建元件庫「綠色文件」

打開Axure，在元件庫面板「三條橫線」按鈕下拉選項中找到「創建部件庫」功能，點擊會彈出一個另存為對話框，這里需要選擇元件庫文件的存儲位置，並需要輸入元件庫的名稱。

此時，我們可以看到，文件的後綴名為 .rplib，這個就是元件庫的格式，而不同於創作交互原型時正常Axure文件的.rp格式。

輸入文件名稱和存儲位置之後，點擊保存，Axure將重新打開一個新頁面進行元件的編輯。並且我們可以看到，新頁面跟我們平時創造.rp正常文件的
頁面一模一樣，但不要混淆，此時頁面編輯的是我們在正常.rp文件中需要用的基本元件。並且我們回到元件庫存儲的位置可以看到，元件庫.rplib文件圖
標為」綠色「，不同於.rp文件的藍色。

創建好元件庫得」綠色文件「後，基本准備工作已經做完，下邊就進入到製作過程。

二、元件庫分組

通過觀察Axure默認的元件庫，我們可以看到其元件庫是可以按照類別進行分組的。比如默認的分成了：common、forms、flow等等，這樣能更方便我們找到目標元件的位置。

同樣，我們在製作元件庫的時候，也可以進行分組，規則為：在頁面導航面板上，所有的文件夾都是一個分組，所有沒有在文件夾下的頁麵包括其所有子頁面，都隸屬與以元件庫為名的分組下。

分組的規則弄明白之後，我們可以先按照自己對元件庫的規劃進行一個合理的分組，比如要做APP的元件庫，那麼我們可以分成：圖標、控制項、框架 3個常用分組，接下來就進入到具體元件的製作過程。

三、編輯並製作元件

我們以製作一個」我的「頭像圖標為例，首先在圖標分組下，添加一個頁面並命名為」我的「，雙擊進入到元件編輯頁面，編輯操作就跟我們平時製作正常
的.rp文件一模一樣。我們我們可以參考一些app中常常採用的」我的「圖標樣式，然後用Axure默認的基本形狀元件，比如矩形、橫線、圓形等，組合拼
湊成最終比較理想的樣子。

首先我們要明確，Axure中沒有類似PS中的布爾運算（能夠自由的對多個形狀進行編輯，比如合並、相交、減去頂層等），所以會給我們製作元件，尤
其是圖標帶來一定局限性，但好在交互原型並不要求苛刻的細節實現，只要我們能夠很清楚的表示出產品形態，有比較整體的風格就可以了。並且我們用Axure
基本形狀自己勾畫出來的圖標，能很方便的調整顏色大小等，可以適用不同的交互文件，這就是從網上找現成的點陣圖圖標很難達到的便利性。

回到「我的」圖標製作，如圖所示，我一共用到了三個基本形狀來進行拼湊，最終組合成了我們經常能看到的一個圖標樣式，並且一眼就能明白它的含義。雖然沒有更多的細節實現，但對於交互原型稿來說已經完全夠用，關鍵是顏色大小等可以很靈活的進行修改。

按照這個思路，我們可以製作更多的圖標出來，當然還可以製作一些常用控制項比如按鈕、appbar、搜索欄、圖標佔位符等等。如下圖，是我在畫「讀讀日報」原型圖時製作的一個元件庫：

元件庫製作完成之後，然後就進入到最後一個步驟。

四、載入自製元件庫並使用

元件庫製作完成保存在自己常用的資源文件夾中。打開一個正常的.rp文件，同樣是在元件庫面板「三條橫線」按鈕下拉選項中找到「載入部件庫」功能，然後找到製作完成的元件庫文件「綠色圖標」載入。

載入之後，我們就可以在「選擇元件庫」下拉選項中，找到剛剛載入的元件庫並選中，然後我們就可以像使用軟體自帶的元件一樣使用我們自製的元件庫了。

怎麼樣，看到這里你應該學會了如何自製一個元件庫了吧，希望你會花時間動手做一個。當然除了創建部件庫，Axure有很多技巧都需要掌握，比如母版的功能。

學會善用母版

在產品的設計過程中，主導航往往出現在多個頁面，比如APP的底部tab欄。當然不僅僅是導航，當我們頻繁使用任何一組控制項的時候，希望你不是一直都在復制和粘貼，永遠記住，創建一個母版可能是更好的選擇。

使用母版的便利性不單單體現在能夠快速的使用一組控制項，尤其是在設計後期，當我們需要修改某些基本控制項的時候，母版帶來的修改效率一定會讓你深深的愛上這個功能，欲罷不能。

除了學會使用母版，更要學會善用母版。同樣有一點希望能記住，不要把太大的組合對象變成母版。因為越是大的組合對象，越是有可能需要在母版的很多地
方做出修改。此時把一些母版和另外一個母版合並起來一般會是更好的辦法，這樣對母版的修改會更加的靈活，比如下圖，將產品基本信息和可能購買狀態分開成兩
個母版，組合在一起成為產品的完整頁面

制定一套自己的交互風格

學會了創建自己的元件庫，也懂得了善用母版，當然還有其他很多Axure軟體的使用技巧。應該就可以很快速的完成一份交互原型稿了吧，可是又該如何保證交付稿有統一的風格，達到較高的目標水準呢？

首先，我們要熟悉APP的設計規范，符合Android或者iOS的設計理念，對於一些常規的控制項設計規則有一定的了解。這樣設計出來的產品才能符
合這個平台的特性，並且基於大家對相關平台的一些固有認知，很容易能夠達成共識。這也是交互原型作為一個溝通交付物應該達成的目標。

基於對APP設計規范的熟悉，同時在製作過程中，要根據使用場景以及自己的習慣來制定一套自己的交互風格。比如可以定義好APP原型中，正文字體采
用 微軟雅黑 顏色#333333 13字型大小、提示文字為微軟雅黑 顏色#999999
10字型大小、固定的appbar行高為40px，內容據左側屏幕邊緣10px距離......

當然某些規范，比如字體也可以當成一個字體元件，放到我們自製的元件庫中，總之要根據自己的情況靈活的運用。有了一套風格之後，加上創建的元件庫隨意修改顏色大小等，我相信製作出來的交互原型肯定是協調統一的整體。

讀讀日報原型製作

理論方法掌握了，需要實踐的鍛煉才能更好的吸收領悟。我參照「讀讀日報」iOS版，對主要的一些頁面畫了一些交互原型。基本過程和思路就是按照本文所提到的這些內容。

為了更有形象感，從網上找來一個iPhone手機的邊框，並且創建自己的部件庫，繪制了一些常用的圖標和控制項。然後設定了整體的風格，製作過程中也用到了幾個母版提高效率，同時可以使用輔助線幫助自己保證部件的對齊、平均分布等，進而提高布局的美感。

總結

末尾再次拋出我開篇提到的，如何用Axure快速製作APP交互原型的方法論：製作屬於自己的元件庫並要學會善用母版，熟悉APP設計規范並要有自己一套交互風格樣式。

Ⅳ App 產品原型設計用什麼軟體

那axure和騰訊cdc的uiddesigner，還有在線的fluidUI也可以考慮。其他好像沒有了吧。但除了axure，後兩者所謂的交互其實都是不同的界面截圖之間的切換，說白了就是多節點式結構的ppt，不是真正的交互。axure的思想更接近實際開發，比如通過master實現界面元素的封裝復用，條件判斷，函數，變數。這些功能除了開發工具，原型工具還有誰能比得上axure嗎？ app原型相比網頁，界面結構簡單，但交互復雜得多。界面上的div也不是平鋪的，為了有效利用空間會用到很多層疊，卡片式之類的展示方式。要做這類高保真可交互原型，我覺得非auxre莫屬。比如一個tableview滑動到頂部刷新，底部回彈，不藉助開發只有axure能做出來。 我從07年開始用axure，曾經一度認為做網站原型，axure已經不需要再怎麼改進了。自從做app之後，覺得axure有點根不上時代，但試了其他工具，還是覺得auxre最合適。仔細做過幾個以後，我覺得axure還是完全適合做app原型的。做好以後分享也方便。放到內網，或者axshare上，或者有一個html runtime的app，可以在設備上直接瀏覽axure輸出的html。 當然axure作為一個工具，不可能每個環節都是最好的。比如我希望axure能借鑒一下其他工具和開發思想，把UI和素材分離出來，就像換皮膚一樣，一個控制項可以隨便更換圖片素材。這樣pm或者交互用最簡單的線框設計，確定交互以後，可以把設計師的圖貼上去，這樣就100%保真了。 axure對app設計不友好或者說最落伍的地方，就是支持的事件類型太少。交互上無法模擬出多點觸摸，無法模擬設備運動，無法模擬各類感測器……或許對一個原型工具來說，要求太高了。

Ⅳ App 產品原型設計用什麼軟體

分享一些我切身體驗後的一些原型設計軟體，你可以根據自己實際需求來選擇~

• 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組件，支持自定義。另外它有不錯的用戶測試功能，支持視頻錄制。並且在移動組件時，能夠實時在畫布看到組件之間的距離。另外由於伺服器的原因，有國內用戶反應速度有點慢；收費較高，性價比一般吧。

• Moqup：支持線框圖，原型，和邏輯流程圖。裡面組件數量蠻多，像表格這些也有，做web項目比較便利。支持在線預覽和分享，支持評論，不支持標注。上手較容易，不過沒什麼模板，UI有點過時感。

希望對你有幫助~有疑問的地方歡迎追問！

Ⅵ App 產品原型設計用什麼軟體

現在市場上有很多啊，不同工具特色也不一樣。

像我們公司，更看重的是原型製作過程簡單快速， 溝通方便，所以，選擇的就是最近比較熱門的摹客Mockplus.

App原型製作的時候，模板多，移動端的組件、組件庫以及圖標庫也豐富，簡單拖拽組件或修改模板，就可以快速製作有靈活交互的原型。 測試、演示、溝通以及反饋收集都可以實現。
整個團隊還可以在線同時協作、完成一個原型，同步測試和迭代。

Ⅶ App 產品原型設計用什麼軟體

很多產品原型設計軟體，下面分享一些以及個人對此的看法總結：

• 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組件，支持自定義。另外它有不錯的用戶測試功能，支持視頻錄制。並且在移動組件時，能夠實時在畫布看到組件之間的距離。另外由於伺服器的原因，有國內用戶反應速度有點慢；收費較高，性價比一般吧。

• UXPin：UXPin是DeSmart團隊開發的一個在線可點擊原型設計工具該軟體，擁有大量用戶界面元素（包括web，iOS，Android等），可以共享預覽，註解和實時的協同編輯。另外該軟體還提供了版本控制和迭代功能。缺點仍然在於國外伺服器和價格問題。

這些產品原型設計軟體都比較常見，你可以根據你個人需求來選擇，反正我使用的是墨刀，它真的省時省力提高了我的工作效率。希望對你有幫助！有疑問的地方歡迎追問~

Ⅷ 如何高效輸出移動app產品原型

一、輸出以界面為單位的產品流程圖
高效輸出，首先要保證產品的整體思路要正確，這點可以從產品流程圖中體現出來。移動產品需要做到聚焦，因為手機界面的大小，用戶的碎片化使用等等，所以一個界面上必然不可能出現太多的內容和行動點，這就保證了我們可以用最簡潔的方式來畫流程。以界面為單位，定義 「界面標題」和「主要內容」，如下圖所示：

如何利用起這樣的界面單位來畫流程，下面以一個app的登錄注冊為例：

這樣的一個產品流程圖，可以快速了解產品有多少界面，檢驗用戶路徑是否太長，形式簡單，也方便討論修改。
二、使用可修改的基礎原型控制項
如何快速產出高保真原型？一套備用的基礎原型組控制項必不可少。大部分設計師一般使用axure來完成產品原型，所以從協同合作的角度，本文專門在axure里製作了整套最常用的移動產品組控制項。設計師只要改文字，改顏色，擺位置就可以完成簡單的高保真原型。 基礎組控制項截圖如下：下載地址

以此控制項為基礎，在之前提到的app登錄注冊例子，快速組件高保真原型，如下圖:

關於設計上很多細節，大家可以參看書籍【方寸指間——移動設計實戰手冊】，裡面涉及到很多最基本的移動設計知識。
三、製作可點擊的動態原型
完成高保真原型，根據流程圖，可以很方便製作出在手機上可體驗的動態效果，讓產品人員或則用戶真實感受app實際的效果。這里推薦一個特別簡單的方法，登錄www.flinto.com，完成注冊，將高保真原型以圖片的方式倒入，通過鏈接和轉場方式選擇，就可以很方便在手機上查看。網站提供了比較具體的指導，大家可以直接查看。

看完這篇文章，小編還是要嘮叨一句：交互原型，重在把設計思想傳達出來，逼真的效果固然很重要，但千萬不要沉迷於一些看起來很酷炫的效果，往往一句注釋就可以說明清楚的問題，干嗎還要花幾小時甚至更多的時間去製作很逼真的效果。

Ⅸ 如何用axure畫app原型圖

多學習，多練手

畫好原型後

1.下載Axure

2.如果是給itouch或者iPhone用的，比較好辦，直接用320×480的解析度畫好輔助線，然後畫原型

3.按F5生成原型的時候，在「Mobile/Device」選項中可以設置適配移動設備的特殊原型

4.設置說明見下圖：（頁面大小顯示我的這個設置是按320×480的大小，默認不縮放）