从无到有axure原型设计_从零开始学Axure原型设计（入门篇）

超、凢脫俗 2022-12-31 11:29 162阅读 0赞

![Image 1][]

如果说Sketch是最美、最简洁的设计软件，那么Axure就是最强大的原型制作软件。Axure不仅能制作静态的视觉稿、页面，还能添加交互动作，是进行原型设计的最佳软件之一。虽然Axure的学习曲线比较陡峭，但是掌握之后可以很快实现我们脑海中的用户体验效果。

Axure 8.0

笔者自学Axure有半年多的时间了。刚开始接触Axure的时候，逛过无数论坛、Axure的网站，也浏览了许多大牛录制的Axure视频课程。这些教程和资料非常完整地介绍了这款软件能够做什么，这款软件的界面如何，怎么样使用部件，如何创建交互等。但是在自学过程中，如何掌握学习的先后次序从而达到最佳的学习效果这方面我走了很多弯路。

写这篇文章就是想总结一路走来的经验教训，并且跟大家分享如何快速掌握Axure这款软件的使用，以及如何将自己的想法通过这款软件来实现，从而构建起自己使用这款软件的方法。希望对大家有帮助。

![Image 1][]

从零开始学Axure原型设计(入门篇)

在入门篇中，主要讲解Axure的界面布局和部件库的使用。

快速入门Axure界面

![Image 1][]

Axure界面，图片来自网络

工具栏：类似office软件，可以对字体大小、背景填充、图形宽高以及位于工作区的位置(X\\Y轴)进行修改；

工作区：绘制产品原型的操作区域，所有的用到的元件都直接拖拽到里面就好了。

页面导航：可以通过鼠标拖动调整页面顺序以及页面之间的关系，双击可以重命名。

部件库：也叫组件库或元件库，所有软件自带的元件和加载的元件库都在这里，这里可以执行创建、加载、删除axure元件库的操作，也可以根据需求显示全部元件或某一元件库的元件。大家可以点击放大镜图标，搜索自己需要的部件。

母版：这里可以创建重复出现在每一个页面的元素，这样在制作时就不用再重复这些操作。通常用于页面头部、菜单栏等的制作。

页面交互：这里可以设置当前页面的样式，添加与该页面有关的注释，以及设置页面加载时触发的事件onpageload。

部件交互：这里可以设置选中元件的标签、样式，添加与该元件有关的注释，以及设置页面加载时触发的事件。闪电样式的小图标代表交互事件。

部件库的构成

了解部件库的使用是Axure的基础，下面我们就来梳理一下Axure中的常用部件：

![Image 1][]

Axure部件库

部件使用易错点

关于部件库的使用，新手特别容易出错的有以下几点：

图片：图片拖拽进画布时如果选择“压缩图片大小”，gif文件会变成静态的图片形式。

图片热区：图片热区可以用来创建自定义按钮上的点击区域。例如在一个区域中，既有图片部件又有文字部件，我们只需在这些部件上面覆盖一个图片热区并添加一次事件即可，无需在每个部件上都添加事件。反之，如果你想给一张图片上添加多个交互，也可以给图片的部分区域覆盖一块热区来实现。

动态面板滚动栏：使用滚动栏给你的动态面板添加可滚动内容，在动态面板属性面板中选择，滚动栏下拉菜单并选择滚动栏的显示方式，为了让滚动栏正常显示，动态面板状态内中的内容必须比动态面板的边界轮廓大，并且不能勾选调整大小以适合内容。

内部框架：你可以给内部框架的属性选项框中添加Axure内置的预览图片，如视频、地图，也可以自定义预览图片。注意：预览图片会在设计区域中显示，但不会在生成的原型中显示。

列表选择框：在一个交互事件中同时读取或设置多个选项时，列表选择框部件只允许你读取或设置一个选项，即便你勾选了多选功能。

提交按钮：提交按钮无法设置交互样式，如：选中/鼠标悬停/鼠标按下。提交按钮的填充颜色、边框颜色和其他大多数样式格式都被禁用了。取而代之的是生成原型后在浏览器中它会使用内建的样式。如果你想自定义你的按钮样式，请使用形状按钮“Shape button”。

