文章目錄

• 一、Axure原型設計 快速開始
• • 1. 為什么要做原型設計
  • • 1.1 原型的類型有哪些？
  • 2. 什么是 Axure RP？
  • AxureRP基礎 名詞
  • 界面及基本操作
• 二、素材庫
• • AxureRP 元件庫
  • • 默認元件庫（Default）
    • 流程元件庫（Flow）-使用 AxureRP畫流程圖
  • 第三方素材庫
• 三、快速設計
• • 快速排版
  • 頁面頁添加文件夾和子頁面
• 四、常用實戰總結
• • 0. 原型設計總結
  • 1. 實現按鈕點擊彈框效果
  • 2. AxureRP9 使用中繼器實現表格數據展示
  • • Axure RP9教程 利用中繼器更新行實現列表編輯功能

一、Axure原型設計 快速開始

1. 為什么要做原型設計

大約66%的軟件開發失敗或虧損的前三大原因：

• 缺乏使用者的參與
• 需求或規格不完整
• 需求或規格變更

進行原型設計，可以

• 講文字性文檔轉換成互動性的可視畫面，讓客戶在投入編程之前進行需求確認。
  就是給客戶看產品原型，驗證是否是客戶想要的產品，確認需求。
• 早期辨認需求遺漏，講外在需求風險降到最低
• 溝通方便，言之有物，不是空想的交流
• 有利于設計者推廣自己的想法，獲得認可
  個產品從雛形到最終發布，需要參與整個周期的人員（設計師，產品經理，開發人員，投資方等）進行大量的交流。快速的原型演示，使設計者在展示項目內容時能發揮最好狀態，有利于他們推廣自己的想法，獲得認可。

總結： 在IT項目中，原型本質上是一個溝通工具。

1.1 原型的類型有哪些？

低保真原型：表現軟件的重點功能和基本交互過程。制作成本低，速度快，修改也方便。適合任務簡單，整個團隊溝通順暢，個人能力較強的情況。

中度保真原型：中度保真的產品添加了更多細節，對軟件的交互進行了更細致的設計，更接近最終的產品。在大部分情況下，中度保真原型已經足夠，既表現了軟件的功能特性和交互過程，界面有一定的細節，而且使用者已經能完整體驗到最終的產品，可以驗證產品的可行性，確保了不會在后面的開發過程中發現重大失誤。缺點是花費時間會多一些。

高保真原型：幾乎完全按照最終產品來制作的原型，細節豐富，包括了產品的所有功能以及詳細的交互細節。制作高保真原型可以顯著降低溝通成本，原型更精準和精美。但是，保真度越高就意味著需要花更多的時間和開發精力，而且一旦有修改也會更加耗費時間。

低保真：以紙筆原型和Balsamip Mockups為代表，紙筆原型是最早的原型，設計師只要手上有紙筆或白板，就能簡要的畫出設計師的想法和思路。但是紙筆原型保真非常低，它主要適用于項目的初期階段，適合團隊內部的談論，不適合演示，用戶無法真實感受產品，不適合測試，且修改不方便。Balsamip Mockups是一款具有手繪風格的原型圖繪制工具，專注于草圖以及素描風格。

中度保真：以Axure和Mockplus為代表。Axure作為原型工具的領頭羊，功能全面，無論是流程圖還是動態面板都是眾多產品經理和設計師青睞的。 但學習成本高，使用較為復雜。Mockplus作為后起之秀，以簡單易用為宗旨，無論是預覽方式還是交互設計方面都占有極大的優勢，極力推薦給新入門的設計師們。

高保真：以Justinmind和Adobe XD為代表。Jusinmind是專門針對移動端APP設計的原型工具，學習曲線較高，交互設計全面。Adobe XD是一款輕便的矢量+原型繪制軟件。 集線框圖設計、視覺設計、 交互設計、原型設計等功能于一體。很多人說Adobe XD的誕生，終結了Sketch和Photoshop，此話還說的太早了。XD真正存在的理由并非是打敗S+F的組合，而是在Adobe體系下缺乏一個快速原型的工具，AI在這方面已經落后了。

總結： Axure作為原型工具的領頭羊，功能全面，無論是流程圖還是動態面板都是眾多產品經理和設計師青睞的。一般項目開發中， 中度保真原型Axure 已經非常夠用！

2. 什么是 Axure RP？

官方網址： https://www.axure.com/

Axure RP 是一個專業的快速原型設計工具。Axure（發音：Ack-sure），代表美國 Axure 公司；RP 則是 Rapid Prototyping（快速原型）的縮寫。

Axure RP 是美國 Axure Software Solution 公司旗艦產品，是一個專業的快速原型設計工具，讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟件或 Web 網站的線框圖、流程圖、原型和規格說明文檔。作為專業的原型設計工具，它能快速、高效的創建原型，同時支持多人協作設計和版本控制管理。

Axure正式提供的素材很少，但該軟件提供靈活的組件定制功能，市場上有許多成熟易用的熱心網民開發的第三方組件，其組件數量及其龐大，幾乎沒有無法設計的產品。

因此，Axure現在也是原型設計行業的基準軟件，入門必備，也是行業標準之一，與Sketch并列，兩者都是原型設計領域的必備工具。

2019 年 Axure 的最新版本是 Axure RP 9。

總結： Axure 是指 Axure RP，是一款快速原型制作軟件，能幫助網站需求設計者，快捷而簡便的創建基于網站構架圖的帶注釋頁面示意圖、操作流程圖、以及交互設計，并可自動生成用于演示的網頁文件和規格文件，以提供演示與開發。

