【Axure】新手教程之框架

　　主要是利用Axure来进行原型设计，由于是初次使用，是一个模拟和熟悉的过程。

【写在前面的话】

 

　　首先对所需要设计的原型进行业务逻辑的设计。

　　我的设计如下：

　　分不同文件夹进行设定，其实类似思维导图的方式。将自己要自己的页面进行设置。

　　智慧银行中，对所需要进行的需求进行设定和要求，然后进行框架的设计。即设定  控件内联框架——主要目的是在于模拟手机页面，将页面框架内联进入手机。

1. 　　登录，设定登录界面及要求
2. 　　主界面，设定主要页面，及功能跳转
3. 　　母版：将常用的统一改变的页面或者控件设定为母版，便于一致性改动。
4.   子页面：用来跳转的页面，实现相应的功能

子页面

一、 动态面板之页面弹窗

　　在页面载入时，弹出弹窗的需求如下：

• 　 页面载入时，弹出弹窗
•   弹窗出现时，只能对弹窗进行操作。
•   点击弹窗，实现页面跳转到相应页面
•   点击关闭按钮时，弹窗消失

　　步骤如下：

1. 　　插入动态面板，设定好尺寸，然后在动态面板中拖入图片控件和实现 关闭  这个功能图标
2.    点击右边的 【 交互 】 功能区 ，实现 【动作】：载入时   【状态】：显示/隐藏   选择当前原件，设定为显示
3.    然后设定 关闭 图标的功能，【交互】，实现【动作】：单击时  【状态】：显示/隐藏  选择当前 动态面板，设定为隐藏。同时点击更多选项，选择 灯箱效果。——可以使得弹窗出现时，背景变成灰色。
4.   设定 动态面板的 交互动作，跳转。 【交互】，【动作】：单击时  【状态】：打开链接   选择相应的跳转链接，形成功能交互
5.   如果需要将弹窗设定为，当前只能对弹窗进行动作时，可以设定功能禁用，等待弹窗关闭后，功能启用。

 

　　效果预览图：

 

二、控件文字的隐藏和显示

　　需求如下：

•   文字框初始状态可见，按钮文字：选择隐藏
•   点击按钮，实现文字框的隐藏or变成*******,按钮文字变成：选择可见
•   再次点击按钮，实现文字框的可见，*****or无 变成 文字框内容，按钮文字同时变成：选择隐藏。

 

　　步骤如下：

1. 　　拖入一个文字框，一个按钮，按钮文字为：选择隐藏
2.   设定情形1——如果按钮这个控件的文本为：选择隐藏，【交互】功能区  【动作】：单击时  【状态】：显示/隐藏   选择文字框隐藏，并且将【设置文本】 改成 ：选择可见
3.   设定情形2——如果按钮这个控件的文本为：选择可见，【交互】功能区   【动作】：单击时  【状态】：显示/隐藏  选择文字框显现，并且将【设置文本】 改成：选择隐藏
4. 效果预览图如下：                    
5. 
6. 最终的对比如下：        

 

　　这样算基本实现功能了。