【原型设计】Axure快速入门教程

目录

1.概述

2.界面介绍

3.常用技巧

3.1.取色

3.2.等比缩放

3.3.对齐

3.4.选择模式

4.线框图

5.高保真原型图

5.1.静态高保真

5.2快速制作高保真图

6.交互动效

7.动态面板

7.1.状态切换

7.2.页面滚动

8.显示与隐藏

9.元件交互样式

10.表单设计

11.母版

12.AxureHub

1.概述

在整个软件的开发周期中，比较科学和高效，减少返工次数的一个合理流程是：先是需求建模，建立起整个系统的概念，然后进行原型设计，前文我们已经讲过如何进行需求建模了：

面向对象的需求分析方法-CSDN博客

【实战示例】面向对象的需求建模_面向对象需求模型-CSDN博客

本文将详细介绍原型设计工具Axure的快速入门，一文保证学完就能完全快速独立上手原型设计。

一般来说原型设计分为两种：

• 线框图
• 高保真图

线框图：

快速搭建、信息传递容易遗漏

高保真原型图：

制作耗时长，体现交互+设计，和系统十分接近。

2.界面介绍

axure的界面很简洁，主要就是在左边建页面、拖组件，在右边调整组件的样式，关键点在交互和预览两点。交互是指页面交互效果，预览是指做完后可以通过预览来查看效果。

3.常用技巧

3.1.取色

选中组件，点击填充，可以进行取色。

3.2.等比缩放

选中组件+按住shift不放，拖动就能实现等比缩放。

3.3.对齐

选中多个相同元素，进行对齐，会以第一个元素为基准进行对齐

3.4.选择模式

选择模式，即如何能选中元件，包含选中即全部框选中才会选中元件，相交选中即只要选中一部分就会选中元件，设置为包含选中更利于操作。

4.线框图

5.高保真原型图

高保真原型图分为两个方面进行高保真：

• 静态，尽量用取色器和对齐等手段和真的产品在外观上靠近。

• 动态，切换演示动效等贴近实际使用。

5.1.静态高保真

在阿里矢量图标库里可以通过复制SVG源码的方式来在axure中引入图标，复制完源码后直接在axure里面粘贴即可。

5.2快速制作高保真图

多用截图，在截图上进行修改是最快的，接下来就用纯截图加处理图片的P图方式创建一个高保真的微信”听一听“功能。

截个微信的图，然后在上面进行了遮盖，P图P出来一个：听一听。

文字可以自适应对齐：

然后去QQ音乐上截图两个界面：

要是觉得不满意，分别只看中了两张图的一部分，Axure支持进行图片的切割，选中图片，右键就会弹出切割选项：

拼一张自己满意的图即可：

6.交互动效

面前涉及的页面都是静态的没有诸如转跳、组件显示和隐藏等动态效果。纯静态页面其实我们会发现随便用一些画图软件都能画出来，那为什么还要用专业的UI设计软喃？其实主要就是为了用这里面的交互动效。

axure支持给单个组件增加交互，也支持用”热曲“给某一片区域增加交互，热区是支持复制粘贴的：

7.动态面板

动态面板，一个允许包含一个组件多个状态的容器，允许通过交互来进行状态的切换，说大白话就是一个允许多个层级存在的区域，通过交互来切换层级来实现一些动态变化的效果。

7.1.状态切换

以下以实现一个点赞功能的动态效果为例：

在阿里巴巴的矢量图标库里找一个点赞的图标：

选中图标，右键，变换图片->转换SVG图片为形状。只有转换为形状的SVG才可以调整颜色。

选中图标，右键，转换为动态面板，即可进入动态面板界面：

下拉菜单里面可以新建动态面板，支持直接复制粘贴上一个，State2就是复制粘贴State1来的，然后设置好Satet2自己想要的样子：

然后退出动态面板，单机选中之前动态面板的区域，设置交互效果，即可实现点赞的动态效果：

7.2.页面滚动

动态面板是可以滑动的，只要调整到逼覆盖的区域比组件大小小就行：

如何保证title不动？很简单，把title切割出来，动态面板里只放要滑动的区域即可：

如何实现点击非动态面板区域，切换动态面板区域的内容：

首先建好要切换的不同状态。

给要点击的非动态面板区域覆盖上热区，热区支持在交互里面控制动态面板区域的切换：

这里还有一个问题就是我不仅想切换商品列表，还要同时切换title的被选中状态，其实热曲支持互动控制多个动态区域：

先建好要切换的title的状态。

然后追加要控制的动态面板区域即可：

至此就实现了完整效果。

8.显示与隐藏

组件的显示与隐藏是个很常用的功能，用来实现诸如弹框、抽屉页面等效果。

热区的交互里面支持控制其它组件的显示和隐藏。先把组件设为隐藏，然后设置单机热区显示组件即可。

可以设置在显示和隐藏时的动画效果：

9.元件交互样式

所谓的元件交互样式，即元件与鼠标互动时的样式。选中元件在交互里面可以新建各类原件与鼠标的交互样式：

新建交互后可以设置一些基础的诸如颜色、透明度、字色等属性，也可以咋子更多样式选项中设置更多其它样式：

更多样式选项中支持其它多种样式：

鼠标悬停、按下等都是差不多的一个设置方法，唯独要单独说的是，元件选中，要先创建样式，然后设置触发选中的事件：

10.表单设计

表单作为提交数据常用的组件，是在UI设计中高频需要用到的：

表单的外框是一个矩形拖动圆角得到，表单里面的项目全部来自于表单元件：

文本框的样式里面可以设置一些诸如边距、圆角、字体等相关样式：

交互里面可以设置诸如提示词等东西：

其实前端有的，这里都支持，只要有一些钱的顶端基础的应该是秒懂的。

单选框要注意，默认是可以全部选中的，要选中全部，然后设置为单选组从才能实现单选效果：

11.母版

axure支持母版功能，新建的模板可以像组件一样被拖入新页面，改动母版就会全局修改引用母版的位置。这个很好理解，自己试一下就行：

12.AxureHub

类似于github，Axure也有在线的资源库，可以在上面找到海量的成型的解决方案，可以直接拿来改一下就用：

AxureHub产品原型资源站_AxureHub原型模板元件组件库下载站 唯一官网：axurehub.com