跳到主要内容

20个最好的线框工具

Best wireframe tools for designers

+$Finding the best wireframe tools can take time as there are now more wireframe tools on the market than ever, each offering differing levels of functionality. The process of creating an app or website is made fundamentally easier with wireframe tools as it visually strips the product down and enables all involved to focus purely on user interactivity and functions.

+$Wireframe tools also help your clients to understand how your proposed app or website will work much more comprehensively than simply explaining to them verbally or in writing, lessening the room for error because no-one is having to reply on their imaginations to understand the suggested functions.

+$If you would like to go back to basics and create an app from scratch, our step-by-step tutorial on如何制作应用程序+$will be just what you need.

+$We've taken the hard work out of sifting through the masses of wireframe tools out there and found the best ones around right now. Some software can be used purely for simple wireframes, while others will allow you to create a working prototype.

+$Taking advantage of trial downloads or free software and finding the one that fits in with the way you work is the best way of finding out which one is right for you. So here are our top wireframe tools choices. Enjoy...

Wireframe tools: Justinmind

Justinmind提供了一个UI元素库和自定义样式库,可用于您的线框

+$(Image Credit: Justinmind)

基于Web的Justinmind包含一个UI元素库,从按钮和表单到泛型形状以及iOS,SAP和Android的一系列小部件。包括自定义样式,因此您可以添加圆角,裁剪图像或颜色渐变,或通过将图形拖入浏览器来导入图形。原型可以导出为HTML。

+$01. Miro

wireframing tools: Miro

+$Miro includes collaboration as well as wireframing tools

+$(Image Credit: Miro)
  • 平台:+$MacOS, IOS, Windows
  • 价钱:+$From Free / $8 (team)
  • +$Download Here

+$Miro is a collaboration system that creates a hub for remote teams to work within. With impressive tools such as an infinite whiteboard, widgets and prebuilt templates, it claims to standardise the digital workspace to make it feel like everyone is in the same room.

+$It presents an entire toolkit for wireframing, user story or customer journey maps, as well as brainstorming processes. Miro also integrates with over 20 applications including Slack, Jira, Google Drive and Sketch, creating a seamless experience. With over two million users worldwide, it's definitely hitting the right mark.

+$02. Wireframe.cc

Wireframe tools: Wireframe cc

Wireframe.cc提供干净,最小的界面

+$(Image credit: Wireframe.cc)

+$Wireframe.cc offers a simple interface for sketching your wireframes that eschews the toolbars and icons of a typical drawing app and has therefore made it to our best wireframe tools list.

有一个有限的调色板可以帮助您避免拖延的特定途径,UI元素是上下文敏感的,只有在您需要时才会出现。您是否喜欢这个是个人品味的问题。

+$03. Adobe Xd

Wireframe tools: Adobe Xd

Adobe的Xd是线框图和原型设计的强大动力

+$(Image Credit: Adobe )

Adobe Xd允许您将线框图作为其原型设计工具套件的一部分,它将引导您完成草图线框图的整个过程;与您的团队合作;创建站点地图,流程图和故事板;建立功能原型;以及更多。您可以免费试用Adobe Xd,但像往常一样,您需要Creative Cloud订阅才能充分利用Xd令人难以置信的大杂烩功能。

+$04. UXPin

Wireframe tools: UXPin

快速教程向您展示如何在UXPin编辑器中构建高级动画
+$(Image Credit: UXPin)
  • 平台: 网页浏览器
  • 价钱+$: From free (basic) / from $23 per user per month (premium)
  • +$Download Here

您可以通过拖放自定义元素以最快的速度将线框放在UXPin中。 Bootstrap,Foundation,iOS和Android定期更新库,您的线框可以快速转换为高保真模型。从那里,您可以创建最终产品的完全交互式和动画原型。

+$Alternatively, you can also start your designs inPhotoshop CC+$or Sketch and import into UXPin for prototyping. To support the full UX process, you can then create and pin documentation to your prototypes and auto-generate specs and style guides for developers.

