本文旨在分享一些在Axure中，相對復(fù)雜但又常見的交互行為的制作方法，本期包含帶提示的文本框和拖拽效果。

1.帶提示的文本框

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

第一步：

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

第二步：

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

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

第三步：

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

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

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

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

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

2.拖拽

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

第一步：

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

第二步：

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

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

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

第三步：

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

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

第四步：

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

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

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

至此最簡單的拖拽效果就已經(jīng)實現(xiàn)了。按“F5”可在瀏覽器中查看效果。

寫在最后

哈，這次就先分享這么多，希望大家能通過這兩個小小的例子，能夠更加熟悉Axure中Case Editor、Condition Builder和Set Value Editor的使用方法。如果有什么問題，歡迎大家交流指正~

文章來源：盛大游戲UED 轉(zhuǎn)載請注明出處鏈接。

標(biāo)簽： Axure 交互設(shè)計 提示文本 

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