it-swarm.cn

哪些原型制作工具?

这很大程度上链接到以下问题:

但是,我不想将建议仅限于“基于Web的”工具,过去我发现并使用以下工具进行原型制作,线框图和模型制作并取得了一些成功:

我也知道有些设计师选择使用图形应用程序(例如Photoshop和Illustrator)来完成任务。

这是一个社区Wiki问题,因此请发布您的想法,并尝试将其保留在每个答案一个包中,以便我们可以对社区对这些工具的看法有所了解。

34
Richard Slater

对我来说,重要的是,至少在两个线程中保持原型,如果我想了解与动画的详细交互,则应保持在三个线程中。

线程1:流程,功能,形式和数据

  • 从纸上开始(实际上通常是与他人进行白板设计会议)。关注屏幕流,然后关注特别重要的屏幕的主要功能和潜在布局。尝试至少两个不同的想法。
  • Balsamiq的下一个保真水平。添加功能细节,调整布局,在屏幕上添加具体有意义的示例数据(在可演示场景中)。
  • 通过逐步将带有屏幕的单路径方案和特定的预期交互方式组合在一起,以创建工作流原型,以移至下一个屏幕。我倾向于使用PowerPoint,按顺序排列所有屏幕模型。该原型使您可以通过 多元演练 获得与实际用户的早期反馈,这对于完善概念,工作流,功能要求,术语等非常有效。
  • 尽早,经常且快速地进行迭代。

线程2:视觉程序和样式

  • 使用线程1中的一些关键模型,可以使用Photoshop或其他类似机制以像素级别的细节可视化它们(作为comps)。探索颜色,比例,视觉隐喻,版式等。至少产生3个想法。
  • 获得独立于工作流原型的反馈。使用偏好测试,AB测试,评论, 图表 等。
  • 迭代和完善。

主题3:详细的互动和动画

  • 专注于单个,详细的交互或动画序列,可以使用最适合您的任何工具来破解功能原型:HTML/CSS/JS,Flash,低级编程语言,UI组件框架/库等。至少两个替代交互。
  • 运行少量的简短可用性测试,包括定时数据收集。做比较测试。计算击键/鼠标单击/手势。
  • 迭代和完善。

总之,为特定目的构建特定种类的原型...以回答特定问题。没有一种类型适用于所有情况。将美学问题放在工作流程/功能反馈循环之外。对不同类型的问题使用适当,有效的方法。 “不要越过溪流。”

我发现几乎所有的基本设计改进都来自线程1和线程2,但是如果您超出标准控件范围,或者您的域是新的/复杂的/特定的(例如手势交互,多维模型),则线程3是必需的操作,用于精美的新OS的自定义控件,从而在一定程度上优化了人类的性能)。

35
Jim Jarrett

Pencil 是用于创建UI原型的好工具。它以 Firefox插件独立应用程序 的形式提供。

alt text

它比上面提到的其他一些工具有优势,因为它是免费和开源的。

12
david4dev

我前段时间读过一篇非常有趣的文章,名为“素描还是不素描”-您应该看一下: 素描问题 每当需要创造力时,您都不应使用工具来限制自己的想法你用。对于以后的清理工作,我个人选择的工具是靠近要处理的区域的工具。对于HTML/CSS,我通常从简单的布局开始,并逐步增加细节。同样可能对其他领域也有用。从低细节到高细节的原型。因此,我没有推荐的特定工具……这取决于。

所以我没有推荐的特定工具...取决于

10
Daniel Bleisteiner

我个人将Balsamiq用于前几个版本,然后使用 Blueprint 之类的CSS框架直接使用HTML原型。

8
Michael Warkentin

有趣的是 Adobe Fireworks 在此站点上很少有人喜欢。

除其他外,我很喜欢

  1. 在不同州建房
  2. 母版页
  3. 可以给HTML对象(如链接和图标)加上将要导出的标记(内部和外部链接,元数据,所有这些优点)
  4. 使用实际的样式表导出符合标准的基于CSS的布局
  5. 本机Illustrator和Photoshop集成徽标等。

我喜欢Balsamiq将IA推销给客户,然后喜欢Fireworks来获得可导航的原型,一旦设计师与他们合作。 Fireworks中完成的工作可以轻松导出到HTML和CSS,而HTML和CSS可以轻松转换为完整的静态网站或动态网站的模板页面/主题。

8
Matt

我要说的是,纸是最好的原型工具。是的,这很明显,但是比开始使用电子产品要好。

  • Paper告诉客户这是一个主意,是许多可能中的一种。
  • 纸张不会让客户陷入字体,颜色,形状或图像中。 balsamiq选择草图样式线框有原因
  • 修订是快速
  • 可以很容易地得到他们的实际笔迹,也不会吓倒他们。
  • 您可以对其进行扫描或传真,以使其成为电子产品。

