Axure教程-新手入门基础(小白强烈推荐!!!)

news2025/1/23 22:43:28

Axure教程-新手入门基础(小白推荐)

1.Axure软件介绍

Axure RP是一款专业的快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是Rapid Prototyping(快速原型)的缩写。
Axure RP的使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等,另外,架构师、程序员也在使用Axure。
Axure RP Pro能快速帮助设计者设计出快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示与开发。
优势:
Axure这个软件功能强大,可以做出很多交互效果,直接通过拖拽画出原型、生成网页;
Axure这个软件效果高,只有遵循一些可用性原创,很快模拟出高保真页面原型。

​ Axure中文学习网:https://www.axure.com.cn/

​ 汉化包下载地址:http://www.chanpinban.com/downloads/##

2.什么是原型

原型(prototype)这个词来自拉丁文的词proto,意谓“最初的”,意义是形式或模型。在非技术类的文中,一个原型是给定种类的一个代表性例子。
在这里我们主要讲的是软件原型,在软件开发中,一个原型是产品或数据系统的一个基本的实用模型。
软件原型包含但不限于:功能、交互、UI。

软件开发工程中原型的地位:便于快速沟通、确定明确需求

3.Axure软件安装与运行

3.1安装

​ Axure中文学习网:https://www.axure.com.cn/

​ 在上述网站即可下载安装,傻瓜式安装即可,这里就不多做阐述。

3.2运行

​ 安装好后运行,可以看到欢迎界面(不想每次启动都弹出这个的话建议勾选启动时不显示)

在这里插入图片描述

​ 这就是Axure的主要界面了,能成功进到这里就说明安装成功!
在这里插入图片描述

4.Axure主要界面介绍

在这里插入图片描述

4.1菜单栏

​ 跟一般office软件的菜单栏差不多。
在这里插入图片描述

​ 其中,经常使用的菜单功能有:

  • 文件-导出图片:当前打开页面对应的单张图片、所有页面
  • 编辑-快捷键:保存、撤销
  • 视图-重置视图:当关闭某个窗口,可通过此次菜单快速恢复窗口视图
  • 布局-组合、对齐、分布,在工具栏也有快速按钮,包含shift键多选元件、组合后右键或者概要中进行重命名
  • 布局-显示网格和对齐辅助线
  • 发布-预览、预览选项、生成HTML文件,在工具栏也有快速按钮
4.2工具栏

​ 这里是平常我们使用Axure需要的工具,其实跟我们平时用word差不多

在这里插入图片描述

​ 你可以放大缩小,设置文字大小颜色位置等。

​ 钢笔工具:

​ 1.双击或者esc结束钢笔工具

​ 2.画直线、折线

​ 3.画曲线:当前点位置左键鼠标按住不动,方向影响到曲线的方向,橘色的线长度影响到曲线的半径

​ 4.样式:线条(颜色、粗细、样式)、填充(单色、渐变)

在这里插入图片描述

​ 选择钢笔工具

在这里插入图片描述

​ 你可以画一条直线

在这里插入图片描述

​ 也可以画曲线

在这里插入图片描述

​ 也可以乱画

​ 钢笔工具是一个挺有用的工具,有时候可以解决你的燃眉之急,在美工好的同学手好那更是如虎添翼,大家觉得我美工好吗,欢迎在评论区评论。

4.3页面:导航视图,大纲

​ 页面是项目页面的导航面板, 在这里面可以对所有设计的页面进行添加、删除、重命名和组织等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U9mo8iTc-1627473967426)(C:\Users\Lilking\AppData\Roaming\Typora\typora-user-images\image-20210728192818376.png)]

当页面过多时,文件夹就显得格外重要了,它可以方面你管理你的所有页面。

在这里插入图片描述

可以通过拖拽,将你的页面管理起来。

大纲
在这里插入图片描述

大纲可以看你所有在使用中的元件,可以给元件进行命名,以方便查看管理。

4.4元件库,母版

​ 元件是Axure中最精髓的地方了,通过使用多种元件库,可以让你的原型页面更精美。

在这里插入图片描述

​ 下面做一个小练习,用默认元件库做一个表单出来。
在这里插入图片描述

​ 母版,让使用的风格统一,减少元件的复用