Axure是當前主流的原型設計工具。全球>1000家的公司都在使用Axure RP，淘寶、騰訊、當當等都在使用。

AxureRP基礎 名詞

線框圖：一般就是指產品原型，比如：把線框圖盡快畫出來和把原型盡快做出來是一個意思。

axure元件：也叫axure組件或axure部件，系統自帶了一部分最基礎常用的，網上也有很多別人做好的，軟件使用到一定階段可以考慮自己制作元件，以便提高產品原型的制作速度。

生成原型：是指把繪制好的原型通過axure rp生成靜態的html頁面，檢查原型是否正確，同時，方便演示。建議生成時選擇用谷歌瀏覽器打開（第一次會有提示安裝相關插件），ie會每次都有安全提示，不如谷歌瀏覽器方便。

界面及基本操作

1.工具欄：主要操作功能。

2.站點地圖：類似大綱界面，方便理清原型框架及邏輯關系。

3.元件庫：調用所需元件的界面。

4.畫布：展示原型部分，可以理解為畫畫的畫布。

5.元件屬性頁面：用于做一些交互效果和編輯元件樣式的界面。

二、素材庫

AxureRP 元件庫

默認元件庫（Default）

這個元件庫是最常用的元件庫，包含了 4 個分類。
分別是：基本元件、表單元件、菜單表格元件和標記元件

流程元件庫（Flow）-使用 AxureRP畫流程圖

流程元件庫（Flow）
流程元件庫中包含了一些繪制流程圖的元件。

我們只需要將這些元件拖入到畫布，并添加連接線，即可進行流程圖的繪制。

第三方素材庫

收集第三方素材庫
第三方元件庫有：

阿里的 Ant Design 元件庫，包含 Web 端和 Mobile 端。

第三方圖標庫有：
阿里圖標庫，下載單個 SVG 后，粘貼至 Axure 中使用，還可以直接在軟件中編輯。
flaticon 圖標庫，下載單個 SVG 后，粘貼至 Axure 中使用，還可以直接在軟件中編輯。

第三方素材庫確實方便，做一個帶交互的登錄頁面只要 2 分鐘不到。不過值得注意的是，素材庫不一定是越豐富越好，因為它的目的是提高效率，但是找素材這個過程本身是需要花時間的，靈活使用一兩個庫就足夠了。

三、快速設計

快速排版

打開網格對齊，并設置為 5px。打開之后，畫布上就會出現均勻分布小點，排版時能自動吸附，每個元件的起點坐標都在 5 的倍數上，方便對齊。

試圖–> 標尺網格輔助線 --> 網格對齊

頁面頁添加文件夾和子頁面

添加文件夾，方便我們歸類整理，一個大模塊我可以創建一個文件夾，里面包含許多具體的子頁面。

四、常用實戰總結

0. 原型設計總結

在理清業務邏輯與操作邏輯時，紙筆比數碼工具更好用。
使用 Axure 原型繪制初步方案時，不需要太精致，把需要表達的方案展示清楚即可，輔助以文字說明。初步方案往往是要大改的。
重視業務邏輯，不盲目追求交互特性，防止本末倒置。

1. 實現按鈕點擊彈框效果

思路： axure 使用動態面板實現彈窗效果。

2. AxureRP9 使用中繼器實現表格數據展示

5分鐘玩轉Axure之中繼器（表格篇）
參考URL: https://blog.csdn.net/m0_48074617/article/details/106455401

中繼器（英文名Repeater）是Axure RP 7.0推出的新功能，是目前為止Axure最復雜的功能（沒有之一），學習它的使用有助于我d們快速設計一些復雜的交互界面。Repeater翻譯過來的另外一層含義是重復的意思。

中繼器作為復雜的元件，存在的理由只有一個：制作“高保真”的動態原型
“高保真”原型的2個核心：
1、視覺保真度
2、交互保真度

中繼器實現表格，讓我們在設計階段就可以達到和前端開發出（未進行聯調，沒有接口數據，也是使用假數據展現）的效果幾乎媲美。可以對表格實現最重要的功能之增刪改查。讓原型的效果發揮到了極致。

中繼器再實際使用中可以看作是一個靈活的表格，相比于簡單的拖拽表格，中繼器的優勢在于后期調整，增加或減少某一列/某一行，可直接在數據中調整。

• 簡單的拖拽表格
  在元件庫中拖拽一個表格（直接搜索更快）到面板中
  
• 使用中繼器實現表格
  1、 從元件庫中拖拽一個中繼器。
  
  2、單擊 中繼器 我們可以使用右側的，樣式，修改中繼器

1）將布局由垂直改為橫向

2）標明字段（列）名稱、制作具體表格內容
標明字段（列）名稱

制作具體表格內容（內容對應需交互來實現）
每一項都做重復的設置操作，讓其取數據：

總結：如果不是高保真需要，不推薦使用中繼器制作表格。
如果表格只是很基礎的展示或者功能開發也很熟悉知道要達到什么樣的統一標準，那就沒必要用中繼器做。中繼器的學習成本相對較高，對要求實現高保真原型demo場景，如去給客戶進行產品的展示，那中繼器實現的表格堪陳完美。

Axure RP9教程 利用中繼器更新行實現列表編輯功能

參考URL: https://blog.csdn.net/jun118166/article/details/107133966/

總結

以上是生活随笔為你收集整理的AxureRP原型设计 快速开始的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。