Axure RP9原型设计工具使用记录:基础操作

2024-02-05 02:12

本文主要是介绍Axure RP9原型设计工具使用记录:基础操作,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Axure RP9使用记录一

  • 📚第一章 前言
    • 📗背景
    • 📗目的
  • 📚第二章 基础介绍及操作
    • 📗页面功能总览
    • 📗基础操作
      • 📕设置样式
      • 📕设置交互
      • 📕设置组合
      • 📕设置动态面板
        • 📘属性
  • 📚第三章 实际应用及问题记录

📚第一章 前言

📗背景

在之前的ETL工具调研专栏,记录了很多ETL工具调研过程,确定技术选型之后,也就是最近两周,一直在使用Axure RP9画原型,原型也结束了,今天主要复盘下,记录一下画原型过程中元件的基本使用和一些问题

📗目的

为了避免在未来还需要进行原型绘制时出现遗忘,故此做个小笔记,以备不时之需(各位看官如果想系统的学习Axure RP9,可以去视频网站找些教程视频,博主就是这么干的,最终完成了数据集成ETL原型设计工作)。

📚第二章 基础介绍及操作

📗页面功能总览

在这里插入图片描述

📗基础操作

📕设置样式

以矩形为例:

  • 拖拽矩形1和矩形3
  • 修改矩形1的样式,可以变成矩形3
  • 单击选中元件,双击进入元件编辑,可以输入文字
  • 双击选中文字,可以设置字体、大小等
  • 单击选中元件,点击交互,选则下面的交互样式,可以设置鼠标悬停样式
    在这里插入图片描述
    进行修改样式等操作时,看不到类似确定的按钮,说明不需要点击确定,一般需要点击确定完成的按钮都很明显,没有看到说明不需要,改完即生效,如果不放心可以点击一下页面空白处

📕设置交互

以常见的点击新增按钮,弹出窗口,点击页面空白,关闭窗口为例:

  • 拖拽按钮到页面(几个按钮就是样式不一样,针对不场景,和上面矩形一样)
  • 拖拽一个矩形作为点击新增时的弹出窗口
  • 弹出窗口设置好之后,右键设置为隐藏(因为该窗口是通过点击新增弹出来的,所以一开始是隐藏状态)
  • 单击选中新增按钮,选择交互,选择单击事件,找到显示隐藏选项,设置显示弹出窗口
  • 单击页面(就是白色底板),选择交互,选择单击事件,找到显示隐藏选项,设置隐藏弹出窗口
    在这里插入图片描述

📕设置组合

针对上面的弹出窗口,真正使用的情况下,不会那么简单,一般需要填写各种值、下拉框等,这个时候就需要把这些内容作为一个组合,即整体,再进行显示、隐藏等操作

  • 拖拽矩形、文本框,绘制窗口内容
    在这里插入图片描述
  • CTRL+单击选中多个元件(此时按住CTRL不松开,按住鼠标拖动,可实现复制效果),点击组合,输入组合名称
    在这里插入图片描述
    在这里插入图片描述
  • 按照弹出窗口方式设置显示隐藏操作
  • 此时发现点击弹出框进行输入时,弹出窗口直接隐藏掉了,具体原因不清楚,但是可以给弹出窗口增加一个单击事件,解决该问题
    在这里插入图片描述
    不能按空格和回车,不然还是会隐藏
    在这里插入图片描述
    下图中的页面排列,可以指定页面内容排列方式 居中还是靠左
    在这里插入图片描述

📕设置动态面板

绘制原型的时候,一些复杂的联动效果,都是通过动态面板实现,有些可能中继器更简单点,只不过暂未涉猎,这里只记录自己实际用到的
在这里插入图片描述
这里以点击不同按钮弹出不同内容为例,点击动画名称弹出相应的动漫人物:

  • 创建好不同按钮,拖入图片元件,双击选择对应的图片,右键设置为动态面板
    在这里插入图片描述
    在这里插入图片描述
  • 双击进入动态面板,设置不同状态(即不同内容),可以点击复制原有状态或者新建状态
    在这里插入图片描述
    在这里插入图片描述
  • 给每个按钮设置交互事件,绑定不同的动态面板状态
    在这里插入图片描述
    为了方便选择,先给状态重命名一下,慢速点击两下,进入编辑状态
    在这里插入图片描述
    设置好一个交互事件,可以直接Ctrl+C复制,选中要粘贴的元件Ctrl+V粘贴,针对相同操作可以节约时间,我们这里对应不同的状态,所以还需要重新编辑选择下状态
    在这里插入图片描述
  • 选择对应的状态,预览
    在这里插入图片描述
