在《启示录:打造用户喜爱的产品》一书中,作者对制作高保真的产品原型推崇备至,一再强调产品原型要尽早、反复地让目标用户试用。好处有很多:
动态面板可以用于在页面不跳转的情况下实现交互效果,比如动态面板可以用于如下场景:
一、Axure环境介绍(只介绍本范例中用到的面板) 二、选取控件 1. 在控件库中选取如下控件并拖拽至线框图工作区 1个Text Panel:对应用户名文本(同时双击将控件上的文字改成用户名) 1个Text Field:对应用户名输入框 1个 Button :登录按钮 1个Dynamic 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 变量使用说明: a) 用户名/密码为zhangsan/123456时,登录页面显示:zhangsan你好! b)当用户名/密码为lisi/123456时,登录页面显示:lisi你好! 实例下载 |
欢迎光临 爱评测-移动互联网评测 (http://www.aipingce.com/) | Powered by Discuz! X3.2 |