Axure快速入门（02） - 入门例子（登录案例）

 

文章目录

• • 1. 引言
  • 2. 登录案例
  • • 2.1 步骤一：新建项目
    • 2.2 步骤二：新建模块
    • 2.3 步骤三：新建页面
    • 2.4 步骤四：登录页面设计
    • 2.5 步骤五：首页设计
    • 2.6 步骤六：添加登录动作
    • 2.7 步骤七：添加退出动作
    • 2.8 步骤八：演示效果
  • 3. 总结

 

1. 引言

在上一篇博客《Axure快速入门（01） - 面板介绍》，主要讲解了Axure面板的介绍，但是没有讲如何进行操作，本文以“登录”为案例讲解。

本文的登录案例源文件已上传到Github，有兴趣的同学可以下载来看看： https://github.com/ylw-github/Axure-Demo

2. 登录案例

2.1 步骤一：新建项目

打开Axure后，在页面导航栏会默认帮我们创建一个page1页面，如下图：

我们可以把它删除掉，然后新建项目（添加文件夹），名称为 “996管理系统”：

第一步	第二步

2.2 步骤二：新建模块

操作同上，分别添加“登录”、"首页"两个模块：

把"登录"和"首页"两个模块拖动进996管理系统:

2.3 步骤三：新建页面

我们需要新建"登录页面"，这个时候，点击“登录文件夹”，然后选择“添加子页面”，并命名为“登录页”：

步骤一	步骤二

同样的操作，在“首页文件夹”新增“首页页面”：

2.4 步骤四：登录页面设计

到了这一步，我们可以进行原型的绘制了。

首先，双击选中“登录页”，可以看到登录页的编辑区域：

我们需要拖动元件进来编辑，因此在元件库里，先选择“全部元件库”，拖动文本框控件：

双击文本框，并输入提示：

元件库选择按钮，并拖入页面编辑区域：

2.5 步骤五：首页设计

相同的操作，双击首页，拖入控件，如下：

2.6 步骤六：添加登录动作

我们希望的是，点击“登录”，会跳转到首页，那么怎么把“登录按钮”跟首页关联起来呢？操作如下：

首先选中登录按钮，在右侧新增交互：

点击新增交互后，要选择事件，这里选择“单击”：

选择打开链接：

然后再选择首页：

这样就完成了点击“登录按钮”后跳转到“首页”的事件操作了。

2.7 步骤七：添加退出动作

流程同上，选中首页的“退出按钮”，新增“单击”链接跳转交互，会发现，添加了事件的按钮都会有个“闪电”的标志：

2.8 步骤八：演示效果

直接点击工具栏的“预览按钮”，会自动跳转到浏览器：

点击登录按钮演示流程如下：

点击登录	跳转到首页

点击退出，会自动跳转到登录页。

好了，案例到这里讲解完毕！

3. 总结

本文的登录案例源文件已上传到Github，有兴趣的同学可以下载来看看：

• https://github.com/ylw-github/Axure-Demo