之后,我非常喜欢html函数原型,但是论文降低了进行头脑风暴和 快速走廊ui测试的障碍。

引导某人完成纸本草图很容易:

"Where do you click if that transaction was a mistake?"
"Great now what do you do to find out which kitten has the highest durability?"

如果您不从草图入手并获得一些用户验证,那您将大开眼界,以后撤消和进行迭代只会变得更加昂贵。

5
MattK

我更喜欢在HTML/CSS中制作Web UI样机。

  1. 功能原型制作是一种更好的解决方案,因为用户可以获得实际体验,而不是无量纲(看着您的Photoshop)体验。

  2. 功能原型并非一劳永逸的工作。

  3. 在反馈循环中迭代功能原型要快得多

4
abrudtkuhl

我使用 Axure

尽管价格昂贵(每个许可证近600美元),但它提供了惊人的灵活性,并允许您自定义几乎所有内容。

创建应用程序而不是网站时,必须能够使用自己的控件(或其模型),母版等。

4
Dan Barak

纸和HTML是最好的。

在纸上的快速草图。然后用HTML构建真实的东西。 StaticMatic 链接文本 非常适合用于原型制作。

过去,我使用Axure,但是线框图是浪费时间。

3
Miki

我也对Axure进行了投票。我们的办公室使用其协作工具在IA和图形设计师之间分配职责。

虽然它不是Omnigraffle,但线框图选项绰绰有余。该软件具有强大的母版功能,因此我们可以迅速提高原型的保真度。

就像Dan所说的那样,它是完全可定制的,并且可以制作专业的规格文档。

河.

3
Robert Hamburger

Adobe InDesign。可能看起来有些奇怪,但是我喜欢一些功能:

  • Adobe风格的界面。如果您使用过Photoshop或其他一些Adobe产品,那么切换到InDesign将非常容易
  • 强大的工具,可处理排版,表格,样式,网格等
  • 实际上,您不仅可以创建线框,还可以创建图形设计
  • 您可以将线框导出为可单击的PDF
3
Kostya

我同意上面的一些解答,但是我想补充一些额外的信息和提示。我几乎每个项目都以白板,不同颜色的笔以及一些便利贴来开始。交流想法并获得快速反馈的最简单方法。然后,根据项目的类型,我尝试使用名为 yEd 的程序绘制主要流程图。对我来说,这是一种简单的构想方法。如果我附近有Mac,我会选择 OmniGraffle (一个出色的程序,不仅能显示流程图)。

我继续在 Balsamiq素描流程Illustrator 中制作原型,以获得不同种类的低保真和高保真原型。

关于此信息,我发现拥有丰富的工具箱供您选择是合适的。对于我来说,重要的是能够根据项目类型采用不同的方法。

2
Anna

我赞同丹尼尔·布雷斯坦纳的议案:“取决于情况。”

对于90%的项目,请考虑我对论文的投票。在这个线程上有很多关于纸张的理由,所以我不再重复。

项目之间的设计永远不会相同,当然客户之间也是如此。 (我说的是最模糊的设计,即设计,开发,原型设计,线框图-坦白地说,它们都在逐渐相互融合。)

因此,对于其他10%的项目,原型制作工具将取决于项目。如果需要远程合作,Axure可能是最好的选择。如果需要与主要使用Adobe的客户内部团队合作,Fireworks可能是最好的选择。有很多工具。不幸的是,根据定义,工具无法像解决问题那样迅速适应。因此,这些产品中的许多产品看起来彼此非常相似,但并不完全相同。我们需要做出最适合该工作的评估。

额外的想法:iPad正在开始帮助模糊面对面客户协作与面对面客户监督的界限。 Omnigraffle,SketchBook,TouchDraw,Draft和其他iPad应用程序正在为改善协作体验铺平道路。 (我所说的改进是朝着使客户在iPad上像在纸上一样舒适地绘画的最终目标而努力,其优势在于客户可以使用功能原型而不是静态页面。最终目标只是我的意见。)

2
Tyler Hayes

我按照以下步骤操作...

1。原型。我使用 Balsamiq Mockups ,因为它很容易。原型的全部目的是弄清楚事物的基本布局。这是您进行重大更改的阶段。幸运的是,Balsamiq不会假装不是任何东西,并且仍然非常易于使用。对我而言,使用Balsamiq的速度比绘制它的速度更快。它的优点是能够在屏幕上拖动元素,而不是擦除和重绘元素。

2。完成设计。我为此使用Photoshop,有时还使用了一点Illustrator,因此在编写任何代码之前,我都可以完善图形。

在Photoshop中对您的设计进行彻底的更改更加困难,因为我们往往会因像素完美而迷失方向。一旦将其放入您的应用程序中,仍然更加困难。所以这就是我进步的原因,也是为什么我从最简单的工具开始……Balsamiq。

