來(lái)人人都是什a適用產(chǎn)品經(jīng)理??【起點(diǎn)學(xué)院】，BAT實(shí)戰派產(chǎn)品總監手把手系統帶你學(xué)產(chǎn)品、交互學(xué)運營(yíng)。于對e有有交驗

本教程適用于對Axure有一定了解但沒(méi)(mei)有交互制作經(jīng)驗的定解但沒(méi)新手們，不涉及動(dòng)態(tài)面板?；ブ莆闹刑岬降淖鹘?jīng)部分概念均為作者總結而來(lái)，若有不妥之處敬請諒解，新手愿大家看完后有所收獲。什a適用

交互樣式：在觸發(fā)┐(′?｀)┌特定的交互事件時(shí)，用來(lái)控制元件部分樣式的于對e有有交驗改變。在A(yíng)xure 8.0中的定解但沒(méi)面板如下：

1. 選中帶文本的矩形如圖，點(diǎn)擊交互樣式面板中的互制“鼠標懸?！?，彈出“設置交互樣式”對話(huà)框；

2. 選中“字體顏色”和“顏色填充”，作經(jīng)隨便選兩種顏色，新手點(diǎn)擊確定；

3. 點(diǎn)擊預覽，什a適用效果如下：

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

實(shí)例二：鼠標懸停時(shí)改變文字內容（該效果無(wú)法通過(guò)上述交互樣式實(shí)現）

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

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

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

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

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

實(shí)例三：在(′?｀*)(zai)實(shí)例１的基礎上完成有斷層的懸停效果

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

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

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

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

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

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

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

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

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

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

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

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

案例五：在案例四和案例五的基礎上，實(shí)現當鼠標懸停于“我的收藏”矩形上時(shí)，改變背景顏色和文字顏色(′_｀)的同??時(shí)也改變“觸碰狀態(tài)”矩形里的文字

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

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

總結：這個(gè)沒(méi)什么要總(zong)結的，但是在最后要強調一點(diǎn)：做(O_O)交互時(shí)一定要養成修(xiu)改元件名稱(chēng)的好習(?????)慣！

作者：Milov（微信：milov_wy），現任找輔導產(chǎn)品經(jīng)理，安卓開(kāi)發(fā)出身，擁有豐富的平面設計經(jīng)驗。