Axure9原型設(shè)計(jì):動(dòng)態(tài)面板實(shí)現(xiàn)頁(yè)面增刪改查模式彈窗效果

4 評(píng)論 11356 瀏覽 24 收藏 4 分鐘

編輯導(dǎo)語(yǔ):Axure是一個(gè)專(zhuān)業(yè)的快速原型設(shè)計(jì)工具,它能快速、高效的創(chuàng)建原型,同時(shí)支持多人協(xié)作設(shè)計(jì)和版本控制管理。本文作者就針對(duì)Axure9,談了談動(dòng)態(tài)面板如何實(shí)現(xiàn)頁(yè)面增刪改查模式彈窗效果。

其實(shí)相類(lèi)似的文章很多,只是發(fā)現(xiàn)在9.0的版本下,沒(méi)有示例,所以做了一個(gè)簡(jiǎn)單的示例說(shuō)明。

區(qū)別于8.0的版本,Axure9.0一些細(xì)節(jié)的改變讓人感覺(jué)陌生了些。

步驟如下:

一、動(dòng)態(tài)面板設(shè)置

1. 拖出動(dòng)態(tài)頁(yè)面,雙擊進(jìn)入動(dòng)態(tài)頁(yè)面設(shè)計(jì)頁(yè)面,增加相應(yīng)的狀態(tài)

比如增刪改查四個(gè)狀態(tài),然后就在這四個(gè)狀態(tài)下,完成各自的設(shè)計(jì):

其中確定按鈕,有個(gè)點(diǎn)擊事件,是用來(lái)隱藏動(dòng)態(tài)面板,其實(shí)沒(méi)有這個(gè)事件,鼠標(biāo)點(diǎn)擊在頁(yè)面外也可以實(shí)現(xiàn)隱藏效果,只是增加了用戶(hù)操作學(xué)習(xí)的成本。

2.?設(shè)計(jì)完動(dòng)態(tài)面板各個(gè)狀態(tài)之后,修改動(dòng)態(tài)面板的幾個(gè)屬性

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

實(shí)現(xiàn)彈出效果,不需要在動(dòng)態(tài)面板上增加交互。

二、彈出的操作

1.?給增刪改查幾個(gè)按鈕,增加對(duì)應(yīng)的交互

每個(gè)交互都是類(lèi)似的,列舉詳情按鈕。新建交互的時(shí)候,鼠標(biāo)在移動(dòng)過(guò)程中會(huì)出現(xiàn)“添加情形”“添加目標(biāo)”“添加動(dòng)作”這些提示(交互的設(shè)置個(gè)人覺(jué)得跟8.0版本區(qū)別比較大)。

打開(kāi)交互編輯器,按順序:添加事件、添加情形、添加目標(biāo)、添加動(dòng)作、設(shè)置動(dòng)作:

  1. 添加事件:?jiǎn)螕魰r(shí);
  2. 添加情形:“詳情”,注意的是,沒(méi)有設(shè)置任何條件,相當(dāng)于 if 1=1 的效果;
  3. 添加目標(biāo):選擇動(dòng)態(tài)面板;
  4. 添加動(dòng)作:這里有2個(gè)動(dòng)作“顯示/隱藏”、“設(shè)置面板狀態(tài)”,意思是:點(diǎn)擊詳情按鈕時(shí),以燈箱效果來(lái)顯示動(dòng)態(tài)面板的詳情頁(yè)。

2.?給其他幾個(gè)按鈕也設(shè)置類(lèi)似的交互

每個(gè)按鈕需要顯示的動(dòng)態(tài)面板狀態(tài)頁(yè)面不同。

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

 

本文由 @頭發(fā)漸少脾氣漸漲 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 好幾個(gè)例子都是我想學(xué)的,可以分享下原型嗎

    來(lái)自上海 回復(fù)
    1. 幾個(gè)例子都是基礎(chǔ)級(jí),你有問(wèn)題可以問(wèn)我,這樣才有意義。

      來(lái)自湖北 回復(fù)
  2. 可以進(jìn)階一下,使用中繼器來(lái)存儲(chǔ)臨時(shí)數(shù)據(jù)。

    來(lái)自福建 回復(fù)
    1. 好的,那下個(gè)學(xué)習(xí)任務(wù)就中繼器了。

      來(lái)自湖北 回復(fù)