Axure与原型图

  1. AXURE在工作中的作用

    1、做低保真原型图

    在设计图之前做,方便后期的设计,先把排版和功能体现出来,以及简单页面跳转交互。

    2、高保真原型图

    开发之前做(设计图已完成),实现上线后的效果,用来与客户、领导、开发工程师交流沟通使用(高保真原型图主要表现设计好的页面之间的跳转等交互)

    低保真原型图在出设计稿之前做,高保真原型图在出设计稿之后做。

    Axure

    软件界面介绍

    站点地图面板:

    管理项目中所有页面。

    新增页面:右击点新增或ctrl+回车

    重命名页面:单击页面名称或选择好页面按F2

    改变页面的上下层级:点面板上的上下箭头或者按CTRL+上下键

    元件面板

    :绘制图形和文字

    页面管理面板

  2. 设置页面的背景色
  3. 让画的内容在浏览器中居中

    母版面板:设置公共页面,相当于模版,

    新增母版:

    方法一:

    点击母版面板上的新增母版按钮

    方法二:

    右击任意元件,点击转换为母版

    把母版新增到页面中:

    右击母版,点新增母版到页面,把需要增加的页面勾上确定即可

    删除母版:必须要任意页面中都没有使用该母版才可删除

    元件交互和注释面板

    :做元件交互用(比如页面跳转等等)

    元件属性和样式面板

    :调节元件属性样式(颜色,描边等等)

    元件管理面板:管理元件的层级,相当于PS中图层面板,管理元件的上下层级的

  4. 元件要重命名

  5. 勾上所有元件

    收缩面板:

    展开面板单击面板标题那一栏可以收缩或展开面板。

    关闭打开面板

    : 视图——面板------重置视图

    三 元件的使用

    主要使用线框图——公共

    元件的使用方法:拖拽进画布

  6. 复制元件

    按住ctrl拖拽元件 或者 ctrl+C ctrl+V

  7. 旋转元件

    按住ctrl拖拽元件的角 或者 在元件属性和样式面板中精确控制旋转角度

  8. 改变矩形元件的圆角

    拖拽元件左上角的黄色小三角 或者 在元件属性和样式面板中精确控制

    拖拽元件右上角的灰色圆圈改变元件的形状

  9. 对齐和分布

  10. 对齐需要两个或两个以上元件,分布是三个或三个以上
  11. 先选择了哪个元件,就以那个元件为参照物进行对齐或分布
  12. 元件的选择

    大元件覆盖了小元件怎么选择小元件

    方法一:在元件管理面板中选择

    方法二:用包含模式将小元件包含

    方法三:点一下大元件,停顿一下,再点击一下(必须是在小元件的位置上)

  13. 图片元件

    双击图片元件可以替换电脑中的图片,也可以直接把图片拖入到画布中。

    出现:是否修改元件尺寸为图片尺寸,一般点是

    是否优化图片,一般点否(点是GIF就不动了)

    操作窗口大小,ctrl+ + ctrl+ - 或 ctrl + 滚轮 百分百大小 ctrl+0

    7 其它形状

    点击元件右上角的小圆点,可以展开形状库选择形状

    8 重命名元件

    在元件管理面板中对元件名称单击重命名

    四 发布

    预览快捷键(F5)

    发布前准备:

    在页面样式中把页面对齐选择为居中,这样能让原型图在浏览器中间显示

    发布(生成本地HTML文件):F8

    在存放路径中要自己建一个文件夹

    屏蔽插件安装页面

    1. 找到插件页面的名称(chrome.html)
    2. 找到start.html,用记事本打开,Ctrl+f打开查找面板,输入(chrome.html)
    3. 查找下一个后找到需要更改的代码,把if里面的语句改成1==2

  14. 按钮的鼠标悬停鼠标点击交互

  15. 画好一个元件
  16. 选择元件,找到元件属性和样式面板中的属性面板

  17. 点击鼠标悬停时,展开交互面板,勾上填充颜色并设置颜色,鼠标按下时一样设置

  18. 六 加外部链接和内部链接

    1、加外部链接

  19. 选择好元件,双击鼠标单击时,弹出用例编辑器
  20. 点击打开链接
  21. 点击链接到外部URL或文件,输入外部网址,确定即可
  22. 加内部链接

    七 显示隐藏效果

  23. 选择好要隐藏的元件,勾上属性栏中的隐藏元件
  24. 选择好触发事件的元件
  25. 双击鼠标移入时,打开用例编辑器,点击显示/隐藏,点击勾选隐藏的元件,可见性显示,确定
  26. 双击鼠标移出时,打开用例编辑器,点击显示/隐藏,点击勾选隐藏的元件,可见性隐藏,确定

    八 图片热区

    图片热区主要做交互使用,在浏览器中不可见

    九 动态面板

  27. 动态面板在浏览器中看不见
  28. 相当于一个容器,可以放各种元件
  29. 拖入的动态面板元件,在状态中有蓝色虚线框,框内内容显示,框外内容隐藏
  30. 右击转换的动态面板,在状态中没有蓝色虚线框
  31. 动态面板主要用来做交互
    1. 动态面板一定要重命名

    十 播放电影

  32. 播放网络影片

  33. 画一个内部框架,隐藏边框和滚动条
  34. 去优酷中找到影片的flash地址(点击分享按钮展开flash地址),并复制
  35. 双击内部内部框架,粘贴到外部URL或文件下的输入框内,点确定

     

  36. 播放本地影片

  37. 发布本地html文件,将本地影片放入项目文件夹中,复制这个电影的名称及后缀名
  38. 找到播放按钮,点开鼠标单击时,在内部框架打开链接,将复制的名称粘贴到外部URL或文件下的输入框内
  39. 再次发布本地html文件

     

     

     

     

     


     

yang, xiaoyun

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: