创建交互式应用程序原型的最佳方法是什么？

Question

这个问题应该从一般的角度来解释，而不是仅仅针对网络应用程序或桌面应用程序。

我一直在寻找一种简单易用的方法来为 Web 应用程序创建交互式原型。我想使用一种技术，允许简单的 UI 创建，特别是在进一步迭代中重新创建和修改 UI。用模型数据填充 UI 应该非常简单。该技术可能需要简单的编程形式，例如指定从 UI 元素 A 到 UI 元素 B 的拖放行为。

我目前使用的工具之一是 Adob​​e Flex Builder。附带的 GUI 设计器非常好，到目前为止我已经掌握了一些 AS3 技能。问题是将数据添加到 UI。它总是导致我编写代码来检查和解析 XML 树结构，并主要调试原型的这一部分。太麻烦了！

许多人使用的另一个工具是 PowerPoint，它涉及一种非常麻烦的创建 GUI 的方法，即在单独的幻灯片中绘制交互的每个部分。决不！如果使用纸质原型，我会更快。其他（更好！）自由形式绘图工具也是此类别的一部分（我是一个快乐的重量级 inkscape 用户），但原型制作和模型显然不是它们的主要目的。Viso 的 UI 模板调色板使其比绘图竞赛更好一些。

据我所知，快速原型制作的主要竞争对手是：

• 艾瑞斯
• 埃克苏尔
• 瑟琳娜和其他？
• 维索
• Powerpoint、Illustrator、Inkscape 或任何其他自由形式的绘图工具
• 纸质原型
• 具有良好 GUI 构建器的 IDE（例如 Flex Builder Designer 和 Netbeans Matisse）

我的观点是，真正的 GUI 构建者是一个很好的起点。您目前的做法是什么？请概述您的流程以及优缺点作为此处的答案。

Answer 1

真正的 GUI 构建器是：

• 慢得多
• 只有程序员可以使用它们（尝试向分析师解释如何在 VB 中填充表格）
• 他们不允许你即时注释你的模型
• 没有皮肤（例如黑与白）创建不会被误认为“即将完成”的应用程序的屏幕

虽然专门的模型工具通常是：

• 沟通导向
• 可以将您的模型（连同您的笔记）打印或导出为 PDF/HTML/Word 等
• 更好的有一些“主屏幕”变体，因此您可以从少数主应用程序屏幕中获得数百个模型（当您尝试与客户讨论真实场景时，您很快就会得到相当多的模型）
• 足够快，以便您可以在会议中实时制作原型

大约十年前，我对上述所有内容感到沮丧，并创建了自己的工具： 样机屏幕. 。它很快就变得非常流行:-)

这是我所知道的此类专用工具的最完整列表。其中许多是免费的： http://c2.com/cgi/wiki?GuiPrototypingTools

Answer 2

快速而肮脏的纸质原型设计：幻灯片（参见： Powerpoint 原型设计工具包)

-非常适合轻松组合可以展示的原型。幻灯片性质也可以作为模拟交互的替代品。缺点是缺乏标准化。不适用于纪律严明的项目。

严格的纸质原型设计：维西奥

-标准化、功能齐全，但比较繁琐

交互式原型设计：视觉工作室

- 使用拖放和事件构建非常快速的交互。可以是数据驱动的。您甚至可以构建一个原型“基础”作为入门套件。唯一的缺点是实际上将其作为生产应用程序的诱惑。;)

Answer 3

还有 巴尔萨米克. 。我有点喜欢它，但通常很快就会厌倦这些东西。我最终使用了笔和纸或 OS X 的界面生成器，它并不比所有这些原型设计工具更难使用。

Answer 4

如果您谈论的是模型/线框（即静态图片）Visio 是首选工具。

您提到的大多数软件要么高于普通商业用户的水平（即您需要专家来制作模型，而不是业务用户来帮助您）或者不是为了模型的目的而创建的。

如果您需要动态原型，那么有很多选择，一切都取决于您在团队中拥有的技能类型。例如，我有一个在 HTML 方面非常强的人。对他来说，在记事本中从头开始创建 HTML 页面会容易得多，尝试在 WYSIWYG 工具中使用 Flash 执行相同的操作。其他一些人拥有良好的 Flash 技能并且可以使用它们等。

Answer 5

表达混合 (http://www.microsoft.com/express/products/overview.aspx?key=blend) 可用于在 XAML 中创建快速模型。您可以将模型的数据存储为 XAML 中的内联 XML，也可以将其快速转换为 WPF/Silverlight 应用程序，并使用 Visual C# Express 在模型背后构建基本业务逻辑（http://www.microsoft.com/express/vcsharp/）或 Visual Studio 2008。