菜单部件：无法点击展开子菜单。菜单部件默认是鼠标悬停展示子菜单的。

特别提醒大家，在创建部件时，一定要养成给部件命名的习惯，因为无论是创建交互事件还是进行变量调用，都需要明确部件的名称。目前我使用的命名方法是“页面名称+部件功能”。

现在就去下载Axure，自己玩一遍这些萌萌的部件吧！在认识了部件库和界面之后，我们就可以自己用Axure画线框图了。

\#专栏作家\#

粽小喵，微信公众号：zong\_xiaomiao，人人都是产品经理专栏作家。腾讯产品经理。一个学传播出身的产品新人，爱好研究原型设计工具。

本文原创发布于人人都是产品经理，未经许可，不得转载。

给作者打赏，鼓励TA抓紧创作！赞赏

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关 Axure原型设计工具--产品经理必备

*目录** Axure教程 Axure学习：严丝合缝的设计交互一、分析二、UI设计步骤三、原型交互步骤 Axure案例：PC+APP Axure案例：...

快来打我*/ 2024年04月19日 08:15/ 0 赞/ 85 阅读

相关【Axure RP】原型设计基础学习

1 概述原型设计是应用开发设计的第一要素。好的原型设计不仅可以起到沟通的作用，而且对客户而言应用程序拥有更直观的体现。原型设计通过内容和结构展示以及界面布局编排，实现在开

冷不防/ 2024年02月18日 18:46/ 0 赞/ 68 阅读

相关从无到有axure原型设计_从零开始学Axure原型设计（入门篇）

![Image 1][] 如果说Sketch是最美、最简洁的设计软件，那么Axure就是最强大的原型制作软件。Axure不仅能制作静态的视觉稿、页面，还能添加交互动作，是进行

超、凢脫俗/ 2022年12月31日 11:29/ 0 赞/ 163 阅读

相关 Axure原型开发

1axure快速原型设计工具，按照我的理解是类似于美工一样，将所需的页面画好，然后让开发人员根据所画的进行开发。认识axure页面 ![watermark_type_Zm

ゞ浴缸里的玫瑰/ 2022年09月01日 09:22/ 0 赞/ 227 阅读

相关 Axure新手入门资料集：教你快速设计原型

[![Center][]][Center 1] [Axure新手入门资料集：教你快速设计原型][Center 1] Axure RP是美国Axure Soft

骑猪看日落/ 2022年08月06日 11:17/ 0 赞/ 160 阅读

相关原型设计工具---Axure的授权

下载地址 [http://my.wisedu.com/edc/ID/8.Others/%E5%85%B6%E4%BB%96%E8%AE%BE%E8%AE%A1/Axure%2

╰+攻爆jí腚メ/ 2022年05月22日 08:13/ 0 赞/ 300 阅读

相关【Java】从零开始学设计模式：原型模式

定义 `原型模式`是创建型模式的一种，其特点在于通过“复制”一个已经存在的实例来返回新的实例，而不是新建实例。被复制的实例就是我们所称的“原型”，这个原型是可定制的。

Love The Way You Lie/ 2022年05月21日 11:09/ 0 赞/ 196 阅读

相关 Axure原型设计要点

如何实现类似淘宝页面当鼠标移动上去字体颜色改变提示？即移动前： ![在这里插入图片描述][20181111214827311.png] 移动后（鼠标悬停）：

冷不防/ 2022年04月17日 02:16/ 0 赞/ 223 阅读

相关 Axure RP 原型设计--智慧矿山

效果图： ![20190523163853601.gif][] [20190523163853601.gif]: /images/20220128/7759a211a60

秒速五厘米/ 2022年01月28日 07:53/ 0 赞/ 331 阅读

相关原型设计工具—Axure

作为软件设计的一员，需要在软件开发初期确保软件的具体内容，防止后期大幅度的修改。在这样的情况下，原型设计软件就起到了关键的作用。摘要：原型设计为什么这么重要呢？因

忘是亡心i/ 2022年01月08日 01:27/ 0 赞/ 382 阅读