Axure8 零基础操作入门

news2024/11/25 19:29:06

参考:黑马产品经理课程
视频资源:day1&day2,Axure部分

Axure8常用功能

选择/缩放

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

置顶/置底

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

组合/对齐/分布

  1. 组合:包含选中所有元素=》菜单栏组合/右键双击组合
    组合

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

预览/发布/共享

预览/发布/共享

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

修改颜色

  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. 当我们需要给某个元件添加交互动作时,需要给元件命名;
    3. 选中:
      1. 要先设置选中的效果;
      2. 再添加选中的交互事件;
    4. 禁用:
      交互效果内选择了禁用,选中效果内就不选择了(等级更高)
    5. 页面载入时
    6. toggle效果
      1. 设置选中效果;
      2. 设置交互 → 选中 → 值为toggle;
    7. 动态面板
  2. 添加说明
    1. 位置:「检视」→「页面」→「说明」;
    2. 预览效果,元件右上方有蓝色文字图标,代表有说明文字;
    3. 有些公司要求说明写在元件说明内,有些写在元件旁边;

Axure元件库/母版

  1. 作用:极大提高原型制作效率
  2. 新建元件库:自己制作的原型,常用满意的元件可以保留,方便以后快捷使用;
    1. 刚编辑/导入的元件库,回到页面左边,刷新元件库即可继续使用
  3. 母版:可以复用,简单修改的东西(类似前端的组件封装)
    1. 创建模板
    2. 修改目标:「选中模板」→ 右键 →「脱离模版」→ 继续编辑
  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实现耗时间且没那么美观

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/666061.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PHP开发工具22-PHP中安装和使用xdebug

文章目录 前言配置详解总结 前言 本文已收录于PHP全栈系列专栏:PHP快速入门与实战 作为一个程序员,千万不要说你没有用过debug工具,不然有点说不过去。xdebug是PHP语言一个强大的利器,用他可以做很多事情。 xdebug是PHP开发者常…

提升编程效率:你不能错过的18款VS Code扩展

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。 快来免费体验ChatGpt plus版本的,我们出的钱 体验地…

LTV-5341-ASEMI代理台湾光宝高速光耦LTV-5341

编辑:ll LTV-5341-ASEMI代理台湾光宝高速光耦LTV-5341 型号:LTV-155E 品牌:光宝 封装:LSOP-5 引脚数量:5 类型:光耦 特性:台湾光宝、IGBT驱动器、储能专用光耦\高速光耦 封装…

pnpm项目运行启动以及如何迁移到内网

1.迁移前的准备 首先看对node版本和pnpm版本的要求是什么,我的是自己电脑(windows系统)和内网电脑(windows系统)上的环境一致的 我的项目要求是 1.node版本 16.20.0 2.pnpm版本 8.6.2 需要先将node 和 pnpm 安装好相应…

今年前改BUG,下午就被通知在改进优化了

内卷可以说是 2023 年最火的一个词了。2022 年刚开始,在很多程序员网站看到很多 Java 程序员的 2023 年度总结都是:Java 越来越卷了(手动狗头),2023 年是被卷的一年。前有几百万毕业生虎视眈眈,后有在职人员…

slam十四讲 03 Eigen实践之三维空间刚体运动

目录 1 初始化 2 旋转空间中的向量 3 欧拉角 4 变换矩阵 5 四元素 完整程序 1 初始化 旋转的两种办法: (1)旋转矩阵:a Ra, a R^T a, 旋转矩阵的特性:是一个行列式为1的正交矩阵. 三维空间的旋转是3x3矩阵&am…

基于SpringBoot的校园请假管理系统

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取项目下载方式🍅 一、项目背景介绍: 校园请假信息管理系统…

php质量检查工具 phpmd的使用

PHPMD简介 团队在使用php-cs-fixer 代码格式自动式化工具之后,在格式,代码错误等方面带来了很大便利,不过在命名,代码质量,代码复杂度,缺少一些检查,在网上搜索后,发现PHPMD 一个PHP代码静态分析工具. 安装 官方网站 github 你可以直接到下载页面封装好的 phar 包&#xff1…

云原生数据库受到青睐,亚马逊云科技数据库提供多项功能

