CPT208 Human-Centric Computing 人机交互 Pt.2 Prototype（原型）

文章目录

• [1. 原型（Prototype）](#1. 原型（Prototype）)
• • [1.1 什么是原型？](#1.1 什么是原型？)
  • [1.2 原型的特点](#1.2 原型的特点)
  • [1.3 原型的类型](#1.3 原型的类型)
  • [1.4 原型的作用](#1.4 原型的作用)
  • • [1.4.1 以用户为中心的过程](#1.4.1 以用户为中心的过程)
    • [1.4.2 沟通](#1.4.2 沟通)
    • • [1.4.2.1 通用的语言](#1.4.2.1 通用的语言)
      • [1.4.2.2 不同的利益相关者](#1.4.2.2 不同的利益相关者)
      • [1.4.2.3 消除不确定性](#1.4.2.3 消除不确定性)
• [2. 原型保真度（Fidelity in prototyping）](#2. 原型保真度（Fidelity in prototyping）)
• • [2.1 低保真原型（Low-fidelity Prototyping）](#2.1 低保真原型（Low-fidelity Prototyping）)
  • • [2.1.1 故事板（Storyboards）](#2.1.1 故事板（Storyboards）)
    • [2.1.2 草图绘制（Sketching）](#2.1.2 草图绘制（Sketching）)
    • [2.1.3 索引卡（Index cards）](#2.1.3 索引卡（Index cards）)
    • [2.1.4 巫师奥兹原型（'Wizard-of-Oz'）](#2.1.4 巫师奥兹原型（'Wizard-of-Oz'）)
  • [2.2 高保真原型（High-fidelity Prototyping）](#2.2 高保真原型（High-fidelity Prototyping）)
  • [2.3 原型设计的的问题](#2.3 原型设计的的问题)
  • • [2.3.1 妥协](#2.3.1 妥协)
    • [2.3.2 先问自己](#2.3.2 先问自己)

1. 原型（Prototype）

1.1 什么是原型？

Prototype（原型）：

原型是一种初步的、可操作的模型或样品，用于展示设计概念、测试功能或进行用户反馈收集。它通常比最终产品更简单、更粗糙，但能够提供足够的信息来验证设计的可行性和方向。

在不同的设计领域，原型的形式和用途可能会有所不同。

例如在设计领域的一些小比例模型，比如汽车领域的微型汽车模型、建筑领域的微型建筑模型。

它的形式有很多种，它们都是一种模型，虽然Prototype来源于希腊语"prōtotupos"，意思是"第一个例子"。牛津词典对原型的定义是："某物的第一个、典型的或初步的模型，尤其是机器，其他形式从这个模型中发展或复制而来。"但事实是我们前一章说过产品是不断迭代来的，我们可以有很多原型，每个原型都是前一个原型经过评估发现里面有一些问题然后我们尝试改进得到的。

原型的形式有很多种，除了前面的那种模型以外也可以是设计的线稿。

再比如很多网站。它们的早期版本功能比较基础，经过不断地迭代才成为我们现在熟知的有那个字，因此原型有低保真和高保真（后面会介绍），这些发布的产品也可以看作是原型的一部分，它代表了产品在某个开发阶段的状态，并且随着时间的推移，产品会通过迭代不断改进和完善。

原型不仅仅是一个初步的模型，它代表了一种持续改进和迭代的过程。无论你做什么，总有改进的空间。通过不断优化和调整，你可以提高产品或活动的质量、效率和效果。很少有产品或项目能够达到"完全完成"的状态。开发过程中总会有时间限制，当时间用完时，你不得不发布当前版本的产品，即使它可能还有改进的空间。即使开发者对产品感到满意，用户总会有自己的意见和建议。为了满足用户需求并持续改进产品，开发者需要根据反馈对产品进行调整和优化。

例如苹果手机自2007年推出初代iPhone以来，每年都会不断改进并推出新的版本。例如，iPhone 5支持4G LTE网络和Lightning接口，使数据传输速度更快，充电更便捷。iPhone X则推出了全面屏设计和Face ID面部识别。

1.2 原型的特点

1. 更便宜、更快！
   原型通常比最终产品的成本要低，因为它们不需要达到最终产品的复杂度和质量标准。而且原型的开发和制作速度通常比最终产品快，因为它们不需要经过复杂的生产流程和严格的质量控制。这使得原型可以快速迭代和测试，加速产品开发过程。
2. 更容易沟通！
   原型提供了一个具体、可视化的模型，使得设计师、开发者和利益相关者可以更容易地理解和讨论设计概念。通过原型，各方可以直观地看到设计的外观和功能，从而更有效地进行沟通和反馈。
3. 直观感受！
   原型允许用户直接体验和操作设计，从而获得更真实的感受和反馈。用户可以通过原型来测试和评估设计的实际使用情况，包括操作流程、交互体验和功能实现等。因此原型可以直接用于给用户进行评估。

原型不仅仅是一个物理对象，更是一种思考和工作的方法。它代表了一种持续改进和迭代的思维方式。

设计是一个复杂的过程，需要时间来逐步完善。它通常需要经过多个阶段的迭代和改进，才能达到最终的形态。

在设计和开发过程中，不要害怕展示尚未完成的作品。通过展示正在进行中的工作，可以获得早期的反馈和建议，从而帮助改进设计。

反馈是改进设计的关键。通过倾听用户、同事或其他利益相关者的反馈，可以发现问题、获得新的见解，并指导设计的方向。

在设计和开发过程中，要务实地评估资源、时间和能力。做出合理的权衡和决策，确保设计在实际条件下可行，并满足用户的需求。

1.3 原型的类型

1. 一系列屏幕草图。
2. 故事板，即类似卡通的场景序列。
3. 一个PowerPoint幻灯片演示。
4. 模拟系统使用的录像。
5. 使用木头、纸板或其他容易加工的材料来制作产品的实体模型，例如PalmPilot。
6. 一个纸板模型。
7. 用目标语言或其他语言编写的具有有限功能的软件。

1.4 原型的作用

1. 在交互设计中，评估和反馈是至关重要的。
   原型提供了一个具体的对象或体验，使得设计师和用户可以对其进行评估，并提供有价值的反馈。
2. 原型是三维的，可以实际操作，这使得利益相关者（如客户、用户、团队成员等）能够更直观地理解设计概念，而不需要依赖于抽象的文档或图纸。
3. 原型作为一个共同的参考点，可以帮助团队成员更清晰、更具体地讨论设计问题，从而提高沟通效率。
4. 通过原型，设计师可以亲自体验和测试自己的想法，这有助于发现潜在的问题和改进点。
5. 原型的制作过程和测试过程鼓励设计师进行反思，思考设计决策背后的原因，以及如何改进设计。（而反思是设计中非常重要的一个方面）
6. 原型回答问题，并帮助设计师在不同选择之间做出决定。原型可以帮助解答关于设计的问题，比如某个功能是否可行，或者某个设计决策是否有效。这有助于设计师在不同的设计方案之间做出更明智的选择。

正如我们以前在软件工程中学习的一样。

随着开发过程的推进，可能的设计选择数量逐渐减少。这是因为随着项目的进展，更多的决策被做出，设计逐渐固化，可供选择的设计方案减少。同时变更成本逐渐增加。这是因为在项目后期进行更改会更加困难和昂贵，可能需要重新设计、重新编码或重新测试。

通过原型，设计师可以避免基于不完整或错误信息做出假设。帮助设计师、开发者和利益相关者更好地理解以下方面：

1. 设计替代方案
   原型可以用来探索和比较不同的设计方案，帮助团队理解每种方案的优缺点，从而做出更明智的设计选择。
2. 策略
   原型可以帮助团队理解产品开发的整体策略，包括如何满足用户需求、如何与市场趋势保持一致等。
3. 以用户为中心的过程
   原型强调了以用户为中心的设计过程，通过原型可以更好地理解用户的需求、行为和偏好，从而设计出更符合用户期望的产品。

在众多可能的设计方案中，如何确定哪一个是最适合你的项目的正确选择？我们可以制作多个原型或设计方案，并进行尝试和测试。通过探索和比较不同的选项，更好地理解每个方案的优缺点，并做出更明智的选择。

例如我们电源哪吒就有很多种方案设计才确定了最终的形象。

原型制作将设计师的创意和愿景从概念阶段（无形）转化为实际的产品或服务（有形）。从而更好了解方案和设计的优缺点，并且了解其在市场上或在用户心中与其他现有或潜在的设计竞争。

1.4.1 以用户为中心的过程

以用户为中心的设计是一种哲学和设计方法，它强调在设计过程中始终将用户的需求、目标和体验放在首位。

在以用户为中心的设计过程中，避免基于未经验证的假设做出设计决策是非常重要的。因此应该通过用户研究和测试来获取真实、可靠的用户洞察。而原型可以帮助设计师更好地理解用户的需求和体验，从而在设计师和用户之间建立共鸣。

在以用户为中心的设计过程中，有一些有用的工具可以帮助设计师更好地理解用户：

1. 同理心地图/移情图（Empathy map），示例如下。
   

2. 用户旅程地图（User journey map），示例如下。
   
   

1.4.2 沟通

有效的沟通可以确保所有相关方对问题和解决方案有共同的理解，从而加快决策过程并提高决策质量。

原型作为一种具体的、可视化的工具，可以帮助不同背景和专业知识的利益相关者进行有效沟通。因为它提供了一种通用的"语言"，使不同专业背景的人能够基于相同的理解和参考点进行讨论。它提供了具体的、可操作的模型，使沟通更加明确和具体，从而减少了基于假设或猜测的模糊不清的讨论。

1.4.2.1 通用的语言

这种通用的语言既是要语言避免过于学术以至于一些利益相关者无法理解，又是保证产品前后没有冲突。

下面都是错误的示例。

1.4.2.2 不同的利益相关者

首先利益相关者包括的不仅是投资者、用户等，自己也是利益相关者。

我们可以给不同的利益相关者出示不同的原型。

1. 在向投资者展示原型时，应该强调产品的亮点（Highlights）和潜在价值（Potentials），例如市场规模、竞争优势、预期收入和投资回报率等。
2. 对于工厂或制造商来说，他们关心的是产品的材料（Materials）和生产规模（Scales）。在与他们沟通时，应该讨论原型的材料选择、生产工艺、成本效益以及如何扩大生产规模等实际问题。
3. 用户是产品的最终使用者，他们对产品的体验和功能最为关心。在向用户展示原型时，应该关注产品的易用性、功能性和满足用户需求的程度。
4. 其中对于老年用户，可能需要强调产品的关怀（Caring）和易用性。例如，产品的界面是否清晰易懂，操作是否简单直观，是否考虑到老年人的特殊需求等。
5. 对于儿童用户，产品的安全性和亲和力（Warmth）尤为重要。在展示原型时，应该考虑产品是否对儿童友好，是否能够吸引儿童的兴趣，以及是否符合儿童的使用习惯和安全标准。
6. 在性别方面，需要考虑产品是否对男性和女性都具有吸引力。这可能涉及到产品的设计、功能和营销策略。需要考虑成本（Cost）和特权（Privilege）等因素，确保产品对所有性别的用户都是公平和有吸引力的。

1.4.2.3 消除不确定性

通过可观察的对象和同行讨论，原型可以节省确定风格、尺寸、颜色和交互的努力。即我们通过展示原型并获得评估结果，这个结果可以帮助我们快速确定设计的方案。

在设计开始时，无论我们如何努力去理解用户，都必须做出一些假设。这是因为设计过程中存在不确定性，我们无法完全预知用户的行为和需求。

例如：1.我们假设用户能够轻松地导航并找到他们需要的功能。

2.我们假设提供的信息对用户来说是清晰和易于理解的。

3.我们假设用户界面的设计和使用的语言对用户来说是直观和易于理解的。

4.我们假设当前页面能够满足用户的所有需求。

要验证这些假设是否成立，最好的方法是创建一个原型或模拟系统，让用户与之交互。这类似于在正式演讲前进行练习，通过实际操作来发现问题和改进点。

原型测试和反思不仅仅是为了收集用户的反馈，也是为了在设计团队内部进行沟通和讨论。

原型为设计师提供了一个向同事展示和推广他们设计想法的机会，使设计师从不同角度反思其可行性和价值。

2. 原型保真度（Fidelity in prototyping）

原型保真度反映了原型在视觉上和交互上与最终产品接近的程度。这基本上涉及到原型的细节和逼真程度。

高保真原型在外观和功能上更接近最终产品，而低保真原型则可能只展示基本的布局和结构。

选择正确的保真度级别对于设计过程的成功至关重要。

如果原型的保真度过低，可能无法提供足够的信息来评估设计的关键方面，如交互、动画或视觉细节。在这种情况下，低保真原型可能无法有效地传达设计意图或收集有价值的反馈。

高保真原型需要更多的时间和资源来创建，因为它们需要更详细和逼真的设计元素。虽然高保真原型可以提供更准确的用户体验，但它们也可能消耗大量的时间和预算。

2.1 低保真原型（Low-fidelity Prototyping）

它侧重于快速、低成本地探索和沟通设计概念，而不是创建一个高度逼真的最终产品模拟。这种方法使用的媒介通常与最终产品不同，例如纸张或纸板，便于快速迭代和修改。

例如：

1. 屏幕草图、任务序列等（Sketches of screens, task sequences, etc.）
2. 便利贴（'Post-it' notes）
3. 故事板（Storyboards）
4. 巫师奥兹原型（'Wizard-of-Oz'）

2.1.1 故事板（Storyboards）

故事板经常与用户场景（scenarios）一起使用，以描绘用户如何与产品或服务交互的具体情景。通过故事板，设计师可以添加更多细节，如用户的情感、环境背景和对话等。此外，故事板还允许团队成员进行角色扮演，以更好地理解和体验用户旅程。

它是一系列草图，展示了用户如何使用设备完成任务

故事板通常在设计过程的早期阶段使用，当设计师还在探索和定义用户需求、任务流程和交互方式时。

例子如下。

故事板经常用于电影行业，例子如下。电影行业的《新龙门客栈》、《英雄》。

《阳光灿烂的日子》、《千与千寻》。

2.1.2 草图绘制（Sketching）

草图绘制是低保真原型设计的一个关键步骤，因为它允许设计师快速地将想法转化为可视化的形式。草图不需要非常精细或完美，它们的主要目的是探索和沟通设计概念。

故事板也是如此 - 不要因为绘画能力而受到限制。

可以用铅笔和纸练习简单的符号。

2.1.3 索引卡（Index cards）

索引卡是一种小型的、矩形的纸片，通常大小为3 x 5英寸。这种尺寸使得它们非常适合用来表示移动设备或网页上的单个屏幕。

在这种方法中，每张索引卡用来代表应用或网站中的一个屏幕或视图。设计师可以在卡片上手写或草绘屏幕的内容，包括文本、图像、按钮和其他用户界面元素。

经常用于：网站开发、应用程序、小程序。

2.1.4 巫师奥兹原型（'Wizard-of-Oz'）

这种方法的名称来源于电影《绿野仙踪》中的一个情节，其中奥兹巫师（Wizard of Oz）被揭示为一个普通人，他使用了各种技巧和设备来制造自己是一个强大巫师的假象。同样，在这种原型方法中，用户可能认为他们正在与一个功能齐全的智能系统交互，但实际上，所有的响应都是由开发者手动控制的。

经常用于早期设计去了解用户的需求中。

这种方法的"错误"或局限性包括：

1. 缺乏真实性：用户可能会感觉到被误导，因为他们实际上并没有与一个真实的系统交互，这可能会影响他们对产品的信任和接受度。
2. 可扩展性问题：由于所有的交互都是由人控制的，这种方法在用户数量增加时可能不可行，因为它需要更多的人力来维持交互。
3. 无法测试系统的所有方面：由于交互是由人控制的，可能无法完全模拟系统的自动化行为，特别是那些需要复杂逻辑和数据处理的功能。
4. 用户反馈可能不准确：如果用户意识到他们并不是在与一个真正的智能系统交互，他们可能会提供不准确的反馈，因为他们可能会考虑到开发者的存在，从而影响他们的行为和反应。

2.2 高保真原型（High-fidelity Prototyping）

高保真原型使用的材料和组件与最终产品非常相似。

原型比低保真版本更像最终系统。

对于高保真软件原型，常见的环境包括Macromedia Director、Visual Basic和Smalltalk。这些是用于创建高保真软件原型的常见开发环境或工具。它们允许设计师和开发者创建更接近最终产品的交互式原型。

同样用户可能会误以为他们正在使用一个完整的、功能齐全的系统，而实际上他们使用的只是一个原型。这可能导致用户对系统的期望过高，或者在原型中发现的问题被误认为是最终产品的问题。

2.3 原型设计的的问题

2.3.1 妥协

所有原型都涉及妥协。

在软件原型中可能遇到的妥协例如：

1. 响应速度慢：原型可能无法模拟最终产品的快速响应。
2. 图标粗糙：原型中的图标和视觉元素可能不够精细或专业。
3. 功能有限：原型可能只包含部分功能，而不是完整的系统功能。

两种常见的妥协类型：

1. 横向：提供广泛的功能范围，但每个功能的实现细节较少。这种妥协侧重于展示系统的整体功能范围，而不是深入到每个功能的实现细节。
2. 纵向：只为少数几个功能提供大量细节。这种妥协侧重于深入展示特定功能的细节，而不是展示系统的全面功能。

妥协可能会影响原型的有效性和用户体验，因此在设计和评估原型时，这些妥协不能被忽视。

2.3.2 先问自己

在开始原型设计之前，首先要问自己是要使用低保真还是高保真的原型。这是一个关键的决策，因为它会影响设计过程和资源分配。

如果我们使用了彩色的UI/可操作的界面/编码......我们是在使用低保真还是高保真原型？

实际上，低保真和高保真原型之间可能没有严格的界限。我们可以从不同的角度来衡量和评估原型。这些角度可能包括：

目的：原型的主要目标是什么？是为了快速迭代和探索概念，还是为了详细展示最终产品的交互和视觉细节？

细节水平：原型在视觉设计、交互逻辑和功能实现方面包含多少细节？

用户反馈：原型是否能够提供足够的信息来收集有意义的用户反馈？

技术实现：原型在多大程度上使用了实际的技术栈和编码实践？

设计过程中总是需要做出妥协，特别是在选择原型保真度时。妥协意味着在不同的需求、目标和限制之间寻找平衡。

低保真和高保真原型各有优势和局限性，没有哪一种是绝对优越的。选择哪种原型取决于项目的具体需求、目标和资源。在任何维度上提高或降低保真度都有成本和权衡。

作为设计师，我们选择决定从第一个图像到最后一个图像的路径。