工具篇之Axure RP 10的使用

引言

最近在学习原型图,针对画原型图的工具,反复对比墨刀、Axurexiaopiu后,最终选择Axure

接下来,我便从Axure RP 10的下载、安装、中文字体、授权等几个方面,来介绍Axure

一、背景

Axure是一款强大的原型设计、交互设计工具,可用于设计和创建高保真度、交互动态的网站、移动应用、桌面应用等产品原型。它提供了丰富的交互组件和样式库,用户可以根据需要自定义组件和样式,也可以通过Axure云服务进行多人协作。Axure具有易于学习、高效性、灵活性等特点,被广泛应用于产品设计、用户体验设计、项目管理、开发预览等领域。

1.1主要产出内容

 线框原型图

线框原型图是一种表示界面结构和功能的简化图形,通常是黑白色的线条和简单的形状组成。它可以帮助设计师和开发人员快速确定应用程序或网站的结构、功能和布局,以便更好地进行开发工作。线框原型图通常不包括色彩、图片和文本等细节,以便更专注地讨论功能和布局。

 同类软件

1.2Axure的主要缺点

  • 交互体验不佳,操作极其繁琐
  • 进阶功能在实际项目中使用极少
  • 无法和设计阶段衔接重复劳动
  • 不能进行团队云端实时协作
  • 价格昂贵,个人和团队压力很大

完整的交互操作仅在必要的情况下制作实际项目中优先确保线框和描述内容的完成度

1.3功能模块

1.4Axure10的界面布局和模块认识

它的界面主要由以下几个部分组成:

  • 站点地图:在这里你可以管理和组织你的页面结构,添加、删除、重命名和排序页面。
  • 画布区:在这里你可以绘制和编辑你的原型页面,使用各种元件、样式和交互效果。
  • 元件库:在这里你可以找到Axure pR10提供的各种默认元件、流程图元件和图标元件,也可以载入或创建自己的自定义元件库。
  • 母版区:在这里你可以创建和管理母版,母版是一种可以重复使用的组件集合,可以让你在多个页面中共享相同的内容和布局。
  • 样式栏:在这里你可以设置你的元件的字体、对齐、填充、边框、阴影等样式属性,也可以调整元件的位置和大小。
  • 交互设计管理器:在这里你可以为你的元件添加各种交互事件和动作,实现原型的逻辑和功能。

 二、APP设计

 2.1用工具和属性栏制做APP界面

以下是使用工具和属性栏制作APP界面的步骤:

1. 创建新页面:打开Axure RP 10并创建一个新的页面,选择适当的设备尺寸,如iPhone X、iPad Pro等。

2. 添加组件:从左侧的工具栏中选择所需的组件,如按钮、文本框、下拉框等,并将其拖放到画布上。

3. 调整属性:在右侧的属性栏中,可以调整组件的各种属性,如大小、颜色、字体、边框等,以满足设计需求。

4. 添加交互:在画布上选择组件,然后右键单击并选择“交互”选项。然后,可以设置组件的交互功能,例如链接到其他页面、显示窗口等。

5. 预览设计:使用Axure RP 10内置的预览功能,可以在不离开应用程序的情况下查看和测试设计。

6. 导出设计:完成设计后,可以导出设计,保存为HTML文件,或者生成可执行的原型文件。

这些步骤可以帮助使用Axure RP 10制作高质量的APP界面。

 2.2实现基本的页面跳转交互功能

1.Axure交互的操作逻辑解析
2.Axure的交互触发事件认识
3.Axure的交互反馈操作认识

 动态面板

Axure RP 10动态面板是一种新的功能,它可以让用户更轻松地创建交互式原型。动态面板允许用户将多个页面或视图组合在一个单一的容器中,同时保持这些页面或视图之间的相对位置和大小不变。这样,用户就可以在不离开主画布的情况下,进行页面切换和交互效果的设计。

动态面板还可以与重复元件和数据集配合使用,从而快速创建重复的元素或数据列表,并通过更改数据,实现快速更新和修改。

在Axure RP 10中,用户可以通过直接将页面或视图拖动到动态面板中来创建新的面板,也可以使用快速面板创建器快速创建新的面板。此外,还可以使用“条件状态”设置来实现不同状态之间的切换,并在需要的时候自动显示或隐藏面板中的元素。

总的来说,Axure RP 10动态面板是一个非常有用的功能,它可以使用户更快速、更直观地创建交互式原型,提高设计效率和交互效果的体验。

 热区

Axure RP 10热区是指在Axure RP 10中创建的可交互区域,用于定义用户可以点击、悬停或其他交互操作的部分。热区可以用于创建原型、模拟用户界面和测试用户体验。

