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

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

news 2026/2/7 18:24:25

前面我们学习了制作网页的技能，从这里开始我们来学习前端必备技能，就是用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

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明： 想象一下，你正在用eNSP搭建一个虚拟的网络世界，里面有虚拟的路由器、交换机、电脑（PC）等等。这些设备都在你的电脑里面“运行”，它们之间可以互相通信，就像一个封闭的小王国。 但是&#…...

编程新知 2026/2/1 10:33:51

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

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/29 17:54:05

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2026/1/24 12:01:38

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2026/2/7 0:37:40

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

编程新知 2026/1/31 6:53:53

Python Einops库：深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

编程新知 2025/10/16 12:04:52

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2026/1/31 9:18:40