当前位置： 首页 > news >正文

Axure教程（一）——线框图与高保真原型图制作

news 2026/1/28 6:44:00

前面我们学习了制作网页的技能，从这里开始我们来学习前端必备技能，就是用Axure来制作原型图，一方面我们能提前绘制出我们所需的页面，这在我们开发的时候能节省大量的时间，另一方面我们能通过给用户进行体验从而能够发现产品的问题，把问题在产品上线之前就解决，而不是上线后花大量的精力去不断的改进和优化产品。
这篇文章后我会出JavaScript的教程，并带有学习笔记，免费分享给大家。

Axure教程（一）

  • 原型图的种类
    • 线框图
    • 高保真原型图
    • 需求文档
  • 实例制作
    • 线框图实例
      • 微信发现界面效果图
      • 制作技巧
    • 高保真原型图实例
      • 为微信增加听一听功能效果图
      • 制作技巧
      • 为多图添加交互功能
        • 交互步骤
      • 产品演示

原型图的种类

线框图

  • 制作快速，低成本描述方案，给设计更多空间

高保真原型图

  • 制作耗时，还原度高，保证设计效果

  • 制作要素

  1. 形状，尺寸：严格按照截图比例，参考线
  2. 色彩：使用吸取颜色，注意渐变色
  3. 贴图：寻找参考物，复制图片，截取，覆盖等
  4. 交互动作：页面切换，响应范围，点击动效等
  5. 演示效果：手机演示，原型托管，屏幕适配
  • 制作技巧
  1. 会截图，选取合适的参照物进行切割，不要重新发明轮子
  2. 使用搜索引擎：iconfont、百度

需求文档

  • 更多逻辑与业务说明，指导研发

实例制作

线框图实例

微信发现界面效果图

在这里插入图片描述

制作技巧

  1. 图片一定要传原图，否则会失真，图片过大直接缩小制作即可，这样很多地方的缝隙都会消失

  2. 背景色最好设置为灰色（#dddddd），这样效果更明显

  3. 学会选择合适的图形进行构建

  4. 需要均匀分布，摁住ctrl+鼠标单击选择水平均匀分布
    在这里插入图片描述

高保真原型图实例

为微信增加听一听功能效果图

在这里插入图片描述

制作技巧

  1. 学会使用分割图形，可以将图片分割为两部分
    在这里插入图片描述
  2. 拖拉图片，空出合适的空隙，插入box，调整一下即可
  3. 在iconfont上找合适的图标

为多图添加交互功能

交互步骤

  1. 添加热区在点击区域在这里插入图片描述

  2. 添加点击事件，选择跳转的页面即可，如要添加返回页面，直接选择右下角Back to…即可在这里插入图片描述

  3. 让唱片转起来

    • 截取唱片
      在这里插入图片描述

    • 用长方形罩住唱片部分
      在这里插入图片描述

    • 摁住小黄三角形直接往右拉，把得到的图覆盖原图唱片区域
      在这里插入图片描述

    • 设置热区点击旋转事件（rotate）并如图设置参数（把none设为linear，意为线性旋转，1080为三圈）
      在这里插入图片描述

    • 选择首页点击右上角preview即可开始预览

产品演示

在这里插入图片描述

相关文章：

Axure教程（一）——线框图与高保真原型图制作

前面我们学习了制作网页的技能，从这里开始我们来学习前端必备技能，就是用Axure来制作原型图，一方面我们能提前绘制出我们所需的页面，这在我们开发的时候能节省大量的时间，另一方面我们能通过给用户进行体验从而能够发现…...

编程日记 2023/2/16 20:54:04

wholeaked：一款能够追责数据泄露的文件共享工具

关于wholeaked wholeaked是一款功能强大的文件共享工具，该工具基于go语言开发，可以帮助广大系统管理员和安全研究人员在组织发生数据泄露的时候，迅速找出数据泄露的“始作俑者”。 wholeaked可以获取被共享的文件信息以及接收人列表&#x…...

编程日记 2023/2/16 20:52:58

动态规划——股票问题全解

引入 股票问题是一类动态问题，我们需要对其状态进行判定分析来得出答案 但其实，我们只需要抓住两个点，持有和不持有，在这两种状态下分析问题会简单清晰许多 下面将会对各个问题进行分析讲解，来解释什么是持有和不持…...

编程日记 2023/2/16 20:51:52

想做游戏开发要深入c/c++还是c#？

根据题主描述提三点建议： 先选择一个语言、选择一个引擎能入行确保精通一个及已入行的情况下，技多不压身不必想日后的”退而求其次“，现在的事情还没有开始做就想以后，太过虚无及功利了 下面是这三点的详细说明： 【选…...

编程日记 2023/2/16 20:50:47

【JMeter】【Mac】如何在Mac上打开JMeter

平常我们在Windows电脑里打开JMeter，只要双击JMeter.bat即可打开，那我换了Mac后，该怎么打开JMeter呢 一、命令行打开JMeter 1、打开JMeter路径 cd /Users/work/apache-jmeter-5.2/bin 2、运行JMeter sh jmeter 3、如果涉及到一些权限无…...

编程日记 2023/2/16 20:49:43

JAVA面试八股文一（并发与线程）

并发的三大特性原子性：cpu在执行过程不可以暂停然后再调度，不可以中断，要不全部执行完，要不全部不执行。可见性：当多个线程访问同一个变量时，一个线程改变了这个变量的值，其他线程能够立即看到修…...

编程日记 2023/2/16 20:48:37

C语言二级指针

目录一、1. 指针的作用2.二级指针3. 为什么要用二级指针一、 1. 指针的作用 内存的存储区就像一池湖水，数据就像池水里面的鱼，如果不用内存寻址的方式，那么当你找某个特定数据的时候，就相当于在一池湖水里找某一条叫做“张三”的…...

