【Axure】新手教程之框架

时间:2022-08-31 09:41:08

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

【写在前面的话】

 

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

  我的设计如下:

【Axure】新手教程之框架

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

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

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

子页面

一、 动态面板之页面弹窗

  在页面载入时,弹出弹窗的需求如下:

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

  步骤如下:

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

 

  效果预览图:

【Axure】新手教程之框架

 

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

  需求如下:

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

 

  步骤如下:

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

 

  这样算基本实现功能了。