📘属性
  • 上图预览,图片超大,是因为这里设置了自适应内容,也可以固定面板大小,通过滚动条查看内容
    在这里插入图片描述
  • 选择按需滚动,取消自适应,可以看到出现了滚动条
    在这里插入图片描述
    在这里插入图片描述

📚第三章 实际应用及问题记录

今天是2024-02-03,农历腊月二十四,周六,公司规定调休上班,梳理了一下最近工作用到的工具,也是为了后续更好的服务公司,明天是国家规定调休上班,明天再梳理下真正画原型中遇到的一些比较有难度的设计实现和问题吧!


已更新,详见:Axure RP9原型设计工具使用记录:实际应用及问题记录

这篇关于Axure RP9原型设计工具使用记录:基础操作的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/679476

相关文章

Java使用Javassist动态生成HelloWorld类

《Java使用Javassist动态生成HelloWorld类》Javassist是一个非常强大的字节码操作和定义库,它允许开发者在运行时创建新的类或者修改现有的类,本文将简单介绍如何使用Javass... 目录1. Javassist简介2. 环境准备3. 动态生成HelloWorld类3.1 创建CtC

使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解

《使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解》本文详细介绍了如何使用Python通过ncmdump工具批量将.ncm音频转换为.mp3的步骤,包括安装、配置ffmpeg环... 目录1. 前言2. 安装 ncmdump3. 实现 .ncm 转 .mp34. 执行过程5. 执行结

Java使用jar命令配置服务器端口的完整指南

《Java使用jar命令配置服务器端口的完整指南》本文将详细介绍如何使用java-jar命令启动应用,并重点讲解如何配置服务器端口,同时提供一个实用的Web工具来简化这一过程,希望对大家有所帮助... 目录1. Java Jar文件简介1.1 什么是Jar文件1.2 创建可执行Jar文件2. 使用java

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Java实现在Word文档中添加文本水印和图片水印的操作指南

《Java实现在Word文档中添加文本水印和图片水印的操作指南》在当今数字时代,文档的自动化处理与安全防护变得尤为重要,无论是为了保护版权、推广品牌,还是为了在文档中加入特定的标识,为Word文档添加... 目录引言Spire.Doc for Java:高效Word文档处理的利器代码实战:使用Java为Wo

Java中的抽象类与abstract 关键字使用详解

《Java中的抽象类与abstract关键字使用详解》:本文主要介绍Java中的抽象类与abstract关键字使用详解,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、抽象类的概念二、使用 abstract2.1 修饰类 => 抽象类2.2 修饰方法 => 抽象方法,没有

MyBatis ParameterHandler的具体使用

《MyBatisParameterHandler的具体使用》本文主要介绍了MyBatisParameterHandler的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录一、概述二、源码1 关键属性2.setParameters3.TypeHandler1.TypeHa

Spring 中的切面与事务结合使用完整示例

《Spring中的切面与事务结合使用完整示例》本文给大家介绍Spring中的切面与事务结合使用完整示例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录 一、前置知识:Spring AOP 与 事务的关系 事务本质上就是一个“切面”二、核心组件三、完

使用docker搭建嵌入式Linux开发环境

《使用docker搭建嵌入式Linux开发环境》本文主要介绍了使用docker搭建嵌入式Linux开发环境,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录1、前言2、安装docker3、编写容器管理脚本4、创建容器1、前言在日常开发全志、rk等不同

使用Python实现Word文档的自动化对比方案

《使用Python实现Word文档的自动化对比方案》我们经常需要比较两个Word文档的版本差异,无论是合同修订、论文修改还是代码文档更新,人工比对不仅效率低下,还容易遗漏关键改动,下面通过一个实际案例... 目录引言一、使用python-docx库解析文档结构二、使用difflib进行差异比对三、高级对比方