小小的改变,标志一个新时代的全面开启,一个数据库的云原生时代。前不久,Gartner公布了一组数据,引起了不小的讨论度。在2022年全球数据库管理系统的市场份额排名中,作为纯云厂商的亚马逊云科技,超越了老牌传…

一种基于目标的可解释的自动驾驶预测和规划策略

摘要: 本文介绍了一种通过理性逆向规划进行目标识别和多模态轨迹预测的方法。通过将目标识别与MCTS 计划相结合,为自车生成优化计划。 最近炒得比较火的影子模式实际就是在通过数据收集的方式不断模拟自动驾驶系统按照人类驾驶习惯实现人之间的交互过程…

QML 快速上手3 - QuickControl2

目录 QuickControl2简介风格设置control 配置文件图像浏览器案例component 组件报错问题StackViewSwipeView QuickControl2 简介 quickcontrol 用于快速构建风格化的用户界面 它包括了以下几个预制的组件风格 Default QT 默认风格Universal windows 桌面风格Material 谷歌推…

【FPGA】译码器、计数器及数码管显示

写在前面 万万没想到最后去了FPGA岗位,但是FPGA只在研一学过,确实忘得差不多了,因此从头把东西过亿边 这是某本书上的第一章节,感觉写的还是挺不错的,大概看了一下让我回想起很多知识,个人感觉比较适合学习…

《effective java》中关于解决构造函数/方法签名包含大量参数的解决方法

针对构造方法 重叠构造器模式 重叠构造器模式是一种编程中的反模式,指的是一个类有多个构造函数,每个构造函数都有不同数量的参数,从而可以根据不同的情况创建对象。这种方式会导致代码可读性和可维护性降低,因为构造函数过多&…

echarts柱状图数据太多设置滚动条

当你的项目中因数据量太大,导致柱状图数据全部叠在一起不便于看的时候,你们是怎么处理的? 大部分同学可能第一想法就是裁剪一部分数据,仅展示页面最大限度能够展示的数据,这确实是一个好办法,简单快速。但…

【分布式】分布式存储架构

文章目录 一、集中存储结构二、分布式存储2.1 、分布式存储的兴起2.2 、分布式存储的重要性2.3 、分布式存储的种类和比较 三、分布式理论浅析3.1 、一致性和可用性3.2 、数据分布哈希分布( Swift )顺序分布( Bigtable )CRUSH 分布…

模版方法模式在 JDK 及 spring 源码中的引用

模版方法模式 模板方法模式是一种行为设计模式, 它在超类中定义了一个算法的框架, 允许子类在不修改结构的情况下重写算法的特定步骤。 更多有关于模版方法模式的介绍详见:https://refactoringguru.cn/design-patterns/template-method 模版…

【4】tf实现神经网络模型

1 M-P神经元与神经网络前向传输 1.1 训练单个神经元 一个含有两个输入的神经元,指定一个输入x1x21,期望y能输出0.3。要求不断的输入x1x21,然后不断的训练权重w与偏置b值,训练一万次后,再次输入x1与x2输出y的值是否为0.3 # 导入TensorFlow库…

Linux 进程的睡眠和唤醒详解

概要 在Linux中,仅等待CPU时间的进程称为就绪进程,它们被放置在一个运行队列中,一个就绪进程的状 态标志位为 TASK_RUNNING。一旦一个运行中的进程时间片用完, Linux 内核的调度器会剥夺这个进程对CPU的控制权,并且从…

QGIS实现tiff影像栅格数据切片教程

实现栅格切片的方式有很多种,geoserver可以,qgis可以。自己写代码也可以,方式非常多。这篇文章介绍一下如何使用QGIS实现栅格切片。 首先我们要去下载一个qgis软件。下载地址如下: Welcome to the QGIS project! 随后我们打开软件,然后把要切片的栅格数据(tiff文件或者…

【Python 随练】逆序打印数字

题目: 给一个不多于 5 位的正整数,要求: 一、求它是几位数, 二、逆序打印出各位数字。 简介: 在本篇博客中,我们将解决一个关于正整数的问题。根据题目要求,我们需要判断给定的正整数是几位数…