Aure原型图设计动态面板实现页面增删改查模式弹窗效果.docx

动态面板实现页面增删改查模式弹窗效果原型图

动态面板实现页面增删改查模式弹窗效果原型图

目录

一、动态面板设置 1

1.拖出动态页面，双击进入动态页面设计页面，增加相应的状态 1

2.设计完动态面板各个状态之后，修改动态面板的几个属性.........................................2

2.设计完动态面板各个状态之后，修改动态面板的几个属性

二、弹出的操作 2

1.给增删改查几个按钮，增加对应的交互.........................................................................2

1.给增删改查几个按钮，增加对应的交互

一、动态面板设置

拖出动态页面，双击进入动态页面设计页面，增加相应的状态

比如增删改查四个状态，然后就在这四个状态下，完成各自的设计：

实现弹出效果，不需要在动态面板上增加交互。二、弹出的操作

实现弹出效果，不需要在动态面板上增加交互。

二、弹出的操作

1.给增删改查几个按钮，增加对应的交互

其中确定按钮，有个点击事件，是用来隐藏动态面板，其实没有这个事

件，鼠标点击在页面外也可以实现隐藏效果，只是增加了用户操作学习的成本。

2.设计完动态面板各个状态之后，修改动态面板的几个属性

勾上“自适应内容”；1.

勾上“自适应内容”；

设置“固定到浏览器”，弹出后页面的位置，我设置为横竖居中；

初始状态“不可见”（这个很重要）。3.

初始状态“不可见”（这个很重要）。

每个交互都是类似的，列举详情按钮。新建交互的时候，鼠标在移动过

每个交互都是类似的，列举详情按钮。新建交互的时候，鼠标在移动过

程中会出现“添加情形”“添加目标”“添加动作”这些提示（交互的设置个人觉得跟8.0版本区别比较大）。

打开交互编辑器，按顺序：添加事件、添加情形、添加目标、添加动作、

设置动作：

添加事件：单击时；1.

添加事件：单击时；

添加情形：“详情”，注意的是，没有设置任何条件，相当于if2.

添加情形：“详情”，注意的是，没有设置任何条件，相当于if

1=1 的效果；

1=1 的效果；

添加目标：选择动态面板；3.

添加目标：选择动态面板；

4. 添加动作：这里有2个动作“显示/隐藏”、“设置面板状态”，

意思是：点击详情按钮时，以灯箱效果来显示动态面板的详情页。

意思是：点击详情按钮时，以灯箱效果来显示动态面板的详情页。

＿ 入 汗忒

。颈

。

汪｀

-.，广

）勺 孔馔，i已令

＿罕

＿

可勹＇仁和·

｀

门开

宁霄

蚀

冗忡

豆示｀

妇，

＿＿一·

o..I回晕

邧-

＿------------

旦季竺

元1玩血”

元1玩血”r

巴白也瘟

幔叩熏

，哑II蜘王－－－二 ；；；

，

\=

浏纽东如

氓

`位

`

叩雾｀

吧嚷

诈句

庚

哑尺寸雪琶祖

石

开一罕茹乒臣

:/守玉 芯 立芬立～

:/

多 -

og0玉，，

og

0玉

呱

汀开畴

o. iii曰

6

6伍

薹于霓已

云妇虹3石玉

烂 衣l

“”.,n: 耳

匀

在币

立

元

雯妇

石在

心壹女工

心

氓

歌 且子

－－－叩王玉

－－－

无＿＿＿＿＿

c重

多

．霄霎已色

-------

叩 霓乏中l1

曰乎

痄

工

心耋尺寸

豆书也怎巴叩S

召

-- 亡