在過去的兩個(gè)月中，我從 Axure 9 轉(zhuǎn)向了 Axure 10，并且在這段時(shí)間里，我利用 Axure 10 制作了許多高保真原型。

在這個(gè)過程中，我積累了經(jīng)驗(yàn)，并總結(jié)出了一些使用 Axure 的高級(jí)技巧。本指南旨在向您展示如何充分利用全局變量、動(dòng)態(tài)面板和中繼器等功能，從而提升您的工作效率，打造出令人驚嘆的原型設(shè)計(jì)。

希望這些技巧能夠?yàn)槟墓ぷ鲙硇碌膯l(fā)和提升！

在快節(jié)奏的原型設(shè)計(jì)領(lǐng)域，對(duì)于 Axure 這樣的工具，很多人往往都是直接上手，通過摸索來學(xué)習(xí)。

然而，這種方式往往會(huì)導(dǎo)致忽視一些關(guān)鍵的快捷操作和高級(jí)功能。

一、常規(guī)操作

1、設(shè)置自動(dòng)備份時(shí)間

Axure 的自動(dòng)備份功能是一個(gè)很有用的特性，它可以幫助你在工作過程中避免意外丟失數(shù)據(jù)。這個(gè)功能會(huì)定期保存你的 Axure 文件的備份，以防止突然的軟件崩潰或計(jì)算機(jī)問題導(dǎo)致文件丟失。

默認(rèn)備份間隔是15分鐘，可以根據(jù)需求自定義間隔的分鐘數(shù)，一般定義5分鐘會(huì)比較合適。

從備份恢復(fù)文件：

默認(rèn)顯示最近5天的備份文件，最多可以保存最近30天的備份文件：

二、進(jìn)階指南

1、通用母版

以這樣的一個(gè)后臺(tái)頁(yè)面為例，我們會(huì)將幾個(gè)頁(yè)面公共使用的地方會(huì)有這一部分：

那么就可以選中這一部分，右鍵轉(zhuǎn)為母版：

在后續(xù)的其他頁(yè)面需要用上到這一母版時(shí)，既在【母版】里拖動(dòng)在頁(yè)面上：

2、自定義全局變量的使用

前面我們?cè)O(shè)置了「母版」后，而我們每個(gè)頁(yè)面所需要選中的導(dǎo)航和頁(yè)面標(biāo)簽標(biāo)題是不一樣的，這種如果我們要實(shí)現(xiàn)動(dòng)態(tài)變更的話，就可以使用「全局變量」。

首先，我們?cè)诓藛沃姓业健绊?xiàng)目 – 全局變量”。

然后就會(huì)彈出新增變量名：

在這里要滿足前面我們動(dòng)態(tài)選中菜單，以及標(biāo)簽名稱的效果，我新增了兩個(gè)變量如下：

1. TopTagTitle：這個(gè)是用來控制標(biāo)簽名稱的。
2. LeftNavState：這個(gè)是用來控制左邊菜單選中效果的。

接下來，我們就回到“母版”中去定義交互效果：

在設(shè)置完母版的交互后，我們就可以回到頁(yè)面，去設(shè)置當(dāng)前頁(yè)面的全局變量值了，這里我設(shè)置的變量值為：

• TopTagTitle：我是頁(yè)面主內(nèi)容
• LeftNavState：二級(jí)菜單名稱A

這樣在頁(yè)面預(yù)覽時(shí)，就可以看到我們最終的效果，選中了菜單“二級(jí)菜單名稱A”，同時(shí)標(biāo)題文本為“我是頁(yè)面主內(nèi)容”。

3、動(dòng)態(tài)面板的使用

如上圖，我要實(shí)現(xiàn)這種切換效果，微信和支付寶有各自的填寫內(nèi)容，而每一個(gè)下面又有“參數(shù)配置”和“費(fèi)率配置”的切換，那么就可以使用動(dòng)態(tài)面板。

首先我們先把微信和支付寶這兩個(gè)布局出來：

然后在元件庫(kù)里，找到“動(dòng)態(tài)面板”，拖動(dòng)到頁(yè)面：

點(diǎn)入動(dòng)態(tài)面板里，分別創(chuàng)建兩個(gè)狀態(tài)，分別是：微信支付、支付寶。

然后退出編輯動(dòng)態(tài)面板，回到前面的微信支付、支付寶，給這兩個(gè)選項(xiàng)增加交互：

最終預(yù)覽的效果：

我們還可以動(dòng)態(tài)面板里面再套用動(dòng)態(tài)面板，以實(shí)現(xiàn)前面的效果：

4、中繼器的應(yīng)用場(chǎng)景與技巧

中繼器是axure 10最大的升級(jí)，交互方式都比axure9方便很多。

下面我們舉個(gè)后臺(tái)列表的例子：

首先我們定義列表的表頭字段后，然后在“元件庫(kù)”找到“中繼器-表格”拖動(dòng)到頁(yè)面，填入數(shù)據(jù)后，這樣就可以快速生成一個(gè)列表。

