編輯導(dǎo)語(yǔ)：在產(chǎn)品設(shè)計(jì)中，產(chǎn)品原型有助于將想法、方案具象化，進(jìn)而使產(chǎn)品設(shè)計(jì)理念可以更好地被展示，并助推團(tuán)隊(duì)溝通。那么在產(chǎn)品設(shè)計(jì)中，我們應(yīng)當(dāng)選擇低保真原型還是高保真原型？?jī)煞N原型的使用場(chǎng)景是什么？本文作者就做了相應(yīng)分析，一起來(lái)看一下。

有沒(méi)有糾結(jié)過(guò)在設(shè)計(jì)產(chǎn)品的過(guò)程中是使用低保真原型還是高保真原型？?jī)烧哂心男﹨^(qū)別？分別在什么時(shí)候使用最合適？

在這篇文章中，和大家一起討論低保真原型和高保真原型之間的主要差異、最恰當(dāng)?shù)氖褂脮r(shí)機(jī)以及兩種原型的案例分析。

一、什么是低保真原型？

低保真原型是在紙上畫(huà)的的草圖或原型，也可以是在電腦上設(shè)計(jì)的產(chǎn)品頁(yè)面。低保真原型的作用是表現(xiàn)產(chǎn)品中最重要的用戶流程和功能所涉及的頁(yè)面關(guān)系。

在設(shè)計(jì)低保真前，我們會(huì)先進(jìn)行用戶研究并收集一系列產(chǎn)品需求，這些工作做完后，接下來(lái)就要考慮產(chǎn)品的功能。

1. 基本功能和信息架構(gòu)

在設(shè)計(jì)的早期階段，我們都不希望陷入頁(yè)面版式、圖像和漸變之類(lèi)的細(xì)節(jié)中，相反我們需要展示的是產(chǎn)品的核心功能、信息架構(gòu)以及頁(yè)面間的流程。

我們首先要概述頁(yè)面的一些基本情況，這些設(shè)計(jì)可以幫助用戶完成主要目標(biāo)并滿足每個(gè)功能的基本要求。

2. 基本的布局和元素

除了信息架構(gòu)和流程外，低保真還有助于定義產(chǎn)品UI的基本布局，例如確定頁(yè)面元素和各部件的尺寸、位置以及頁(yè)面中留白的使用情況。

二、什么是高保真原型？

高保真原型展示的細(xì)節(jié)比低保真更深入細(xì)致，高保真原型是盡可能接近最終產(chǎn)品的樣式。高保真原型具有與低保真相同的流程和信息架構(gòu)，也會(huì)展示更多的細(xì)節(jié)和頁(yè)面關(guān)系。

1. 進(jìn)階的頁(yè)面設(shè)計(jì)

高保真原型的目標(biāo)是對(duì)最終產(chǎn)品的討論，包括在最終產(chǎn)品中看到的所有內(nèi)容，例如產(chǎn)品的顏色、漸變、陰影、圖形以及排版等。

2. 進(jìn)階的互動(dòng)原型和功能

高保真原型會(huì)進(jìn)一步展示產(chǎn)品的動(dòng)效情況，比簡(jiǎn)單點(diǎn)擊原型更進(jìn)階，例如展示頁(yè)面的滾動(dòng)效果、手風(fēng)琴菜單、下拉列表、拖放等動(dòng)效。

高保真原型還可能包含頁(yè)面上移動(dòng)的圖形和動(dòng)畫(huà)，或者用戶可以操作的元素，還包含例如錯(cuò)誤消息和表單設(shè)計(jì)的驗(yàn)證等，以及在其他各種頁(yè)面尺寸上存儲(chǔ)和再現(xiàn)數(shù)據(jù)的能力。

三、什么時(shí)候使用低保真原型？

1. 頭腦風(fēng)暴

低保真原型適合快速的頭腦風(fēng)暴，并向客戶、開(kāi)發(fā)和項(xiàng)目參與者演示設(shè)計(jì)想法，適合將一些早期的用戶測(cè)試集成到產(chǎn)品設(shè)計(jì)中。

2. 獲得開(kāi)發(fā)的認(rèn)可

通過(guò)展示原型，開(kāi)發(fā)能夠在一開(kāi)始就告知我們的某些設(shè)計(jì)在技術(shù)上是否可行，避免了花費(fèi)大量時(shí)間來(lái)設(shè)計(jì)需求交稿時(shí)卻被告知某些功能不能實(shí)現(xiàn)的情況。

3. 進(jìn)行早期用戶測(cè)試

產(chǎn)品是為用戶而準(zhǔn)備的，所以在設(shè)計(jì)早期階段對(duì)他們進(jìn)行測(cè)試很有意義。

例如，當(dāng)朝著高保真原型設(shè)計(jì)時(shí)，我們會(huì)添加許多額外的細(xì)節(jié)和次要功能，如果在這個(gè)過(guò)程中，發(fā)現(xiàn)產(chǎn)品的某個(gè)核心功能在早期階段被忽略了，導(dǎo)致產(chǎn)品存在可用性缺陷怎么辦？

在低保真原型設(shè)計(jì)階段，撤消和修改設(shè)計(jì)要容易得多。向用戶展示低保真原型有助于在做更進(jìn)階的設(shè)計(jì)需求前把握關(guān)鍵的功能，更好地定義流程、信息架構(gòu)以及UI布局。