在Axure RP 10中,您可以通过以下步骤创建热区:

  1. 打开Axure RP 10并创建一个新的页面或打开现有的页面。
  2. 在页面上选择一个元素,例如按钮、链接或图像。
  3. 在右侧的“交互”选项卡中,您可以选择不同的交互类型,例如点击、悬停、按下等。
  4. 选择所需的交互类型后,您可以定义热区的位置和大小。您可以使用鼠标拖动和调整热区的大小,也可以手动输入具体的位置和尺寸。
  5. 完成热区的设置后,您可以预览和测试热区的交互效果。

通过创建热区,您可以模拟用户与界面的交互,例如点击按钮打开弹出窗口、悬停在链接上显示提示信息等。这有助于设计师和开发人员更好地理解和评估用户体验,并进行相应的优化和改进。

2.3中继器的使用

在Axure RP 10中使用中继器,可以帮助您更好地组织和管理您的交互设计工作。中继器可以将某个部件的交互事件转发到其他部件,以达到一些特定的设计需求。

以下是在Axure RP 10中使用中继器的步骤:

1. 在页面中选中需要设置中继器的部件。

2. 右键点击该部件,在弹出菜单中选择“设置中继器”。

3. 在弹出的“设置中继器”窗口中,点击“添加中继器”按钮,创建一个新的中继器。

4. 输入中继器的名称,并为中继器指定一个触发事件。

5. 选择需要接收中继器触发事件的部件。可以选择多个部件,以同时触发多个部件的交互事件。

6. 点击“确定”按钮,保存中继器设置。

7. 在编辑模式下,测试中继器的交互效果,确保所有部件的交互事件被正确触发。

通过使用中继器,您可以更加灵活地设计交互效果,并且能够更容易地维护和修改设计。

2.4表单

2.5制作C端PRD文档

 https://www.axureshop.com/

人人都是产品经理 | 产品经理、产品爱好者学习交流平台 (woshipm.com) 

页面解释

 

快照

使用快照操作的步骤如下:

  1. 打开Axure RP 10软件,并打开你要捕捉快照的原型页面。
  2. 在工具栏上找到"快照"按钮,点击它。快照按钮通常是一个相机图标。
  3. 鼠标会变成一个十字形的图标,点击页面上你想要捕捉快照的位置。
  4. 弹出一个对话框,询问你想要保存快照的文件名和位置。选择一个合适的文件名和保存位置,并点击"保存"按钮。
  5. Axure RP 10会自动将当前页面的快照保存为一个图片文件,并将其保存到你选择的位置。

通过快照操作,你可以方便地保存原型页面的快照,以便与他人分享、存档或用于文档制作等用途。

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

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

相关文章

华为OD技术面试-最短距离矩阵(动态规划、广度优先)

背景 记录2023-10-21 晚华为OD三面的手撕代码题,当时没做出来,给面试官说了我的想法,评价:解法复杂了,只是简单的动态规范 或 广度优先算法,事后找资料记录实现方式。 题目 腐烂的橘子 问题描述&#xff…

[SQL | MyBatis] MyBatis 简介

目录 一、MyBatis 简介 1、MyBatis 简介 2、工作流程 二、入门案例 1、准备工作 2、示例 三、Mapper 代理开发 1、问题简介 2、工作流程 3、注意事项 4、测试 四、核心配置文件 mybatis-config.xml 1、environment 2、typeAilases 五、基于 xml 的查询操作 1、…

EtherCAT主站SDO写报文抓包分析

0 工具准备 1.EtherCAT主站 2.EtherCAT从站(本文使用步进电机驱动器) 3.Wireshark1 抓包分析 1.1 报文总览 本文设置从站1的对象字典,设置对象字典主索引为0x2000,子索引为0x00,设置值为1500。主站通过发送SDO写报文…

STM32-LCD液晶显示

目录 LCD液晶显示 ILI9341液晶控制器简介 液晶屏的信号线和8080时序 使用STM32的FSMC外设模拟8080接口时序 FSMC 功能框图 通讯引脚 存储器控制器 时钟控制逻辑 FSMC的地址映射 FSMC控制异步Nor Flash的时序 FSMC模拟8080时序 FSMC结构体 NOR FLASH时序结构体 F…

由Django-Session配置引发的反序列化安全问题

漏洞成因 漏洞成因位于目标配置文件settings.py下 关于这两个配置项 SESSION_ENGINE: 在Django中,SESSION_ENGINE 是一个设置项,用于指定用于存储和处理会话(session)数据的引擎。 SESSION_ENGINE 设置项允许您选择不…

Python基础教程:内置函数之字典函数的使用方法

嗨喽~大家好呀,这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 len(字典名): 返回键的个数,即字典的长度 # len(字典名): # 返回键的个数,即字典的长度dic {a:123,b:456,c:789…

大疆智图(PC):新一代高效率高精度摄影测量软件

大疆智图是一款以二维正射影像与三维模型重建为主的软件,同时提供二维多光谱重建、激光雷达点云处理、精细化巡检等功能。它能够将无人机采集的数据可视化,实时生成高精度、高质量三维模型,满足事故现场、工程监测、电力巡线等场景的展示与精…

