原型保真度指南

这是Jerry Cao的客座文章,他是实物模型指南

在本文中,我将讨论的各个层次UI设计模型保真度帮助你做出最好的选择。

网页设计师Brad Frost总结了设计保真度的进步最好,用一个类比:

你从一块大石板开始,慢慢地凿开,得到你要创建的形状的粗略形状。你再试一次,以更好地了解你试图从石头中提取的物体。你再过一遍,开始变得更详细一些。

最终,你开始打磨形体的某个特定方面:一张脸、手臂或躯干。慢慢地,但肯定地,你细化雕塑的每个部分,直到你到达最终的形式。

忠诚连续统

“设计方法并不相互排斥。相反,每个方法都存在于连续的忠诚泰勒·泰特(Tyler Tate)是一位备受赞誉的用户体验设计师和书籍作者这篇文章

根据Tate的说法,设计过程从低保真(low-fi)草图开始,然后发展到高保真(hi-fi)原型。

来源:jfarny.com

在连续的保真度中,模型适合在哪里?

我会把设计模型放在中高保真的范围内,夹在低保真线框和高保真功能原型之间。

在这个过程中过早地给予过多的忠诚会浪费时间和金钱。

另一方面,如果不给这个过程足够的时间和金钱,将会留下许多未开发的途径。

我们需要在时间,资源和忠实度之间建立平衡。

来源:uxbooth.com

最佳保真度是完成工作所需要的最低程度的忠诚。不多不少。这就是你可能所说的“以一种好的方式懒惰”或“负责任的懒惰”。

概念模型

概念模型存在于传统的UI设计模型形式之外。

尽管如此,它们还是有用的。

公司有时会跳过线框图阶段,取而代之的是概念模型,然后在不断提升保真度的过程中进行迭代。

如下图所示,概念模型先于线框图或细节(更高保真度)模型:

来源:leacock.com

下面,你可以看到概念模型可以简单地在纸上勾勒出你最初的设计想法:

来源:alistapart.com

概念模型是有用的,如果你喜欢开始在纸上,并计划在数字创建中或高保真的模型。

概念模型可能会在设计过程中增加额外的工作,但它可以让你在纸上快速探索一些想法。

另外,如果你打算线框图在进行中保真度或高保真度模型之前,概念模型可以作为粗略的指导方针。

数字模型

接下来,我们进入主题数字模型。

关于创建数字模型的首选方法,有两种不同的观点:

  1. 那些将模型阶段视为过渡阶段,因此不应该花费太多时间的人(中等保真度)
  2. 那些认为设计模型应该准确地代表最终产品的人(高保真度)

Mid-Fidelity模型

中保真模型有以下优势:

  • 您可以更快地从概念阶段进入实现阶段。
  • 它允许在实施阶段进行更多的灵活性、创造性和探索。
  • 它可以减少不必要的设计组件的创建,这些组件在开发实际前端时可能最终会被废弃。

创建一个中等保真度的模型也有它的缺点:

  • 缺乏润色意味着许多设计决策悬而未决。
  • 在模拟阶段节省的大量时间将用于优化实现阶段的UI组件。
  • 客户和利益相关者对中保真模型的印象不会像对高保真模型那样深刻,所以这一点值得记住。

来源:uxpin.com

高保真原型

高保真的模型在一开始就计划和制定大部分设计决策,包括字体大小、尺寸、配色方案、空白大小等。这个级别的保真度可以被认为是“像素完美”。

你可以在UXPin上看到我们在高保真登陆页面模型中所包含的设计细节级别:

来源:uxpin.com

高保真模型的好处有以下几个原因:

  • 你给自己更多的时间来迭代和完善UI设计。
  • 您将在生产过程的早期做出大部分设计决策。
  • 它们更容易呈现给非设计师:客户和利益相关者更喜欢这种风格,而不是中等逼真的模型,因为他们可能没有意识到保真度的连续性。然而,任何人都可以理解高保真原型。
  • 前端开发人员可以看到最终产品的外观,这意味着高保真模型可以双重充当视觉规格表。

然而,这也有一个不应该被忽视的缺点:高保真的模型需要更长的时间来制作。

有人可能会说,创建高保真的模型并不省时,因为我们无论如何都需要用HTML、CSS和JS重新构建设计。

对于某些人来说,这个工作流过程可能看起来是多余的。

然而,你也可以说高保真的模型最终可以节省时间,因为所有的设计决策、设计测试和计划都是在过程的早期做出的。这些都可以在实现阶段节省时间。

模型保真度

在选择给模型提供多少保真度时,首先考虑您的个人需求,然后检查您希望模型如何适应整个过程。

模型会像它们所代表的最终产品一样多样,所以它们应该如何外观或功能真的没有固定的标准。只有指导方针。

有多少保真度或多少时间花你的模型是由你的选择。

我们在UXPin推荐一种迭代方法,允许同时进行中等保真度的模型和原型创建:

  1. 从草图开始:先把你的想法写在纸上,这样你就不会太执着于最初的设计。

    对于每个概念,画出并探索几个选项。

  2. 转向数字环境:一旦你有了一些想法,切换到数字工具,如Axure, OmniGraffle,或我公司自己的工具UXPin。有很多选择。将你的草图聚合成一个快速的数字线框,然后添加视觉细节,直到达到中等保真度。
  3. 功能原型:如今,数字设计工具的美妙之处在于,许多工具都允许同时进行线框图和原型制作。

    只需点击几下,您就可以很容易地将模型转换为功能原型。

  4. 测试、迭代、改进:此时,您的模型现在是一个高保真的原型。与用户甚至同事一起测试它至少5人对于快速测试会话)。然后,分析结果并根据需要添加保真度和功能。

    根据需要重复此步骤。

根据我们的经验,这种进程有助于平衡资源、时间和保真度。视觉设计首先通过草图在纸上进行探索,然后我们转向专门的工具来构建功能并改善视觉效果。

进一步的阅读

下载我的免费的电子书被称为实物模型指南全面了解模型的最佳实践和方法。

这本电子书包括了卢克·罗布莱夫斯基、马尔辛·特拉德和阿什·莫里亚等专家的见解。

相关内容

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。

我们招聘!
查看30+职位空缺!