原型图线框图_16个原型设计和线框图设计工具

原型图线框图

8. Balsamiq样机 (8. Balsamiq Mockups)

Balsamiq Mockups (price:$US79, demo available) is an interesting product running on Adobe AIR. Its representation of the interface elements has a refreshing hand-drawn, sketch-like quality to them. This does help promote the degree of changeability of the wireframes, as they look very much like a draft. If you lack the skills to create hand-drawn sketches then Balsamiq is a useful tool, as it allows you to produce quality roughs. Balsamiq also offers a standard collection of interactive screen elements, which is helpful to start off with.

Balsamiq Mockups(价格：79美元，演示可用)是在Adobe AIR上运行的有趣产品。它对界面元素的表示使它们具有清新的手绘，类似草图的质量。这确实有助于提高线框的可更改程度，因为它们看起来非常像草图。如果您缺乏创建手绘草图的技能，那么Balsamiq是一个有用的工具，因为它可以让您生成高质量的毛坯。 Balsamiq还提供了交互式屏幕元素的标准集合，从一开始就很有帮助。

Balsamiq Mockups also introduces BMML (a flavor of XML), which enables you to export your wireframes.

Balsamiq Mockups还引入了BMML(一种XML格式)，使您能够导出线框。

However rather than a prototyping tool, it’s more targeted at communicating the concepts of a proposed interface via wireframing and the like.

但是，它不是原型工具，而是更旨在通过线框图等传达建议接口的概念。

9.清醒规范 (9. Lucid Spec)

Lucid Spec (price: from $US499, demo available) from Elegance Technologies is a windows-based .NET application that’s almost a clone of Axure. It has a series of rapid screen drawing tools and a prototyping testing mode they call “instant application simulation,” which can be viewed in full screen mode or within the application. There’s even a stand-alone Lucid Spec Player that allows you to conduct prototype testing without the need for the full application.

Elegance Technologies的Lucid Spec (价格：499美元，演示可用)是一个基于Windows的.NET应用程序，几乎是Axure的一个克隆。它具有一系列快速的屏幕绘制工具和称为“即时应用程序仿真”的原型测试模式，可以在全屏模式下或在应用程序内查看。甚至还有一个独立的Lucid Spec Player，可以让您进行原型测试而无需完整的应用程序。

The one aspect that Lucid Spec lacks is allowance for those between state, Ajax-like interactions. The interactions presented are very much based on the traditional, page-by-page screen flow.

Lucid Spec缺乏的一个方面是允许状态之间，类似于Ajax的交互之间的交互。呈现的交互很大程度上基于传统的逐页屏幕流程。

10. ConceptDraw Pro (10. ConceptDraw Pro)

ConceptDraw Pro (price: from $US249, demo available) promotes itself as an alternative to OmniGraffle and Visio, aiming at the business and technical diagramming market.

ConceptDraw Pro (价格：249美元起，可提供演示版)作为OmniGraffle和Visio的替代产品进行自我宣传，以商业和技术制图市场为目标。

I’m pleased to say it does live up to these claims with various functions that are comparable to its competitors.

我很高兴地说，它确实具有与竞争对手相媲美的各种功能，可以满足这些要求。

In addition to this it also has its own scripting language, ConceptDraw Basic. It’s possible with this scripting language to generate complex, customized prototypes. If you want to avoid going down the custom scripting route, you can use the standard export to HTML or PDF for prototyping.

除此之外，它还具有自己的脚本语言ConceptDraw Basic。使用此脚本语言可以生成复杂的，自定义的原型。如果要避免沿用自定义脚本编写路线，则可以使用标准导出到HTML或PDF进行原型制作。

ConceptDraw also has a Web Design plugin for us web designers, WebWave Plugin (price: from $US99, demo available). The WebWave Plugin streamlines the design process, allowing easier development of site and content structures to the mocking up of medium resolution wireframes – a bit like coloring in the gray boxes. You can then take the final mockup pages from ConceptDraw and produce the CSS and pages for a prototype.

ConceptDraw还为我们的网页设计师提供了一个Web设计插件WebWave插件(价格：99美元起，有演示版)。 WebWave插件简化了设计过程，使站点和内容结构的开发更容易，以模拟中等分辨率的线框-有点像灰色框中的颜色。然后，您可以从ConceptDraw中获取最终的模型页面，并为原型生成CSS和页面。

ConceptDraw Pro is available for both Windows and Mac platforms.

ConceptDraw Pro可用于Windows和Mac平台。

11. iPlotz (11. iPlotz)

iPlotz (price: free to $US99 per year) is a new web application aimed at the design and developmental life cycle market. It bundles project management functionality as well as wireframing, collaborative commenting, and testing prototype generation. Being browser-based this application can be used anywhere there is web access, allowing for true remote collaborative design and implementation.

