Axure基礎(chǔ):元件交互事件

鼠標(biāo)單擊跳轉(zhuǎn)就是最基本的元件交互事件,可以用于鼠標(biāo)點擊時,也可以用于移動設(shè)備上的手指點擊時。我們以簡書的主導(dǎo)航(發(fā)現(xiàn)/關(guān)注/消息)跳轉(zhuǎn)為例,說明元件的交互過程。

=======================================
Axure 9.0元件交互事件

單擊時:當(dāng)元件被點擊時。
雙擊時:元件被鼠標(biāo)雙擊時。
右擊時:當(dāng)元件被鼠標(biāo)右鍵單擊時。
按下時:當(dāng)鼠標(biāo)按下左鍵沒有被釋放時。
松開時:當(dāng)元件被鼠標(biāo)點擊,這個事件由鼠標(biāo)按鍵釋放觸發(fā)。
鼠標(biāo)移動時:當(dāng)光標(biāo)在一個元件上移動時。
鼠標(biāo)移入時:當(dāng)光標(biāo)移入元件范圍時。
鼠標(biāo)移出時:當(dāng)光標(biāo)移出元件范圍時。
鼠標(biāo)停放時:當(dāng)光標(biāo)在元件上方懸停時。
鼠標(biāo)長按時:當(dāng)鼠標(biāo)按下超過2秒沒有被釋放時。
按鍵按下時:鍵盤上的按鍵被按下時。
按鍵松開時:當(dāng)鍵盤上的按鍵彈起時。
移動時:當(dāng)元件移動時,在頁面中的坐標(biāo)位發(fā)生了變化。
旋轉(zhuǎn)時:當(dāng)元件旋轉(zhuǎn)時。
尺寸改變時:當(dāng)元件寬度或高度發(fā)生改變時。
顯示時:當(dāng)元件通過交互動作顯示時。
隱藏時:當(dāng)元件通過交互動作隱藏時。
獲取焦點時:當(dāng)一個輸入項獲取焦點時。
失去焦點時:當(dāng)一個輸入項失去焦點時。
選中改變時:適用于下拉框,當(dāng)下拉框被選中的項發(fā)生了改變時,通常作為事件的一個邏輯條件。
選中時:當(dāng)復(fù)選框或單選按鈕被選中時。
取消選中時:當(dāng)復(fù)選框或單選按鈕取消選中時。
載入時:當(dāng)元件從一個頁面的加載中載入時。
文字改變時:當(dāng)單行文本框或多行文本框中的文字發(fā)生改變時。
狀態(tài)改變時:當(dāng)動態(tài)面板被設(shè)置了“設(shè)置面板狀態(tài)”動作時。
拖動開始時:當(dāng)一個拖動動作開始時。
拖動時:當(dāng)一個動態(tài)面板正在被拖動時。
拖動結(jié)束時:當(dāng)一個拖動動作結(jié)束時。
向左拖動結(jié)束時:當(dāng)一個面板向左拖動結(jié)束時。
向右拖動結(jié)束時:當(dāng)一個面板向右拖動結(jié)束時。
向上拖動結(jié)束時:當(dāng)一個面板向上拖動結(jié)束時。
向下拖動結(jié)束時:當(dāng)一個面板向下拖動結(jié)束時。
滾動時:當(dāng)一個有滾動的面板上下滾動時。
向上滾動時:當(dāng)一個有滾動的面板,向上滾動時。
向下滾動時:當(dāng)一個有滾動的面板,向下滾動時。

Axure 9.0元件交互樣式

鼠標(biāo)懸停:當(dāng)鼠標(biāo)懸停在元件上時,元件的顯示樣式。
鼠標(biāo)按下:當(dāng)鼠標(biāo)按下元件時,元件的顯示樣式。
選中:元件被選中時的顯示樣式。
禁用:元件被停止使用時的顯示樣式。
獲取焦點:當(dāng)光標(biāo)聚焦在元件(如文本框)上的顯示樣式。

=======================================
操作方法

第一步:
添加用例:在設(shè)計區(qū)域選中元件,在右側(cè)交互面板中點擊新建交互,我們會看到該元件可用的事件列表,點擊其中的一個事件,點擊右側(cè)的用例圖標(biāo)或者直接選擇想要添加的動作。
第二步:
插入動作:鼠標(biāo)點擊動作名稱,開始添加動作,支持添加多個動作。當(dāng)我們準(zhǔn)備插入第二個動作時,點擊用例下方的圓形十字架,開始插入更多動作。
第三步:
配置動作:動作選擇完畢后,我們還需要為動作進(jìn)行一些規(guī)則或?qū)傩缘呐渲?。比如,我們添加的動作是打開鏈接,在動作配置中,需要添加鏈接頁面并選擇頁面打開的方式(當(dāng)前窗口、新窗口/新標(biāo)簽、彈出窗口和父級窗口),最后點擊完成。
第四步:
設(shè)置交互樣式:
選中元件,點擊新建交互,可以進(jìn)行懸停、選擇、禁用等相關(guān)的交互樣式設(shè)置;
第五步:
在預(yù)覽或生成的HTML文件進(jìn)行查看。

參考:http://www.itdecent.cn/p/ae12af2a1f43

=======================================
元件交互示例:

(1)鼠標(biāo)按下效果:
點擊按下按鈕置灰這樣一個靜態(tài)效果:就不用設(shè)置【交互動作】 ,直接設(shè)置【交互樣式】即可

(2)鼠標(biāo)選中效果:
希望 “提交”按鈕 選中后, 變藍(lán)色+下劃線:
1:選擇文本輸入框,右邊操作區(qū)選擇【交互】-【新建交互】
2:插入動作:鼠標(biāo)點擊動作名稱,開始添加動作 「鼠標(biāo)點擊時」
3:編輯動作:動作選擇完畢后,選擇「設(shè)置選中」,設(shè)置選中動作細(xì)節(jié)
注:如果多個按鈕,不同效果
法1)給不同的按鈕123起名字,設(shè)置按鈕1交互動作時設(shè)置好對應(yīng)按鈕23的動作
法2)全選按鈕-右鍵-設(shè)置「選項的組」名稱 --->選項組的所有元素默認(rèn)只能單選
4:選擇交互樣式:選擇文本輸入框,-【新建交互】,選擇【選中】設(shè)置樣式
5:發(fā)布,預(yù)覽看設(shè)置的樣式

=======================================
配置動作細(xì)節(jié)


(一)添加條件
有些時候,我們可能會在頁面中表達(dá)一些判斷邏輯,當(dāng)xxx時,執(zhí)行xxx動作。
為了做到這一點,我們可以使用axure提供的條件設(shè)置功能,來為一個元件設(shè)置條件并添加執(zhí)行動作。
示例:
如果單擊先出現(xiàn)彈窗,再單擊隱藏彈窗

選擇添加情型
添加條件&情形名稱
確定條件配置
完成條件
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容