Axure学习之线框图-动态面板基础篇

懵懂的女人 提交于 2020-01-03 09:04:06

原始学习资源:http://www.axure.com/dynamic-panels-basic

如果有什么地方不通畅或是有不清楚的地方,欢迎指教!

意译:

动态面板是实现较为复杂交互的很重要的部分。

动态面板的主要思想是在同一块区域显示不同的内容。

动态面板最大的特点就是“动态”,这个动态表现为两个部分,显示/隐藏、不同的状态。

 

简单的例子:官方例子见: show-hidden-panel-tutorial

当用户登录时会有成功和失败两种情况,成功时就跳到指定页面,而失败又分为很多情况:

1、帐号没填、密码没填(当然这种情况下,登录按钮应该是不能点的;这里只是举例)

2、帐号不存在、或是输错了

3、验证码错了

4、密码错了

那么就应该建一个动态面板,为各种错误设置不同的状态,并为各状态设置好合适的内容。

设置这个动态面板为隐藏(在点登录前是看不到的)

然后再为登录按钮指定不同的交互(应该是5种了)。

image

上图只做三种情况。可以自行设定。

 

另一个例子,制作tab标签区域:(官方例子见: tab-control-tutorial

image

上图是京东首页的一块(在京东快报下方)

比较简单:

1、建立动态面板,并命名,然后做好动态面板的4个状态

2、建立四个按钮,输入文字并设置好默认状态

3、为每个按钮设置鼠标移入的交互,将动态面板改为对应状态

4、为四个按钮设置悬停样式

不足之处:Axure中似乎不能设定鼠标移入后延迟xx毫秒才改变状态,不过这个写清楚说明之后,在开发阶段一定可以实现

Axure中有延迟xx毫秒之后才改变状态,不过对于按钮自身的鼠标移入状态改变则无延迟设置。

可不设置按钮的鼠标悬停特效,而是设置按钮的选中特效,在延迟后再将本按钮改为选中状态。见图:

solution

 

另一个例子,提示:(官方例子见: custom-tooltip-tutorial

比较简单:

设置鼠标移入显示动态面板

设置鼠标移出隐藏动态面板(当然默认是隐藏的)

 

另一个例子,弹出式菜单:(官方例子:flyout-menu-tutorial

比较简单:

三个按钮,三个动态面板

鼠标移入某个按钮是显示对应动态面板,并设置为最上层(覆盖掉按钮)

不足之处,官方给出的示例文件(AxureFlyoutMenu)有bug:

image

bug1:当鼠标快速从三个按钮上划过的时候,3个动态面板都会显示出来(需要多试几次)

image

bug2:当鼠标移出某个按钮及其对应的动态面板后(注意鼠标指针,win下想在截图中出现鼠标还需额外安装软件,这个图其实是我自己合的),这个动态面板还有可能仍然在显示(需要多试几次)

我尝试了将三个按钮设定为同一个分组,也没有解决问题。

设置动态面板显示时隐藏其他两个动态面板,解决了bug1,如图(其他的两个以此类推)

image

但是bug2还是没有解决,其实bug1只是bug2的一个变种,解决了bug2,bug1就不存在了。

不知高手有何见解。

 

动态面板基础篇就此结束,高级篇将于近日完成。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!