有哪些好的免费在线原型绘制工具?_ZNDS问答

dreamark

我是指原型图绘制工具，或者是出图的工具，最终结果就是一张界面图；

原型设计是UI/UX设计过程的关键部分。设计人员可以根据目的创建高或低保真度的原型，从而允许他们测试功能，应用程序或网站。原型制作的目的是在创意完全发展之前对其进行测试，并开发出更好的用户体验。
用户体验设计和交互设计作品集必备：十大最新原型制作工具！
每个工具的特点都帮你写在下面了哟，可以根据自己的需求来选择哈~

01
Adobe XD
https://www.adobe.com

Adobe XD是UI / UX设计师中最常见的应用程序之一，它是多合一的线框构建的原型平台，可以制作：沉浸式原型，网站设计，运动，智能手机应用程序，语音界面等。它使团队可以在平台之间实时协作，同时直接从客户那里接收有价值的评论和反馈。

02
Figma
https://www.figma.com/

Figma提供了一个非常易于使用的拖放编辑器来创建线框和实用原型。它还具有很多沉浸式元素来制作原型动画。大多数设计师已经知道著名的基于Web的UI设计工具。虽然Figma被广泛称为UX设计应用程序，但它也具有用于快速原型制作的软件。其他功能包括Figmotion和Autoflow等插件，以及Arc Tool和Vector Networks的可用性。

03
Webflow
https://webflow.com/

Webflow现在正变得非常流行，因为它通过提供干净的语义代码和设计人员来加速开发人员的工作，基本上可以帮助进行原型设计，同时构建一个实时网站。Webflow是一种用于开发零编码敏感网站的著名原型方法。设计人员可以使用其预先构建的复杂功能来创建高保真设计，只需单击一下按钮，Webflow就可以将其转换为可投入生产的网站。

04
Sketch
https://www.sketch.com/

Sketch是面向全球数百万程序员的最广泛使用的用户界面和原型设计软件之一。Sketch是当今可用于创建所有形式的用户界面的最佳应用程序之一。这就像是Figma的更复杂且得到广泛支持的版本。虽然仅在iOS上可用,但它是一个基于矢量的图形平台，可用于处理样式，缩放和设计模板，并具有广泛的边界，渐变填充，混合模式等属性。支持无缝的生产过程，设计师可以在其中进行高质量的设计。

05
INVISION
https://www.invisionapp.com/

InVision是另一个专注于体系结构的Web应用程序。它提供了从线框图切换到UI设计所需的所有材料，它附带了许多有用的方法，可以改善团队合作和原型制作。InVision是当今设计师和顶级企业使用的最大，最受欢迎的原型制作工具之一。它支持实时设计更改并迅速从团队收集反馈，同时允许设计人员组织其工作流程，从而大大简化了项目协作。

06
Axure RP
https://www.axure.com/?r=cxl-ptt

Axure RP将强大的设计工具，SVG导入以及Sketch和Adobe XD集成与世界一流的原型相结合，您可以轻松地从Adobe XD和Draw中共享Axure RP原型和画板，并在屏幕上方收集输入；检查布局，获取CSS片段，并下载资产；并将静态图像转换为动态的Axure Cloud原型。该平台还方便了全面的文档编制，自动红线检查，并且无需任何代码即可更好地移交给开发人员。

07
Framer
https://www.framer.com/?r=cxl-ptt

Framer以其多功能性，身临其境的界面，功能设计和直观的模板而闻名。由于它是一个基于代码的原型平台，使用CoffeeScript来创建原型，因此它将从常规的拖放特性扩展设计师的动力。该软件的缺点是界面和工作流程可能过于复杂，需要开发人员/设计人员投入大量时间来学习如何使用。

08
Origami Studio
https://origami.design/

Origami Studio是Facebook创建和使用的macOS桌面应用程序。还有一个移动应用程序对应项，可让您在真实设备上查看原型。这是Facebook建立的原型制作工具，可用于他们的日常工作。在2013年，他们与世界分享了这一点。最初，它与Quartz Composer一起使用，但是Xcode环境的这一部分不是最佳的原型设计选项并不是什么秘密。这就是去年Facebook推出Origami Studio的原因-他们以前的原型工具但使用自己的环境。由于此举，它的性能已大大提高，但不幸的是，它仍然仅保留给Mac用户使用。

09
Marvel
https://marvelapp.com/

