文章目錄

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

一、Axure原型設(shè)計(jì) 快速開始

1. 為什么要做原型設(shè)計(jì)

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

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

進(jìn)行原型設(shè)計(jì)，可以

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

總結(jié)： 在IT項(xiàng)目中，原型本質(zhì)上是一個(gè)溝通工具。

1.1 原型的類型有哪些？

低保真原型：表現(xiàn)軟件的重點(diǎn)功能和基本交互過程。制作成本低，速度快，修改也方便。適合任務(wù)簡(jiǎn)單，整個(gè)團(tuán)隊(duì)溝通順暢，個(gè)人能力較強(qiáng)的情況。

中度保真原型：中度保真的產(chǎn)品添加了更多細(xì)節(jié)，對(duì)軟件的交互進(jìn)行了更細(xì)致的設(shè)計(jì)，更接近最終的產(chǎn)品。在大部分情況下，中度保真原型已經(jīng)足夠，既表現(xiàn)了軟件的功能特性和交互過程，界面有一定的細(xì)節(jié)，而且使用者已經(jīng)能完整體驗(yàn)到最終的產(chǎn)品，可以驗(yàn)證產(chǎn)品的可行性，確保了不會(huì)在后面的開發(fā)過程中發(fā)現(xiàn)重大失誤。缺點(diǎn)是花費(fèi)時(shí)間會(huì)多一些。

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

低保真：以紙筆原型和Balsamip Mockups為代表，紙筆原型是最早的原型，設(shè)計(jì)師只要手上有紙筆或白板，就能簡(jiǎn)要的畫出設(shè)計(jì)師的想法和思路。但是紙筆原型保真非常低，它主要適用于項(xiàng)目的初期階段，適合團(tuán)隊(duì)內(nèi)部的談?wù)?#xff0c;不適合演示，用戶無法真實(shí)感受產(chǎn)品，不適合測(cè)試，且修改不方便。Balsamip Mockups是一款具有手繪風(fēng)格的原型圖繪制工具，專注于草圖以及素描風(fēng)格。

中度保真：以Axure和Mockplus為代表。Axure作為原型工具的領(lǐng)頭羊，功能全面，無論是流程圖還是動(dòng)態(tài)面板都是眾多產(chǎn)品經(jīng)理和設(shè)計(jì)師青睞的。 但學(xué)習(xí)成本高，使用較為復(fù)雜。Mockplus作為后起之秀，以簡(jiǎn)單易用為宗旨，無論是預(yù)覽方式還是交互設(shè)計(jì)方面都占有極大的優(yōu)勢(shì)，極力推薦給新入門的設(shè)計(jì)師們。

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

總結(jié)： Axure作為原型工具的領(lǐng)頭羊，功能全面，無論是流程圖還是動(dòng)態(tài)面板都是眾多產(chǎn)品經(jīng)理和設(shè)計(jì)師青睞的。一般項(xiàng)目開發(fā)中， 中度保真原型Axure 已經(jīng)非常夠用！

2. 什么是 Axure RP？

官方網(wǎng)址： https://www.axure.com/

Axure RP 是一個(gè)專業(yè)的快速原型設(shè)計(jì)工具。Axure（發(fā)音：Ack-sure），代表美國(guó) Axure 公司；RP 則是 Rapid Prototyping（快速原型）的縮寫。

Axure RP 是美國(guó) Axure Software Solution 公司旗艦產(chǎn)品，是一個(gè)專業(yè)的快速原型設(shè)計(jì)工具，讓負(fù)責(zé)定義需求和規(guī)格、設(shè)計(jì)功能和界面的專家能夠快速創(chuàng)建應(yīng)用軟件或 Web 網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。作為專業(yè)的原型設(shè)計(jì)工具，它能快速、高效的創(chuàng)建原型，同時(shí)支持多人協(xié)作設(shè)計(jì)和版本控制管理。

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

因此，Axure現(xiàn)在也是原型設(shè)計(jì)行業(yè)的基準(zhǔn)軟件，入門必備，也是行業(yè)標(biāo)準(zhǔn)之一，與Sketch并列，兩者都是原型設(shè)計(jì)領(lǐng)域的必備工具。

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

總結(jié)： Axure 是指 Axure RP，是一款快速原型制作軟件，能幫助網(wǎng)站需求設(shè)計(jì)者，快捷而簡(jiǎn)便的創(chuàng)建基于網(wǎng)站構(gòu)架圖的帶注釋頁(yè)面示意圖、操作流程圖、以及交互設(shè)計(jì)，并可自動(dòng)生成用于演示的網(wǎng)頁(yè)文件和規(guī)格文件，以提供演示與開發(fā)。

