如果你熟悉了Axure的部件庫，那么你可以得心應(yīng)手地畫出心目中產(chǎn)品的線框圖；如果你會(huì)用Axure的母版、動(dòng)態(tài)面板功能，那么你應(yīng)該能夠畫出一些簡單網(wǎng)站的原型圖；但只有你精通了Axure的條件邏輯、變量、函數(shù)等高級(jí)交互，才能將心中的產(chǎn)品形態(tài)恣意地通過這款軟件表現(xiàn)出來。

下面小喵就給大家仔細(xì)梳理一下Axure的高級(jí)交互內(nèi)容，以及如何運(yùn)用Axure這款軟件自帶的界面規(guī)范文檔來提高交付的原型在開發(fā)和設(shè)計(jì)階段的精準(zhǔn)度。

條件生成器

條件邏輯

在Javascript語言中的if-then-else語句是最常見的條件邏輯。

And和Or是條件運(yùn)算符，用于連接兩個(gè)或兩個(gè)以上的句子。

新增條件

在用例編輯器頂部有『新增條件』的選項(xiàng)，點(diǎn)擊后進(jìn)入條件生成器。

當(dāng)我們進(jìn)入條件生成器對(duì)話框時(shí)，首先看到的是滿足以下『全部』或『任意』一個(gè)條件，在描述框中我們可以看到，如果選擇『全部』則是『And』，如果選擇『任意』則是『Or』。

條件生成器的多個(gè)條件控制

條件生成器允許用戶創(chuàng)建條件表達(dá)式，將你需要滿足的條件通過填空的形式告訴Axure，如下圖：

條件生成器和可創(chuàng)建的表達(dá)式

其中，值的類型包括：

這些值的類型不用可以記住，用的時(shí)候參照就好了，用多了就記住了。

條件案例實(shí)戰(zhàn)——用戶登陸框

Step 1

以簡書的登陸框?yàn)槔?，截圖登陸框，并拖入『單行文本框』覆蓋掉原有的兩個(gè)文本輸入框，分別命名為『用戶名輸入框』和『密碼輸入框』，將『密碼輸入框』的屬性設(shè)置為密碼，這樣輸入密碼時(shí)會(huì)自動(dòng)變成不顯示的狀態(tài)；拖入圖片熱區(qū)，完全覆蓋掉原有的登陸按鈕，并命名為『登陸按鈕』。

制作登陸框

密碼輸入框的屬性設(shè)置為密碼

Step 2

假設(shè)用戶名為zongxiaomiao，密碼為123456。點(diǎn)擊『登陸按鈕』部件，建立兩個(gè)條件用例：

設(shè)置條件用例

因?yàn)槲覀冃枰瑫r(shí)滿足用戶名和密碼都正確才能登陸，所以連接兩個(gè)條件的是and而不是or，也就是滿足全部條件而不是任意條件。

如果文本輸入框里的文字同時(shí)滿足了兩個(gè)條件，我們就打開簡書的主頁，在鏈接——打開鏈接中輸入外部鏈接地址為：www.jianshu.com。

如果同時(shí)滿足兩個(gè)條件則進(jìn)入簡書主頁

Step 3

如果兩個(gè)條件中有一個(gè)條件不滿足，則在登陸框上顯示如下字樣：

登陸失敗提示字樣

我們將這個(gè)圖片置于設(shè)計(jì)區(qū)域，將其設(shè)置為隱藏狀態(tài)（右鍵——設(shè)為隱藏），并命名為『登陸失敗提示』。

同時(shí)新增用例2，設(shè)置else if true時(shí)觸發(fā)的動(dòng)作時(shí)顯示（我們默認(rèn)加載頁面時(shí)會(huì)隱藏它）提示登陸失敗的字樣，并且加入淡入淡出的動(dòng)畫，動(dòng)畫時(shí)間為500毫秒，這樣加載時(shí)不會(huì)太生硬。

將新增動(dòng)作設(shè)置為『顯示』，配置為顯示登錄失敗提示的圖片

在文末可以下載案例和觀看演示。

變量

Axure中的變量

• 局部變量：顧名思義，局部變量即在局部的動(dòng)作中生效。
• 全局變量：在整個(gè)原型中都有效。當(dāng)一個(gè)數(shù)據(jù)從頁面A傳遞到頁面B時(shí)就需要全局變量。
  因此，局部變量可以有相同名稱，而全局變量不能重復(fù)名稱。默認(rèn)情況下有一個(gè)叫『OnLoadVariable』的變量。變量名的命名規(guī)則是字母或數(shù)字，少于25字符，不包含空格。

變量實(shí)戰(zhàn)案例：全局變量在頁面間的動(dòng)態(tài)面板交互

