我应该如何创建lo-fi（非交互式）UI原型？

10

我目前正在研究一些基本的原型，一方面是收集需求，另一方面是设计最终的UI。

目前，我正在尝试使用便利贴来构建屏幕，其中黄色的提示信息和粉红色的操作（按钮或菜单）。想法是您可以轻松移动，删除和添加信息。但是我敢肯定还有更有效的方法。

为开发人员有效创建非交互式UI原型的推荐方法是什么？

又为什么呢？

我尝试了一些笔，纸和便利贴版本，它们像铅球一样掉下来（可能是我的绘画技能）。最后，我使用了Balsamiq，到目前为止，它受到大多数用户的欢迎，并且得到了它的原型。las，有些人仍然对第一个应该通过lo-fi原型了解应用程序应该做什么的想法有疑问，他们真的想在承诺任何事情之前先“看屏幕上的东西”。

prototyping

— k
source

1

“ A，有些人仍然对第一个应该了解应用程序应该做什么的想法有疑问” –实际上，对话框编辑器可能是原型化用户界面的最快方法。它并不总是理想的，但是只要您愿意放弃前几个版本，并且您的客户知道屏幕布局并不意味着您就完成了99％的工作

— Steve314

1

@mlk，您好，我认为您的问题已被关闭，因为这是一次民意调查，因此我对该问题进行了编辑，以将其从一项民意调查更改为询问每个人如何进行原型设计，变为一个可靠的SE问题，即有关如何有效地制作非交互UI原型的问题。。如果更改太多，请随时进行进一步编辑或回滚更改。我已投票决定将其重新开放，但仍然需要社区其他一些投票才能重新开放:)

— Rachel

14

我更喜欢白板。

它使您在做出决策时很容易进行更改，而无需重画整个内容。与其他（附近）开发人员共享很容易。使用便签或其他颜色进行注释很容易。

— 鱼烤面包机
source

1

+1。获取（然后尝试将其挂起；）两种（或更多！）颜色的标记。当您在讨论中切换齿轮时（例如，当您从谈论小部件应该去的地方切换到谈论它们应该如何交互时，请更改颜色。）请保持新鲜，以便人们可以阅读。

— Mike Clark 2010年

+1也看起来不像Balsamiq那么花哨，但是自由远远超过了Balsamiq-无需搜索窗口小部件，也不受该程序可用功能的限制。

— 2013年

7

Balsamiq样机通常是呼叫的第一站，几乎与使用笔和纸一样快并且可重复使用。

另外，您可以根据需要添加某种程度的交互性，例如将页面链接在一起。

http://balsamiq.com/

— 托比
source

5

Pencil Project是一个Firefox插件，可以执行简单漂亮的模型。

Pencil提供了各种内置形状集合，用于绘制从桌面到移动平台的不同类型的用户界面。从2.0.2开始，Pencil附带了预安装的Android和iOS UI模具。这样一来，通过简单的安装即可开始对应用进行原型设计。

铅笔中还实现了流行的绘图功能，以简化绘图操作。

— 安德鲁·刘易斯
source

5

我将MS Paint和Visual Studio结合使用。我使用VS将所有想要的控件拖放到窗体上，然后将其截图到MS Paint中以重新排列它们，直到我喜欢它的外观为止。

这样，我可以使用简单，熟悉，免费且始终可访问的工具（对我而言）来模拟我的UI，并且客户端可以看到UI，因为一旦应用程序完成，UI可能会看起来像。另外，VS常常以包含我项目的开始而结束。

编辑： 托比（Toby）的回答将我引向Balsamiq，这现在是我将UI原型呈现给其他人的主要选择工具。

我有时仍会拔出MSPaint或笔/纸，但这通常仅在我草拟基本UI设计以供我参考时，或者如果我想为客户提供完整屏幕的两个选项（例如，“想要这里还是这里的按钮？“）

— 瑞秋
source

2

听起来您使用的是好的方法，但是您遇到了让人们接受快速成型实用程序的阻力。每个人都喜欢编写代码，但是如果半小时后，他们仍在与JScrollBars战斗，并且您已经生成了12个模型，他们可能会理解这些工具的优势在于快速迭代。

话虽如此，各种低保真方法具有不同的优势：

