
通过使用最好的线框工具,创建一个网站会变得更加容易。它们在视觉上将产品剥离,并使所有相关人员能够纯粹专注于用户互动性和功能。线框工具将使您的客户了解您的建议的应用程序或网站将如何工作,比简单的解释更全面。不需要依靠想象力来理解建议的功能,减少了出错的空间。
然而,寻找这些工具可能是一个艰辛的过程,因为现在有这么多种可用的工具,都提供不同级别的功能。我们已经找到了目前最好的工具,请往下看。
01.Miro
.jpg)
- 平台:MacOS, iOS, Windows
- 价格:免费/8美元
- 在此下载
Miro是一个协作系统,它为远程团队创建了一个工作中心。它拥有令人印象深刻的工具,如无限白板、小部件和预制模板,它声称要将数字工作空间标准化,让人感觉每个人都在同一个房间里。
它为线框、用户故事或客户旅程图以及头脑风暴过程提供了一整套工具。Miro还集成了20多个应用程序,包括Slack、Jira、Google Drive和Sketch,创造了一个无缝的体验。在全球范围内拥有超过200万用户,选用Miro是一个正确的选择。
02.Justinmind
.jpg)
- 平台:Mac OS, Windows Mac OS, Windows
- 价格:19美元/月
- 在此下载
基于Web的Justinmind包含了一个UI元素库,从按钮和表单到通用形状,以及一系列适用于iOS、SAP和Android的小部件。自定义样式包括,所以你可以添加圆角,裁剪的图像或颜色渐变,或者通过拖拽图形到浏览器中导入它们。原型可以导出为HTML。
03.Wireframe.cc
.jpg)
- 平台:浏览器
- 价格:免费/16美元
- 在此下载
Wireframe.cc提供了一个简单的界面,用于绘制你的线框,它摒弃了典型的绘图应用程序的工具栏和图标,因此将其列入我们的最佳线框工具列表。
有一个有限的调色板来帮助你避免这种特殊的拖延途径,UI元素是上下文敏感的,只有当你需要它们时才会出现。你是否喜欢这一点是个人品味的问题。
04.Adobe Xd
.jpg)
- 平台:MacOS,Windows
- 价格:作为Adobe Creative Cloud的一部分,从免费到每月19.99美元
- 在这里下载
Adobe Xd允许您将线框仅作为其原型制作工具套件的一部分,从而带您完成绘制线框的整个过程。与您的团队合作;创建站点地图,流程图和情节提要;建立功能原型;以及更多。您可以免费试用Adobe Xd,但像往常一样,您需要Creative Cloud订阅才能充分利用Xd令人难以置信的功能。
05.UXPin
.jpg)
- 平台:网络浏览器
- 价格:免费(基本)/每用户每月24美元起(高级)
- 在这里下载
您可以在UXPin中以最快的速度通过拖拽自定义元素来拼凑线框。这里有针对 Bootstrap、Foundation、iOS 和 Android 的定期更新的库,您的线框可以快速转换为高保真的模拟图。从那里,你可以创建完全互动和动画的最终产品原型。
另外,您也可以在Photoshop CC或Sketch中开始设计,然后导入UXPin进行原型制作。为了支持完整的用户体验流程,您可以创建并将文档钉在您的原型上,并为开发人员自动生成规格和风格指南。
6.Fluid UI
.jpg)
- 平台:Mac / Windows / Linux上的Web浏览器和桌面客户端,以及用于预览设计的Android / IOS应用
- 价格:$ 8.25起(个人)
- 在这里下载
Fluid UI内置了超过2000个builti组件的库,适用于iOS、Android、Windows等,通过从这些库中拖入元素来创建页面。
这个系统为你提供了一个很好的方法,通过创建链接来连接屏幕,形成一个所有东西如何结合在一起的图表,从而可视化地绘制出你的项目。将鼠标悬停在一个链接上,你可以选择改变你所使用的过渡类型。
07. Balsamiq Mockups
.jpg)
- 平台:MacOS,Windows,Web浏览器
- 价格:每月$ 9(2个项目)
- 在这里下载
Balsamiq模型包括从按钮到列表的几个拖放元素,每个元素的样式均为手绘图。这种线框图工具的基本前提是保持模型“有意的粗糙和低保真度”,以鼓励尽可能多的反馈。
08.Axure RP
.jpg)
- 平台:MacOS,Windows
- 价格:每位用户每月29美元(专业版)
- 在这里下载
除了创建模型外,Axure RP还允许您向布局中添加功能并创建交互式原型。该线框图工具的功能包括站点地图和各种UI元素形式的各种小部件。
可以为网站和应用程序都创建交互式HTML原型,您甚至可以使用内置的共享功能在手机上查看应用程序设计。
09.Pidoco
.jpg)
- 平台:Web浏览器和Android / IOS应用程序以测试原型
- 价格:免费
- 在这里下载
Pidoco与Axure相似,它包含各种拖放界面元素的库,以及添加多个页面和层的功能。
原型可以与客户在线共享,并包括用于协作反馈和讨论的功能。在手机上查看原型就像下载Pidoco应用程序一样容易。
10. Visio
.jpg)
- 平台:Windows
- 价格:每位用户每月5美元(初级)/ 15美元(专业版)
- 在这里下载
Viseo的真正优势在于技术图表而不是线框图。但是,对于已经习惯使用其他Microsoft应用程序(例如Word或Excel)的用户,该界面将非常熟悉。尽管很笨拙,但Viseo确实提供了附加工具,例如Swipr,它使您可以创建和导出可用的HTML原型。
11. InDesign CC
.jpg)
- 平台:MacOS,Windows
- 价格:作为Adobe Creative Cloud的一部分,每月$ 19.99起
- 在这里下载
通过包含动画,视频和对象状态,InDesign可用于创建交互式PDF,该交互式PDF充当网站或应用程序的线框。
该软件还具有创建页面元素库的功能,因此您可以创建各种可重复使用的界面图形的集合。
12. Photoshop CC
.png)
- 平台:MacOS,Windows
- 价格:作为Adobe Creative Cloud的一部分,每月19.99美元起
- 在这里下载
Photoshop不提供界面元素库,但是对于直接,快速的线框图而言,这对于设计人员而言是一个非常容易的选择。
如果您熟悉Adobe产品,可以很容易地勾勒出快速的想法,组合各种元素和图层并构建有效的线框。
13. Protoshare
.jpg)
- 平台:网络浏览器
- 价格:每人每月29美元(标准)(包括30天的免费试用版为标准)
- 在这里下载
Protoshare是一个在线工具,专注于协作和共享。它包括一个拖放元素库,一个站点地图,以及使用自定义CSS并插入自己的元素的功能。
由于强调在线协作,因此与某些其他工具不同,它不能导出为PDF,但是其原型功能值得考虑。
14. Penultimate
.jpg)
- 平台:iOS(仅iPad)
- 价格:免费
- 在这里下载
如果您纯粹是为iPad设计工作,那么直接在设备本身内草绘想法是确保您以正确的比例和适当大小的活动区域工作的理想方法。
使用Evernote的Penultimate,可以轻松保存草图和想法并将其发送给客户以供批准。
15. Pencil Project
.jpg)
- 平台:MacOS,Windows,Linux
- 价格:免费
- 在这里下载
Pencil是可用于Windows,Linux和Mac的免费开放源代码线框图工具。功能包括多页文档,外部对象导入以及对齐,z排序,缩放和旋转。
包括各种模板以及导出到HTML,PNG,Openoffice.org文档,Word文档和PDF的功能。
16. OmniGraffle

