文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

问:“构建原型的最好方法是什么?”就像问:“做一个网站的最好方法是什么?”没有单一的“最好的”方式。

每个单独的原型,如每个单独的网站,都有自己的风格,目标和策略。 适用于云CRM网站的可能不适用于电子商务业务。

在本文中,我们将探讨三种最常见的数字原型开发方法:演示软件(主要面向初学者),编码原型(中级到高级)和专业原型应用程序(适用于所有级别的专业知识水平)。

第 1 段(可获 1.13 积分)

01.演示软件

Keynote在构建原型方面越来越受欢迎

对于初学者,有传统的PowerPoint,一个超过二十年主要用于演示文稿的可靠业务。 如果你正在寻找一个更现代的选择,Keynote的受欢迎度正在提高。

有趣的是,Google Ventures提到Keynote是作为“设计冲刺”初步计划的秘密武器(secret weapon )。 你可以在这里找到更多的演示软件(more presentation software here)。

优点和缺点

让我们来看看利弊这样你就可以作出一个明智的决定。 首先优点...

  • 几乎每个人之前都用过演示软件,所以他们是启动一个简单的原型的最快方式。
  • 熟悉 - 你了解基础知识,并不是很难学习更高级的功能,如动画,幻灯片转换和交互链接幻灯片。
  • 基本元素库 —由于简单的线框图库,如Keynotopia,您可以快速创建低保真线框,然后将它们链接在一起为一个可点击的原型。 您还可以使用主模板,并根据需要重用幻灯片或幻灯片的部分。
  • 自然线性流 - 这些工具的幻灯片性质使您通过顺序的用户流,这迫使您除了视觉之外考虑体验。 对于更高级的用户,您可以以复杂的方式链接幻灯片,超出线性进度。 大多数线框图和原型应用程序对于可视化用户流仍然很笨重,但UXPin,Flinto和Invision做得很好。
第 2 段(可获 2.96 积分)

现在是缺点…

  • 正如我们在免费电子书“原型制作指南 (The Guide to Prototyping)”中所描述的,一旦开始使用高级用户流和互动,您基本上达到了演示软件的极限。
  • 非库存元素库 - 很难找到正确的元素库(如果它们存在的话)。 与专用原型工具不同,演示库不会频繁更新,它们的质量通常不是那么好。
  • 有限合作 - 大多数演示软件不提供任何协作(Google演示文稿除外)。 折衷的是,协作演示软件缺乏交互性,图形处理,形状,文本和颜色选项,使他们值得为原型。 如果您希望在没有妥协的情况下进行协作,请坚持原型开发工具。
  • 有限的流程图和用户流 - 如我们所讨论的,您可以传达高级用户流,因为您可以将幻灯片链接到非纯线性的用户流。 但这不容易做,并且站点地图没有以Axure或UXPin可以做的方式链接到原型。
  • 有限的交互性 - 如果他们使用Keynote或Powerpoint中的所有功能,资源有效的用户可以得到很远。 但是,一旦你认为用原型设计工具添加基本交互,以及元素,内容,视图和动画的组合中可用的广泛的选项是多么容易,它可能更容易切换到专门的东西。
第 3 段(可获 2.93 积分)

如果你想了解更多,Keynotopia有PowerpointKeynote的一些基本原型教程。

02. 编码(HTML)原型

HTML editor