​ 当你的几个页面中会重复使用一些元件时,你可以选择母版,当然如果只是一个页面的话,就不需要母版了。

​ 使用方法:1.在已有元件中,右键生成母版。2.直接在左下角新建母版。

在这里插入图片描述

​ 我新建了一个header母版,将顶部菜单栏元件拖入,这样一个母版就新建好了,我们去使用一下。

在这里插入图片描述

​ 直接将母版拖拽到页面即可。

​ 当你想修改母版的内容时间,使用改母版的页面也会随之改动,改页面的,母版也会被改动。

欢迎大家在评论区讨论交流,本人第一次写博客,有哪里不好的地方也欢迎大家提出,谢谢大家!拜~

3PnkD0-1627473967437)]

​ 直接将母版拖拽到页面即可。

​ 当你想修改母版的内容时间,使用改母版的页面也会随之改动,改页面的,母版也会被改动。

欢迎大家在评论区讨论交流,本人第一次写博客,有哪里不好的地方也欢迎大家提出,谢谢大家!拜~

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

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

相关文章

Code For Better 谷歌开发者之声——使用谷歌浏览器 Chrome 更好地调试

💂 个人网站:【 海拥】【小霸王游戏机】🤟 风趣幽默的前端学习课程:👉28个案例趣学前端💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】💬 免费且实用的计算机相关知识题库&…

layui最新版本更新已全面拥抱Vue3,layui - vue是一套Vue 3.0的桌面端组件库,提供100%的layui的体验;

layui - vue目前的版本是1.4.9,目前常用的大部分组件已全部覆盖,最惊喜的地方在动画和过度组件做的比较好,应该是目前Vue组件库里面做的比较好的,Vue的动画相比于React和Angular一直比较弱,layui - vue目前做的不错,目…

前端中的BFC是什么?

BFC的概念 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。 MDN给出的解释是:BFC是…

【docker基础操作命令】(一)启动命令和镜像命令

文章目录docker启动命令1. 启动docker2. 关闭docker3. 重启docker4. 查看docker运行状态5. 设置docker开机自启动6. 查看docker信息7. 查看docker的帮助文档docker镜像命令1. 显示当前docker下的所有镜像2. 从远程仓库查看指定名称的镜像3. 下载镜像到本地4. 查看镜像/容器/数据…

分布式ELK日志监控系统环境搭建

文章目录1.1为什么需要监控项目日志1.2ELK日志监控系统介绍1.3ELK的工作流程1.4ELK环境搭建1.4.1Elasticsearch的安装1.4.2Kibana的安装1.4.3Logstash的安装1.4.4数据源配置1.4.5日志监测测试1.1为什么需要监控项目日志 项目日志是记录项目运行过程中产生的事件和信息的重要工…

web前端开发和后端开发哪个难度大?

前言 因为涉及到的具体的应用的领域不同,所以说不能简单地说哪一个难,对于前端而言你会感觉到入门会非常的简单,这也是会给许多人一种错觉,前端很简单,但是只能说是在入门理解上是有利于新手的,前端在主要…

Python tkinter(GUI编程)模块最完整教程(上)

提示:下滑文章左侧可以查看目录! 1 走进tkinter世界 1.1 认识tkinter tkinter是一个GUI开发模块,是Tcl/Tk语言在Python上的接口,可以在大部分操作系统上运行。tkinter非常的简单而且好用。tkinter模块是自带的Python模块&#…

vue3.2 基础及常用方法

Vue3.2(21年8月10日)相比于Vue3新增了语法糖,减少了代码冗余 Vue3相比于Vue2,在虚拟DOM,编译, 数据代理,打包构建封面进行了优化 Vue3使用组合式API, 适合大型项目, 去除了this vue2的 beforeCreate 和 created 被新增的setup生命周期替代 vue3 使用插件: volar 配置用户代…

js中常遇到 切割截取字符串的几种方法

切割截取字符串的几种方法 1、 split() 方法用于把一个 字符串 分割成 字符串数组 ; stringObject.split(str,length)var str "123,456,789"; console.log(str.split()); // ["1", "2", "3", ",", "4&qu…

【PC端聊天功能模板】vue-elementul简单实现电脑端客服聊天功能,pc端聊天系统静态页面布局,配套websocket方案和心跳重连机制【详细注释,拿来即用】

