原型设计工具

这篇博客介绍了四种原型设计工具:墨刀、Axure、Figma、Adobe XD。
墨刀 (Modao):

地址:https://modao.cc/
墨刀是一款专注于移动端原型设计的在线工具。它的直观界面和丰富的内置组件使得快速原型制作成为可能。墨刀的云端保存和分享功能极大地便利了团队协作和客户演示。尽管它在交互设计的灵活性上不如Axure,但对于追求效率和简洁性的团队来说,墨刀提供了一个非常实用的解决方案。
优点:

  • 高效的原型演示效果,适合产品设计确认与交互验证。
  • 丰富的元件库,无需自行编写,直接使用。
  • 方便的分享功能,通过二维码或链接快速预览产品demo。
    缺点:
  • 不适合做文档,主要用于交互设计。
  • 事件系统较简单,无法演示复杂的交互效果。

Axure

地址:http://www.axure.org/
Axure是原型设计工具中的佼佼者,以其高保真设计和复杂交互功能而著称。它支持丰富的动态内容和逻辑表达,使得原型不仅仅是静态的展示,更能模拟真实的应用场景。Axure的团队协作和测试功能也非常强大,支持多人编辑和用户反馈收集。虽然Axure的学习曲线较陡峭,但它为那些愿意投入时间深入学习的设计师提供了无与伦比的功能和灵活性。
优点:

  • 强大的交互编辑器,可以实现复杂的逻辑关系处理。
  • 丰富的交互元素库,包括高级组件。
  • 支持多人协作,云端平台文件共享和版本管理。
    缺点:
  • 学习成本较高,尤其是动态面板和中继器等高级功能。
  • 素材库有限,可能需要导入第三方素材库。

Figma

地址:https://www.figma.com/
Figma是一款基于云的协作界面设计工具,它支持实时多人协作和响应式设计。Figma的原型交互功能强大,支持创建交互式界面原型,添加过渡效果和链接,以模拟用户实际交互。
优点:

  • 基于浏览器的协作式UI设计工具,跨平台使用。
  • 实时多人协作和响应式设计支持。
  • 强大的原型交互功能和丰富的插件支持。
    缺点:
  • 中英文混排时文字的fallback支持不友好,对中文支持有限。
  • 插件较少,缺少一些扩展性功能。

Adobe XD

地址:https://www.adobe.com/
Adobe XD是Adobe推出的一款全面的UI/UX设计工具,它支持语音交互、动画和自适应布局等先进功能。Adobe XD的实时共享和协作功能使得团队成员可以轻松共享设计文件并进行评论和反馈。
优点:

  • 适用于Mac和Windows系统,与Creative Cloud集成。
  • 矢量编辑能力强,支持云端共享和协作。
  • 外观和操作与其他Adobe产品类似,易于上手。
    缺点:
  • 绘制复杂平面图不便,需要搭配其他Adobe工具使用。
  • 依赖第三方插件,可选择的插件库不多。

墨刀使用方法
一、创建新的应用
访问墨刀官网,登录之后,点击右上方的创建应用,可以选择不同的模板和设备类型,填写应用名称之后即可完成应用的创建,然后我们可以随时编辑应用或者与他人共同编辑和分享应用。

二、编辑应用
点击我们创建的对应应用进行编辑,进去之后会看到下图,其分为菜单栏、组件栏、编辑栏和预览排列栏几个部分。最左边是组件栏,我们可以在这里选择需要的组件,然后拖拽到中间编辑栏中进行设计;中间编辑栏里可以对选取的组件进行编辑;右边是预览排列,就是最终我们看到的页面的基本排列。

1、组件使用


如图,我们把左边组件栏中的一些组件拉到这个中间的编辑栏,通过双击对应的组件进行文字或者颜色的编辑:

2、页面管理

对于页面的管理,我们可以在最右边的页面管理栏进行新建或者复制页面,这样我们的原型也可以在不同页面之间跳转,如下图所示是一个原型部分页面树图:

3、页面跳转

如果要进行页面之间的跳转,可以点击组件,然后拉动组件旁边的超链接的样式图标到相应页面即可执行进行页面跳转功能,如下图所示:

三、导出下载图片或者安装包
点击页面上方的下载图标,具体如下图所示:

以下是我简单学习后使用墨刀做出的有关我们小组项目的游戏内界面:

posted @ 2024-05-16 14:02  成步唐龙周  阅读(19)  评论(0编辑  收藏  举报