- 平台:MacOS,iOS
- 价格: 49.99美元起(标准iOS)
- 在这里下载
OmniGraffle是有效的创意工具,可让您快速将网站线框,图表,流程图或页面布局集中在一起。
选择文档类型,OmniGraffle在单独的元素之间进行上下文相关的联接,自动链接图中的线,并对齐线框或页面布局中的形状和元素。
17. Gliffy
.jpg)
- 平台:网络浏览器
- 价格:每位用户每月$ 4.99(团队)/ $ 7.99(个人)
- 在这里下载
Gliffy是一个工具,使您可以与其他团队成员就流程图,网络图等进行协作。它包括拖放组件,在线协作,图像导出和版本跟踪。
18.MockFlow
.jpg)
- 平台:适用于Windows和Mac的Web浏览器/桌面应用程序
- 价格:免费(基本)
- 在这里下载
Mockflow使您可以创建有效的原型,并强调协作和共享。它包括诸如页面和文件夹的站点地图创建器,版本跟踪,图像和组件集合,聊天以及HTML5导出之类的功能。
19. HotGloo
.jpg)
- 平台:针对测试和编辑进行了优化的Web浏览器/移动设备
- 价格: 13美元起(4位用户)(所有计划均包括7天试用期)
- 在这里下载
HotGloo的原型本身提供了丰富的功能,远远超出了简单的可单击按钮。例如,用户可以根据用户是否登录来更改显示的元素。
20. Moqups
.jpg)
- 平台:网络浏览器
- 价格:免费/每月€13(个人)/每月€20-€149(团队)
- 在这里下载
该工具旨在指导您完成粗略绘制线框的整个过程。与他人合作;创建站点地图,流程图和情节提要;并构建功能原型。
21.笔和纸

🙂🙂🙂🙂🙂🙂