Axure是當(dāng)前主流的原型設(shè)計(jì)工具。全球>1000家的公司都在使用Axure RP，淘寶、騰訊、當(dāng)當(dāng)?shù)榷荚谑褂谩?/p>

AxureRP基礎(chǔ) 名詞

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

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

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

界面及基本操作

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

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

3.元件庫(kù)：調(diào)用所需元件的界面。

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

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

二、素材庫(kù)

AxureRP 元件庫(kù)

默認(rèn)元件庫(kù)（Default）

這個(gè)元件庫(kù)是最常用的元件庫(kù)，包含了 4 個(gè)分類。
分別是：基本元件、表單元件、菜單表格元件和標(biāo)記元件

流程元件庫(kù)（Flow）-使用 AxureRP畫流程圖

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

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

第三方素材庫(kù)

收集第三方素材庫(kù)
第三方元件庫(kù)有：

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

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

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

三、快速設(shè)計(jì)

快速排版

打開網(wǎng)格對(duì)齊，并設(shè)置為 5px。打開之后，畫布上就會(huì)出現(xiàn)均勻分布小點(diǎn)，排版時(shí)能自動(dòng)吸附，每個(gè)元件的起點(diǎn)坐標(biāo)都在 5 的倍數(shù)上，方便對(duì)齊。

試圖–> 標(biāo)尺網(wǎng)格輔助線 --> 網(wǎng)格對(duì)齊

頁(yè)面頁(yè)添加文件夾和子頁(yè)面

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

四、常用實(shí)戰(zhàn)總結(jié)

0. 原型設(shè)計(jì)總結(jié)

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

1. 實(shí)現(xiàn)按鈕點(diǎn)擊彈框效果

思路： axure 使用動(dòng)態(tài)面板實(shí)現(xiàn)彈窗效果。

2. AxureRP9 使用中繼器實(shí)現(xiàn)表格數(shù)據(jù)展示

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

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

中繼器作為復(fù)雜的元件，存在的理由只有一個(gè)：制作“高保真”的動(dòng)態(tài)原型
“高保真”原型的2個(gè)核心：
1、視覺保真度
2、交互保真度

中繼器實(shí)現(xiàn)表格，讓我們?cè)谠O(shè)計(jì)階段就可以達(dá)到和前端開發(fā)出（未進(jìn)行聯(lián)調(diào)，沒有接口數(shù)據(jù)，也是使用假數(shù)據(jù)展現(xiàn)）的效果幾乎媲美?？梢詫?duì)表格實(shí)現(xiàn)最重要的功能之增刪改查。讓原型的效果發(fā)揮到了極致。

中繼器再實(shí)際使用中可以看作是一個(gè)靈活的表格，相比于簡(jiǎn)單的拖拽表格，中繼器的優(yōu)勢(shì)在于后期調(diào)整，增加或減少某一列/某一行，可直接在數(shù)據(jù)中調(diào)整。

• 簡(jiǎn)單的拖拽表格
  在元件庫(kù)中拖拽一個(gè)表格（直接搜索更快）到面板中
  
• 使用中繼器實(shí)現(xiàn)表格
  1、 從元件庫(kù)中拖拽一個(gè)中繼器。
  
  2、單擊 中繼器 我們可以使用右側(cè)的，樣式，修改中繼器

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

2）標(biāo)明字段（列）名稱、制作具體表格內(nèi)容
標(biāo)明字段（列）名稱

制作具體表格內(nèi)容（內(nèi)容對(duì)應(yīng)需交互來實(shí)現(xiàn)）
每一項(xiàng)都做重復(fù)的設(shè)置操作，讓其取數(shù)據(jù)：

總結(jié)：如果不是高保真需要，不推薦使用中繼器制作表格。
如果表格只是很基礎(chǔ)的展示或者功能開發(fā)也很熟悉知道要達(dá)到什么樣的統(tǒng)一標(biāo)準(zhǔn)，那就沒必要用中繼器做。中繼器的學(xué)習(xí)成本相對(duì)較高，對(duì)要求實(shí)現(xiàn)高保真原型demo場(chǎng)景，如去給客戶進(jìn)行產(chǎn)品的展示，那中繼器實(shí)現(xiàn)的表格堪陳完美。

Axure RP9教程 利用中繼器更新行實(shí)現(xiàn)列表編輯功能

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。