Marvel称自己为“数字产品设计平台”。尽管这种说法并不完全正确，但软件本身是程序员为移动和Web应用程序创建原型的理想解决方案。Marvel拥有所有可用资源，可用于构建从概念到模板的各种形式的移动和Web界面。它还有助于创建动画智能手机应用程序的手势交互。

10
Justinmind
https://www.justinmind.com/

Justinmind是一种原型设计工具，使设计人员可以专注于用户体验。它是创建线框和响应原型的理想选择，这些原型可以适应多种屏幕分辨率。设计人员应充分利用其全套模板和UI库来创建高保真原型。它还可以帮助他们处理巧妙的表单和数据列表，并且具有零编码技能。

11
其他原型制作工具

● UXPin —在Windows，Mac上或仅在任何浏览器中的一个位置进行设计，原型设计，协作。
● Blocs —向响应式网站的任何部分添加了一系列引人注目的滚动效果和动画，而无需编写代码
● Principle—通过多屏应用程序流程或新的交互和动画设计动画和交互式用户界面。
● Omnigraffle —用于需要可视化组织或交流的专业人员制作的用于绘制图表，快速原型和设计工具的UI样机工具。
● Mockflow —简单的线框图软件，可通过快速协作草绘界面布局来在UI设计上创建和协作。

● Slickplan —一个Web原型系统，可让您轻松地通过拖放界面定义文件夹，页面和链接结构。
● Proto—使用此无代码工具，创建外观和工作完全像您的应用程序一样的完全交互的高保真原型。
● Moqups-简化的Web应用程序，可帮助您在线框，模型，图表和原型上实时创建和协作。
● iPlotz —创建可单击的，可导航的模型和线框，用于制作网站和软件应用程序的原型，并与他人讨论您的创作。
● Gliffy —绘图和绘图软件，可让您拖放形状或使用模板和主题来满足原型制作需求。

● HotGloo —用于线框图和原型制作的UI设计软件，旨在为Web，移动设备和可穿戴设备构建界面。
● Mockingbird — UI设计工具，可通过将界面元素拖放到页面上来模拟您的想法，并可以自由调整和调整大小。
● Protoshare —协作原型制作工具，可帮助团队使用网站线框和交互式软件以及移动原型来可视化需求。
● Balsamiq —行业标准的低保真线框图软件，具有大量在线课程和资源，可用于学习线框图和UI设计。

微博APP在线原型实例（可编辑）
微博是基于用户关系的社交媒体平台，用户可以通过PC、手机等多种移动终端接入，以文字、图片、视频等多媒体形式，实现信息的即时分享、传播互动。微博基于公开平台架构，提供简单、前所未有的方式使用户能够公开实时发表内容，通过裂变式传播，让用户与他人互动并与世界紧密相连。

本次例子共19个页面，使用了摹客中最常用的8种交互方式以及15种交互动画，使用的组件包括面板、内容面板、选项卡等常用组件，展示基本的页面跳转。

实例地址：app.mockplus.cn/rp/example/…

文末福利：
送你高效原型设计神器，可领取团队版，最高可获得1年VIP。
新用户注册福利，最高可获得1年
在摹客官网 www.mockplus.cn/get-idoc
输入激活码【ug2021】即可领取摹客专业版3个月，若团队超过20人请联系（微信号：wenwb0077）申请更多时长；

想要绘制出好的原型，原型工具少不了！
6种原型设计工具大比对！ Axure,Invision, 墨刀……哪款适合你？
Axure

老牌原型设计工具，交互制作功能强大，当然同时也带来了较高的学习成本。设计区域是无限画布，方便给设计稿添加文字注解。在交互效果层面，可以实现非常多条件判断、巧妙运用可以实现更复杂的交互。不过同时也会带来“效率不高”的问题，因为细节过于繁琐，所以会加重产品经理或交互设计师在画原型时的负担。
此外，作为一款离线工具，Axure的原型预览和分享方式并不十分友好。浏览器预览本地文件需要安装插件；支持上传到Axshare分享，但在国内的速度也较慢。因为离线，Axure 文档存档会比较安心，不过如果涉及到多人协作，也会有“信息更新不及时”的问题。
Adobe XD

