--本篇導航--
給文字框設定提示文字
文字框的清除按鈕
燈箱效果
APP底部彈出選單
滑鼠懸停顯示另一皮膚
顯示推拉效果
二級選單展開
輪播圖
全屏與瀏覽器等寬顯示
滾動彈幕效果
返回頂部按鈕
商品詳情頁拖動滑鼠檢視效果
單選按鈕組
下拉選單樹
關聯二級下拉選單
步進器
旋轉暫停
內嵌影片
互動
使用方法:給目標元件新增各種互動,互動中設定動作執行條件和動作。
- 同一個元件可以有多個互動動作;
- 互動執行順序是從上到下依次執行;
- 元件1的互動可以控制元件2執行互動動作;
- Axure中的元件、屬性、互動都是可以複製貼上的。
互動新增方法
新增情形條件
Axure中可以給互動新增各種前置判斷條件,組成複雜的If...Else的邏輯判斷。
例項
給文字框設定提示文字
利用[文字框]元件的提示文字來顯示提示的文字,還可以設定工具提示來提供懸停的提示文字。
文字框的清除按鈕
在文字框中輸入內容,顯示出清除按鈕;
點選清除按鈕,清除文字框內容。
燈箱效果
利用元件【顯示/隱藏】的顯示效果的燈箱效果來實現。
APP底部彈出選單
燈箱效果,會有一指定顏色的背景,再次點選背景區域時,會觸發隱藏。
彈出效果,沒有背景,當滑鼠移出顯示元件之外,則會自動隱藏顯示元件。
推動效果,會在觸發元件的位置上推出隱藏的元件,隱藏元件則需要再新增其他的互動。
使用推動時,需要注意方向是下方還是右側,這個對收起彈出的介面有影響。否則被彈出介面擠出去的部分不會回覆到初始位置。
滑鼠懸停顯示另一皮膚
顯示推拉效果
二級選單展開
使用上述的方式,可以使用【顯示/隱藏】的推拉、拉動動作,做到二級選單的摺疊、展開互動。
1、載入頁面時,二級選單預設收起(隱藏)。
2、點選一級選單後,二級選單可以展開、摺疊起來。
輪播圖
輪播圖就是用左右、1、2、3來切換動態皮膚(不同的圖)的狀態。
1、製作動態皮膚、設定好按鈕圖示。
2、點選左右按鈕切換。將動態皮膚的狀態改成上一項和下一項,記住要勾選向前/後迴圈。
3、點選1、2、3來切換
4、在圖片上拖動滑鼠切換
全屏與瀏覽器等寬顯示
頁面載入時,將元件的寬度設定成頁面視窗的寬度。
滾動彈幕效果
彈幕滾動就是頁面載入的時候,彈幕內容自動向上、向左滾動。也就是需要對動態皮膚的2個狀態做橫向滾動,並設定為迴圈動畫即可。
返回頂部按鈕
原理:利用動態皮膚的固定到瀏覽器位置的特點,將返回頂部按鈕轉成動態皮膚,再固定到瀏覽器的某一位置上。之後再去做頁面滾動顯示按鈕、點選按鈕返回頂部的互動。
1、下滑滾動滑鼠,顯示出返回頂部的按鈕
2、點選返回頂部的按鈕,將頁面返回到頂部
商品詳情頁拖動滑鼠檢視效果
Axure中元件的座標是左上角開始,所以要實現此效果,則需要將滑鼠指標的位置設定到矩形元件的中心,也就是需要將滑鼠指標的位置減去矩形元件一半的寬高值。
單選按鈕組
將多個單選按鈕選中,右鍵[指定單選按鈕的組],這樣才會出現僅有一個單選按鈕被選中。
透過選中和取消選中,來控制另一個元件。
下拉選單樹
新增的列表樹,可以對每一個節點新增點選互動,從而來切換如動態皮膚、其他內嵌頁面等。
關聯二級下拉選單
透過下拉選單1來顯示下拉選單2的選項內容,因此下拉選單2會有多個狀態,也就是下拉選單2是動態皮膚。
透過判斷下拉選單1當前選項的狀態,來改變下拉選單2動態皮膚的狀態頁。
步進器
點選+按鈕,增加數字;點選-按鈕,減少數字。
但起始為1時,-按鈕應該是禁用狀態。此處則需要做條件判斷。
旋轉暫停
透過控制全域性變數的值來做互動。
內嵌影片
使用[內聯框架]元件可以內嵌其他網頁的影片、底圖、Axure中其他頁面的縮圖。