前言 这里是给大家写了一个简单的模板来使用,可以直接复制了调调就能用。因为这个聊天也是很容易出现的功能,所以我写一个模板静态页面放在这,以后需要这个功能的时候可以不用布局了,直接复制改改。 我的代码里面有详细的注释&…

小马带你认识前端开发神器WebStorm(WebStorm及Git的相关配置与使用)

先说一下个人感觉吧,小马之前也是一直在用 Visual Studio Code 来进行开发,但随着开发需求增加,VS 所需要的插件越来越多(用过 vs code 的同学都知道,它虽可以进行各种开发语言的编写,但是需要相应的插件支…

ECharts设置x轴刻度间隔的两种方法

ECharts设置x轴刻度文字间隔的两种方法 背景 最近在写一个echarts数据看板,要在一个页面中展示多张图表,所以留给每张图表的尺寸就很小。这也就使得图表x轴的刻度文字全部挤到一起了,废话不多说,直接上图看效果。 右边的图标就…

11.定时任务定时线程池详解

3.1 新增定时任务池 11.定时任务&定时线程池详解 ​ 当我们不用任务框架时,我们想自己写一个定时任务时,我们能想起那个工具类呢?Timer ?还有吗?不知道了,下面我们要讲下ScheduledThreadPoolExecutor…

Vue图片路径问题(动态引入:绝对路径、相对路径),require动态路径问题

Vue图片路径问题&#xff08;动/静态引入&#xff1a;绝对路径、相对路径&#xff09; DEMO实例&#xff08;可快速解决问题&#xff09;: 注意&#xff1a;绝对路径方式导入的图片需要存储在 publiic 文件夹下 静态导入相对路径&#xff1a; <img src"../../asset…

Mybatis+Servlet+Mysql 整合的一个小项目:对初学者非常友好,有助于初学者很快的上手Java Web

文章目录前言为何要写&#xff1f;目录结构1 依赖配置1.1 创建一个web项目1.2 依赖需求分析1.3 pom.xml2 配置Mybatis2.1 mybatis-config.xml2.2 UserMapper.xml2.3 UserMapper.interface3 配置Tomcat4 Servlet类4.1 loginServlet014.2 registerRequest015 静态页面代码5.1 Htm…

Vue开发实例(13)之axios和mockjs的安装与使用

作者简介 作者名&#xff1a;编程界明世隐 简介&#xff1a;CSDN博客专家&#xff0c;从事软件开发多年&#xff0c;精通Java、JavaScript&#xff0c;博主也是从零开始一步步把学习成长、深知学习和积累的重要性&#xff0c;喜欢跟广大ADC一起打野升级&#xff0c;欢迎您关注&…

Vue3中 内置组件 Teleport 详解

1. 基本概念 1.1 简单理解 不管是 Vue2 还是 Vue3 中都有内置组件的存在&#xff0c;如 component 内置组件、transition 内置组件等等。内置组件就是官方给我们封装的全局组件&#xff0c;我们直接拿来用就可以了。 在 Vue3 中新增了 Teleport 内置组件&#xff0c;先来看下…

【JavaScript-数组全家福】

目录 前言 数组 1.创建 new Array数组 2.检测是否为数组 1.使用instanceof检测是否为数组 2.使用Array.isArray()来检测 3.添加删除数组方法 4.筛选数组 5.数组排序 6.数组索引方法 7.数组去重 8.数组转字符串 写在最后 前言 博主是&#x1f466;一个帅气的boy&#…

前端案例:飞机大战( js+dom 操作,代码完整,附图片素材)

目录 一、案例效果 二、实现思路 三、完整代码详细注释 四、涉及要点 五、案例素材 一、案例效果 二、实现思路 创建游戏背景板&#xff1b;创建我方战机&#xff0c;鼠标进入游戏面板后其随鼠标轨迹运动&#xff1b; onmousemove创建子弹&#xff0c;让子弹周期性的在战…

Grafana alert预警+钉钉通知

1 Grafana alert预警 如下图所示&#xff0c;主要是前3步&#xff0c;设置alert rules、contact points 、notification policies。alert rules主要设置触发警告的规则&#xff1b;contact points设置通过什么发送预警&#xff0c;如钉钉&#xff1b;notification policies 将…