Axure互動效果執行個體：提示文字框和拖拽效果

　　Axure是現在互動設計師必不可少的互動原型設計工具，其實和任何一款工具一樣，只要根據常用效果執行個體多練練，基本就會知道各個控制項的使用。今天分享一些在Axure經常用到的互動執行個體：帶提示的文字框和拖拽效果。

　　執行個體下載：Axure常用互動效果執行個體.rar

　　1.帶提示的文字框

　　將提示資訊放置於文字框內是一種常見的互動方式。當文字框獲得焦點時，提示文字消失。當文字框失去焦點時，提示文字重新顯示出來。現在就讓我們看下這種控制項的製作方法。

　　第一步：

　　從widget庫中拖出text field控制項。雙擊控制項在其中輸入提示文字。然後在widget properties面板裡，為該text field寫入標籤：“find people”。

　　第二步：

　　雙擊widget properties面板裡的OnFocuse ，然後在開啟的case editor中，點擊Set Variable/Widgets value(s)之後點擊Open Set Value Editor。 設定如下圖所示：

　　點擊“OK”儲存設定退出Set Value Editor和Case Editor。

　　第三步：

　　雙擊widget properties面板裡的OnLostFocus ，然後在開啟的case editor中，點擊Add Condition，在Condition Builder裡設定如下：

　　(該步驟的目的是，當使用者在text field裡面輸入值之後，text field失去焦點時顯示使用者輸入的值，而不再顯示提示文字。)

　　點擊“OK”儲存設定並退出Condition Editor，然後再Case Editor中，點擊Set Variable/Widgets value(s)之後點擊Open Set Value Editor。 設定如下圖所示：

　　點擊”OK”儲存設定退出Set Value Editor和Case Editor。

　　至此帶提示的文字框的製作就結束了，按“F5”可在瀏覽器中查看效果~

　　2.拖拽

　　在設計中應用拖拽，可以直觀有趣的替代移動、複製、添加、刪除等操作。在Axure中，拖拽效果的實現相對複雜。具體如下：

　　第一步：

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

　　第二步：

　　選中該矩形，在軟體右側地區中的“組件屬性(Widgets Properties)”中選擇“互動(Interactions)”面板，雙擊“OnDragStart”， 在Case Editor中設定如下：

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

　　點擊“OK”後儲存設定並退出Case Editor。

　　第三步：

　　雙擊“OnDrag”， 在Case Editor中設定如下：

　　注意此處在右下角的Move下拉式功能表中預設是“with drag”，也就是說拖拽物會完全跟隨滑鼠移動。如果是選擇“with drag x”，則是跟隨滑鼠x軸(水平)移動，垂直方向位置不變。如果是選擇“with drag y”，則是跟隨滑鼠y軸(處置)移動，水平方向位置不變。

　　第四步：

　　雙擊“OnDragDrop”， 在Case Editor中設定如下：

　　注意此處在右下角的Move下拉式功能表中預設是“to x，y beofore drag”，也就是說拖拽物在滑鼠左鍵鬆開的時候，會回到起始位置。如果此處選擇“with drag x”，則拖拽物停留於滑鼠x軸座標處。如果是選擇“with drag y”，則拖拽物停留於滑鼠的y軸座標處。

　　點擊“OK”後儲存設定並退出Case Editor，按“F5”可在瀏覽器中查看效果，希望對各位有所協助。

　　作者：leo

　　文章來源：365ucd.com