跳到主要内容

如何在UX设计过程中使用模型

传统上,这个过程从线框图到模型图再到原型图,每个阶段的保真度都有所不同,具体取决于团队。但与大多数设计实践一样,其他人偏离了传统并发现了新的有用的替代品。我们将探索两个这样的替代方案并就每个方案提供建议,然后解释模型如何使创建风格和品牌指南变得更容易。

在流程中实现模型

Guide to Mockups book

这本免费的书内部展示了模型的解剖:导航,菜单,UI模式等:http://www.uxpin.com/guide-to-mockups.html

如中讨论的那样样机指南,模型可能不仅仅是线框和原型之间的一步。事实上,即使这种过渡功能的重要性和实施也各不相同。

在我们进入使用模型的替代过程之前,我们想列出一些在创建模型时要记住的一般建议,无论您如何实现它们。

Nesia的设计师和前端工程师Bima Arafah相信KISS(保持简单愚蠢)的方法涉及涉及模型的设计过程。一般来说,它有助于避免像高对比度字体类型那样过于花哨的视觉效果,并通过使用像Adobe Kuler这样的现有调色板来保持简单。这里还有5个技巧可以保持基于简单性的高保真模型:

  • 设计项目的需求 - 如果利益相关者难以阐明他们的需求和期望,请他们进行合作。你应该在模型完成之前就图像,徽标和视觉层次开始讨论(但不要让他们有最后的发言权,否则就是委员会设计)。
  • 不要跳过线框图 - 线框是您的模型的指南。它允许您回答有关布局和内容的更广泛的问题,以便它们不会分散您对视觉决策的注意力。像这样优先指南线框是自然协作的,因为这些概念很容易消化。
  • 专注于一个集中的概念 - 草图和线框图很适合早期的概念,但你需要通过模拟时间有一个明确的方向。正如古老的美国原住民格言所说,“如果你追逐两只兔子,你将失去它们。”
  • 查看竞争对手的网站 - 一般来说,了解竞争对手正在做什么是一种有益的习惯,但在线框图和模型阶段,这对于在公司外部思考尤其有用。一个快速启发式审查显示竞争对手成功的地方 - 以及如何根据自己的错误改进自己的网站。
  • 不要忽视模型演示 - 模型的主要功能之一是它在利益相关者演示中的帮助。如果模型中没有遇到某些元素,请包含一些注释以解释其功能。

正如我们解释的那样用户体验设计流程和文档指南,设计过程与使用它们的公司一样多样化。考虑到这些指导原则,让我们看一下模型适合设计过程的两种相反方式。

Wireframing => Mockups =>开发

这种设计方法跳过了UX原型设计,并从模型直接跳跃到开发中。这种方法的支持者声称原型设计是无用的,因为开发越早越好。

在这种情况下,模型变得更加重要,因为它是整个开发过程中提到的最突出的“蓝图”。

Developer screenshot

史蒂文布拉德利喜欢直接从模型转向开发 - www.vanseodesign.com/web-design/pixel-perfect/

Vanseo Design的Steven Bradley是这种方法的追随者,并解释了他的个人过程他的网站的帖子

然而,重要的是要注意,即使他是一名专业设计师,也会混淆术语,他的高保真线框和设计组合在技术上是模型。 (出于这个原因,我们在电子书的开头加入了关于命名法的免责声明。)这是整个过程:

  • 草绘/线框图 - 该过程的第一步是勾勒出基本思想和起始元素,以及一些粗略的设计元素。接下来是线框图,这些粗略的想法被充实和指定。从本质上讲,这些早期阶段不会偏离“线框图指南”中描述的过程。
  • Hi-Fi Mockups - 接下来是一个高保真的模型,意味着尽可能“像素完美”。请记住,这是开发过程之前的最终大纲,因此大多数细节和决策应该最终确定,最终版本应该由客户端运行。
  • 开发 - 随着初步阶段的开始,是时候开始构建实际的站点了。 Bradley从一个包含CSS和Javascript的HTML文件开始。当视觉效果不能正确编码时,会花费额外的时间重新设计,直到最终产品可行。在该阶段,文件被发送到WordPress等工具,如果需要,可以进行进一步的修订。

虽然我们不一定建议跳过原型设计阶段(因为它可以限制创造力),但我们理解它在某些情况下的价值。然而,即使在这种情况下,我们也会建议至少一个快速的原型设计阶段。 Smashing Magazine发布了一个伟大的作品关于如何针对这些情况进行高效的3步原型设计阶段。

说到原型设计的重要性,让我们来看看结合了模型和高保真原型的设计过程。这实际上是我们遵循的过程UXPin