作为Adobe旗下的一款原型设计工具，有着平台自带的一个天然优势—用户可直接导入PS、AI、SKETCH文件作为原型素材。设计的页面间可以通过拖拽创建交互，可设置过渡动画；Adobe XD有提供基础组件元素、平台组件库和少量图标库。可以通过链接分享原型。此外，还支持设计稿的自动标注。
而作为一款本地工具，目前只能通过登录Adobe icloud账号云端管理项目。
当然，虽然官方有在宣传是免费工具，但是免费度非常有限：只能最多使用 2 GB云存储，Typekit，以及最多共享1个设计规范和1个原型。
Invision

作为目前国外非常知名的一款在线原型设计协作工具，Invision 的发展势头很强。虽然最一开始Invision 主要是做设计稿之后的交互原型和团队协作管理，比如可以顺畅衔接Sketch/PS设计稿，为设计稿做批注，以及Freehand功能可以实现团队自由讨论想法。
但后来发布的 Invison studio 具备从基础开始的设计功能，可以完成相当精细的设计稿，较为强大的交互动效功能也可以满足大多数设计者的动效需求。利用 InVision Studio，还可以将团队的设计规范落地在设计工作中。
不过对于国内用户来说，Invision 始终还有些不便利：比如全英文的界面；国内访问速度一般；以及价格较贵。
Proto .io

Proto .io 也是国外一款轻便好用的在线原型设计工具，在大多数浏览器中都能使用，支持导入Sketch和PS设计稿做交互。界面清爽，拥有较为丰富的UI组件。可以直接用链接分享原型，而且因为集成了移动录屏工具lookback，适用于用户测试场景：可以记录用户点击、滑动、点击区域；也可以记录用户的声音和facecam视频评论。
目前Proto .io 有协作功能，只是比较受限；此外，交互设计较为复杂，细节效果只能通过容器实现，上手成本较高。价格相对Invision较便宜，但相对国内产品来说仍然较高。
墨刀

作为国内目前广受认可的一款在线原型设计和协同工具，墨刀有内置丰富的UI素材和模板，清爽的界面，让设计原型的过程顺畅高效。墨刀同样支持Sketch设计稿的导入，拖拽式创建交互链接，可以通过链接或者二维码在电脑端或者移动端快捷预览原型。此外，设计师也可以通过墨刀进行自动标注，开发者也可以用墨刀进行切图。
而墨刀新出的版本更加强化了协同管理功能，满足了更大规模团队的需求。不仅多人团队可以在墨刀协同编辑/实时讨论，共同管理素材库，对于人员权限的管理也更加清晰分明。目前很多雇主在招聘产品经理时，已经会将墨刀列为和Axure并列的必备技能之一。
蓝湖

蓝湖也是国产的一款原型协作平台，在其官网上，蓝湖将自身定位为“简单好用的团队工作台”。
使用蓝湖可以导入Sketch/Photoshop和Adobe XD的设计稿（通过插件），并在蓝湖上做自动标注和交互原型。对于设计师来说，可在蓝湖进行设计图管理和自动标注。对于产品经理来说，可以在蓝湖做页面逻辑流程图和汇集产品文档。
不过蓝湖本身没有设计功能，必须依托于在Sketch/Photoshop/Adobe XD平台的设计。而交互效果的创建方式也相对较为隐晦，是笔者目前体会到的稍微不足之处。
<hr/>选择适合自己的原型工具开始你的原型设计之路吧！
好文分享：
墨刀：产品经理和项目经理的区别是什么？来看看你适合做哪个PM？墨刀：产品设计中的微交互是什么？为什么要使用微交互？墨刀：Axure用户的墨刀上手指南——01 页面，组件和交互

市面上最好用的在线设计工具，小白也能做出价值2000的图!

1. 腾讯瓦斯平台

腾讯瓦斯，得名于 canvas，提供海量模板素材的免费在线图片设计工具，拖拽作图操作简单，设计小白也可以快速设计海报、邀请函、信息图、工作总结、微信公众号等图片。

2. 懒设计

Fotor懒设计提供免费平面设计素材，海量海报，贺卡，名片，邀请函，淘宝banner等设计模板，拖拉拽即可在线完成设计，支持下载高清图片。

3. Canva

Canva为用户提供一个基于网页的设计平台，让非设计从业者也能进行各类图像设计。注册之后，用户能够根据文档类型，或自己从事的行业选择常见的设计类型。

选择“学生”，则能看到学生常用到的一些文档类型，如社团海报、Facebook首页头图、简历、杂志封面、书籍封面、宣传手册等等。

