中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在過去的兩個月中，我從 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方便很多。

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

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

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

最終預覽的效果：

三、總結

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

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

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

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