Axure动态面板的使用
在《启示录：打造用户喜爱的产品》一书中，作者对制作高保真的产品原型推崇备至，一再强调产品原型要尽早、反复地让目标用户试用。好处有很多：[*]迫使产品经理深入定义解决方案[*]可以让真实的用户参与测试、验证产品创意[*]可以直观地向团队展示产品的设计思路既然做产品原型有这么多好处，当然值得好好专研。工欲善其事，必先利其器。合适的生产工具往往能让效率倍增。原型制作工具很多，但Axure无疑是其中最出色的。Axure上手比较简单，基于目录组织的原型文档，可以非常方便地输出网页文件和Word文档用于演示。当然，Axure里面最核心的是动态面板和变量。
动态面板可以用于在页面不跳转的情况下实现交互效果，比如动态面板可以用于如下场景：
[*]输入框输入格式之类的报错提醒，比如用户名/密码格式不符或过长等[*]弹出页面/框（警告、提醒等）[*]标签页切换变量则多用来做些条件判断，比如（用处还有很多）：
[*]不同的账号登录后跳转的页面不同等[*]复选框全选功能的实现（选中[全选]项自动勾选所有复选框选项） 还是不太理解？没关系，下面我结合实例讲解下如何使用动态面板和变量。
一、Axure环境介绍（只介绍本范例中用到的面板）
http://blog.donews.com/zchening/files/2012/10/1.png
二、选取控件
1. 在控件库中选取如下控件并拖拽至线框图工作区
1个Text Panel：对应用户名文本（同时双击将控件上的文字改成用户名）
1个Text Field：对应用户名输入框
1个 Button ：登录按钮
1个Dynamic Panel：（动态面板）对应报错说明
http://blog.donews.com/zchening/files/2012/10/2.png
注：如果添加的动态面板是蓝色的意味着面板可见，需设置为不可见，如下图所示选中控件并右键菜单中选择Edit Dynamic Panel →Sett Hidden
http://blog.donews.com/zchening/files/2012/10/3.png
2. 双击动态面板，进入某一面板状态（为便于识别建议给动态面板和面板状态命名），并在页面内添加 Text Panel，用于用户名为空时报错，如下图所示。
http://blog.donews.com/zchening/files/2012/10/3-1.png
三、在组件属性（Widget Properties）面板中设置组件的属性：
1. 选中用户名输入框，并在Label一栏命名（比如取名为“用户名”）
2. 选中动态面板组件，并在Label一栏命名（比如取名为“报错”）
3. 给动态面板的面板属性命名（比如命名为“警告-用户名为空”）
http://blog.donews.com/zchening/files/2012/10/4.png http://blog.donews.com/zchening/files/2012/10/5.png
四、设置业务逻辑
1. 选中Button并双击修改控件上的文字为“登录”
2. 空间属性面板 中通过“Add Case”添加case（场景）
3. 在弹出的Case Editor面板中单击“Add Condition”，添加Condition（条件）
4. 在弹出的Condition Builder设置条件如下并点击OK确认
http://blog.donews.com/zchening/files/2012/10/6.png
5. 在Case Editor中选择“Set Panel State(s) to State(s)”，勾选右侧的复选框
http://blog.donews.com/zchening/files/2012/10/7.png
五、生成网页文件（单击菜单栏上的Generate→Prototype…，并选择用什么浏览器打开）
http://blog.donews.com/zchening/files/2012/10/8.png
http://blog.donews.com/zchening/files/2012/10/9.png
六、检验效果（什么也不输入，单击登录，报错：用户名不能为空）
http://blog.donews.com/zchening/files/2012/10/2104.jpg
说明：
[*]用类似的方法可以实现密码为空的报错，但尤其要注意其内在逻辑，比如先检测用户名不能为空，用户名为空的警告信息和密码为空的警告信息不能同时出现。[*]原来想用下面这个实例，但考虑到实现步骤比较复杂，容易绕晕，就用了个简单的案例来说明动态面板的用法（这两个实例源文件均提供下载）。[*]本文的范例中没有介绍变量的用法，有兴趣的同学可以下载实例2学习http://blog.donews.com/zchening/files/2012/10/11.png
实例2
变量使用说明：
a) 用户名/密码为zhangsan/123456时，登录页面显示：zhangsan你好！
b)当用户名/密码为lisi/123456时，登录页面显示：lisi你好！
实例下载 支持下。 学习了，谢谢哈！~ 1# zchening
楼主你好，关于这个，有没有复杂一点的案例分享下？比如像百度的注册注册登录页面之类的？ 教程写得真好，谢谢，收藏了 如何在输入密码的时候，让密码隐藏，而不是直接显示密码内容，如“123456”，应该显示为“******”这样的？ 学习了，谢谢哈！~ 感谢教程，很详实！ 感谢................................. 为什么我看不了图片，你们都可以看得到吗 学习了，谢谢！
页:
[1]