鼠標單擊跳轉(zhuǎn)就是最基本的元件交互事件履植,可以用于鼠標點擊時,也可以用于移動設(shè)備上的手指點擊時悄晃。我們以簡書的主導(dǎo)航(發(fā)現(xiàn)/關(guān)注/消息)跳轉(zhuǎn)為例玫霎,說明元件的交互過程。
=======================================
Axure 9.0元件交互事件
單擊時:當元件被點擊時妈橄。
雙擊時:元件被鼠標雙擊時庶近。
右擊時:當元件被鼠標右鍵單擊時。
按下時:當鼠標按下左鍵沒有被釋放時眷蚓。
松開時:當元件被鼠標點擊鼻种,這個事件由鼠標按鍵釋放觸發(fā)。
鼠標移動時:當光標在一個元件上移動時溪椎。
鼠標移入時:當光標移入元件范圍時普舆。
鼠標移出時:當光標移出元件范圍時。
鼠標停放時:當光標在元件上方懸停時校读。
鼠標長按時:當鼠標按下超過2秒沒有被釋放時沼侣。
按鍵按下時:鍵盤上的按鍵被按下時。
按鍵松開時:當鍵盤上的按鍵彈起時歉秫。
移動時:當元件移動時蛾洛,在頁面中的坐標位發(fā)生了變化。
旋轉(zhuǎn)時:當元件旋轉(zhuǎn)時。
尺寸改變時:當元件寬度或高度發(fā)生改變時轧膘。
顯示時:當元件通過交互動作顯示時钞螟。
隱藏時:當元件通過交互動作隱藏時。
獲取焦點時:當一個輸入項獲取焦點時谎碍。
失去焦點時:當一個輸入項失去焦點時鳞滨。
選中改變時:適用于下拉框,當下拉框被選中的項發(fā)生了改變時蟆淀,通常作為事件的一個邏輯條件拯啦。
選中時:當復(fù)選框或單選按鈕被選中時。
取消選中時:當復(fù)選框或單選按鈕取消選中時熔任。
載入時:當元件從一個頁面的加載中載入時褒链。
文字改變時:當單行文本框或多行文本框中的文字發(fā)生改變時。
狀態(tài)改變時:當動態(tài)面板被設(shè)置了“設(shè)置面板狀態(tài)”動作時疑苔。
拖動開始時:當一個拖動動作開始時甫匹。
拖動時:當一個動態(tài)面板正在被拖動時。
拖動結(jié)束時:當一個拖動動作結(jié)束時惦费。
向左拖動結(jié)束時:當一個面板向左拖動結(jié)束時兵迅。
向右拖動結(jié)束時:當一個面板向右拖動結(jié)束時。
向上拖動結(jié)束時:當一個面板向上拖動結(jié)束時趁餐。
向下拖動結(jié)束時:當一個面板向下拖動結(jié)束時喷兼。
滾動時:當一個有滾動的面板上下滾動時。
向上滾動時:當一個有滾動的面板后雷,向上滾動時季惯。
向下滾動時:當一個有滾動的面板,向下滾動時臀突。
Axure 9.0元件交互樣式
鼠標懸停:當鼠標懸停在元件上時勉抓,元件的顯示樣式。
鼠標按下:當鼠標按下元件時候学,元件的顯示樣式藕筋。
選中:元件被選中時的顯示樣式。
禁用:元件被停止使用時的顯示樣式梳码。
獲取焦點:當光標聚焦在元件(如文本框)上的顯示樣式隐圾。
=======================================
操作方法
第一步:
添加用例:在設(shè)計區(qū)域選中元件,在右側(cè)交互面板中點擊新建交互掰茶,我們會看到該元件可用的事件列表暇藏,點擊其中的一個事件,點擊右側(cè)的用例圖標或者直接選擇想要添加的動作濒蒋。
第二步:
插入動作:鼠標點擊動作名稱盐碱,開始添加動作把兔,支持添加多個動作。當我們準備插入第二個動作時瓮顽,點擊用例下方的圓形十字架县好,開始插入更多動作。
第三步:
配置動作:動作選擇完畢后暖混,我們還需要為動作進行一些規(guī)則或?qū)傩缘呐渲寐乒薄1热纾覀兲砑拥膭幼魇谴蜷_鏈接拣播,在動作配置中善绎,需要添加鏈接頁面并選擇頁面打開的方式(當前窗口、新窗口/新標簽诫尽、彈出窗口和父級窗口),最后點擊完成炬守。
第四步:
設(shè)置交互樣式:
選中元件牧嫉,點擊新建交互,可以進行懸停减途、選擇酣藻、禁用等相關(guān)的交互樣式設(shè)置;
第五步:
在預(yù)覽或生成的HTML文件進行查看鳍置。
參考:http://www.reibang.com/p/ae12af2a1f43
=======================================
元件交互示例:
(1)鼠標按下效果:
點擊按下按鈕置灰這樣一個靜態(tài)效果:就不用設(shè)置【交互動作】 辽剧,直接設(shè)置【交互樣式】即可
(2)鼠標選中效果:
希望 “提交”按鈕 選中后, 變藍色+下劃線:
1:選擇文本輸入框税产,右邊操作區(qū)選擇【交互】-【新建交互】
2:插入動作:鼠標點擊動作名稱怕轿,開始添加動作 「鼠標點擊時」
3:編輯動作:動作選擇完畢后,選擇「設(shè)置選中」辟拷,設(shè)置選中動作細節(jié)
注:如果多個按鈕撞羽,不同效果
法1)給不同的按鈕123起名字,設(shè)置按鈕1交互動作時設(shè)置好對應(yīng)按鈕23的動作
法2)全選按鈕-右鍵-設(shè)置「選項的組」名稱 --->選項組的所有元素默認只能單選
4:選擇交互樣式:選擇文本輸入框衫冻,-【新建交互】诀紊,選擇【選中】設(shè)置樣式
5:發(fā)布,預(yù)覽看設(shè)置的樣式
=======================================
配置動作細節(jié):
(一)添加條件
有些時候隅俘,我們可能會在頁面中表達一些判斷邏輯邻奠,當xxx時,執(zhí)行xxx動作为居。
為了做到這一點碌宴,我們可以使用axure提供的條件設(shè)置功能,來為一個元件設(shè)置條件并添加執(zhí)行動作颜骤。
示例:
如果單擊先出現(xiàn)彈窗唧喉,再單擊隱藏彈窗