4. 始終以低保真開(kāi)始

低保真度原型不僅有助于設(shè)計(jì)師集思廣益地思考想法，還有助于與客戶保持聯(lián)系。通過(guò)向總監(jiān)清晰地展示低保真原型而不是簡(jiǎn)單地談?wù)撟约簩⒁龅氖虑?，有利于避免繁瑣的返工?/p>

四、什么時(shí)候使用高保真原型？

產(chǎn)品需要提供盡可能好的用戶體，制作高保真原型可以確保從產(chǎn)品經(jīng)理到UX設(shè)計(jì)師，每個(gè)人都能把握產(chǎn)品的方向。

1. 基本功能實(shí)現(xiàn)后

基本功能實(shí)現(xiàn)是指流程和頁(yè)面完成后，至少在核心功能需求方面滿足了用戶的基本目標(biāo)。通過(guò)低保真我們會(huì)知道需要設(shè)計(jì)的頁(yè)面原型，以及每個(gè)頁(yè)面的基本布局，接下來(lái)就可以進(jìn)行高保真的制作。

2. 測(cè)試更高級(jí)的交互時(shí)

當(dāng)開(kāi)始設(shè)計(jì)或測(cè)試更復(fù)雜的交互和功能時(shí)，應(yīng)該使用高保真原型。我們需要確保原型中的大多數(shù)交互動(dòng)效都是直觀的，可以為用戶帶來(lái)價(jià)值甚至趣味性。

3. 把設(shè)計(jì)移交給開(kāi)發(fā)時(shí)

高保真原型設(shè)計(jì)可以讓開(kāi)發(fā)更容易將產(chǎn)品用代碼寫(xiě)出來(lái)，不需要太多的想象空間。這樣做不僅減少了錯(cuò)誤和返工，還減少了在寫(xiě)代碼上花費(fèi)的時(shí)間，從而減少了將產(chǎn)品推向市場(chǎng)所花費(fèi)的時(shí)間。

五、低保真原型案例分析

網(wǎng)頁(yè)使用很少的顏色來(lái)突出基本功能，例如菜單選項(xiàng)、我的連接等，其余部分都是灰色的，這樣就可以忽略細(xì)節(jié)只專注于產(chǎn)品的主要功能。

利用紙質(zhì)版原型來(lái)表現(xiàn)產(chǎn)品的低保真，包括剪貼畫(huà)、草圖、色塊等。這樣做能快速演示基本的頁(yè)面流程和功能，通過(guò)不斷的迭代來(lái)細(xì)化這些功能和流程，提升產(chǎn)品體驗(yàn)。

當(dāng)你想讓用戶注意到產(chǎn)品的核心功能，即圖二中公司在地圖上的位置時(shí)，可以在低保真中把地圖更詳細(xì)地表現(xiàn)出來(lái)，弱化其他元素的設(shè)計(jì)。

在軟件中完成的低保真，元素的間距、位置以及尺寸的大小會(huì)比紙質(zhì)版更明確，這種原型也是進(jìn)入高保真迭代前的樣子。

六、高保真原型案例分析

一款航班預(yù)訂產(chǎn)品的高保真原型，用戶可以選擇城市、日期、添加乘客等功能。這個(gè)例子展示了高保真原型在將最終產(chǎn)品交付給開(kāi)發(fā)之前應(yīng)該表現(xiàn)得多么接近。

這個(gè)高保真電商頁(yè)面具有輪播功能，用戶可以來(lái)回瀏覽所提供的產(chǎn)品范圍。同時(shí)它還具有其他交互功能，例如可擴(kuò)展的漢堡菜單，以及吸引用戶注意的按鈕。

低保真原型通常不會(huì)涉及太多細(xì)節(jié)，僅具備基本的可點(diǎn)擊性。

蘋(píng)果手表的高保真原型不僅顯示了原型可能達(dá)到的真實(shí)程度，而且還表明原型不必局限于手機(jī)、平板或網(wǎng)站頁(yè)面。

高保真通常意味著帶有色彩，耐克網(wǎng)站的原型完美體現(xiàn)了這個(gè)概念。頁(yè)面具有強(qiáng)烈的顏色、陰影和漸變，以及真實(shí)的互動(dòng)、文案、價(jià)格和產(chǎn)品圖像等。

一款3D打印機(jī)產(chǎn)品的高保真原型，顯示了頁(yè)面可交互的程度，用戶可以在打印3D產(chǎn)品時(shí)看到最終產(chǎn)品的真實(shí)動(dòng)畫(huà)。頁(yè)面中的圖形有著清晰的細(xì)節(jié)，感覺(jué)像是產(chǎn)品的最終版本。

最后，低保真和高保真原型之間的區(qū)別在于涉及的細(xì)節(jié)程度。在設(shè)計(jì)過(guò)程中，實(shí)際上不用太糾結(jié)于保真情況，先仔細(xì)考慮在每個(gè)階段需要滿足哪些設(shè)計(jì)目標(biāo)再選擇合適的原型，這樣更實(shí)用。

內(nèi)容參考：justinmind.com/blog/low-fidelity-vs-high-fidelity-prototypes

作者：Clippp，微信公眾號(hào)：Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺(jué)上的設(shè)計(jì)思考。

本文由 @Clippp 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。