Axure毋庸置疑是当今交互设计师的必备工具之一,通过前期的原型设计能够为产品后期的开发打下良好的基础。在做一个产品之前往往先需要做的就是一个Login界面,用户对产品的一切操作都是从这里开始的。
当然今天我们着重讲的会是如何灵活运用Axrue的交互事件进行模拟登录。将会撇开如何搭建上图原型的问题。
1、首先我们当然是需要用Axure的组件画出第一副图所示的一个登录界面,我们将会用到如下所示的一些组件去架构。(ps:着重点在输入组件、按钮组件和动态面板组件。)
2、在添加事件前我们再看一下“用户名”这个输入组件的组成由哪些。如下图所示有一个文本组件、输入框组件和一个动态面板。(当然我们需要将动态面板内的内容设置为隐藏)
3、然后我们选中“请输入用户名”输入框。为这个输入框添加交互事件。当然选中后我们会发现“注解和交互”功能会发生变化,会多出四个功能点。对应功能点的解释如下。
4、我们将要添加的交互事件如下图所示主要是集中在鼠标焦点在组件上和鼠标焦点不在组件上。为什么呢?主要是因为输入框组件在一开始会显示“请输入用户名”的文本。当鼠标点击输入框后输入框内会变为空白等待用户输入。
5、我们双击”Onfocus”为用户名输入框组件添加交互事件。主要是为这个组件添加两个事件。如下图所示。下面的操作用逻辑语言描述就是:输入框组件默认状态下的内容显示为“请输入用户名”。当鼠标点击输入框组件后为空白状态让用户输入文本。
6、我们双击”Onlostfocus”为用户名输入框组件添加交互事件。主要是为这个组件添加两个事件。如下图所示。下面的操作用逻辑语言描述就是:输入框组件默认状态下的内容显示为“空白”,当鼠标点击离开输入框组件后为“请输入用户名”。
7、这样我们就完成了对用户名组件框的一个交互事件的设置。密码的交互事件设置重复以上的步骤就可以。当然“请输入用户名”应该改为“请输入密码”。
8、接下来我们为登陆按钮添加交互事件。主要有两个方面:一个是用户名和密码输入正确情况下的一个反馈。一个是用户名和密码输入正确情况下的反馈。鼠标的交互事件只有一种方式:点击触发。
9、我们双击”Onclick”为登陆按钮组件添加交互事件。添加一个条件,就是当“用户名输入框”和“密码输入框”的组件中的文本等于值”admin”的时候。点击登陆按钮后当前窗口会跳转至welcom页面。如下所示。
10、我们还得双击”Onclick”为登陆按钮组件添加交互事件,主要是如果密码或用户名输入错误的情况下的一种交互形式。添加一个条件,当“用户名输入框”和“密码输入框”的组件中的文本等于不等于值”admin”的时候。点击登陆按钮后会显示错误提示。(错误提示主要是显示动态面板。即最开始阶段隐藏过的动态面板)
11、这样我们就完成了一个登陆界面的原型设计。点击F5开始生成查看下吧!