白板原型非常有用，因为任何人都可以参与其中，并且可以帮助您提出想法，但这只是一个讨论工具。如果要对设计进行迭代，则仅想因为很难擦除旧标记就希望进一步前进。;）
纸张原型制作非常有用，因为人们知道它是无常的并且可以更改，您可以快速迭代，但仍然可以获得很好的结果。在纸上原型上与一些用户进行可用性测试，您可以非常低的成本非常迅速地获得有关设计的大量反馈。当人们看到并感受到纸上的界面时，他们就会真正投入其中。
Balsamiq是快速制作可重复使用的纸张原型的捷径。我打印出屏幕截图并将其用作纸张原型。我还在会议期间使用它来帮助构思出想法，就像白板原型制作一样。我还使用了Visio和OmniGraffle。
剪切和粘贴原型非常适合在现有设计上进行迭代-截屏，在图像编辑器中将其切碎，并与新控件（来自Balsamiq或其他地方）混合并匹配。同样，您的目标是快速迭代原型，而不是看起来不错的东西。

我从不与用户进行原型设计。我会根据我们拥有的用户数据与设计团队合作。用户不是设计师 ; 如果将他们视为设计师，最终会得到含水番茄酱，苦咖啡（感谢Malcolm Gladwell）和Homer汽车。收集用户对您设计的输入，并使用它与设计团队一起完善设计。

— 亚历克斯·费曼
source

2

我的第一个模型始终是铅笔，纸或白板，但是一旦确定了基础知识，我通常会使用HTML。我有一堆占位符图像，它们只是说“ Header”，“ Banner”，“ Image”，“ Chart”等。一些简单的CSS可以合理地进行布局，我已经完成了。在控件上添加一些JS可以使您获得一些外在的功能，人们似乎只是在“更好地”获得它。

唯一的问题是，我可能是世界上最糟糕的UI设计师，有时不得不提醒人们我只是在收集需求，而不是向他们展示完成的东西。我经常将背景设置为粉红色或其他颜色，因此无论何时有人问“它必须是粉红色吗？” 我可以反驳“这只是一个模型，真实的东西看起来会有所不同”（或“您必须与设计师讨论这一问题”）。

— TMN
source

1

我先使用笔和纸，然后在快速绘制UI之后几次，尝试在PowerPoint中使用2到3次。在进入实际的编辑器之前进行5或6次迭代可以帮助我减少无法使用的UI（例如，当用户尚未看到X时，基于文本框X生成内容Y）。我认为这是立即摆脱愚蠢的机会。

— 摩根·赫洛克
source

1

笔和纸/白板，您还可以使用Visio或类似工具（Visio带有用于通用控件的UI模板）。有时，我拍摄现有的（类似）UI，并使用Paint.NET之类的绘制程序将新UI剪切并粘贴到该UI上。

— 约翰·L
source

1

我已经在Delphi中完成了几次快速原型制作。与在powerpoint或visio中相比，它可以非常轻松地非常快速地拼合屏幕布局，速度要快得多。生成的exe可以附加到电子邮件，而无需任何依赖。由于我使用它来原型化Web应用程序，因此没有人将原型与中途完成版本混淆的危险。

我已经尝试过使用Sencha Ext Designer进行相同的操作，但是Ext JS的布局系统更难使用，并且感觉比快速迭代想法更麻烦而不是方便。

— 乔里·塞布雷希茨（Joeri Sebrechts）
source

1

我并不总是使用相同的方法。我使用的一些技术是（按频率的大致顺序）：

白板（用于交互式原型/讨论。事后拍照！）
RAD风格的GUI设计器（Visual Studio，NetBeans，Delphi）
- 擅长于此，它实际上可以成为创建“窗口，小部件和表单”应用程序原型的最快方法之一。奖金：原型最终看起来非常专业，这取决于您将它们放在一起的速度。一旦原型被批准，它们有时甚至可以用作创建真实物品的起点。
纸和笔/铅笔（通常用于头脑风暴）
磁盘上的静态HTML / CSS / JS文件
- 我以为所见即所得的设计应用程序在这里不会受到伤害，但是我通常只是破解原始HTML。无论如何，我并没有做很多事情。
矢量绘图工具-Illustrator / Inkscape / Visio / PowerPoint / Impress
栅格图形工具-Photoshop / Gimp
ASCII艺术;-)

— 迈克·克拉克
source