五分鐘教你快速上手Axure交互設(shè)計(jì)

1、五分鐘教你快速上手Axure交互設(shè)計(jì)本教程適用于對(duì)Axure有一定了解但沒有交互制作經(jīng)驗(yàn)的新手們，不涉及動(dòng)態(tài)面板。文中提到的部分概念均為作者總結(jié)而來(lái)，若有不妥之處敬請(qǐng)諒解，愿大家看完后有所收獲。第一分鐘：理解交互樣式 交互樣式：在觸發(fā)特定的事件時(shí)，用來(lái)控制元件部分樣式的改變。在Axure 8.0中的面板如下： 實(shí)例一：鼠標(biāo)懸停時(shí)改變文字顏色和背景顏色 1. 選中帶文本的矩形如圖，點(diǎn)擊交互樣式面板中的“鼠標(biāo)懸?！保瑥棾觥霸O(shè)置交互樣式”對(duì)話框； 2. 選中“字體顏色”和“顏色填充”，隨便選兩種顏色，點(diǎn)擊確定； 3. 點(diǎn)擊預(yù)覽，效果如下： 總結(jié)：交互樣式觸發(fā)的事件類型只

2、有四個(gè)，控制的元件屬性也比較少，知道它能在哪些情況下改變哪些樣式就夠了。第二分鐘：理解交互 交互：在由觸發(fā)一個(gè)或多個(gè)事件而產(chǎn)生的某一場(chǎng)景內(nèi)做出相應(yīng)動(dòng)作產(chǎn)生相應(yīng)效果的過(guò)程。相當(dāng)于廣義化的交互樣式，但不能代替交互樣式，因?yàn)椴糠止δ堋叭绺淖兘M件內(nèi)文字的顏色等”只能通過(guò)交互樣式來(lái)實(shí)現(xiàn)。在Axure 8.0中的面板如下： 實(shí)例二：鼠標(biāo)懸停時(shí)改變文字內(nèi)容（該效果無(wú)法通過(guò)上述交互樣式實(shí)現(xiàn)） 1. 選中文本標(biāo)簽如圖，雙擊交互面板中的“鼠標(biāo)移入時(shí)”，彈出“設(shè)置交互樣式”對(duì)話框； 2. 依次點(diǎn)擊“設(shè)置文本”，選擇要設(shè)置文本的元件，編輯文本為“已觸碰”，并點(diǎn)擊確認(rèn)，如圖： 3. 回到工

3、作窗口中，雙擊交互面板中的“鼠標(biāo)移出時(shí)”，與步驟一樣依次點(diǎn)擊“設(shè)置文本”，選擇要設(shè)置文本的元件，編輯文本為“未觸碰”，并點(diǎn)擊確認(rèn)； 4. 點(diǎn)擊預(yù)覽，效果如下： 總結(jié)：交互的觸發(fā)事件和動(dòng)作效果比較繁雜，其中涉及不少與變量相關(guān)的問(wè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. 我們

4、想要實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停在大矩形的同時(shí)小矩形的填充色由灰色變成白色，這需要用到交互樣式，所以我們按照實(shí)例一的方法設(shè)置好交互樣式后，效果如下，可以看到當(dāng)大矩形變藍(lán)后小矩形還是灰色的： 3. 這時(shí)我們需要在兩個(gè)矩形之間建立交互樣式聯(lián)動(dòng)，那么我們將二者組合起來(lái)，并在組合上右鍵，點(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ǔ)上完成不觸碰文字就

5、可改變文字內(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ì)綠色矩