Axure9原型設計:動態面板實現頁面增刪改查模式彈窗效果

4 評論 11072 瀏覽 23 收藏 4 分鐘

編輯導語:Axure是一個專業的快速原型設計工具,它能快速、高效的創建原型,同時支持多人協作設計和版本控制管理。本文作者就針對Axure9,談了談動態面板如何實現頁面增刪改查模式彈窗效果。

其實相類似的文章很多,只是發現在9.0的版本下,沒有示例,所以做了一個簡單的示例說明。

區別于8.0的版本,Axure9.0一些細節的改變讓人感覺陌生了些。

步驟如下:

一、動態面板設置

1. 拖出動態頁面,雙擊進入動態頁面設計頁面,增加相應的狀態

比如增刪改查四個狀態,然后就在這四個狀態下,完成各自的設計:

其中確定按鈕,有個點擊事件,是用來隱藏動態面板,其實沒有這個事件,鼠標點擊在頁面外也可以實現隱藏效果,只是增加了用戶操作學習的成本。

2.?設計完動態面板各個狀態之后,修改動態面板的幾個屬性

  1. 勾上“自適應內容”;
  2. 設置“固定到瀏覽器”,彈出后頁面的位置,我設置為橫豎居中;
  3. 初始狀態“不可見”(這個很重要)。

實現彈出效果,不需要在動態面板上增加交互。

二、彈出的操作

1.?給增刪改查幾個按鈕,增加對應的交互

每個交互都是類似的,列舉詳情按鈕。新建交互的時候,鼠標在移動過程中會出現“添加情形”“添加目標”“添加動作”這些提示(交互的設置個人覺得跟8.0版本區別比較大)。

打開交互編輯器,按順序:添加事件、添加情形、添加目標、添加動作、設置動作:

  1. 添加事件:單擊時;
  2. 添加情形:“詳情”,注意的是,沒有設置任何條件,相當于 if 1=1 的效果;
  3. 添加目標:選擇動態面板;
  4. 添加動作:這里有2個動作“顯示/隱藏”、“設置面板狀態”,意思是:點擊詳情按鈕時,以燈箱效果來顯示動態面板的詳情頁。

2.?給其他幾個按鈕也設置類似的交互

每個按鈕需要顯示的動態面板狀態頁面不同。

效果:https://e6osrz.axshare.com

 

本文由 @頭發漸少脾氣漸漲 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 好幾個例子都是我想學的,可以分享下原型嗎

    來自上海 回復
    1. 幾個例子都是基礎級,你有問題可以問我,這樣才有意義。

      來自湖北 回復
  2. 可以進階一下,使用中繼器來存儲臨時數據。

    來自福建 回復
    1. 好的,那下個學習任務就中繼器了。

      來自湖北 回復