最前端｜前端如何入门Axure？实践经验分享！_如何用 axure 原型图进行网页开发

目录

一、前言

二、 实践步骤

（一）下载Axure文件

（二）设计思路

（三）借鉴方案

（四）绘制原型图

（五）导入蓝湖

---

一、前言

首先Axure是产品经理用来绘制原型的工具，在快速迭代快速发展的当下，原型能验证设计的概念，将现有的需求转化为具体可视方案，让团队成员可以更好的理解需求方案。

●验证需求设计：帮助需求完成可视化展示，让团队成员和需求相关者能更好地理解设计方案，通过原型，产品可以验证设计概念的可行性，避免后期开发阶段出现较大的设计调整

●沟通和协作：原型是设计师与团队成员、开发人员和需求相关者之间沟通的重要工具。通过原型，设计师可以清晰地展示设计方案，提供设计思路和交互细节，促进团队成员之间的有效协作和沟通。

●减少开发成本：通过原型，可以在产品开发之前发现和解决设计问题，减少后期开发阶段的修改和调整，从而降低开发成本和时间。有效的原型设计可以帮助团队在开发前就确定最佳设计方案，提高开发效率。

● 决策支持：原型可以帮助决策者更好地理解产品设计方案，做出更明智的决策。通过原型展示，决策者可以直观地了解产品的外观和功能，从而更准确地评估设计方案的可行性和效果。

二、 实践步骤

（一）下载Axure文件

Axure RP (http://naifeiplus.com)-官网下载

网址：https://axure.naifeiplus.com/?bd_vid=11466588957282608607

钥匙码生成免费使用（建议自行搜索学习）

（二）设计思路

我这里的用户主要包括销售人员和中台人员。用户在审批流程中，以及关注自身单量、整体单量、各系统数据量和待办事项等数据时，会使用以下功能。

首页需要展示以下信息：

• 用户待处理的报价单。
• 用户现有的报价单数量。
• 借用单的数量。
• 转储单的数量、公告信息和用户手册等

（三）借鉴方案

在市场多样化下，有多种多样的产品解决方案。

如果你在设计过程中遇到难题，不妨借鉴一些优秀的案例。你可以在各种设计网站上找到大量的原型设计案例，从中汲取灵感和经验。当然，借鉴不等于抄袭，你需要结合自己的设计目标和用户需求，进行有针对性的改进和创新。有以下几个网站提供给相关的需要绘制原型的小伙伴

1、花瓣网（https://huaban.com/）

2、站酷ZCOOL（https://www.zcool.com.cn/）

（四）绘制原型图

绘制原型，首先你要了解Axure的基本功能有哪些。

画布和页面：Axure提供了画布和页面功能，用于创建和管理页面布局。用户可以在画布上添加页面元素，设计页面结构和布局。

●元件库：Axure内置了丰富的元件库，包括按钮、输入框、下拉框、表格等常用元素，用户可以直接拖拽使用，也可以自定义元件并保存到元件库中供后续使用。

●交互设计：Axure支持丰富的交互设计功能，用户可以为页面元素添加交互效果，如链接、动画、状态切换等，实现页面之间的交互和流程演示。

动态面板：用户可以使用动态面板功能创建可滚动、可折叠的面板，用于展示大量内容或模拟应用程序的界面。

● Masters：Masters是Axure中的模板功能，用户可以创建并保存页面元素的模板，方便在不同页面中重复使用，提高设计效率。

●条件逻辑：Axure支持条件逻辑的设计，用户可以根据不同条件设置页面元素的显示、隐藏、状态切换等，实现更复杂的交互效果。

首先我们来看看有哪些模块：

主要由这些部分组成。

以百度搜索页面为例子，绘制原型。

首先截图或者复制一个你想要实现的基本功能，或者草图，这里以复现一个百度查询页为例。

复制后将Axure图片拖入，粘贴也可以，（因为是pc端原型，按住ctrl+鼠标滚轮，缩放至合适的位置）

1、拉起辅助线辅助

2、拖拽一个矩形组件进入，在右上角样式中设置矩形的高宽，先绘制底图，，可以点击截图的大小是1920-945，中间有个小锁标志是锁定高宽比例，设置其中一个值会同比例设置另外的值，选择填充，可以填充图片或者纯背景颜色。

3、首先页面分为以下几个部分：

• logo搜索
• tab栏
• 搜索内容展示
• 百度热搜榜单

首先，使用方块工具圈出所有模块的位置，并设置色块颜色。利用滴管工具吸取所需颜色，以便于快速构图。按住Shift键，可以同时选择多个图形，然后通过组合命令将它们合并为一个整体。

移动编辑三级标题字段绘制tab栏部分，然后框出其他部分，如下图，在内容中添加说明，这就是最简单的原型了。

虽然现在的原型方便沟通，但它们可能会遗漏许多细节和功能。因此，目前的趋势是创建更精细的、具有高度交互性的高保真原型。

这里以“热门榜单”为例，我们来绘制一个高保真的原型。

在绘制文字和排版方面，不多赘述。主要演示交互和分组命名上。在下面的原型中，可以看到'热搜榜'、'武汉榜'等tab。

接下来，要为按钮添加点击事件。

选中"武汉榜"方块后，点击"交互"并选择"新建交互"。接下来，我们需要分析并设置这个交互要做什么:点击"武汉榜"时，"热搜榜"的背景色应该改变，而"武汉榜"的背景色则变为选中状态，对应榜单的内容展示隐藏。

单击时，隐藏热搜榜内容，加入动画往左滑动隐藏。

这个时候在点击武汉热搜榜内容模块右键，选择设置隐藏，如下图，隐藏后武汉榜内容会展示成这样，移动到热搜榜内容位置。

然后点击，如下图，点击加号，添加点击隐藏展示事件，展示武汉榜内容。

然后再点击右上角预览可以看看，点击内容会，展示隐藏。

右键选择交互样式，看到设置武汉榜，鼠标按下，填充背景颜色。

复制替换热搜按钮，修改展示隐藏内容，然后选中两个按钮，右键选择，选项组，则这两个按钮在选中后都会互斥，展示选中颜色。

这样就完成了。

（五）导入蓝湖

我这里使用的是蓝湖，在蓝湖官网下载，插件，安装到电脑上，登录账号。

点击上传，然后分享链接即可。

作者：沈童| 前端开发工程师

版权声明:本文由神州数码云基地团队整理撰写，若转载请注明出处。

公众号搜索神州数码云基地，了解更多技术干货。