5、使用JavaScript語(yǔ)法

Axure支持原生javascript語(yǔ)法調(diào)用。

Axure中默認(rèn)的javascript位置存放在Axure安裝目錄axureRP\DefaultSettings\Prototype_Files\resources\scripts文件夾下，如下為我本地的Axure安裝目錄下結(jié)構(gòu)：

用時(shí)使用如下代碼引用：

javascript: {
	if (!window.loadJQuery) {
		window.loadJQuery = true;
		$axure.utils.loadJS('./resources/scripts/Qone.js');
	};
}

javascript: {
	if (!window.loadJQuery) {
		window.loadJQuery = true;
		$axure.utils.loadJS('https://code.jquery.com/jquery-3.5.1.min.js');
	};
}

現(xiàn)在可以在axure頁(yè)面載入，使用動(dòng)作「打開鏈接」，然后點(diǎn)擊「fx」輸入上面的引用本地JS文件的代碼：

WARNING

1. 不能使用單行注釋”//”，Axure 會(huì)中刪除所有換行符，單行注釋使腳本的其余部分成為注釋。若要注釋，應(yīng)該用”/* */”；
2. 每句javascript結(jié)束必須帶”; “，Axure 會(huì)中刪除所有換行符，會(huì)報(bào)語(yǔ)法錯(cuò)誤；
3. void(0)是為了防止 Internet Explorer 將用該值替換頁(yè)面內(nèi)容。其他瀏覽器不用加此語(yǔ)句；
4. 用 Javascript 注入 需要高級(jí) Axure、Javascript、HTML和CSS技能。當(dāng)您將自己的 javascript、HTML或CSS 添加到 Axure 原型時(shí)，您會(huì)面臨 Axure 通常會(huì)處理的跨瀏覽器不兼容問題。

比如我們現(xiàn)在的Qone.js就可以編寫我們的內(nèi)容，比如現(xiàn)在要實(shí)現(xiàn)axure引用AntV G2的圖標(biāo)。

javascript:
/* 
引用最新版AntV G2庫(kù) 
使用教程：https://g2.antv.antgroup.com/manual/introduction/getting-started
*/
var script = document.createElement('script');
script.type = "text/javascript";
script.src ="https://unpkg.com/@antv/g2/dist/g2.min.js";
document.head.appendChild(script);
/* 
引用最新版DataSet庫(kù) 
使用教程：https://github.com/antvis/data-set/blob/master/docs/overview.md
*/
var script2 = document.createElement('script');
script2.type = "text/javascript";
script2.src ="https://unpkg.com/@antv/data-set";
document.head.appendChild(script2);
/* 
Axure 里面的JS由于是異步加載的，所以需要延是執(zhí)行
*/
setTimeout(function(){
	var dom =$("div[data-label='container']").get(0);
	$("div[data-label='container']").text("");
  const chart = new G2.Chart({
	  container: dom,
	  autoFit: true,
	});

	chart.data({
	  type: 'fetch',
	  value: 'https://assets.antv.antgroup.com/g2/doughnut-purchases.json',
	});

	chart
	  .line()
	  .encode('x', 'year')
	  .encode('y', 'count')
	  .encode('color', 'year')
	  .encode('shape', 'smooth')
	  .scale('y', { zero: true, nice: true })
	  .style('gradient', 'x')
	  .style('gradientColor', 'start')
	  .animate('enter', { type: 'pathIn', duration: 3000 })
	  .axis('y', { labelFormatter: '~s' });

	chart
	  .point()
	  .transform({ type: 'stackEnter' })
	  .encode('x', 'year')
	  .encode('y', 'count')
	  .encode('color', 'year')
	  .encode('shape', 'point')
	  .animate('enter', { duration: 300 });

	chart
	  .text()
	  .transform({ type: 'stackEnter' })
	  .encode('x', 'year')
	  .encode('y', 'count')
	  .encode('text', 'year')
	  .animate('enter', { duration: 300 })
	  .style('strokeWidth', 5)
	  .style('stroke', '#fff')
	  .style('textAlign', 'center')
	  .style('dy', -8);

	chart.render();
}, 300);

最終預(yù)覽的效果：

三、總結(jié)

在原型設(shè)計(jì)中，我們的首要目標(biāo)是傳達(dá)和展示我們的想法和概念。

當(dāng)我們的原型能夠清晰地表達(dá)我們的意圖并滿足項(xiàng)目需求時(shí)，就無需過度關(guān)注原型的細(xì)節(jié)和精度。重要的是要確保原型的功能性和用戶體驗(yàn)，讓用戶能夠輕松理解我們的設(shè)計(jì)，以及提供它們所需的價(jià)值。

因此，我們?cè)谠O(shè)計(jì)原型時(shí)，應(yīng)注重思想的表達(dá)和功能的完善，而不是被細(xì)節(jié)困擾。

只有這樣，我們才能真正實(shí)現(xiàn)原型設(shè)計(jì)的目的，為我們的項(xiàng)目賦予更大的價(jià)值和影響力。