Day 29. Hi-Fi Prototype－以 Figma 制作高精度原型 (下)

由於 Figma 的核心是 GUI 设计工具，附带原型制作能力，所以一般来说我们都会使用它来进行高精度原型设计，说到这里，你会不会想问，有高精度，那是不是也有低精度？

没错！Day 6. 常见原型种类及制作方式 这篇提到的几乎都是指低精度原型，当时我们也透过 使用 Invision 带大家一起实作了一个 简单的范例。

实际上，在产品设计与开发的过程中，这二种原型其实会交互采用。我们先来拆解说明这二种原型的差别。

Lo-Fi Prototype 低精度原型

又称低保真原型 (Low-fidelity prototype)，通常外观简单、未经美感细节作修饰，互动性也相当有限，但已足以展示核心概念与基本流程。

优点：能够快速制作，且因为除去了视觉设计元素的干扰，让团队成员更能够将注意力放在宏观层面的流程、逻辑与资讯架构上。

工具：除了传统用纸笔画及将各种素材，如便利贴、厚纸、风扣板等，组合成可互动、抽换内页的模型之外，也有一些数位工具可协助我们更有效率的制作，例如 Invision、Marvel APP、Balsamiq mockups 等。当然，想用 Figma、Adobe XD 做低精度原型当然也没问题。

Hi-Fi Prototype 高精度原型

又称高保真原型 (High-fidelity prototype)，与 Lo-Fi Prototype 相对而言，外观拥有大量细节堆叠 (例如阴影、渐层、美丽且风格一致的 icon)，互动上也会刻画的比较细致 (比如从 A 画面过渡到 B 画面的转场从左方 Push 到 右方进场)。

高精度原型不论看起来还是用起来，都会和真实产品非常接近，不太会有模糊的想像空间。

工具：在 UX 逐渐成为显学的现在，有了愈来愈多的选择，像是 Principle、Flinto、ProtoPie、Axure RP、Framer，以及本系列专栏的主角之一，Figma。

那麽 Rson，试问何时该采用 Lo-Fi，何时以又该采 Hi-Fi 呢？

各阶段制作原型的精度策略

在整个产品设计开发阶段中，都会有需要制作原型的时候，只是不同阶段的目标不同，进而会影响到原型制作的策略与精细度的采用。

1. 前期－探索阶段

   一开始一切都还很混沌不明时，制作原型的目的是让大家能够一起探索、大量发想，鼓励团队多动手透过原型沟通，所以会采用低精度原型的策略，一来这样速度才够快，二来大家也不会被沉默成本影响，舍不得丢弃不好的概念。

2. 早期－提案阶段

   尽情探索完可能性之後，已开始逐渐收敛，产品的概念也愈来愈清晰了。此时，向利害关系人提案、成功说服成为最重要的目标，故非常适合好好设计高精度原型，透过在外观、美感上的堆叠，以及贴近真实的互动操作，让关系人使用，产生强烈认同感，进而争取到开发资源。毕竟，人是视觉及情感的动物，此阶段的原型愈接近最後的成品，愈能够让人深度感受。

3. 中期－开发阶段

   争取到开发资源後，有了前後端工程师夥伴的火力支援，产品落地指日可待。此时制作原型目的则是要加速工程师在实作时对於设计上全面的理解，再加上此时的原型还需考虑到技术上是否可行，故此阶段需制作的也是高精度原型，才能够与工程师沟通、交付设计。

4. 後期－优化阶段

   此时产品已经进入市场，一方面会得到使用者反馈，另一方面商业层可能会有转化率的目标，易用性成为此阶段的关键任务。此时就需要在制作成本及测试效果上做出取舍，决定采用高精度或是低精度原型，这时就没有一定的模式了。

不论在哪个阶段，采用的原型精度是低还是高，都可以搭配之前介绍过的 放声思考法 进行易用性测试 。当然，易用性测试有很多种方法，放声思考只是其中成本算低、效果也还不错的质化方式。

Figma 全站式设计－从 GUI 直接到原型制作

回到 Figma 的 Prototype 功能，上一篇 我们说明了 Figma 制作原型的观念与基本操作方式，而设计好原型之後，可透过 URL 连结，直接分享给任何人，如此一来，我们就能覆盖到前面所提到任何一个需要高精度原型的情境：

(1) 将 Hi-Fi Prototype 展示给关系人看，让设计得以更具体可见，并取得反馈。

(2) 交付给工程师的设计规格文件 ，其 GUI Mockup 、 spec、prototype 从此都在一处，再也不分家 ，且因为都是一条龙使用 Figma 制作，所以 Component 也可以重覆使用，节省制作时间 (Day 24. 打造可重覆使用的设计－Figma 的 Component 元件解析)

(3) 透过转发连结，轻易就能让受测者进行易用性测试，不需要再另外使用别的工具，制作让受测者测试用的 Prototype

如何？ Figma 是不是颇有倚天屠龙记中 「武林盟主，一统江湖」的气势？

不过 Rson 想提醒大家的是，Figma 的原型设计功能仍只能方便地制作出已常见定义的互动行为，若要控制到更精细程度的原型，比如说动画渐变的细节、跨越多装置跨多屏的互动、甚至是与硬体产生连动的事件行为，还是得使用更为专业制作 Prototype 的原型工具，比如 Protopie、Framer。如果你身处的组织是研发设计中心，很可能经常需要设计尚未被当代定义好的下一代互动体验，那麽 Protopie、Framer 甚至是请体验工程师直接 coding，才会是更适合的途径。