Axure RP 10 進階指南:從全局變量到JavaScript語法,打造高效原型...
▌常規(guī)操作在快節(jié)奏的原型設計領(lǐng)域，對于 Axure 這樣的工具，很多人往往都是直接上手，通過摸索來學習。然而，這種方式往往會導致忽視一些關(guān)鍵的快捷操作和高級功能。
在過去的兩個月中，我從 Axure 9 轉(zhuǎn)向了 Axure 10，并且在這段時間里，我利用 Axure 10 制作了許多高保真原型。在這個過程中，我積累了經(jīng)驗，并總結(jié)出了一些使用 Axure 的高級技巧。本指南旨在向您展示如何充分利用全局變量、動態(tài)面板和中繼器等功能，從而提升您的工作效率，打造出令人驚嘆的原型設計。希望這些技巧能夠為您的工作帶來新的啟發(fā)和提升！
1、設置自動備份時間
Axure 的自動備份功能是一個很有用的特性，它可以幫助你在工作過程中避免意外丟失數(shù)據(jù)。這個功能會定期保存你的 Axure 文件的備份，以防止突然的軟件崩潰或計算機問題導致文件丟失。 
默認備份間隔是15分鐘，可以根據(jù)需求自定義間隔的分鐘數(shù)，一般定義5分鐘會比較合適
從備份恢復文件
默認顯示最近5天的備份文件，最多可以保存最近30天的備份文件
1、通用母版
以這樣的一個后臺頁面為例，我們會將幾個頁面公共使用的地方會有這一部分：
在后續(xù)的其他頁面需要用上到這一母版時，既在【母版】里拖動在頁面上
2、自定義全局變量的使用
前面我們設置了「母版」后，而我們每個頁面所需要選中的導航和頁面標簽標題是不一樣的，這種如果我們要實現(xiàn)動態(tài)變更的話，就可以使用「全局變量」
首先，我們在菜單中找到“項目 - 全局變量” 
然后就會彈出新增變量名
在這里要滿足前面我們動態(tài)選中菜單，以及標簽名稱的效果，我新增了兩個變量如下：
TopTagTitle ：這個是用來控制標簽名稱的
LeftNavState ：這個是用來控制左邊菜單選中效果的
接下來，我們就回到“母版”中去定義交互效果
在設置完母版的交互后，我們就可以回到頁面，去設置當前頁面的全局變量值了，這里我設置的變量值為：
TopTagTitle ：我是頁面主內(nèi)容
LeftNavState ：二級菜單名稱A
這樣在頁面預覽時，就可以看到我們最終的效果，選中了菜單“二級菜單名稱A”，同時標題文本為“我是頁面主內(nèi)容”
3、動態(tài)面板的使用
如上圖，我要實現(xiàn)這種切換效果，微信和支付寶有各自的填寫內(nèi)容，而每一個下面又有“參數(shù)配置”和“費率配置”的切換
那么就可以使用動態(tài)面板。
首先我們先把微信和支付寶這兩個布局出來
然后在元件庫里，找到“動態(tài)面板”，拖動到頁面
點入動態(tài)面板里，分別創(chuàng)建兩個狀態(tài)，分別是：微信支付、支付寶
然后退出編輯動態(tài)面板，回到前面的微信支付、支付寶，給這兩個選項增加交互
最終預覽的效果
我們還可以動態(tài)面板里面再套用動態(tài)面板，以實現(xiàn)前面的效果
4、中繼器的應用場景與技巧
中繼器是axure 10最大的升級，交互方式都比axure9方便很多。下面我們舉個后臺列表的例子
首先我們定義列表的表頭字段后，然后在“元件庫”找到“中繼器-表格”拖動到頁面，填入數(shù)據(jù)后，這樣就可以快速生成一個列表
5、使用JavaScript語法
Axure支持原生javascript語法調(diào)用。
Axure中默認的javascript位置存放在Axure安裝目錄axureRP\DefaultSettings\Prototype_Files\resources\scripts文件夾下，如下為我本地的Acture安裝目錄下結(jié)構(gòu)：
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頁面載入，使用動作「打開鏈接」，然后點擊「fx」輸入上面的引用本地JS文件的代碼
1. 不能使用單行注釋"http://"，Axure 會中刪除所有換行符，單行注釋使腳本的其余部分成為注釋。若要注釋，應該用"/* */"；
2. 每句javascript結(jié)束必須帶"; "，Axure 會中刪除所有換行符，會報語法錯誤；
3. void(0)是為了防止 Internet Explorer 將用該值替換頁面內(nèi)容。其他瀏覽器不用加此語句；
4. 用 Javascript 注入 需要高級 Axure、Javascript、HTML和CSS技能。當您將自己的 javascript、HTML或CSS 添加到 Axure 原型時，您會面臨 Axure 通常會處理的跨瀏覽器不兼容問題。
比如我們現(xiàn)在的Qone.js就可以編寫我們的內(nèi)容，比如現(xiàn)在要實現(xiàn)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由于是異步加載的，所以需要延是執(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);
最終預覽的效果
▌總結(jié) 在原型設計中，我們的首要目標是傳達和展示我們的想法和概念。當我們的原型能夠清晰地表達我們的意圖并滿足項目需求時，就無需過度關(guān)注原型的細節(jié)和精度。重要的是要確保原型的功能性和用戶體驗，讓用戶能夠輕松理解我們的設計，以及提供它們所需的價值。因此，我們在設計原型時，應注重思想的表達和功能的完善，而不是被細節(jié)困擾。只有這樣，我們才能真正實現(xiàn)原型設計的目的，為我們的項目賦予更大的價值和影響力。
關(guān)注公眾號，回復關(guān)鍵詞“axure”
獲取本文的axure源文件以及JS
如果你還有其他疑問的可以添加我的個人微信， 注明 來源
我還創(chuàng)建了一個微信群，歡迎加入
END
如果本文對你有幫助，請 點贊 、 在看 和 分享 給身邊的朋友！ 別忘了關(guān)注 「強少來了」 獲取更多 前端 · 后端 · B端產(chǎn)品思維 的精彩內(nèi)容！ ??????
你的認可，是對我最大的鼓勵