抖音热搜榜:探索热门话题的奥秘

抖音热搜榜是抖音平台根据用户观看、点赞、评论、分享等行为数据,综合计算得出的热门话题排行榜。它反映了当前平台上最热门、最受欢迎的话题和内容。抖音热搜榜有以下几个作用和意义: 1. 满足用户需求:抖音热搜榜为用户提供了丰富的热门话题…

华为云云耀云服务器L实例评测|使用clickhouse-benchmark工具对ClickHouse的性能测试

目录 引言 1 ClickHouse简介 2 利用docker安装ClickHouse 2.1 安装Docker 2.2 下载ClickHouse Docker镜像 2.3 创建ClickHouse容器 2.4 访问ClickHouse 3 创建测试表 4 运行 clickhouse-benchmark 5 分析结果 结语 引言 利用华为云的云耀云服务器L实例&#xff0c…

【Objective-C】浅析Block及其捕获机制

目录 Block的基本使用Block的声明Block的实现Block的调用 Block作为形参使用Block作为属性使用给Block起别名Block的copy Block的捕获机制auto类型的局部变量__block浅析static类型的局部变量全局变量 其他问题 Block的基本使用 什么是Block? Block (块…

【技术分享】RK356X Ubuntu 推流USB摄像头

本文适用与触觉智能所有RK356X ubuntu系统的主板。 IDO-SBC3566基于瑞芯微RK3566研发的一款高性能低功耗的智能主板,采用四核A55,主频高达1.8GHz,专为个人移动互联网设备和AIOT设备而设计,内置了多种功能强大的嵌入式硬件引擎,为…

2020年亚太杯APMCM数学建模大赛A题激光标记舱口轮廓生成求解全过程文档及程序

2020年亚太杯APMCM数学建模大赛 A题 激光标记舱口轮廓生成 原题再现: 激光是20中的一项重要发明世纪,它被称为“最锋利的刀”、“最精确的尺子”和“最不寻常的光”。 激光已越来越多地应用于工业加工, 其中可以是就业在各种加工业务例如作…

「Qt中文教程指南」如何创建基于Qt Widget的应用程序(三)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写,所有平台无差别运行,更提供了几乎所有开发过程中需要用到的工具。如今,Qt已被运用于超过70个行业、数千家企业,支持数百万设备及应用。 本文描述了如何使用…

学信息系统项目管理师第4版系列34_10大管理49过程ITTO

整合管理 组 过程 输入 工具和技术 输出 启动 制定项目章程 立项管理文件协议事业环境因素组织过程资产 专家判断数据收集人际关系与团队技能会议 项目章程假设日志 计划 2.制定项目管理计划 项目章程其他知识领域规划过程的输出事业环境因素组织过程资产 专家…

设计链表复习

设计链表 class ListNode {int val;ListNode next;public ListNode() {}public ListNode(int val) {this.val val;}public ListNode(int val, ListNode next) {this.val val;this.next next;}}class MyLinkedList {//size存储链表元素的个数int size;//虚拟头节点ListNode…

花生好车基于 KubeSphere 的微服务架构实践

公司简介 花生好车成立于 2015 年 6 月,致力于打造下沉市场汽车出行解决方案第一品牌。通过自建直营渠道,瞄准下沉市场,现形成以直租、批售、回租、新能源汽车零售,四大业务为核心驱动力的汽车新零售平台,目前拥有门店…

nuxt使用i18n进行中英文切换

中文效果图: 英文效果图: 版本: 安装: npm install --save nuxtjs/i18n 新建en.js与zh.js两个文件进行切换显示 en.js内容 import globals from ./../js/global_valexport default {/******* 公共内容开始* *****/seeMore: &quo…

基于食肉植物优化的BP神经网络(分类应用) - 附代码

基于食肉植物优化的BP神经网络(分类应用) - 附代码 文章目录 基于食肉植物优化的BP神经网络(分类应用) - 附代码1.鸢尾花iris数据介绍2.数据集整理3.食肉植物优化BP神经网络3.1 BP神经网络参数设置3.2 食肉植物算法应用 4.测试结果…

系统设计 - 我们如何通俗的理解那些技术的运行原理 - 第四部分:微服务架构

本心、输入输出、结果 文章目录 系统设计 - 我们如何通俗的理解那些技术的运行原理 - 第四部分:微服务架构前言典型的微服务架构是什么样的微服务的优势 微服务最佳实践在开发微服务时,我们需要遵循以下最佳实践: 微服务通常使用什么技术堆栈…

笔记:绘图进阶

主要功能: 双坐标轴多子图共用一个横坐标横坐标时间刻度设置(简便方法)自定义时间坐标轴起止时间 # -*- coding: utf-8 -*-import numpy as np import pandas as pd import matplotlib.pyplot as plt import matplotlib.dates as mdatesif …