- 相關(guān)推薦
Axure常用交互效果制作
將提示信息放置于文本框內是一種常見(jiàn)的交互方式，小編為大家收集整理了關(guān)于A(yíng)xure常用交互效果，以方便大家參考。
1.帶提示的文本框
將提示信息放置于文本框內是一種常見(jiàn)的交互方式。當文本框獲得焦點(diǎn)時(shí)，提示文字消失。當文本框失去焦點(diǎn)時(shí)，提示文字重新顯示出來(lái)�，F在就讓我們看下這種控件的制作方法。
第一步：
從widget庫中拖出text field控件。雙擊控件在其中輸入提示文字。然后在widget properties面板里，為該text field寫(xiě)入標簽：“find people”。
第二步：
雙擊widget properties面板里的，然后在打開(kāi)的case editor中，點(diǎn)擊Set Variable/Widgets value(s)之后點(diǎn)擊Open Set Value Editor。 設置如下圖所示：
點(diǎn)擊“OK”保存設置退出Set Value Editor和Case Editor。
第三步：
雙擊widget properties面板里的，然后在打開(kāi)的case editor中，點(diǎn)擊Add Condition，在Condition Builder里設置如下：
(該步驟的目的是，當用戶(hù)在text field里面輸入值之后，text field失去焦點(diǎn)時(shí)顯示用戶(hù)輸入的值，而不再顯示提示文字。)
點(diǎn)擊“OK”保存設置并退出Condition Editor，然后再Case Editor中，點(diǎn)擊Set Variable/Widgets value(s)之后點(diǎn)擊Open Set Value Editor。 設置如下圖所示：
點(diǎn)擊”OK”保存設置退出Set Value Editor和Case Editor。
至此帶提示的文本框的制作就結束了，按“F5”可在瀏覽器中查看效果~
2.拖拽
在設計中應用拖拽，可以直觀(guān)有趣的替代移動(dòng)、復制、添加、刪除等操作。在A(yíng)xure中，拖拽效果的實(shí)現相對復雜。具體如下：
第一步：
從widget 庫中拖出一個(gè)矩形，雙擊添加文字“拖拽物”。在矩形上點(diǎn)擊右鍵，選擇Convert – Convert to Dynamic Panel。然后在widget properties面板里，為該矩形寫(xiě)入標簽：“拖拽物”。
第二步：
選中該矩形，在軟件右側區域中的“組件屬性(Widgets Properties)”中選擇“交互(Interactions)”面板，雙擊“OnDragStart”， 在Case Editor中設置如下：
點(diǎn)擊“OK”后保存設置并退出Case Editor。該步驟是為了保證在有多個(gè)拖拽物存在的時(shí)候，被拖動(dòng)的拖拽物總是在最前面，不會(huì )被其他的拖拽物所遮擋。
點(diǎn)擊“OK”后保存設置并退出Case Editor。
第三步：
雙擊“OnDrag”， 在Case Editor中設置如下：
注意此處在右下角的Move下拉菜單中默認是“with drag”，也就是說(shuō)拖拽物會(huì )完全跟隨鼠標移動(dòng)。如果是選擇“with drag x”，則是跟隨鼠標x軸(水平)移動(dòng)，垂直方向位置不變。如果是選擇“with drag y”，則是跟隨鼠標y軸(處置)移動(dòng)，水平方向位置不變。
第四步：
雙擊“OnDragDrop”， 在Case Editor中設置如下：
注意此處在右下角的Move下拉菜單中默認是“to x，y beofore drag”，也就是說(shuō)拖拽物在鼠標左鍵松開(kāi)的時(shí)候，會(huì )回到起始位置。如果此處選擇“with drag x”，則拖拽物停留于鼠標x軸坐標處。如果是選擇“with drag y”，則拖拽物停留于鼠標的y軸坐標處。
點(diǎn)擊“OK”后保存設置并退出Case Editor。
至此最簡(jiǎn)單的拖拽效果就已經(jīng)實(shí)現了。按“F5”可在瀏覽器中查看效果。
哈，這次就先分享這么多，希望大家能通過(guò)這兩個(gè)小小的例子，能夠更加熟悉Axure中Case Editor、Condition Builder和Set Value Editor的使用方法。如果有什么問(wèn)題，歡迎大家交流指正~
【Axure常用交互效果制作】相關(guān)文章：
Axure常用交互效果03-23
Axure常用交互實(shí)例教程03-24
AXURE交互實(shí)例介紹04-17
axure制作iPhone滑動(dòng)解鎖效果的方法07-25
Axure交互實(shí)例教程07-19
解讀交互設計-Axure原型交互輸出04-14
Axure7交互設計響應式方案07-26