Axure是現(xiàn)在交互設(shè)計(jì)師必不可少的交互原型設(shè)計(jì)工具，其實(shí)和任何一款工具一樣，只要根據(jù)常用效果實(shí)例多練練，基本就會(huì)知道各個(gè)控件的使用。今天分享一些在Axure經(jīng)常用到的交互實(shí)例：帶提示的文本框和拖拽效果。

實(shí)例下載：Axure常用交互效果實(shí)例.rar

1.帶提示的文本框

將提示信息放置于文本框內(nèi)是一種常見(jiàn)的交互方式。當(dāng)文本框獲得焦點(diǎn)時(shí)，提示文字消失。當(dāng)文本框失去焦點(diǎn)時(shí)，提示文字重新顯示出來(lái)�，F(xiàn)在就讓我們看下這種控件的制作方法。

第一步：

從widget庫(kù)中拖出text field控件。雙擊控件在其中輸入提示文字。然后在widget properties面板里，為該text field寫(xiě)入標(biāo)簽：“find people”。

第二步：

雙擊widget properties面板里的OnFocuse ，然后在打開(kāi)的case editor中，點(diǎn)擊Set Variable/Widgets value（s）之后點(diǎn)擊Open Set Value Editor。 設(shè)置如下圖所示：

點(diǎn)擊“OK”保存設(shè)置退出Set Value Editor和Case Editor。

第三步：

雙擊widget properties面板里的OnLostFocus ，然后在打開(kāi)的case editor中，點(diǎn)擊Add Condition，在Condition Builder里設(shè)置如下：

（該步驟的目的是，當(dāng)用戶在text field里面輸入值之后，text field失去焦點(diǎn)時(shí)顯示用戶輸入的值，而不再顯示提示文字。）

點(diǎn)擊“OK”保存設(shè)置并退出Condition Editor，然后再Case Editor中，點(diǎn)擊Set Variable/Widgets value（s）之后點(diǎn)擊Open Set Value Editor。 設(shè)置如下圖所示：

點(diǎn)擊”OK”保存設(shè)置退出Set Value Editor和Case Editor。

至此帶提示的文本框的制作就結(jié)束了，按“F5”可在瀏覽器中查看效果~

2.拖拽

在設(shè)計(jì)中應(yīng)用拖拽，可以直觀有趣的替代移動(dòng)、復(fù)制、添加、刪除等操作。在Axure中，拖拽效果的實(shí)現(xiàn)相對(duì)復(fù)雜。具體如下：

第一步：

從widget 庫(kù)中拖出一個(gè)矩形，雙擊添加文字“拖拽物”。在矩形上點(diǎn)擊右鍵，選擇Convert – Convert to Dynamic Panel。然后在widget properties面板里，為該矩形寫(xiě)入標(biāo)簽：“拖拽物”。

第二步：

選中該矩形，在軟件右側(cè)區(qū)域中的“組件屬性（Widgets Properties）”中選擇“交互（Interactions）”面板，雙擊“OnDragStart”， 在Case Editor中設(shè)置如下：

點(diǎn)擊“OK”后保存設(shè)置并退出Case Editor。該步驟是為了保證在有多個(gè)拖拽物存在的時(shí)候，被拖動(dòng)的拖拽物總是在最前面，不會(huì)被其他的拖拽物所遮擋。

點(diǎn)擊“OK”后保存設(shè)置并退出Case Editor。

第三步：

雙擊“OnDrag”， 在Case Editor中設(shè)置如下：

注意此處在右下角的Move下拉菜單中默認(rèn)是“with drag”，也就是說(shuō)拖拽物會(huì)完全跟隨鼠標(biāo)移動(dòng)。如果是選擇“with drag x”，則是跟隨鼠標(biāo)x軸（水平）移動(dòng)，垂直方向位置不變。如果是選擇“with drag y”，則是跟隨鼠標(biāo)y軸（處置）移動(dòng)，水平方向位置不變。

第四步：

雙擊“OnDragDrop”， 在Case Editor中設(shè)置如下：

注意此處在右下角的Move下拉菜單中默認(rèn)是“to x，y beofore drag”，也就是說(shuō)拖拽物在鼠標(biāo)左鍵松開(kāi)的時(shí)候，會(huì)回到起始位置。如果此處選擇“with drag x”，則拖拽物停留于鼠標(biāo)x軸坐標(biāo)處。如果是選擇“with drag y”，則拖拽物停留于鼠標(biāo)的y軸坐標(biāo)處。

點(diǎn)擊“OK”后保存設(shè)置并退出Case Editor，按“F5”可在瀏覽器中查看效果，希望對(duì)各位有所幫助。

作者：leo

文章來(lái)源：365ucd.com

標(biāo)簽： Axure Axure實(shí)例 Axure拖拽效果 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。