2352732-原型设计工具

一、Axure：专业的原型设计工具

（一）特点

1.功能强大，高保真设计
Axure支持创建高保真度的原型，能够模拟真实软件的交互效果。它提供了丰富的控件库，包括各种按钮、文本框、图表、动态面板等。这些控件可以进行高度自定义，满足复杂的界面设计需求。例如，你可以通过动态面板创建复杂的导航菜单、多级页面切换等交互效果。
支持条件逻辑和变量，可以模拟复杂的业务流程和数据交互。比如，在记账本项目中，可以通过条件逻辑判断用户输入的金额是否符合规则，并给出相应的提示。

2.团队协作与文档生成
Axure支持多人协作，团队成员可以共同编辑同一个项目。它还提供了详细的标注功能，设计师可以在原型中标注交互细节、设计说明等，方便开发人员理解和实现。生成的HTML页面自带目录边栏，方便在不同页面间快速切换和查看。
可以生成详细的文档，包括交互说明、界面布局等，这对于项目管理和开发文档的整理非常有帮助。

3.跨平台支持
Axure支持Windows和Mac操作系统，生成的HTML原型可以在任何支持HTML的设备上查看，包括电脑、平板和手机。这对于团队成员使用不同设备的情况非常友好。

4.学习曲线较陡
由于功能强大，Axure的学习曲线相对较陡。初学者可能需要花费一定时间来熟悉其操作和功能。不过，一旦掌握，它将大大提高设计效率。

二、墨刀：简单易用的团队协作工具

（一）特点

1.简单易用，快速上手
墨刀的操作界面简洁直观，提供了丰富的组件库和模板，即使是新手也能快速上手。例如，它提供了各种按钮、文本框、图片等组件，可以直接拖拽到画布上进行布局。
支持快速创建低保真和高保真原型，适合在项目早期快速验证想法。对于记账本项目，你可以快速搭建出记账功能的基本界面，包括输入框、分类按钮、数据展示区域等。

2.强大的团队协作功能
墨刀支持多人实时协作，团队成员可以在同一个项目中同时进行编辑，实时查看彼此的修改内容。这大大提高了团队协作的效率，方便团队成员之间的沟通和协作。
提供了详细的版本管理功能，可以随时查看和恢复历史版本，避免因误操作导致的损失。

3.丰富的交互效果
墨刀提供了丰富的交互效果设置，包括页面跳转、动画效果、条件逻辑等。例如，在记账本项目中，你可以设置点击分类按钮切换不同的记账页面，或者在输入金额后显示相应的提示动画。

4.便捷的分享和评审
墨刀生成的原型可以直接在网页上查看和分享，方便团队成员、客户等不同角色进行评审和反馈。你可以将原型链接发送给相关人员，他们可以直接在网页上查看原型，并提出自己的意见和建议。

三、Axure的一些入门小案例
Axure RP是一款专业的快速原型设计工具。上手入门比较简单，可以帮助我们快速的搭建一个网页原型。接下来我写一些自己入门时候写的小案例。

1.简单的表单

左下角的元件库可以直接拖拽使用以上元件即可，需要注意的是鼠标双击下拉列表框才能 添加数据源，单选框如果要达到互斥的效果，对两个元件设置相同的选项组就可以，如下图

如果需要默认选中那一项，只需要右键选中就可以了。

2.下拉菜单栏

想要达到点击出现下拉菜单栏的效果可以先设置几个二级菜单将他们同时选择→组合→隐藏，然后

即可达到想要的效果。

3.通过局部变量实现加法计算器

原文链接：https://blog.csdn.net/qq_48983697/article/details/119188046

四、Axure 动态面板基础应用

以人人都是产品经理网站首页为例，我们从下图可以看到，当我们左右调整窗口宽度的时候，导航栏的背景(白色通栏)会跟随宽度一起调整，上下滚动的时候，导航栏始终固定在页面顶部：

接下来我们用【动态面板】来实现一下这个效果。

首先在 Axure 工作区拖入一个动态面板，如果动态面板中没有放任何内容的话，在页面中是看不到的，所以这里我们给动态面板加一个填充色(顶部工具栏无法直接给动态面板填充颜色，只能通过【样式】工具中的【填充】板块进行设置，也可以填充图片)：

接下来为了在页面中能够滚动，我们需要让页面的内容超过浏览器高度，这样浏览器才会出现滚动条，能够进行滚动，这里的页面内容我们用【占位符】代替：

看一下网页中的效果：

可以看到，通栏没有占满浏览器宽度，滑动页面的时候也不能固定在顶部。别急，我们还需要进行一些设置。

首先我们在【样式】中勾选【100%宽度】：

接着我们点击下方的【固定到浏览器】，在弹出的设置窗口中勾选【固定到浏览器窗口】，选择【左侧】：和【顶部】，勾选【始终保持顶层】：

再次预览效果，就可以看到，通栏占满浏览器的宽度，并且可以随着浏览器宽度自动调整，滚动页面时，通栏也会固定在页面顶部：

为了让大家更好地体会到【固定到浏览器】这个功能，我再举一个例子，还是人人都是产品经理的某个页面的通栏，我们可以看到，当我们对浏览器窗口宽度进行缩放的时候，头像并不会始终固定在某个位置，而是会贴着浏览器边缘动态变化：

我们在刚刚的基础上进行修改，实现这个效果。

我们再拖入一个动态面板，放在通栏右边，填充一个底色：

接下来再设置它【固定到浏览器】，这次选择固定到【右侧】，【边距】设置10，不完全贴着右侧，同样固定在顶部不变，Axure 已经自动根据元件位置设置好顶部边距：

预览看看效果：

原文链接：https://blog.csdn.net/qq_45061258/article/details/132095610

五、总结与收获

Axure：专业的原型设计工具--功能强大，高保真设计

通过学习和实践，我深刻体会到Axure在高保真原型设计方面的强大能力。它不仅提供了丰富的控件库，还支持高度自定义，能够满足复杂界面设计需求。例如，在记账本项目中，利用动态面板创建复杂的导航菜单和多级页面切换效果，极大地提升了用户体验。

墨刀：简单易用的团队协作工具--简单易用，快速上手

墨刀的操作界面简洁直观，提供了丰富的组件库和模板，即使是新手也能快速上手。它支持快速创建低保真和高保真原型，适合在项目早期快速验证想法。在记账本项目中，我能够快速搭建出记账功能的基本界面，包括输入框、分类按钮、数据展示区域等。

通过学习和实践Axure和墨刀，我深刻体会到了它们各自的特点和优势。Axure功能强大，适合高保真度的原型设计和复杂的交互逻辑，但学习曲线较陡；墨刀简单易用，适合快速上手和团队协作，适合中小团队和项目早期快速验证想法。在实际项目中，可以根据项目的具体需求和团队情况选择合适的工具。