2
Steve Wortham

我是第一位的素描本/铅笔和 Balsamiq -第二个人。然后,Photoshop充实细节,直到有足够的内容可以插入HTML和CSS。

1
blackant

巴尔萨米克。这对于基于桌面的软件也很好,而且很容易学习。

1
franz976

也值得一看 gomockingbird 刚从beta出来

1
Paul McKeever

我妻子的互动代理在以下方面取得了成功:

(http://www.mockflow.com/

快速上手,并提供大量用于原型和线框的内置控件和屏幕。

1
noluckmurphy

这个问题提到了需要原型工具,但没有提到原型的真实性。对于粗略的线框类型的原型,我同意这里的大多数评论,即笔/纸,Balsamiq甚至是Visio是很好的工具。但是,当您需要一个看起来更逼真的原型时,这些将不起作用,然后我建议您查看Axure或Adobe Fireworks/Catalyst之类的产品(iRise价格过高),即使确实存在问题,我还是会选择Axure 。

0
Geert

我也使用了Pencil,尽管它有一些缺点:

  • 否表格数据处理:如果您要对表格进行线框设置,则会迷路。
  • 在文本框中没有自动换行。尝试放置lorem ipsum时,我必须自己包装。糟透了.

但是,我非常喜欢这个工具。

0
cukabeka

有时我使用此工具 http://www.hotgloo.com/

0
512x512

由于您的问题是关于原型的,所以我假设您正在做原型之前认为必要的任何步骤,例如草绘等。

如果您的产品将通过Web交付,请使用Web(HTML,CSS,JS)创建原型。最后,它比您可能会使用的其他任何东西都更快,更便宜,更准确。我发现诸如Axure之类的工具适用于简单的事情,但随后需要陡峭的学习曲线才能完成中等复杂的事情。到那时,您将花时间学习专有工具,而您可能正在学习Web标准,这从长远来看将对您更加有益。

如果您担心客户认为它“完成”了,则可以省略样式直到最后,但是我发现原型越“真实”,则评估起来就越容易。

0
Craig Villamor

这实际上取决于项目是什么。

如果您要制作原型的网站只是只有几个页面的静态内容,那么使用诸如Photoshop或Fireworks之类的图形编辑器可能会更好。在这里不建议“不惜一切代价”使设计元素脱离原型的建议。

但是,在您正在构建具有许多用例的大型应用程序的另一端,我建议您使用类似Jim Jarrett的答案的东西。我要补充一点,大型应用程序是(或至少应该是)一个迭代过程:您将为阶段I进行原型设计,然后为阶段II的发布再次进行原型设计,依此类推。原型设计的每个阶段都可能需要不同级别的详细信息。您可能最终想要从当前阶段的构建/原型进行工作,或者可能是时候回到第一原理并从头开始。

0
skybondsor

Axure是一个很棒的线框图/原型/规范工具。它使您可以专注于正在创建的内容,并使注释,注释,交互之类的事情非常容易指定。

加号的是,当您指定交互时,当您从线框图生成原型时,这些交互会转换为实际有效的小部件。 (Axure生成HTML原型)

您还可以进行屏幕设计(例如以JPEG格式)导入图像,使用“图像映射”工具激活图像区域,然后有效地拥有更高保真度的原型!

Axure还允许您基于变量创建操作(可以设置或读取它们)。还有一个概念是让一个窗口小部件生成事件,您可以让另一个窗口小部件监听该事件,然后该窗口小部件可以某种方式响应。

我可以继续下去...缺点是花费约$ 550,但是节省时间是完全值得的。通过电子邮件获得的客户支持很棒。他们通常会在几个小时之内回到我身边……有时会立即。

0
milesmeow

我发现模仿鸟还可以用于简单的线框。它不会让我很快离开omnigraffle,但是对于基于Web的工具来说,这是非常好的: http://gomockingbird.com/

0
fluxd

看一看 App Sketcher (当前为候选版本),看它是否符合您的需求。它是用于创建线框和交互式Web应用程序原型的快速HTML原型制作工具。它使用嵌入式WebKit浏览器作为设计图面,您可以在其中添加HTML组件,jQuery UI组件,Web小部件(例如Google Maps和YouTube播放器),并使用jQuery主题和CSS属性对其进行样式设置。也可以定义简单的动作。用户对设计感到满意后,可以在其默认浏览器中运行/测试原型,并导出HTML/CSS/JavaScript源。该工具更适合像Axure这样的体验,但强调“在浏览器中设计以在浏览器中运行”,因为它确保了在Web技术的开发阶段就可以实现模型/线框。

我是此应用程序的开发人员。非常抱歉这种无耻的自我提升。不过,我确实认为它可以是很好的HTML原型制作工具,值得一看。

0
Feng Chen