Axure8 基本操作记录

Axure8 基本操作记录axure8 零基础操作学习 axure8

大家好,欢迎来到IT知识分享网。

文章小结图片

Axure8操作.png

Axure8常用功能

选择/缩放

  1. 选择
    1. 包含选中:全部选中才有效(避免误操作,建议使用这个)
    2. 相交选中:相交即全选中
  2. 缩放
    1. 元件等比例缩放:shift + 四角拖动
    2. 页面缩放:
      1. 放大:cmd + 加号
      2. 缩小:cmd + 减号

置顶/置底

  1. 普通操作:选中元件=》双击右键=》顺序=》选择置顶/置底
  2. 快捷操作:选中元件=》菜单栏=》顶层/底层
    置顶/置底

组合/对齐/分布

  1. 组合:包含选中所有元素=》菜单栏组合/右键双击组合
    组合
  2. 对齐、分布:选中所有元素=》菜单栏进行对齐/分布–》可以实现间距相同、排列整齐的布局
    元件对齐/分布

预览/发布/共享

预览/发布/共享

  1. 预览:产品经理和项目组同事演示原型时使用
  2. 发布:产品经理将原型文件共享给项目组同事时候=使用
    1. 可用于发送简历作品;
    2. 发布功能中,可以设置预览选项:发布 → 预览选项 → 配置 → 标志;
      预览效果图

修改颜色

  1. 菜单栏可以修改元件填充颜色、线条颜色
    image.png

隐藏

  1. 点击元件 → 菜单栏隐藏;
    预览的时候就看不到效果图,在原型图上呈现黄色小灰点
    image.png
    image.png


页面/文件夹

  1. 左侧功能栏里调整页面
    image.png

栅格/辅助线

  1. 画布右键修改
    image.png

边框设置

  1. 元件的圆角、边框设置
    image.png

草图效果

  1. 类似手绘效果,简图
    原图
    草图效果

自动保存

  1. 建议随手按 ctrl + s
  2. 开启自动保存,有问题从临时文件版本中可恢复
    「文件」→ 「自动备份设置」
    image.png
    image.png



Axure常用元件

  1. 矩形的圆角设置:
    1. 拖动矩形元件左上方的黄色小三角;
    2. 在“检视 – 样式 – 圆角半径”中进行设置;
  2. 图片的导入:
    1. 原尺寸导入图片:当图片元件的四角为黄色的小正方形时,导入图片为原尺寸;
    2. 根据给定尺寸导入图片:当图片元件的四角为白色的小正方形时,导入的图片会根据给定尺寸进行压缩;
      image.png
  3. 动态面板
    1. 元件在axure内显示为透明,在预览的时候是不可见的
    2. 蓝色区域是动态面板内的可视区域
    3. 具体动态面板(eg:轮播效果)怎么做,在后面的案例讲解TODO
  4. 文本框
    1. 位置:「表单元件」 → 「文本框」;
    2. 注意,可以设置文本类型,以及边框的可见性、提示文字的隐藏触发;
    3. demo:简单的手机框 + 验证码输入;
      image.png
  5. 下拉框
    1. 可以批量设置选项;
      image.png
  6. 单选框/复选框:
    1. 如果要制作单选的效果,需要设置单选按钮组(选中全部的选项,右键,选择“设置单选按钮组”);
      image.png

Axure常用交互

  1. 鼠标悬停、鼠标按下、选中、禁用:
    1. 当我们需要给某个元件添加交互动作时,需要给元件命名;
    2. 选中:
      1. 要先设置选中的效果;
        image.png
      2. 再添加选中的交互事件;
        image.png
        选中效果

    3. 禁用:
      交互效果内选择了禁用,选中效果内就不选择了(等级更高)
    4. 页面载入时
    5. toggle效果
      1. 设置选中效果;
        image.png
      2. 设置交互 → 选中 → 值为toggle;
        image.png
        togle.gif

    6. 动态面板

    效果路径:检视 – 属性 – 形状 – 交互样式设置;

  2. 添加说明
    1. 位置:「检视」→「页面」→「说明」;
    2. 预览效果,元件右上方有蓝色文字图标,代表有说明文字;
    3. 有些公司要求说明写在元件说明内,有些写在元件旁边;

Axure元件库/母版

  1. 作用:极大提高原型制作效率
  2. 新建元件库:自己制作的原型,常用满意的元件可以保留,方便以后快捷使用;
    1. 刚编辑/导入的元件库,回到页面左边,刷新元件库即可继续使用
  3. 母版:可以复用,简单修改的东西(类似前端的组件封装)
    1. 创建模板
      image.png
    2. 修改目标:「选中模板」→ 右键 →「脱离模版」→ 继续编辑
      image.png
  4. 好用的元件库都是自己编辑的,适配度更高。eg:选中合适的做模板,下载使用的元件库等

Axure常见原型规范

  1. 在企业中制作原型时,只制作iOS端原型(安卓手机品牌过多,展示效果不同,不考虑);
  2. 产品经理在制作原型时,需要遵循的规范(移动端):
    1. 手机框大小:375*667px;
      1. 某些页面比较长,比如说淘宝首页,这个时候,可以忽略667的限制;
    2. 状态栏,高度20px;
    3. 导航栏,高度44px;
    4. 标签栏,高度49px;字体大小10,图标大小25*25;
    5. 一级按钮,高度40px;
    6. 推荐材料《iOS交互设计规范》;

Axure更多功能

页面流程图、泳道图

  1. 可以实现页面流程图(流程图不用精准匹配设计规范)
  2. 可以做泳道图。建议使用processon等工具实现,axure实现耗时间且没那么美观

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/129707.html

(0)
上一篇 2025-08-22 15:33
下一篇 2025-08-22 15:45

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信