Axure的富交互应用实例

 

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://lovelyrosa.blogbus.com/logs/23839905.html

    最近在学习Axure，越来越觉得这个软件很好很方便，交互设计师可以用它快速开发出流程图和原型图。尤其是Axure的富交互功能非常强大，用它生成的 HTML文件具备了所有的UI演示功能，可以演示鼠标响应动作，页面关联效果，大部分的处理响应。由于axure上手很快，熟悉office操作界面的基 本能掌握它的主要功能，所以我想通过一个实例来重点介绍其在富交互功能中的应用，以便帮助大家快速掌握它的核心功能。它的详细教程可以登陆axure的官 网：http://www.axure.com/expert.aspx，在这里就不一一累述啦。好了废话不多说，请跟我一起来试做下面的实例。
    先看看轻侯出的一道考题：
     建立一个登录的页面，包括用户名和密码域，要求：

1. 密码域输入的时候为***
2. 只有当用户输入名字xiaoxiao，密码hello123的时候，系统才允许通过，否则会在本页提示出错信息。
3. 按钮提交的时候，按钮文案变为“等待中”，在1秒钟之后，才变为成功页面。
4. 仔细斟酌提示和出错的文案。

    在login页面中先建立一个登陆面板，使用到的组件如下，并给相关组件依次命名为namefield，codefield，button。

 

     另外在sucess页面建立注册成功面板。

   先实现功能1。选择密码输入框“codefield”，右键选中“mask ”这样就给输入框增加了遮罩面板，屏蔽了要显示的信息。

   再实现功能2。选择登陆按钮，双击右侧interaction动作属性栏“on click”或选择“On click”>“Add case”弹出动作列表，点击“Add conditions”编辑事件。

 

PS：事件里的共有6个属性很强大，这里介绍一下每个属性的用途，供大家举一反三。

• Text on widget：Text field或Text area中输入的文字
• Check state of：复选框（Checkbox）或单选框(Radio button)的选择状态
• Selected option of：已选的Drop list或List box中一项
• Value of a Variable：变量值
• Length of a Widget value：变量域长度
• Length of a Variable value：组件属性的长度

     我们可以点击每个事件后面的添加和删除定义多个不同的事件，另外“satisfy”属性用来判断不同事件之间的关系。“all”表示同时满足所有的事件，相当于“and”；“any”表示只需满足其中一种事件状态就可以了，相当于“or”。

    定义好 事件确认，选择动作列表中的“Open link in current window”，选中链接页面“sucess”双击，我们就定义好了功能2。

 

      现在实现功能3。选中按钮>"edit case">勾选“wait time（ms），注意这里的时间设置1000，因为单位是毫秒。

      在实现功能4。这里的提示框后面文案我分成了两种情况：

• 当输入用户名正确显示xiaoxiao，显示“用户名正确”
• 用户名为xiaoxiao，密码输入不正确。显示“密码不匹配”

选择组件“dynamic panel”，拖动到信息面板中，命名info。双击弹出状态编辑栏。可以进行状态添加，状态名修改等操作，我先后添加“name info”和“password info"两个状态为后面的动作切换做准备。选中“name info”点击“edit state”进入编辑面板，在虚线框内输入相关信息，其他状态也是相同操作。

 回到“login”面板，选中“dynamic panel“右键>"edit dynamic panel">set hidden这样面板就隐藏了。

 

分别为用户名输入框和登陆按钮，为它们添加动作。

 

    好了，点按F5就可以看到渲染后的效果了。