做出這個(gè)頁面的一張圖揭示你散發(fā)出的核心氣質(zhì)心理測試的頁面間跳轉(zhuǎn)的效果，可以運(yùn)用『全局變量』+『動(dòng)態(tài)面板』來實(shí)現(xiàn)。大家可以先去網(wǎng)站做一下這個(gè)心理測試，然后構(gòu)思一下如何用全局變量和動(dòng)態(tài)面板在兩個(gè)頁面之間完成這個(gè)交互。

Step 1

在Axure中創(chuàng)建兩個(gè)頁面Home和Page 1，在Home頁面中導(dǎo)入測試所需的圖片，并拖入下拉列表框，在下拉列表框中設(shè)置『第一張』到『第九張』的選項(xiàng)。注意，要想默認(rèn)選項(xiàng)為空，則新建一個(gè)選項(xiàng)，輸入空格鍵即可。

下拉列表框

Step 2

選中下拉列表框，點(diǎn)擊『當(dāng)選項(xiàng)改變時(shí)』新建用例1，新增條件為當(dāng)選中項(xiàng)值的選項(xiàng)為『第一張』時(shí)（也就是用戶在下拉列表中選擇了第一張這個(gè)選項(xiàng)）。

新建用例，添加條件判斷

然后退出條件設(shè)置對(duì)話框，在用力編輯器中選擇『設(shè)置變量值』，在配置動(dòng)作一覽中新增變量『MyChoice』，并將MyChoice這個(gè)變量的值設(shè)為『第一張』

設(shè)置全局變量，并設(shè)置跳轉(zhuǎn)頁面

以此類推，新增9個(gè)用例，分別對(duì)應(yīng)9個(gè)選項(xiàng)，如下圖所示：

設(shè)置選項(xiàng)對(duì)應(yīng)的變量值

Step 3

在Page 1頁面中創(chuàng)建動(dòng)態(tài)面板，拖入多行文本框，將每個(gè)選項(xiàng)對(duì)應(yīng)的測試結(jié)果輸入其中。

設(shè)置動(dòng)態(tài)面板狀態(tài)內(nèi)容

Step 4

在頁面交互欄新增用例『頁面載入時(shí)』，設(shè)置動(dòng)態(tài)面板狀態(tài)，在狀態(tài)下拉列表框中選擇狀態(tài)『Value』，并點(diǎn)擊『名稱或狀態(tài)』旁的函數(shù)fx，選擇我們之前設(shè)置好的全局變量『MyChoice』即可。

全局變量對(duì)應(yīng)的動(dòng)態(tài)面板的狀態(tài)設(shè)置

打開預(yù)覽，即可看到效果。

案例下載和演示見文末。

函數(shù)

理解了變量和條件邏輯，再來學(xué)習(xí)函數(shù)就不難了。Axure中的函數(shù)類型非常多，一共有10類，并且每一類下面還有很多細(xì)分，總結(jié)如下圖：

除了條件邏輯、變量和函數(shù)之外，Axure還有一個(gè)特別強(qiáng)大的部件叫做『中繼器』。但是中繼器這個(gè)部件的使用頻率并不是很高，在這里就不詳細(xì)展開了。

簡單來說，中繼器扮演的是一個(gè)『數(shù)據(jù)庫』的角色，但這不是一個(gè)真正存在的數(shù)據(jù)庫，你可以對(duì)中繼器數(shù)據(jù)集中的數(shù)據(jù)按條件進(jìn)行增加、刪除、修改、排序和過濾等操作。中繼器用來顯示重復(fù)的文本、圖片和鏈接。

中繼器由項(xiàng)和數(shù)據(jù)集組成。在數(shù)據(jù)集中可以填充我們預(yù)先準(zhǔn)備的數(shù)據(jù)，這些數(shù)據(jù)可以是文字也可以是圖片（右鍵數(shù)據(jù)輸入框可導(dǎo)入圖片）。

因?yàn)橹欣^器是部件，所以也需要通過添加用例交互來控制動(dòng)作。同時(shí)，通過變量、函數(shù)來控制其展示的數(shù)據(jù)。

Axure從入門到精通需要大量的實(shí)戰(zhàn)練習(xí)。軟件本身是不斷變化的，掌握其根本的原理，融會(huì)貫通，多思考和練習(xí)就能讓這款軟件為你發(fā)揮最大的功效。

案例下載：

用戶登陸案例下載

下載密碼: ejsx

案例演示

全局變量案例下載

下載密碼: tddw

案例演示

#專欄作家#

粽小喵，微信公眾號(hào)：zong_xiaomiao，人人都是產(chǎn)品經(jīng)理專欄作家。騰訊產(chǎn)品經(jīng)理。一個(gè)學(xué)傳播出身的產(chǎn)品新人，愛好研究原型設(shè)計(jì)工具。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。