iPlotz (价格：每年免费至99美元)是针对设计和开发生命周期市场的新型Web应用程序。它捆绑了项目管理功能以及线框图，协作注释和测试原型生成。该应用程序基于浏览器，可在有Web访问权限的任何地方使用，从而实现真正的远程协作设计和实施。

Visually, iPlotz presents itself as an attractive and professional application. It’s a Flex application, and hence all the features from management to preview are accessed via the Flash interface, and so will require the latest Flash plugin, an easy ask for a designer or developer.

从外观上看，iPlotz展现为有吸引力且专业的应用程序。它是一个Flex应用程序，因此，从管理到预览的所有功能都可以通过Flash界面访问，因此需要最新的Flash插件，这对于设计人员或开发人员来说都是一件容易的事。

The rapid generation of wireframes within this application reminds me of the speed and ease of use of Axure, but with the hand-sketched look of Balsamiq Mockups. Another nice thing about iPlotz is that its focus is just on web design, nothing else. This is a pleasant change.

在此应用程序中快速生成的线框使我想起了Axure的速度和易用性，但带有Balsamiq Mockups的手绘外观。 iPlotz的另一个好处是它的重点只是网页设计，而没有别的。这是一个令人愉快的变化。

It’s early days for iPlotz, however there are a few items that do need addressing. The commenting interface can be a little distracting; the comments tend to crowd the screen if you have more than a few. There is only one font face available – comic sans. Also, at present the export functionality is limited to JPG, PNG, or a PDF. Still, this application is definitely one to watch.

对于iPlotz来说还处于初期，但是有一些项目确实需要解决。评论界面可能会让人分心；如果您的评论过多，评论往往会挤满屏幕。仅有一个可用的字体样式-comic sans。同样，目前，导出功能仅限于JPG，PNG或PDF。尽管如此，此应用程序绝对是值得关注的应用程序。

12.模拟 (12. Go Analogue )

There is a lot to be said for stepping away from the computer and doing the initial wireframing with pencil and paper. You could extend this to paper prototyping as well. It’s fast (to build), cheap, and easy to use. For groups you can prototype using a large whiteboard, markers, and a few magnetic page elements. Both these methods tend to be highly interactive with the audience and can bring a moderate degree of humor to an otherwise dry process.

离开计算机并使用铅笔和纸进行初始线框绘制有很多话要说。您也可以将其扩展到纸张原型。它快速(构建)，便宜且易于使用。对于小组，您可以使用大白板，标记和一些磁性页面元素来制作原型。这两种方法都倾向于与观众高度互动，并且可以给原本干燥的过程带来适度的幽默感。

There are downsides to these analogue methods as it can be slow to produce and revise the screens, as well as being easily disregarded by management because of the disposable nature of the final product. I have found that they’re useful for the generation process, but the final documentation needs to be presented in a formal tool.

这些模拟方法有缺点，因为生产和修改屏幕的速度可能很慢，并且由于最终产品的可抛弃性，很容易被管理人员忽略。我发现它们对于生成过程很有用，但是最终文档需要以正式工具提供。

多功能应用 (Multifunctional Applications )

13. PowerPoint或主题演讲 (13. PowerPoint or Keynote )

Often an organization is unable to afford specialized software for prototyping or wireframing. This is where applications like Microsoft PowerPoint (price: from $US229, demo available) or Apple Keynote (price: from $US79, with iWorks, demo available) can be used. Both these packages are well-suited to producing very rapid, simple prototypes. They’re highly compatible with the wide range of most teams’ skill set, so by using these tools you can usually have any team members immediately contributing to a prototype with ease. The downside is many of the finer interactive elements, such as between states, are missing, and your logic path tends to be of a very linear nature. Still, you can often export the prototype to HTML or Flash as well.

通常，组织无法负担用于原型设计或线框图的专用软件。在这里可以使用Microsoft PowerPoint (价格：229美元起，有演示版)或Apple Keynote (价格：79美元起，有iWorks，演示版)之类的应用程序。这两个软件包都非常适合生产非常快速，简单的原型。它们与大多数团队的广泛技能高度兼容，因此使用这些工具通常可以使任何团队成员立即轻松地为原型做出贡献。缺点是缺少许多更好的交互元素，例如状态之间的交互，并且您的逻辑路径倾向于具有非常线性的性质。不过，您通常也可以将原型导出到HTML或Flash。

14. Adobe Fireworks (14. Adobe Fireworks)

Adobe Fireworks (price: from $US299, demo available) is a tool I’d yet to consider using for prototyping – being a Photoshop devotee from way back. However, all this has changed with the release of Adobe CS4.

我尚未考虑使用Adobe Fireworks (价格为299美元，有演示版)做为原型制作工具-一直以来都是Photoshop爱好者。但是，随着Adobe CS4的发布，所有这些都发生了变化。

Fireworks is now shaping up to be a viable tool for producing both low and high fidelity prototypes, using nested symbols, smart guides, as well as generating all the code behind it. As usual this code suffers a little from the automatic generation process, so it’s going to need to be massaged into a reasonable shape if you want to reuse it for your final production model.

