Axure常用交互效果

本文格式為Word版，下載可任意編輯——Axure常用交互效果Axure常用交互效果

我們?yōu)榇蠹沂占砹岁P(guān)于Axure常用交互效果，以便當大家參考。

1.帶提示的文本框

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

第一步：

從widget庫中拖出textfield控件。雙擊控件在其中輸入提示文字。然后在widgetproperties面板里，為該textfield寫入標簽："findpeople'。

其次步：

雙擊widgetproperties面板里的

，然后在開啟的caseeditor中，點擊SetVariable/Widgetsvalues之后點擊OpenSetValueEditor。設置如下圖所示：

點擊"OK'保存設置退出SetValueEditor和CaseEditor。

第三步：

雙擊widgetproperties面板里的

，然后在開啟的caseeditor中，點擊AddCondition，在ConditionBuilder里設置如下：

該步驟的`目的是，當用戶在textfield里面輸入值之后，textfield失去焦點時顯示用戶輸入的值，而不再顯示提示文字。

點擊"OK'保存設置并退出ConditionEditor，然后再CaseEditor中，點擊SetVariable/Widgetsvalues之后點擊OpenSetValueEditor。設置如下圖所示：

點擊'OK'保存設置退出SetValueEditor和CaseEditor。

至此帶提示的文本框的制作就終止了，按"F5'可在欣賞器中查看效果~

2.拖拽

在設計中應用拖拽，可以直觀好玩的替代移動、復制、添加、刪除等操作。在Axure中，拖拽效果的實現(xiàn)相對繁雜。概括如下：

第一步：

從widget庫中拖出一個矩形，雙擊添加文字"拖拽物'。在矩形上點擊右鍵，選擇ConvertConverttoDynamicPanel。然后在widgetproperties面板里，為該矩形寫入標簽："拖拽物'。

其次步：

選中該矩形，在軟件右側(cè)區(qū)域中的"組件屬性WidgetsProperties'中選擇"交互Interactions'面板，雙擊"OnDragStart'，在CaseEditor中設置如下：

點擊"OK'后保存設置并退出CaseEditor。該步驟是為了保證在有多個拖拽物存在的時候，被拖動的拖拽物總是在最前面，不會被其他的拖拽物所遮擋。

點擊"OK'后保存設置并退出CaseEditor。

第三步：

雙擊"OnDrag'，在CaseEditor中設置如下：

留神此處在右下角的Move下拉菜單中默認是"withdrag'，也就是說拖拽物會完全跟隨鼠標移動。假設是選擇"withdragx'，那么是跟隨鼠標x軸水平移動，垂直方向位置不變。假設是選擇"withdragy'，那么是跟隨鼠標y軸處置移動，水平方向位置不變。

第四步：

雙擊"OnDragDrop'，在CaseEditor中設置如下：

留神此處在右下角的Move下拉菜單中默認是"tox，ybeoforedrag'，也就是說拖拽物在鼠標左鍵松開的時候，會回到起始位置。假設此處選擇"withdragx'，那么拖拽物停留于鼠標x軸坐標處。假設是選擇"withdragy'，那么拖拽物停留于鼠標的y軸坐標處。

點擊"OK'后保存設置并退出CaseEdit