Axure RP 10 進階指南:從全局變量到JavaScript語法,打造高效原型設計!

0 評論 4136 瀏覽 25 收藏 14 分鐘

在過去的兩個月中,我從 Axure 9 轉向了 Axure 10,并且在這段時間里,我利用 Axure 10 制作了許多高保真原型。

在這個過程中,我積累了經驗,并總結出了一些使用 Axure 的高級技巧。本指南旨在向您展示如何充分利用全局變量、動態面板和中繼器等功能,從而提升您的工作效率,打造出令人驚嘆的原型設計。

希望這些技巧能夠為您的工作帶來新的啟發和提升!

在快節奏的原型設計領域,對于 Axure 這樣的工具,很多人往往都是直接上手,通過摸索來學習。

然而,這種方式往往會導致忽視一些關鍵的快捷操作和高級功能。

一、常規操作

1、設置自動備份時間

Axure 的自動備份功能是一個很有用的特性,它可以幫助你在工作過程中避免意外丟失數據。這個功能會定期保存你的 Axure 文件的備份,以防止突然的軟件崩潰或計算機問題導致文件丟失。

默認備份間隔是15分鐘,可以根據需求自定義間隔的分鐘數,一般定義5分鐘會比較合適。

從備份恢復文件:

默認顯示最近5天的備份文件,最多可以保存最近30天的備份文件:

二、進階指南

1、通用母版

以這樣的一個后臺頁面為例,我們會將幾個頁面公共使用的地方會有這一部分:

那么就可以選中這一部分,右鍵轉為母版:

在后續的其他頁面需要用上到這一母版時,既在【母版】里拖動在頁面上:

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

前面我們設置了「母版」后,而我們每個頁面所需要選中的導航和頁面標簽標題是不一樣的,這種如果我們要實現動態變更的話,就可以使用「全局變量」。

首先,我們在菜單中找到“項目 – 全局變量”。

然后就會彈出新增變量名:

在這里要滿足前面我們動態選中菜單,以及標簽名稱的效果,我新增了兩個變量如下:

  1. TopTagTitle:這個是用來控制標簽名稱的。
  2. LeftNavState:這個是用來控制左邊菜單選中效果的。

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

在設置完母版的交互后,我們就可以回到頁面,去設置當前頁面的全局變量值了,這里我設置的變量值為:

  • TopTagTitle:我是頁面主內容
  • LeftNavState:二級菜單名稱A

這樣在頁面預覽時,就可以看到我們最終的效果,選中了菜單“二級菜單名稱A”,同時標題文本為“我是頁面主內容”。

3、動態面板的使用

如上圖,我要實現這種切換效果,微信和支付寶有各自的填寫內容,而每一個下面又有“參數配置”和“費率配置”的切換,那么就可以使用動態面板。

首先我們先把微信和支付寶這兩個布局出來:

然后在元件庫里,找到“動態面板”,拖動到頁面:

點入動態面板里,分別創建兩個狀態,分別是:微信支付、支付寶。

然后退出編輯動態面板,回到前面的微信支付、支付寶,給這兩個選項增加交互:

最終預覽的效果:

我們還可以動態面板里面再套用動態面板,以實現前面的效果:

4、中繼器的應用場景與技巧

中繼器是axure 10最大的升級,交互方式都比axure9方便很多。

下面我們舉個后臺列表的例子:

首先我們定義列表的表頭字段后,然后在“元件庫”找到“中繼器-表格”拖動到頁面,填入數據后,這樣就可以快速生成一個列表。

axure-中繼器.gif

5、使用JavaScript語法

Axure支持原生javascript語法調用。

Axure中默認的javascript位置存放在Axure安裝目錄axureRP\DefaultSettings\Prototype_Files\resources\scripts文件夾下,如下為我本地的Axure安裝目錄下結構:

用時使用如下代碼引用:

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');
	};
}

現在可以在axure頁面載入,使用動作「打開鏈接」,然后點擊「fx」輸入上面的引用本地JS文件的代碼:

WARNING

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

比如我們現在的Qone.js就可以編寫我們的內容,比如現在要實現axure引用AntV G2的圖標。

javascript:
/* 
引用最新版AntV G2庫 
使用教程: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庫 
使用教程: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由于是異步加載的,所以需要延是執行
*/
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);

最終預覽的效果:

三、總結

在原型設計中,我們的首要目標是傳達和展示我們的想法和概念。

當我們的原型能夠清晰地表達我們的意圖并滿足項目需求時,就無需過度關注原型的細節和精度。重要的是要確保原型的功能性和用戶體驗,讓用戶能夠輕松理解我們的設計,以及提供它們所需的價值。

因此,我們在設計原型時,應注重思想的表達和功能的完善,而不是被細節困擾。

只有這樣,我們才能真正實現原型設計的目的,為我們的項目賦予更大的價值和影響力。

作者:強少來了

本文由 @強少來了 原創發布于人人都是產品經理。未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!