不好的一点可能是，国外网站，加载慢；

4. 创客贴

创客贴是一个做图的网站，是我见过模板最全的设计工具。在线平面设计工具，在线PS，免费设计模板包含海报、名片、PPT、简历、宣传单、易拉宝、邀请函、微信图片、封面、banner等，其中广告设计支持在线印刷。

5. 图帮主

图帮主，设计小白最爱的懒人设计神器。拖拉拽，秒出图，轻松搞定平面设计，提供五大类50多个场景的海量模板,让创意不再受限于工具。

6. 图怪兽

图怪兽是一个在线ps图片编辑器，它相当于ps精简版，可提供微信公众号图文在线编辑、在线ps照片处理、在线拼图、在线设计、平面设计、海报制作、在线图片处理等功能。

7. prezi

Prezi是个云端的简报制作网站，使用者可以在 Prezi 网站上制作简报，甚至可以与许多人一同编辑同一个档案。Prezi是采用故事板（storyboard）格式让演示者可以缩放图片，通过快捷的动画来演示关键点。

它打破了传统PPT的单线条时序，采用系统性与结构性一体化的方式来进行演示。Zooming User Interface（缩放式用户界面，简称Zooming UI）的特点是界面可缩放，zoom out就能纵观全局，zoom in则可以明察细节。

<hr/>
-END-
本文首发公众号：高效率工具推荐（gxltoos），转载请联系公众号授权。
关注公众号（gxltoos），回复【新媒体干货大礼包】【平面设计模板图库】【营销策划大礼包】有惊喜
本公众号是关于个人成长的公众号，只写有品质的干货文章，推荐有料的学习课程，把1000个神器装进口袋里，助你更高效地工作、学习和思考。

精彩推荐：

4个免费实用的 PPT 模板下载网站

快速文件搜索软件，用了ta工作效率提高10倍

超好用的几款搜索工具，建议低调收藏使用

7款免费原型设计工具，总有一款是你的菜！

身为一位产品经理或设计师，原型设计工具是必不可少的工作伙伴。但我们难免会遇到预算有限的时候，这时候，去哪里寻找一款好用的免费原型设计工具呢？以下，小编为大家精心挑选了7款免费的原型工具，并对其进行了简单的介绍以供参考！

1.摹客RP

免费方式：永久免费

功能特色：

自带交互效果的预设组件、海量图标、便捷的编辑方式，快速产出设计。
支持页面交互、状态交互、组件交互，以及设置多种触发方式和交互动作，轻松制作精细交互效果。
钢笔工具、铅笔工具、布尔运算、响应式布局等特色功能，设计创作自由随心。
支持多人同时在线编辑同一项目，共同完成原型设计。
设计稿中支持直接绘制流程图，清晰呈现项目逻辑。
强大的协作功能：团队评审、工程师查看页面数据、复制代码、撰写在线文档、任务管理... ...

适用情景：中高保真原型，快速原型，团队协作，WEB/移动端/平板原型，线框图，视觉稿

支持平台：Windows＆Mac

在项目立项之初，可能会涉及多方同事协同，包括设计、产品、运营，以及团队的领导，这个时候通常会采用快速原型工具，方便迅速地给团队提供原型预览。
这一阶段的原型设计工具，推荐摹客RP：同时具备 强大的高保真原型设计能力 和 团队协作能力。不仅保证了快速产出和精细设计两不误，同时满足产品经理、设计师的需要，摹客RP的协作能力更是不容小觑：多人实时编辑，便捷的团队评审，工程师查看页面数据、复制代码等强大功能非常适合团队使用。
最重要的是，摹客RP是一款真正完全免费的原型设计工具，不限时长、不限功能、不限页面，包括：

设计页面不受限制，灵感肆意发挥；
无需为成员付费，注册即可实时参与项目编辑；
无限导出离线演示包，无忧演示与汇报；
设计资源库自由搭建，团队共享不收费；
历史版本无限生成，随时查看及回溯。

只要下载摹客RP客户端，并参与活动，即可永久免费使用摹客RP。下载地址：
画原型做设计，摹客RP永久免费
2.Axure RP

免费方式：免费试用30天

功能特色：

支持交互设计
生成规格说明文档
输出HTML原型
版本控制管理
支持多人协作设计
母版功能
支持动态面板和复用模板