线框=>低保真原型=>高保真样机/原型

与最后一种方法完全相反,这个过程特别强调原型设计阶段,尽早启动它。这是与我们讨论的编码模型最密切相关的方法样机指南。这种与功能的早期集成适用于了解其代码的设计人员,或涉及特别复杂的技术问题的项目。

Smashing article illustration

了解如何在此处进行高效的三步原型设计阶段:www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/

在我们以前的电子书中用户测试与设计,我们详细讨论这个方法;但是,在这里我们将简要概述:

  • 线框图 - 这个阶段始终如一 - 基本思想,基本结构。
  • 低保真原型 - 这里的重要因素是“低保真”,因为你不想咬得太多,而不是早期设计。在此阶段,您将更多地关注交互和功能。例如,当我们重新设计Yelp的网站时,我们只是在UXPin中为我们的线框添加了交互,正如您在此实时版本中看到的那样。
  • Hi-Fi样机/原型 - 当关注视觉效果(模型的主要目的)时,您可以将这些细节注入现有的低保真原型。随着视觉效果的发展,添加越来越多的互动元素,将模型与低保真原型合并以创建高保真原型。无论您在原型制作工具中无法创建的视觉效果都可以在Photoshop或Sketch中构建,然后可以导入和拖入UXPin或在其他工具中重绘。
  • 可用性测试和迭代 - 这种方法的一大优势是功能可以在它(仍然(相对)容易的时候)尽早测试,改进和完善。通过在每个设计阶段之间进行可用性测试,您可以在问题出现之前就开始解决问题。

如果你对这个过程的变化感到好奇,Bhavin Parikh,创始人兼首席执行官马上登录,解释说如何将Web需求转换为模型。就像我们之前描述的那样,他还强调在进行视觉设计之前考虑交互设计(尽管他错误地使用术语模型和原型可互换)。

但实际上,设计过程中有许多方法和策略,从强迫性和细致的规划到首先进入开发。虽然我们已经讨论了几种方法,但可以根据自己的需求,优势和劣势随意混合搭配。

为精简风格指南填写您的模型

我们花了很多时间讨论模型对于视觉设计和客户关系的有益程度。但是对于模型来说,还有第三种,但却不那么重要的用途,这有助于编写样式指南。当您考虑它时,这是有道理的 - 模型是产品样式的可视化文档,因此您可以剪切和粘贴元素以创建快速样式指南。

Yelp style guide

由Yelp创建的风格指南,通过A List Apart

在电子书中Web UI设计最佳实践,我们讨论样式指南以及如何创建它们,列出关于包含什么以及如何格式化它们的专家建议。

为了突出最相关的要点,样式指南只是对您网站的外观进行形式化编辑,以便设计人员和开发人员可以快速参考指南。对于一些专业的例子,UX书签列出了一些有用的在线样本,包括Apple,Android甚至喜力啤酒。

样式指南包含正确的布局标准,边距大小,使用哪种字体和大小,品牌规则等信息。因为这些是在构建模型时通常做出的选择,所以很容易看出两者之间的相关性。

Medialoot template

Medialoot提供免费模板

当您做出这些风格决定时,您可以使用样式指南中的快速笔记和模型的一些屏幕截图同时记录它们。

这样可以省去以后构建一个的麻烦,因为您不必去挖掘信息。由于我们在设计冲刺中移动得非常快,这正是我们在UXPin中构建和更新样式指南的方式。

为了更方便,Medialoot提供免费的UI样式指南模板- 填写有效的方法并调整其余部分。

带走

无论它们出现在设计过程中的哪个位置,它们具有多大的保真度,或者花费多少时间,模型都非常有用,如可视化文档,开发人员的快速规格表以及用于探索视觉细节的画布。

经常被忽略(或与线框混淆),模型可能会被忽视,因为它们被视为额外的工作。但正如我们已经讨论过的那样样机指南,最小化双重职责的关键是合作。如果您将其视为探索设计技术可行性的媒介,而不仅仅是交付给开发人员的可交付成果,那么您将从模型中获得更多价值。

请记住,设计需要内容和形式:线框概述内容,模型为表单添加精细度。如果不出意外,模型至少可以帮助你更好地避免来自客户和利益相关者的这些可怕的话:“当我看到它时,我会知道它。”

:Jerry Cao

Jerry Cao是一名内容策略师UXPin- 线框图和原型制作应用程序 - 他为线框图和原型制作平台开发应用内和在线内容。要了解如何使用所有类型和保真度的模型,请查看样机指南



翻译字数超限