现在，Fireworks正在成形为使用嵌套符号，智能指南以及生成其背后的所有代码来生成低保真和高保真原型的可行工具。通常，此代码在自动生成过程中会遇到一些麻烦，因此，如果您想将其重新用于最终生产模型，则需要将其压缩为合理的形状。

A side note here is that I know of others also using Adobe Photoshop and Illustrator, or Microsoft Expression Studio as wireframe documentation tools. These tend to work well when you have a good library of objects, such as brushes and the like.

这里的一个补充说明是，我知道其他人也使用Adobe Photoshop和Illustrator或Microsoft Expression Studio作为线框文档工具。当您拥有良好的对象库(例如笔刷等)时，这些方法通常会工作良好。

15. HTML (15. HTML)

If you have the skills, you could just develop your prototypes in HTML. This is especially useful if you are producing the front-end code that’s going to be consistent in standards with the final web site anyway. Doing it this way will save you time and money by reducing the overall production time.

如果您具备这些技能，则可以使用HTML开发原型。如果您生成的前端代码无论如何都将与最终网站的标准保持一致，这将特别有用。这样可以减少总的生产时间，从而节省时间和金钱。

These days – with the use of various jQuery plugins – you can represent nearly all the between states or major interface types that have been proposed with ease.

如今，通过使用各种jQuery插件，您可以轻松代表已提出的几乎所有状态之间或主要接口类型。

Functionality is also available via the use of Protonotes; you can have your team collaborate on your prototype by leaving dynamic, virtual Post-it like notes.

也可以通过使用Protonotes获得功能；您可以通过留下动态，虚拟的便利贴(如注释)来让您的团队在原型上进行协作。

Even if your skill set falls short of being technically-oriented, you could use developmental platforms like Adobe Dreamweaver and its improved JavaScript Spry components to produce a reasonable visual representation.

即使您的技能不足以技术为导向，也可以使用Adobe Dreamweaver之类的开发平台及其改进JavaScript Spry组件来生成合理的视觉表示。

I will admit I have often done this, quickly pulling together a working HTML prototype from within Dreamweaver with little regard to the underlying code. Remember, it’s just a prototype and so only has to be visually representative of the final product. I shudder to say this, but in this case the code is secondary.

我承认我经常这样做，在Dreamweaver中快速收集工作正常HTML原型，而几乎不考虑底层代码。请记住，这只是一个原型，因此只需在视觉上代表最终产品即可。我不敢这么说，但是在这种情况下，代码是第二位的。

16. Adobe Flash (16. Adobe Flash)

Adobe Flash (price: from $US699, demo available) is a great tool for producing rapid interactive prototypes or screen flows, but is unsuitable for wireframing and specification documentation. However, via the use of the library objects, the timeline, and drawing tools it’s very easy to produce an interactive prototype. The one area Flash is especially suited is in the reproduction of those in-between states that many static presentation tools lack.

Adobe Flash (价格：699美元起，可提供演示)是一种用于生成快速交互式原型或屏幕流的出色工具，但不适合用于线框图和规范文档。但是，通过使用库对象，时间轴和绘图工具，很容易生成交互式原型。 Flash特别适合的一个方面是许多静态演示工具所缺少的中间状态的再现。

This functionality of using Flash as a prototyping tool is now being extended by Adobe with the introduction of an entirely new tool for designers and developers alike: Catalyst. Now I’ve yet to try Catalyst personally – I can only go off the Adobe video and the reports from colleagues that have seen it in operation. But trust me here, this application is going to change the marketplace and make RIA development the next big thing! There, I said it; some of you will disagree, and that’s fine.

现在，Adobe扩展了将Flash用作原型工具的功能，并为设计人员和开发人员引入了一种全新的工具： Catalyst 。现在，我还没有亲自尝试过Catalyst –我只能关闭Adobe视频以及已经看到该视频的同事的报告。但是请在这里相信我，此应用程序将改变市场，并使RIA开发成为下一件大事！在那里，我说了。你们中的一些人会不同意，这很好。

Another thing that Catalyst is promising for people like me that use a Mac, is that it will give us the jump on our colleagues using Axure. We shall see on that one.

对于使用Mac的像我这样的人，Catalyst所希望的另一件事是，它将使我们在使用Axure的同事中获得飞跃。我们将在那一看。

If you enjoyed reading this post, you’ll love SitePoint Premium; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Photoshop for Web Design.

如果您喜欢阅读这篇文章，您将爱上SitePoint Premium ； 向大师学习新鲜技能的地方。 会员可以立即访问所有SitePoint的电子书和交互式在线课程，例如Photoshop for Web Design 。

Image Attribution: Kevan

图片归因： Kevan

Go to page: 转到页面： 1 | 1 | 2 2

翻译自: https://www.sitepoint.com/tools-prototyping-wireframing-2/