Axure互動效果1

书书书书君發表於2024-11-25

--本篇導航--

給文字框設定提示文字
文字框的清除按鈕
燈箱效果
APP底部彈出選單
滑鼠懸停顯示另一皮膚
顯示推拉效果
二級選單展開
輪播圖
全屏與瀏覽器等寬顯示
滾動彈幕效果
返回頂部按鈕
商品詳情頁拖動滑鼠檢視效果
單選按鈕組
下拉選單樹
關聯二級下拉選單
步進器
旋轉暫停
內嵌影片


互動

使用方法:給目標元件新增各種互動,互動中設定動作執行條件和動作。

  1. 同一個元件可以有多個互動動作;
  2. 互動執行順序是從上到下依次執行;
  3. 元件1的互動可以控制元件2執行互動動作;
  4. Axure中的元件、屬性、互動都是可以複製貼上的。

互動新增方法

Axure互動效果1

新增情形條件

Axure中可以給互動新增各種前置判斷條件,組成複雜的If...Else的邏輯判斷。

Axure互動效果1


例項

給文字框設定提示文字

利用[文字框]元件的提示文字來顯示提示的文字,還可以設定工具提示來提供懸停的提示文字。

Axure互動效果1

Axure互動效果1

文字框的清除按鈕

在文字框中輸入內容,顯示出清除按鈕;

Axure互動效果1

Axure互動效果1

點選清除按鈕,清除文字框內容。

Axure互動效果1

Axure互動效果1

燈箱效果

利用元件【顯示/隱藏】的顯示效果的燈箱效果來實現。

Axure互動效果1

Axure互動效果1

APP底部彈出選單

燈箱效果,會有一指定顏色的背景,再次點選背景區域時,會觸發隱藏。

Axure互動效果1

彈出效果,沒有背景,當滑鼠移出顯示元件之外,則會自動隱藏顯示元件。

Axure互動效果1

推動效果,會在觸發元件的位置上推出隱藏的元件,隱藏元件則需要再新增其他的互動。

使用推動時,需要注意方向是下方還是右側,這個對收起彈出的介面有影響。否則被彈出介面擠出去的部分不會回覆到初始位置。

Axure互動效果1

滑鼠懸停顯示另一皮膚

Axure互動效果1

Axure互動效果1

顯示推拉效果

Axure互動效果1

Axure互動效果1

二級選單展開

使用上述的方式,可以使用【顯示/隱藏】的推拉、拉動動作,做到二級選單的摺疊、展開互動。

1、載入頁面時,二級選單預設收起(隱藏)。

Axure互動效果1

2、點選一級選單後,二級選單可以展開、摺疊起來。

Axure互動效果1

Axure互動效果1

輪播圖

輪播圖就是用左右、1、2、3來切換動態皮膚(不同的圖)的狀態。

1、製作動態皮膚、設定好按鈕圖示。

Axure互動效果1

2、點選左右按鈕切換。將動態皮膚的狀態改成上一項下一項,記住要勾選向前/後迴圈

Axure互動效果1

3、點選1、2、3來切換

Axure互動效果1

4、在圖片上拖動滑鼠切換

Axure互動效果1

全屏與瀏覽器等寬顯示

頁面載入時,將元件的寬度設定成頁面視窗的寬度。

Axure互動效果1

Axure互動效果1

滾動彈幕效果

彈幕滾動就是頁面載入的時候,彈幕內容自動向上、向左滾動。也就是需要對動態皮膚的2個狀態做橫向滾動,並設定為迴圈動畫即可。

Axure互動效果1

Axure互動效果1

返回頂部按鈕

原理:利用動態皮膚的固定到瀏覽器位置的特點,將返回頂部按鈕轉成動態皮膚,再固定到瀏覽器的某一位置上。之後再去做頁面滾動顯示按鈕、點選按鈕返回頂部的互動。

Axure互動效果1

1、下滑滾動滑鼠,顯示出返回頂部的按鈕

Axure互動效果1

2、點選返回頂部的按鈕,將頁面返回到頂部

Axure互動效果1

商品詳情頁拖動滑鼠檢視效果

Axure中元件的座標是左上角開始,所以要實現此效果,則需要將滑鼠指標的位置設定到矩形元件的中心,也就是需要將滑鼠指標的位置減去矩形元件一半的寬高值。

Axure互動效果1

Axure互動效果1

單選按鈕組

將多個單選按鈕選中,右鍵[指定單選按鈕的組],這樣才會出現僅有一個單選按鈕被選中。

透過選中和取消選中,來控制另一個元件。

Axure互動效果1

Axure互動效果1

下拉選單樹

新增的列表樹,可以對每一個節點新增點選互動,從而來切換如動態皮膚、其他內嵌頁面等。

Axure互動效果1

Axure互動效果1

關聯二級下拉選單

透過下拉選單1來顯示下拉選單2的選項內容,因此下拉選單2會有多個狀態,也就是下拉選單2是動態皮膚。

透過判斷下拉選單1當前選項的狀態,來改變下拉選單2動態皮膚的狀態頁。

Axure互動效果1

Axure互動效果1

Axure互動效果1

步進器

點選+按鈕,增加數字;點選-按鈕,減少數字。

但起始為1時,-按鈕應該是禁用狀態。此處則需要做條件判斷。

Axure互動效果1

Axure互動效果1

Axure互動效果1

旋轉暫停

透過控制全域性變數的值來做互動。

Axure互動效果1

Axure互動效果1

Axure互動效果1

內嵌影片

使用[內聯框架]元件可以內嵌其他網頁的影片、底圖、Axure中其他頁面的縮圖。

Axure互動效果1

相關文章