+$05. Fluid UI

Wireframe tools: Fluid UI

每个项目都会生成一个QR码,您可以扫描该码以使原型在您的手机上运行
+$(Image credit: Fluid UI)
  • 平台+$: Web browser and desktop client on Mac/Windows/Linux, plus Android/IOS app to preview designs
  • 价钱+$: From $8.25 (solo)
  • +$Download Here

+$Fluid UI has built-in libraries with over 2000 builti components for iOS, Android, Windows and more, and pages are created by dragging in elements from these libraries.

+$This system provides a great way for you to map out your projects visually by creating links to join screens, forming a diagram of how everything fits together. Hovering over a link gives you the option to change the kind of transition you're using.

+$06. Balsamiq Mockups

Wireframe tools: Balsamiq Mockups

Balsamiq Mockups旨在复制白板上素描的体验
+$(Image credit: Balsamiq Mockups)
  • 平台:MacOS,Windows,网络浏览器
  • 价钱: +$$9 (2 Projects) Per Month
  • +$Download Here

Balsamiq Mockups包括几个拖放元素,从按钮到列表,每个元素都被设计为手绘图。这种线框工具背后的基本前提是保持模型“故意粗糙和低保真”,以尽可能多地鼓励反馈。

+$07. Axure RP

Wireframe tools: Axure RP

Axure RP允许您为网站和应用程序创建交互式HTML模型

+$(Image credit: Axure RP)
  • 平台:MacOS,Windows
  • 价钱:+$From $29 (pro) per user per month
  • +$Download Here

除了创建模型之外,Axure RP还允许您为布局添加功能并创建交互式原型。该线框工具的特征包括站点地图和各种UI元素形式的各种小部件。

+$Interactive HTML mockups (see more about网站样机+$here) can be created for both websites and apps, and you can even view your app design on your phone with a built-in share function.

+$08. Pidoco

Wireframe tools: Pidoco

Pidoco包含一个方便的拖放界面元素库
+$(Image Credit: Pidoco)
  • 平台+$: Web browser and Android/IOS app to test prototypes
  • 价钱:免费
  • +$Download Here

Pidoco与Axure类似,它包含各种拖放界面元素的库,以及添加多个页面和图层的功能。

您的原型可以与客户在线共享,并包括协作反馈和讨论的功能。在手机上查看原型就像下载Pidoco应用程序一样简单。

+$09. Visio

Wireframe tools: Visio

如果您习惯使用Microsoft Word或Excel,Visio的界面将会很熟悉

(图片来源:微软)
  • 平台:Windows
  • 价钱:每位用户每月5美元(简单)/ 15美元(专业版)
  • +$Download Here

Viseo的真正优势在于技术图表而不是线框图;但是,对于已经习惯使用其他Microsoft应用程序(如Word或Excel)的人来说,界面将非常熟悉。虽然非常笨重,但Viseo确实提供了诸如Swipr之类的附加工具,它允许您创建和导出可用的HTML原型。

+$10. InDesign CC

Wireframe tools: InDesign

InDesign允许您在线框中使用动画和视频
(图像信用:Adobe)

通过包含动画,视频和对象状态,InDesign可用于创建交互式PDF,充当您网站或应用的线框。

该软件还包括创建页面元素库的功能,因此您可以创建各种可重用界面图形的集合。

+$11. Photoshop CC

Wireframe tools: Photoshop CC

从未想过将Photoshop作为线框图工具?再想想!
(图像信用:Adobe)

Photoshop不提供界面元素库,但对于简单快速的线框图,它是设计师非常容易的选择。

如果您熟悉Adobe产品,则可以简单地勾勒出快速创意,将各种元素和图层分组,并构建有效的线框。看看我们的文章用于网页设计的Photoshop:20个专业提示更多。

下一页:为设计师提供更多线框工具



翻译字数超限