本教程適用于對(duì)Axure有一定了解但沒有交互制作經(jīng)驗(yàn)的新手們，不涉及動(dòng)態(tài)面板。文中提到的部分概念均為作者總結(jié)而來，若有不妥之處敬請(qǐng)諒解，愿大家看完后有所收獲。

第一分鐘：理解交互樣式

交互樣式：在觸發(fā)特定的事件時(shí)，用來控制元件部分樣式的改變。在Axure 8.0中的面板如下：

實(shí)例一：鼠標(biāo)懸停時(shí)改變文字顏色和背景顏色

1.?選中帶文本的矩形如圖，點(diǎn)擊交互樣式面板中的“鼠標(biāo)懸停”，彈出“設(shè)置交互樣式”對(duì)話框；

2.?選中“字體顏色”和“顏色填充”，隨便選兩種顏色，點(diǎn)擊確定；

3.?點(diǎn)擊預(yù)覽，效果如下：

總結(jié)：交互樣式觸發(fā)的事件類型只有四個(gè)，控制的元件屬性也比較少，知道它能在哪些情況下改變哪些樣式就夠了。

第二分鐘：理解交互

交互：在由觸發(fā)一個(gè)或多個(gè)事件而產(chǎn)生的某一場(chǎng)景內(nèi)做出相應(yīng)動(dòng)作產(chǎn)生相應(yīng)效果的過程。相當(dāng)于廣義化的交互樣式，但不能代替交互樣式，因?yàn)椴糠止δ堋叭绺淖兘M件內(nèi)文字的顏色等”只能通過交互樣式來實(shí)現(xiàn)。在Axure 8.0中的面板如下：

實(shí)例二：鼠標(biāo)懸停時(shí)改變文字內(nèi)容（該效果無法通過上述交互樣式實(shí)現(xiàn)）

1.?選中文本標(biāo)簽如圖，雙擊交互面板中的“鼠標(biāo)移入時(shí)”，彈出“設(shè)置交互樣式”對(duì)話框；

2.?依次點(diǎn)擊“設(shè)置文本”，選擇要設(shè)置文本的元件，編輯文本為“已觸碰”，并點(diǎn)擊確認(rèn)，如圖：

3.?回到工作窗口中，雙擊交互面板中的“鼠標(biāo)移出時(shí)”，與步驟２一樣依次點(diǎn)擊“設(shè)置文本”，選擇要設(shè)置文本的元件，編輯文本為“未觸碰”，并點(diǎn)擊確認(rèn)；

4.?點(diǎn)擊預(yù)覽，效果如下：

總結(jié)：交互的觸發(fā)事件和動(dòng)作效果比較繁雜，其中涉及不少與變量相關(guān)的問題，這個(gè)也視項(xiàng)目的復(fù)雜程度而定。交互很多情況下是在控制其他元件的變化，這是與交互樣式最大的不同之處。

第三分鐘：掌握交互聯(lián)動(dòng)（1）

交互樣式與交互樣式聯(lián)動(dòng)：兩個(gè)元件中，在一個(gè)元件的交互樣式產(chǎn)生效果的同時(shí)另一個(gè)元件的交互樣式也隨之產(chǎn)生效果

實(shí)例三：在實(shí)例１的基礎(chǔ)上完成有斷層的懸停效果

1.?在實(shí)例一中的矩形上疊加一個(gè)灰色帶狀的矩形如圖：

2.?我們想要實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停在大矩形的同時(shí)小矩形的填充色由灰色變成白色，這需要用到交互樣式，所以我們按照實(shí)例一的方法設(shè)置好交互樣式后，效果如下，可以看到當(dāng)大矩形變藍(lán)后小矩形還是灰色的：

3.?這時(shí)我們需要在兩個(gè)矩形之間建立交互樣式聯(lián)動(dòng)，那么我們將二者組合起來，并在組合上右鍵，點(diǎn)擊“允許觸發(fā)鼠標(biāo)交互”；

4.?點(diǎn)擊預(yù)覽，效果如下，可以看到二者已完美同步：

總結(jié)：交互樣式與交互樣式聯(lián)動(dòng)的關(guān)鍵只有兩部：1.組合；2.允許觸發(fā)鼠標(biāo)交互。

第四分鐘：掌握交互聯(lián)動(dòng)（2）

交互與交互聯(lián)動(dòng)：兩個(gè)元件中，在一個(gè)元件的交互產(chǎn)生效果的同時(shí)另一個(gè)元件的交互也隨之產(chǎn)生效果

實(shí)例四：在實(shí)例２的基礎(chǔ)上完成不觸碰文字就可改變文字內(nèi)容的效果

1.?在實(shí)例二的基礎(chǔ)上新增一個(gè)矩形如圖，雙擊交互面板中的“鼠標(biāo)移入時(shí)”，彈出“設(shè)置交互樣式”對(duì)話框；

2.?依次點(diǎn)擊“觸發(fā)時(shí)間”，選擇案例二中的矩形，選中“鼠標(biāo)移入時(shí)”，并點(diǎn)擊確認(rèn)，使當(dāng)前新矩形的“鼠標(biāo)移入時(shí)”動(dòng)作可以觸發(fā)老矩形的“鼠標(biāo)移入時(shí)”動(dòng)作，如圖：

3.?回到工作窗口中，雙擊交互面板中的“鼠標(biāo)移出時(shí)”，與步驟２一樣依次點(diǎn)擊“觸發(fā)時(shí)間”，選擇案例二中的矩形，選中“鼠標(biāo)移出時(shí)”，并點(diǎn)擊確認(rèn)。

4.?點(diǎn)擊預(yù)覽，效果如下：

總結(jié)：交互與交互聯(lián)動(dòng)的關(guān)鍵只有一個(gè)動(dòng)作：“觸發(fā)事件”。

第五分鐘：掌握交互聯(lián)動(dòng)（3）

交互與交互樣式聯(lián)動(dòng)：兩個(gè)元件中，在一個(gè)元件的交互樣式產(chǎn)生效果的同時(shí)另一個(gè)元件的交互也隨之產(chǎn)生效果（這種情況其實(shí)沒有最優(yōu)解，它相當(dāng)于情景一和情景二的結(jié)合體）

案例五：在案例四和案例五的基礎(chǔ)上，實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停于“我的收藏”矩形上時(shí)，改變背景顏色和文字顏色的同時(shí)也改變“觸碰狀態(tài)”矩形里的文字

1.?將案例四中對(duì)綠色矩形所做的全部操作應(yīng)用到“我的收藏”矩形中；

2. 點(diǎn)擊預(yù)覽，效果如下：

總結(jié)：這個(gè)沒什么要總結(jié)的，但是在最后要強(qiáng)調(diào)一點(diǎn)：做交互時(shí)一定要養(yǎng)成修改元件名稱的好習(xí)慣！

作者：Milov（微信：milov_wy），做過安卓開發(fā)，正在學(xué)習(xí)產(chǎn)品，有豐富的平面設(shè)計(jì)經(jīng)驗(yàn)。

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