Axure中文社区

WebPPD产品原型设计

 找回密码
 新用户注册
查看: 10911|回复: 10

Axure动态面板的使用

[复制链接]

0

主题

1

帖子

62

积分

会员

Rank: 5Rank: 5

积分
62
发表于 2012-10-30 09:58:31 | 显示全部楼层 |阅读模式
闪念心情日记
在《启示录:打造用户喜爱的产品》一书中,作者对制作高保真的产品原型推崇备至,一再强调产品原型要尽早、反复地让目标用户试用。好处有很多:   
  • 迫使产品经理深入定义解决方案
  • 可以让真实的用户参与测试、验证产品创意
  • 可以直观地向团队展示产品的设计思路
既然做产品原型有这么多好处,当然值得好好专研。工欲善其事,必先利其器。合适的生产工具往往能让效率倍增。原型制作工具很多,但Axure无疑是其中最出色的。Axure上手比较简单,基于目录组织的原型文档,可以非常方便地输出网页文件和Word文档用于演示。当然,Axure里面最核心的是动态面板和变量。   
动态面板可以用于在页面不跳转的情况下实现交互效果,比如动态面板可以用于如下场景:   
  • 输入框输入格式之类的报错提醒,比如用户名/密码格式不符或过长等
  • 弹出页面/框(警告、提醒等)
  • 标签页切换
变量则多用来做些条件判断,比如(用处还有很多):   
  • 不同的账号登录后跳转的页面不同等
  • 复选框全选功能的实现(选中[全选]项自动勾选所有复选框选项)
还是不太理解?没关系,下面我结合实例讲解下如何使用动态面板和变量。   
一、Axure环境介绍(只介绍本范例中用到的面板)   

   

二、选取控件   
1. 在控件库中选取如下控件并拖拽至线框图工作区
   

1Text Panel:对应用户名文本(同时双击将控件上的文字改成用户名)   
1Text Field:对应用户名输入框   
1 Button :登录按钮   
1Dynamic Panel:(动态面板)对应报错说明  
  
注:如果添加的动态面板是蓝色的意味着面板可见,需设置为不可见,如下图所示选中控件并右键菜单中选择Edit Dynamic Panel →Sett Hidden  

  



2. 双击动态面板,进入某一面板状态(为便于识别建议给动态面板和面板状态命名),并在页面内添加 Text Panel,用于用户名为空时报错,如下图所示。  

三、在组件属性(Widget Properties)面板中设置组件的属性:  


1. 选中用户名输入框,并在Label一栏命名(比如取名为“用户名”)   
2. 选中动态面板组件,并在Label一栏命名(比如取名为“报错”)   
3. 给动态面板的面板属性命名(比如命名为“警告-用户名为空”)   
          

四、设置业务逻辑   

1. 选中Button并双击修改控件上的文字为“登录”   
2. 空间属性面板 中通过“Add Case”添加case(场景)   
3. 在弹出的Case Editor面板中单击“Add Condition”,添加Condition(条件)   
4. 在弹出的Condition Builder设置条件如下并点击OK确认   
  

5. 在Case Editor中选择“Set Panel State(s) to State(s)”,勾选右侧的复选框   
  
五、生成网页文件(单击菜单栏上的Generate→Prototype…,并选择用什么浏览器打开)   

  
  
六、检验效果(什么也不输入,单击登录,报错:用户名不能为空)   
   

说明:   

  • 用类似的方法可以实现密码为空的报错,但尤其要注意其内在逻辑,比如先检测用户名不能为空,用户名为空的警告信息和密码为空的警告信息不能同时出现。
  • 原来想用下面这个实例,但考虑到实现步骤比较复杂,容易绕晕,就用了个简单的案例来说明动态面板的用法(这两个实例源文件均提供下载)。
  • 本文的范例中没有介绍变量的用法,有兴趣的同学可以下载实例2学习
   



实例2   


变量使用说明:   

a) 用户名/密码为zhangsan/123456时,登录页面显示:zhangsan你好!   
b)当用户名/密码为lisi/123456时,登录页面显示:lisi你好!    
实例下载

实例源文件.zip

113.86 KB, 下载次数: 325

0

主题

4

帖子

12

积分

会员

Rank: 5Rank: 5

积分
12
发表于 2012-11-4 14:01:06 | 显示全部楼层
支持下。

0

主题

2

帖子

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2012-11-20 11:42:20 | 显示全部楼层
学习了,谢谢哈!~

0

主题

2

帖子

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2012-11-21 15:18:00 | 显示全部楼层
1# zchening


楼主你好,关于这个,有没有复杂一点的案例分享下?比如像百度的注册注册登录页面之类的?

0

主题

248

帖子

214

积分

会员

【Axure正规军】动版超人

Rank: 5Rank: 5

积分
214

资深会员

QQ
发表于 2012-11-21 16:55:13 | 显示全部楼层
教程写得真好,谢谢,收藏了
一直模仿  怎能越. ·``·`

0

主题

2

帖子

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2012-11-26 10:52:38 | 显示全部楼层
如何在输入密码的时候,让密码隐藏,而不是直接显示密码内容,如“123456”,应该显示为“******”这样的?

0

主题

204

帖子

639

积分

会员

Rank: 5Rank: 5

积分
639

实名认证

发表于 2012-12-7 10:26:38 | 显示全部楼层
学习了,谢谢哈!~

0

主题

3

帖子

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2013-4-14 15:11:55 | 显示全部楼层
感谢教程,很详实!

0

主题

1

帖子

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2014-3-14 11:39:02 | 显示全部楼层
感谢.................................

0

主题

4

帖子

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2016-8-1 13:11:23 | 显示全部楼层
为什么我看不了图片,你们都可以看得到吗

0

主题

2

帖子

120

积分

会员

Rank: 5Rank: 5

积分
120
发表于 2019-4-10 16:11:41 | 显示全部楼层
学习了,谢谢!
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区

GMT+8, 2019-9-16 22:02

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表