适用情景：视觉稿/高保真原型，大型复杂项目，Web线框图，网页原型

Axure RP是一款专业设计师不容错过的免费原型设计工具，设计师可以用它快速创建应用软件或Web线框图、流程图、原型和规格说明文档。作为一款专业的设计工具，它能快速、高效的创建原型，但对于新手来说，需要投入较高的学习成本。

3.Justinmind

免费方式：免费试用30天

功能特色：

支持手势交互
自定义组件（库）
支持动画
支持团队协作功能
支持版本控制
快速预览原型
多种导出方式（HTML+JS, Word, PNG, 导航地图）

适用情景：高保真原型，线框图，移动端原型

这也是一款适用于高保真原型和线框图的原型工具。不过对于新手设计师来说，这款工具的学习曲线也是比较高的。

4.Invision

免费详情：免费1个项目

功能特色：

项目反馈管理，团队协作，
支持手势和转场功能
快速创建热点链接页面
支持Sketch/Photoshop导入
支持版本控制
支持多种分享方式（URL, Email, SMS, Zip, PNF）

适用情景：线框图，移动应用原型

InVision可以说是一款较流行的免费原型设计工具，设计师可以利用它免费设计一个的项目。这款工具允许设计师编辑，分享和测试具有一定交互的应用原型。而其团队协作功能，即允许设计师导入原型，讨论和添加交互及动画，也为部分设计师用户所喜爱。因此，InVision更适合团队使用。

5.Flinto

免费详情：免费试用30天

功能特色：

支持转场动画，画面滚动流畅
支持创建手势交互
支持Sketch导入
支持在iPhobe/iPad上进行实时预览
分享原型

适用情景：多页面，复杂交互的原型，高保真原型

Flinto是一款mac上强大的移动应用原型设计工具，你可以使用它创建多种原型。从最简单的页面跳转到令人印象深刻的交互动效，无需任何代码和复杂的时间轴，我认为这正是大多数交互设计师所期望的。

6.Proto.io

免费情况：免费试用15天

功能特色：

丰富的移动端设计组件 (可自定义)
支持Sketch和Photoshop插件
大量现成的项目模板
支持原型预览（HTML，短信发送至手机预览），
支持多种文件导出形式（HTML, PNG, PDF）

适用场景：移动端原型，弱动画原型

一款专注于移动端原型开发的软件，可以建立全交互式的移动App原型。设计师可以直接在真实的移动设备上对原型设计进行测试。并且可以使用iOS或Android上的浏览器以全屏模式运行原型。不过这是款在线设计工具，设计师在进行原型设计时需要保持经常在线。

7.Balsamiq Mockups

免费情况：免费试用30天

功能特色：

独一无二的手绘风格
支持Linux, 支持WIKI风格的代码规则
内置大量模块（包括桌面App,移动端App及网站模板等）
支持多平台使用（Windows、Mac OS、Linux）
支持PDF导出
拥有种类繁多且风格独特的UI库

适用场景：低保真原型，静态网页原型，手绘风格原型

Balsamiq是一款免费且界面简洁的Mac原型工具，致力于是尽量给用户，即UX/UI设计师，产品经理和开发工程师，一种近似于直接使用笔和纸绘制原型草图的体验。它能够帮助设计师快速地直接在Mac电脑上绘制网页或Android/iOS移动端设备应用的草图。
对于一名设计师来说，掌握过硬的设计知识当然是必不可少，但设计工具的挑选也非常重要。尤其是在预算有限的情况下，设计师如何挑选到一款称心如意的原型工具呢？看完小编介绍的7款免费原型设计工具，相信你已经跃跃欲试了！心动不如行动，赶紧去试试这些工具吧！

相关阅读：

网页设计有难题？12款网页设计模板给你灵感！
极简网页设计技巧，打造简约之美
网站设计缺乏创意？视差滚动网站设计让你与众不同
设计类网站的“联系我们”页面设计盘点
网站着陆页设计，让用户开心着陆的10大技巧！
收集网站用户反馈的5个常用问题
时尚的不仅仅是它们的服装，还有它们的网站设计
这9款小众时尚的酒店网站设计，让你不再恋家
10个最新交互式Web设计实例欣赏
<hr/>设计协作用摹客，效率提高200%！

		自动登录	找回密码
密码			立即注册

有哪些好的免费在线原型绘制工具?

相关问题更多>

最新回答