五分鐘教你快速上手Axure交互設計

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

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

3、作窗口中，雙擊交互面板中的“鼠標移出時”，與步驟一樣依次點擊“設置文本”，選擇要設置文本的元件，編輯文本為“未觸碰”，并點擊確認； 4. 點擊預覽，效果如下： 總結：交互的觸發(fā)事件和動作效果比較繁雜，其中涉及不少與變量相關的問題，這個也視項目的復雜程度而定。交互很多情況下是在控制其他元件的變化，這是與交互樣式最大的不同之處。第三分鐘：掌握交互聯(lián)動（1） 交互樣式與交互樣式聯(lián)動：兩個元件中，在一個元件的交互樣式產(chǎn)生效果的同時另一個元件的交互樣式也隨之產(chǎn)生效果 實例三：在實例的基礎上完成有斷層的懸停效果 1. 在實例一中的矩形上疊加一個灰色帶狀的矩形如圖： 2. 我們

4、想要實現(xiàn)當鼠標懸停在大矩形的同時小矩形的填充色由灰色變成白色，這需要用到交互樣式，所以我們按照實例一的方法設置好交互樣式后，效果如下，可以看到當大矩形變藍后小矩形還是灰色的： 3. 這時我們需要在兩個矩形之間建立交互樣式聯(lián)動，那么我們將二者組合起來，并在組合上右鍵，點擊“允許觸發(fā)鼠標交互”； 4. 點擊預覽，效果如下，可以看到二者已完美同步： 總結：交互樣式與交互樣式聯(lián)動的關鍵只有兩部：1.組合；2.允許觸發(fā)鼠標交互。第四分鐘：掌握交互聯(lián)動（2） 交互與交互聯(lián)動：兩個元件中，在一個元件的交互產(chǎn)生效果的同時另一個元件的交互也隨之產(chǎn)生效果 實例四：在實例的基礎上完成不觸碰文字就

5、可改變文字內(nèi)容的效果 1. 在實例二的基礎上新增一個矩形如圖，雙擊交互面板中的“鼠標移入時”，彈出“設置交互樣式”對話框； 2. 依次點擊“觸發(fā)時間”，選擇案例二中的矩形，選中“鼠標移入時”，并點擊確認，使當前新矩形的“鼠標移入時”動作可以觸發(fā)老矩形的“鼠標移入時”動作，如圖： 3. 回到工作窗口中，雙擊交互面板中的“鼠標移出時”，與步驟一樣依次點擊“觸發(fā)時間”，選擇案例二中的矩形，選中“鼠標移出時”，并點擊確認。 4. 點擊預覽，效果如下： 總結：交互與交互聯(lián)動的關鍵只有一個動作：“觸發(fā)事件”。第五分鐘：掌握交互聯(lián)動（3） 交互與交互樣式聯(lián)動：兩個元件中，在一個元件的交互樣式產(chǎn)生效果的同時另一個元件的交互也隨之產(chǎn)生效果（這種情況其實沒有最優(yōu)解，它相當于情景一和情景二的結合體） 案例五：在案例四和案例五的基礎上，實現(xiàn)當鼠標懸停于“我的收藏”矩形上時，改變背景顏色和文字顏色的同時也改變“觸碰狀態(tài)”矩形里的文字 1. 將案例四中對綠色矩