Anna Debenham演示编写一个原型(coding a prototype

我们开始在The Guide to Prototyping进一步讨论,,设计师对原型设计的最大的问题之一是是否使用代码。

这种不确定性源自一些设计师缺乏编码的舒适感:他们不知道如何做,或不喜欢这样做。 当面对更有趣和直观的使用原型工具或甚至用手绘草图的方法时,编写代码可能会感到乏味。

第 4 段(可获 1.3 积分)

今天比以往有更多的理由早开始编码,如德勤数字的高级用户体验架构师Andy Fitzgerald的UX Booth文章( UX Booth article by Andy Fitzgerald)中所述。 过去,设计师采用的“我设计,你建造”瀑布思维正在逐渐过时,因为技术的进步取得了巨大的进步,协作变得强制性。

优点和缺点

在代码中有原型的几个明显的优点,主要是因为你开始设计的东西,类似于最终的形式。 如原型开发指南(The Guide to Prototyping)中所述,一些优点包括:

第 5 段(可获 1.2 积分)
  • 平台无关 — HTML原型工作在任何操作系统,不需要外部软件来使用它。
  • 模块化 — HTML是基于组件的,这可以帮助提高生产力。
  • 低成本(除了时间) — 有很多免费的HTML文本编辑器,但是需要花一些时间学习语言才有帮助。
  • 产品技术基础 — 如果您正在创建待生产代码 (而不仅仅是一次性的快速原型),您最终可以节省开发时间。

编码原型可以用各种方式构建,如HTML(或者甚至是Python),这取决于您的偏好。 Spark59的创始人兼首席执行官和设计演讲者Ash Maurya建议使用Ruby on Rails(suggests using Ruby on Rails),因为他可以轻松地为每个页面设置占位符,并将它们链接在一起进行导航。 然而,原型的最流行的代码选择可能仍然是HTML。

第 6 段(可获 1.86 积分)

当然,决定是否在你的原型中使用代码的真正考虑是你的技能水平。 不是所有的设计师都有能力编码,所以不要过度扩展自己,除非你有技术上的自信。 此外,跳入代码可能会阻碍创造力 - 问自己在原型工具中使用30分钟可以创建多少交互和页面流,而不是像HTML或Javascript这样的代码。

现实世界的例子

Verity promo

验证是一个应用程序,让您收集您自己的网站和应用程序的反馈

作为最成功的交互设计公司之一,ZURB的好人们设计了诸如eBay,Facebook,Photobucket和NYSE等网站。 在他们的所有工作中,他们强调编码在原型设计阶段的重要性(stress the importance of coding in the prototyping phase)。

第 7 段(可获 1.6 积分)

在他们的经验中,编码原型(特别是快速原型)对于可用性测试是最有价值的,即在早期发现错误并纠正错误。 如果原型未通过可用性测试,则按顺序进行另一轮修订; 如果它通过,那么是时候进行下一步。

验证是ZURB应用程序,允许用户收集在自己的网站和应用程序的反馈。 虽然这是一个对设计师和开发人员来说有用的应用程序,这是应用程序的混合设计过程 (hybrid design process for the app),我们将关注这里::

  • 草图 - ZURB喜欢素描,因为它是一个产生想法的快速和有效的方式。 在第一周,他们经历了大约80个草图屏幕。
  • 前端原型 - 然后他们立即进入创建前端,他们在2周内完成。 他们赞成使用一个带有网格的全局样式表(global.css文件),一个预先存在的视觉风格来工作,没有妄想,第一个版本可能是粗糙的。
  • 工程 - 两个星期后第一次通过,团队有一个他们应用程序的工作版本,虽然粗糙。 使用工程帮助遏制了明显的技术问题。
第 8 段(可获 2.46 积分)

在一个多月后创建应用程序的第一个版本后,ZURB使用他们节省的时间进行最后的细化。

03. 原型软件和应用程序

渴望直接进入一个计算机程序,这是你的想法的真实表达? 原型设计软件和应用程序的美感在于它专门为此目的而设计,因此它们在功能,学习曲线和易用性之间提供了完美的平衡。

初学者和资深设计师都使用专门的工具,如下面的那些—追求易用性的初学者,和为满足特殊需求制作控件的资深设计师。

第 9 段(可获 1.23 积分)

UXPin screengrab

像UXPin这样的工具可以帮助非程序员建立工作原型

这些工具的功能各不相同,有些更适合特定的情况,因此最好找到最适合您需求的工具。 要开始搜索,您可以查看工具,如UXPinInvisionMockFlowJustInMindAxureOmnigraffleFlintoMarvel

优点和缺点

如原型开发指南(The Guide to Prototyping)中所述,这些工具的优点在于它们专门用于线框图和原型开发。 一旦你学习了基本功能,你可能会发现它甚至对用传统方法的原型,如纸原型来说更快。

第 10 段(可获 1.33 积分)
  • 速度 - 从我们自己的客户来说,我们发现,超级用户可以使用专门的工具,甚至比纸张原型更快,因为他们只需点击几下鼠标就可以创建,复制和生产高级交互。
  • 元素库 - 虽然像Invision的工具非常适合快速可点击的原型,通过简单的交互(如点击和悬停)将多个屏幕链接在一起,其他工具如JustInMind,JustProto和UXPin有内置元素库(让你创建自己的以重复使用)。
  • 高级流程图和用户流 - 流和功能是原型设计的最重要的方面,大多数工具都内置了这些功能。大多数工具允许您在创建新的原型屏幕时生成站点地图,让您看到这些屏幕 以便您可以浏览它们。
  • 内置协作 - 首先,确保您选择的工具具有基本注释和解决注释功能。 其次,该工具需要能够允许协作编辑和共享原型(作为链接)。 最后,修订历史和云存储通过使其设备不可知来简化您的工作流。 虽然UXPin和Invision是最强大的,JustInMind,JustProto,Flinto和Marvel也有一定程度的协作。
  • 流畅的演示 - 这意味着导出为PDF,内置演示模式,或导出到网络或移动应用程序,以获得真正的原型体验。 大多数工具将导出为PDF,而只有少数几个像Mockflow导出到演示文稿软件,只有少数像UXPin让您将文件导出为基于HTML的原型。 UXPin和Invision等工具还具有演示和屏幕共享功能。
第 11 段(可获 3.35 积分)

所有的原型开发工具都需要一点时间才能熟悉,但是它们是值得努力的。 尽管如此,让我们确保在决定之前考虑所有方面。 这里有一些潜在的缺点…

  • 缺乏熟悉 - 像生活中的任何东西,如果你从来没有使用它,你需要学习它。 不过Invision和UXPin等少数工具以可用性和易学习性而着称。
  • 有限保真度 功能 - 除了UXPin和Axure等工具之外,大多数原型工具都具有低保真和/或低功能。 例如,Invision主要用于快速可点击的原型,因此它仅限于两次互动(悬停和点击),您不能在应用中创建任何高保真(只从其他地方导入)。 Invision和Flinto也让你从Photoshop和Sketch导入文件,但是文件是平铺的,所以你失去了你的图层。
第 12 段(可获 1.89 积分)

总结

为了探究“构建原型的最好方法是什么”这个问题,我们将回答:“无论哪种方式最适合你。 这不是“最简单的”或“无论哪个需要最少的工作”的委婉语。 最好的原型方法,对你来说,将产生最好的结果。

您必须考虑产品和设计团队的具体情况。 哪些平台和方法对设计师和开发人员是最好的或最舒适的? 您正在使用的产品的具体目标,时间范围和限制是什么? 知道你要去哪里是最重要的部分 - 我们只是解释到达不同的路线。

有关低保真原型或高保真原型的更实用的建议,请下载免费原型指南。 了解如何以及何时使用不同的原型制作工具和策略,使用来自Zurb,Google Ventures,IDEO等等的最佳实践。

第 13 段(可获 2.03 积分)

文章评论