Axure RP学习笔记--认识动态面板

时间:2024-03-06 21:27:50

                  在Axure RP设计出来的原型图中,最简单的交互设计是网页连接,透过鼠标的click来串起来,但是真正能发挥Axure RP在交互设计上的特色的,是通过“动态面板”对对象控制来做到更丰富更友好的交互设计。

        动态面板是专门用在设计原型图动态功能的对象,它可以包含一个或多个状态,每个状态本身是一个小页面,通过控制状态的顺序或隐藏/显示面板来达成交互介面的效果。

        动态面板到底长什么样子,如下图。一种透明的对象,本身可以包含很多个状态,每个状态都是独立的小页面,我们所看到的是被放置在最上层的状态。

        需要注意的是每个状态的这个小页面,边界与大小与所属的动态面板大小相同。不同的赚态可以重迭在同一个动态面板里,只有被控制放在最上层的状态才会显示在原型图的画面中。
        用Axure RP设计出来的基本的交互效果,大多是通过各种触发事件(Event)来控制动态面板显示或消失,或控制这个动态面板的某个状态层出现在最上层来实现的。

        下面我做一个简单的文字交互,来对这个动态面板又一个更深刻的认识:

1、首先,对这个动态面板进行描述,如果不描述,再添加面板就麻烦透了,分不清谁是谁了,所以我把动态面板命名为easymobi,可双击动态面板来起名,也可以在右侧顶部进行标签描述。

    从图中可以看到,我在这个动态面板内设置了两个状态层,一个是easymobi_logo,另外一个是easymobi_pic。

2、我想达到的效果是,

(a)鼠标到达一段文字的时候出现easymobi公司的logo,鼠标移走则消失。
(b)鼠标点击该段文字的时候出现easymobi公司的文化墙图片。

        那么我需要输入一段文字,并且设定一下动态面板的大小,这个大小决定了内部状态层显示的范围。

3、双击动态面板,可以看到咱们已经命名好的状态层名称easymobi_logo和pic,我们首先来编辑easymobi_logo,双击之。在打开的页面范围内,拖进去一个图片,用咱们的logo图片替换之。

4、下面我们来编辑另外一个状态层easymobi_pic,同样双击进入编辑页面,拖进图片对象,用pic替换进去。

5、好的,两个状态层我们已经调整好了,现在需要编辑控制他们的文字对象——北京易网联信信息技术有限公司。
         首先将这个动态面板调整为隐藏状态,在动态面板上点击右键——编辑动态面板——设为隐藏。这时动态面板显示屎黄色:-(

6、然后点击“北京易网联信信息技术有限公司”的文字,右侧选择OnMouseEnter,命名Case1,设置动态面板的动态转换,编辑操作描述到状态层easymobi_logo,确认。

 然后点击OnMouseOut,添加描述,选择操作隐藏动态面板即可。

7、下面我们来完成第二个效果,点击文字出现文化墙图片。点击文字,选择OnClick,选择操作设置动态面板状态转换,编辑动作描述到easymobi_pic,确定。

好,生成原型即可观看效果。