编程日记 2023/2/16 20:47:30

[java-面试]初级、中级、高级具备的技术栈和知识点

🌟1.java初级1. Java基础知识：语法、包装类、泛型、数据结构和继承，以及基础API。2. Java开发工具：如Eclipse，NetBeans，Maven等。3. Java Web开发技术：如Servlet，JSP，Str…...

编程日记 2023/2/16 20:34:25

「5」线性代数（期末复习）

🚀🚀🚀大家觉不错的话，就恳求大家点点关注，点点小爱心，指点指点🚀🚀🚀 目录 第四章 向量组的线性相关性 &5）向量空间 第五章 相似矩阵及二次型 &a…...

编程日记 2023/2/16 20:33:18

记一次20撸240的沙雕威胁情报提交(2019年老文)

0x01 起因 这是一篇沙雕文章，没什么技术含量，大家娱乐一下就好 前几个月，我的弟弟突然QQ给我发来了一条消息，说要买个QQ飞车的cdk，我作为一个通情达理的好哥哥，自然不好意思回绝，直接叫他发来…...

编程日记 2023/2/16 20:32:14

佳能镜头EOS系统EF协议逆向工程（三）解码算法

目录 数据结构 解码算法 解码效果 这篇文章基于上两篇文章继续， 佳能镜头EOS系统EF协议逆向工程（一）转接环电路设计_佳能ef自动对焦协议_岬淢箫声的博客-CSDN博客本文属于专栏——工业相机。此专栏首先提供我人工翻译的法语文档部分&…...

编程日记 2023/2/16 20:31:10

搞互联网吧，线下生意真不是人干的

搞互联网吧，线下生意真不是人干的 应该是正月初几里吧，好巧不巧的被迫去参加了一下我们初中同学的聚会。其实毕业这么多年，无论大学，高中还是中学，类似的聚会我都是能躲则躲，有特别想见的同学也都是私下单…...

编程日记 2023/2/16 20:30:06

MySQL性能调优与设计——MySQL中的索引

MySQL中的索引 InnoDB存储引擎支持以下几种常见索引：B树索引、全文索引、哈希索引，其中比较关键的是B树索引。 B树索引 InnoDB中的索引自然也是按照B树来组织的，B树的叶子节点用来存放数据。 聚集索引/聚簇索引 InnoDB中使用了聚集索引&…...

编程日记 2023/2/16 20:28:59

这5个代码技巧，让我的 Python 加速了很多倍

Python作为一种功能强大的编程语言，因其简单易学而受到很多初学者的青睐。它的应用领域又非常广泛：科学计算、游戏开发、爬虫、人工智能、自动化办公、Web应用开发等等。 而在数据科学领域中，Python 是使用最广泛的编程语言，并且…...

编程日记 2023/2/16 20:27:52

Sphinx+Scws 搭建千万级准实时搜索应用场景详解

目标： 一、搭建准确的千万级数据库的准实时搜索（见详情） 二、实现词语高亮（客户端JS渲染，服务器端渲染，详见7.3） 三、实现搜索联想（输入框onchange,ajax请求搜索，取10条在…...

编程日记 2023/2/16 20:26:47

kafka缩容后，使用tcpdump抓包找到还在连接的用户

1、使用tcpdump抓包监控端口9092 tcpdump src port 9092 16:23:27.680835 IP host01.XmlIpcRegSvc > 192.168.168.1.36199: Flags [R.], seq 0, ack 1493547965, win 0, length 0 16:23:27.681877 IP host01.XmlIpcRegSvc > 192.168.168.2.50416: Flags [R.], seq 0, ac…...

编程日记 2023/2/16 20:25:42

Spring

Spring Spring 是什么? Spring 是于 2003 年兴起的一个轻量级的,IOC 和 AOP 的 Java 开发框架，它 是为了简化企业级应用开发而生的。 Spring有几大特点如下 轻量级的 Spring 框架使用的 jar 都比较小，一般在 1M 以下或者几百 kb。Spring 核 心功能…...

编程日记 2023/2/16 20:24:35

vue2版本《后台管理模式》（中）

文章目录前言一、创建一个文件夹 utils 里面新增一个 setToken.js 文件(设置token验证）二 、创建一个api文件夹 新增 service.js （axios拦截器）三、在api文件夹里 新增一个 api.js 来接收数据（把api封装哪里需要某项数据直接引入就…...

编程日记 2023/2/16 20:23:30

网络游戏开发-服务器篇

1.网络 网络分为弱联网和强联网。 1.弱联网 弱联网是客户端连接到服务端发送一个请求，然后由服务端回应一个内容，这是单向传输的方式，服务端是无法主动给客户端发送消息的，服务端相应请求之后会自动关闭连接。 缺点：传输采用明文，通过抓包可以看到明文信息，安全性不太…...

编程日记 2023/2/16 20:22:27

智慧校园源码：电子班牌，支持手机移动端以及web端对班牌设备的管控

▶ 智慧校园系统有源码，有演示！ (电子班牌）设备管理： 1、 管理员查看全校电子班牌设备信息：含有（班级信息、软件版本、设备型号、开关机信息、班牌截屏信息、教室编号、设备ID、设备描述、在线状态、离线状…...

编程日记 2023/2/16 20:21:22

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/1/26 13:06:00

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2026/1/26 13:05:59

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/11/19 22:56:53

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2026/1/22 10:28:09

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/12/17 2:10:10

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2026/1/25 3:21:09

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2026/1/15 4:57:55

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/11/19 10:53:07

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2026/1/25 6:16:49