動(dòng)態(tài)交互還是靜態(tài)展示？用Axure繪制還是草圖手繪？無(wú)論你選擇哪種原型設(shè)計(jì)工具，最后的目的都是更好地服務(wù)于用戶調(diào)研，相信本文會(huì)給你提供一些實(shí)用的tips。

可測(cè)驗(yàn)的原型到底長(zhǎng)什么樣？

一個(gè)UI原型就意味著一種假設(shè)——即設(shè)計(jì)師針對(duì)某個(gè)具體問(wèn)題而設(shè)計(jì)出的備選方案。對(duì)UI原型最直截了當(dāng)?shù)臋z驗(yàn)，就是觀察用戶是怎樣與其交互的。

原型有很多類(lèi)型，大致介于以下所列的范圍之間：

• 單頁(yè)面VS.功能完善的多頁(yè)面（豐富的菜單、界面、可點(diǎn)擊的跳轉(zhuǎn)按鈕等）
• 詳細(xì)而明確的設(shè)計(jì)VS.草圖階段的設(shè)想
• 動(dòng)態(tài)交互（可點(diǎn)擊）VS.靜態(tài)展示（需要人工演示不同頁(yè)面的跳轉(zhuǎn)）

對(duì)于原型種類(lèi)的選擇，很大程度上依賴(lài)于測(cè)試的目標(biāo)、設(shè)計(jì)的完成度、設(shè)計(jì)的工具以及可用性測(cè)試中所有可獲取的資源。不過(guò)，無(wú)論選擇哪種原型，最終目的都是為了測(cè)試用戶與產(chǎn)品的交互和具體的操作，便于今后繼續(xù)改進(jìn)。

為什么要對(duì)原型進(jìn)行測(cè)試？

在產(chǎn)品完工后推翻代碼重來(lái)的代價(jià)非常高，但放棄一個(gè)原型的成本卻非常低廉，尤其是尚處于草圖階段的原型設(shè)計(jì)。

讓我們先看看原型測(cè)試的反對(duì)者都持何種觀點(diǎn)：

• 原型測(cè)試想要突出其效果，首先就要花時(shí)間進(jìn)行設(shè)計(jì)，如果一個(gè)新的設(shè)計(jì)都到了可以測(cè)試的程度，表明可以正常運(yùn)行，用戶也能自然地進(jìn)行操作；
• 在敏捷開(kāi)發(fā)、瀑布式開(kāi)發(fā)過(guò)程中，測(cè)試原型并不能對(duì)UX和迭代設(shè)計(jì)進(jìn)行調(diào)整；
• 一些精益開(kāi)發(fā)的擁護(hù)者認(rèn)為，如果沒(méi)有原型設(shè)計(jì)，也就不存在因測(cè)試失敗而被放棄的原型，換言之，也就沒(méi)有浪費(fèi)產(chǎn)生。

這些論調(diào)乍看之下都很有道理，但事實(shí)上，到產(chǎn)品開(kāi)發(fā)的最終階段才進(jìn)行測(cè)試，相比之下風(fēng)險(xiǎn)更高。明智的團(tuán)隊(duì)都會(huì)設(shè)計(jì)一些原型，讓用戶參與測(cè)試，并不斷進(jìn)行迭代，直到達(dá)到滿意的效果。（注：我們也會(huì)在最終階段進(jìn)一步測(cè)試產(chǎn)品的可用性，并對(duì)其投資回報(bào)率和市場(chǎng)競(jìng)爭(zhēng)力進(jìn)行評(píng)估，以得到最完整的研究結(jié)論，并對(duì)項(xiàng)目整體進(jìn)行成品檢驗(yàn)，做出細(xì)微的調(diào)整。）

動(dòng)態(tài)交互VS.靜態(tài)原型

在把原型投入可用性測(cè)試之前，我們需要做一些準(zhǔn)備工作。為了讓原型能響應(yīng)用戶的操作，我們可以花些時(shí)間設(shè)計(jì)交互過(guò)程，當(dāng)然也可以做成靜態(tài)的原型，兩種原型各有利弊。

交互（可點(diǎn)擊）原型

對(duì)于交互式的原型，在開(kāi)始測(cè)試之前，設(shè)計(jì)者需要對(duì)用戶可能采取的任何操作設(shè)定對(duì)應(yīng)的響應(yīng)。這類(lèi)原型的設(shè)計(jì)非常耗時(shí)耗力：你需要正確配置每一個(gè)可點(diǎn)擊的目標(biāo)，讓系統(tǒng)只對(duì)特定的操作做出正確響應(yīng)。

靜態(tài)原型

對(duì)于靜態(tài)原型，針對(duì)用戶每一次操作，都需要由專(zhuān)人實(shí)時(shí)進(jìn)行響應(yīng)，具體來(lái)說(shuō)有以下幾種方法：

“綠野仙蹤”（又名“奧茲巫師”）：這個(gè)方法與Frank Baum的故事書(shū)還有后來(lái)的電影同名（書(shū)中的重要角色奧茲巫師本來(lái)是一個(gè)走街串巷的小魔術(shù)師，通過(guò)躲在幕后扮演出神通廣大的巫師形象）。在靜態(tài)原型測(cè)試中，這個(gè)“巫師”（通常是原型的設(shè)計(jì)者或是其他非常熟悉這個(gè)設(shè)計(jì)的人）負(fù)責(zé)遠(yuǎn)程操控用戶的屏幕，其實(shí)用戶的每一次點(diǎn)擊都并沒(méi)有任何直接的效果，而是由“巫師”控制接下來(lái)將呈現(xiàn)給用戶什么界面?！拔讕煛鄙踔吝€可以用一個(gè)“正在加載”的頁(yè)面來(lái)過(guò)渡，以便在原型開(kāi)發(fā)程度較低或相應(yīng)較慢的情況下，逼真地對(duì)用戶的操作提供響應(yīng)，而用戶卻并不清楚真正的響應(yīng)過(guò)程。

這種測(cè)試方法尤其適合在早期測(cè)試基于AI開(kāi)發(fā)的系統(tǒng)，在真正的AI還未搭建時(shí)，系統(tǒng)的控制者可以基于自然反應(yīng)模擬AI的響應(yīng)過(guò)程。

“紙上原型系統(tǒng)”：設(shè)計(jì)師將原型繪制于紙面上，負(fù)責(zé)扮演電腦系統(tǒng)的人要非常熟悉原型設(shè)計(jì)，把繪有原型的紙片按照一定的規(guī)則擺放在測(cè)試用戶的桌面上，但又不讓用戶直接看到。當(dāng)用戶用手指觸碰紙面上的“屏幕”時(shí)，“電腦”負(fù)責(zé)取回當(dāng)前的紙片（或模塊），放上對(duì)應(yīng)的響應(yīng)界面給用戶。（在這個(gè)過(guò)程中，用戶實(shí)際上也完成了交互過(guò)程）。

TIPS：

1. “電腦”在完成頁(yè)面替換后，要和用戶匯報(bào)“加載完畢”，用戶就能繼續(xù)與原型進(jìn)行交互。這里可以選擇和用戶約定某種特定的姿勢(shì)（例如，雙手交疊表示頁(yè)面替換完成），也可以設(shè)計(jì)一個(gè)表示“正在加載”的過(guò)渡紙片（例如漏洞形的圖案），在“電腦”找到對(duì)應(yīng)的響應(yīng)紙片并完成替換后，要立刻取回。
2. 負(fù)責(zé)協(xié)調(diào)交互測(cè)試的人不允許對(duì)設(shè)計(jì)中的元素或過(guò)程進(jìn)行補(bǔ)充解釋。

“無(wú)鼠標(biāo)電腦”：這個(gè)方法是“綠野仙蹤”的一個(gè)變形，只不過(guò)“巫師”可以和測(cè)試用戶處在同一個(gè)房間（“巫師”的角色可以由協(xié)調(diào)者同時(shí)擔(dān)任）。原型是通過(guò)電腦屏幕展示給用戶的，當(dāng)用戶要進(jìn)行點(diǎn)選的時(shí)候告知協(xié)調(diào)者，協(xié)調(diào)者會(huì)提示讓用戶看向旁邊，這時(shí)候“巫師”負(fù)責(zé)找到對(duì)應(yīng)的頁(yè)面并在屏幕上打開(kāi)，之后協(xié)調(diào)者再讓用戶重新看電腦屏幕，實(shí)現(xiàn)整個(gè)交互過(guò)程。

我要怎么決定選擇動(dòng)態(tài)還是靜態(tài)的原型呢？請(qǐng)看下圖：

圖片來(lái)源：NNGROUP.COM

原型的保真度指的是與最終成品在外觀和操作感覺(jué)上的相近程度，保真度的評(píng)價(jià)分為以下幾個(gè)維度：

• 交互性
• 視覺(jué)效果
• 內(nèi)容與導(dǎo)航結(jié)構(gòu)

一個(gè)原型設(shè)計(jì)可能在上面3個(gè)維度有不同的保真度，下表展示了在這些維度中，高保真和低保真有何區(qū)別：

高保真原型的優(yōu)勢(shì)

1. 高保真的原型在測(cè)試中對(duì)于用戶操作有更真實(shí)的系統(tǒng)響應(yīng)。有時(shí)，這樣的原型會(huì)讓扮演“電腦”的人員花費(fèi)更多的時(shí)間，在電腦或紙面上找到

正確的相應(yīng)頁(yè)面。用戶操作與系統(tǒng)相應(yīng)之間的延遲太長(zhǎng)會(huì)打斷用戶的進(jìn)程，讓他們忘記之前做了什么或是預(yù)計(jì)會(huì)看到什么。

不過(guò)，這樣的延遲也給了用戶額外的時(shí)間學(xué)習(xí)原型的界面。因此，在高保真的原型中，可用性測(cè)試的參與者會(huì)比在其他場(chǎng)景中留意到更多的設(shè)計(jì)細(xì)節(jié)、獲取更多內(nèi)容信息。

TIPS：

如果應(yīng)當(dāng)作為響應(yīng)出現(xiàn)的頁(yè)面很難找到或是加載很慢，可以先撤掉當(dāng)前的頁(yè)面，讓用戶看到的是一張空白的頁(yè)面。當(dāng)響應(yīng)頁(yè)面準(zhǔn)備就緒時(shí)，應(yīng)當(dāng)先把之前的界面再向用戶展示一小段時(shí)間，幫助其回想起之前的操作，再換上響應(yīng)后的頁(yè)面。測(cè)試的協(xié)調(diào)者也可以幫助用戶回想，例如告訴他：“您之前點(diǎn)擊了‘關(guān)于我們’?！?/p>

2. 高保真的原型能讓你進(jìn)一步測(cè)試工作流和特定的UI部件（如下拉菜單、折疊菜單等），以及一些圖形元素，例如圖片的可供性、頁(yè)面的層次結(jié)構(gòu)、分類(lèi)的易讀性、圖像的質(zhì)量及效果。

3. 高保真原型對(duì)用戶來(lái)說(shuō)更像是真實(shí)環(huán)境下的軟件。這意味著測(cè)試的參與者更容易在測(cè)試中表現(xiàn)得更加自然，就如同他們真的在操作一款成品軟件，而不像是和草圖原型進(jìn)行交互，對(duì)于即將出現(xiàn)的頁(yè)面沒(méi)有明確的預(yù)想。（要知道，測(cè)試用戶對(duì)未成形的樣品原型總帶有一定的懷疑。）

4. 高保真的原型讓設(shè)計(jì)者可以集中精神關(guān)注測(cè)試本身，而不是想著接下來(lái)該怎么進(jìn)行。所有人都無(wú)需擔(dān)心測(cè)試能不能正常運(yùn)作。

5. 高保真的交互原型測(cè)試更不容易受人為失誤干擾。在靜態(tài)原型中，扮演“電腦”的測(cè)試人員會(huì)有較大的壓力，也會(huì)有犯錯(cuò)的可能性?？焖俨僮鳌毫?、緊張、密切關(guān)注用戶的操作、在眾多紙片中尋找正確的那一張都會(huì)讓“電腦”感到緊張，在測(cè)試中出錯(cuò)。

低保真原型的好處

1. 設(shè)計(jì)低保真原型可以節(jié)省很多時(shí)間，在測(cè)試之前把時(shí)間都花在完善設(shè)計(jì)上。創(chuàng)建一個(gè)可交互的原型要花費(fèi)很多時(shí)間，而制作靜態(tài)的原型就能省下很多時(shí)間，設(shè)計(jì)更多的頁(yè)面、菜單或內(nèi)容（你仍然需要在測(cè)試前排列頁(yè)面的順序，“電腦”要確保能輕易地找到對(duì)應(yīng)的頁(yè)面。但這些準(zhǔn)備工作怎么都比動(dòng)態(tài)原型要省時(shí)間。）
2. 測(cè)試階段更容易對(duì)設(shè)計(jì)進(jìn)行改動(dòng)。設(shè)計(jì)師可以快速繪制新的相應(yīng)界面，在測(cè)試過(guò)程中擦除或修改現(xiàn)有設(shè)計(jì)中的內(nèi)容，而無(wú)需像動(dòng)態(tài)原型一樣擔(dān)心該怎樣重新搭建跳轉(zhuǎn)的鏈接。
3. 低保真原型可以讓測(cè)試用戶更放松。如果用戶知道參與測(cè)試的是尚未完成的原型，就并不知道這個(gè)產(chǎn)品究竟還要多久才會(huì)問(wèn)世，也更理解這次測(cè)試的主要對(duì)象還是這款尚不成熟的產(chǎn)品，而不是他們。因此，他們也會(huì)更加放松的參與測(cè)試，更容易向你提出他們發(fā)現(xiàn)的有待改進(jìn)的缺陷。
4. 對(duì)于低保真的原型，設(shè)計(jì)師更改起來(lái)不會(huì)有太多壓力。相比于投入了大量精力設(shè)計(jì)的精美原型，改動(dòng)草圖原型更沒(méi)有負(fù)擔(dān)，因?yàn)槿绻粋€(gè)設(shè)計(jì)傾盡了我們的時(shí)間和汗水，再想推倒重來(lái)就更舍不得了。
5. 股東和高管會(huì)明白項(xiàng)目還沒(méi)徹底完工。如果大家看到的還是較為粗糙的原型，也就不會(huì)對(duì)明天就能見(jiàn)到成品抱太高期待，大家都會(huì)認(rèn)為還有很多改進(jìn)需要去做。（與此不同的是，如果原型設(shè)計(jì)得非常完善，高管可能會(huì)很快下定論：“這個(gè)做得很不錯(cuò)了，馬上投向市場(chǎng)?！?/li>

原型測(cè)試過(guò)程中保持與用戶的交互

在原型測(cè)試中，協(xié)調(diào)者總會(huì)和參與測(cè)試的用戶交流得很多，主要出于以下原因：

• 他們需要在測(cè)試開(kāi)始前向用戶解釋原型的運(yùn)作機(jī)制（而不是具體功能）；
• 他們需要時(shí)不時(shí)地向用戶介紹系統(tǒng)目前的狀態(tài)（例如，“現(xiàn)在頁(yè)面還在加載中”），并詢(xún)問(wèn)用戶：“你期望看到系統(tǒng)有什么響應(yīng)？”
• 他們需要確認(rèn)用戶在等待響應(yīng)的過(guò)程中在思考什么，是否認(rèn)為任務(wù)已經(jīng)完成了。.

盡管上述都是測(cè)試者與用戶之間必要的交流，測(cè)試者的最終目標(biāo)還應(yīng)該是安靜地觀察用戶與原型之間的交互，盡量不要干擾或誘導(dǎo)用戶進(jìn)行操作。

TIPS：

1. 如果用戶點(diǎn)擊的是尚未設(shè)計(jì)好的響應(yīng)：

• 告訴他：“這個(gè)暫時(shí)沒(méi)有用?！?/li>
• 詢(xún)問(wèn)他：“當(dāng)你點(diǎn)擊這里的時(shí)候，希望看到的是什么？”
• 如果有第二選擇的頁(yè)面，也可以呈現(xiàn)給用戶，并作出解釋。例如，“您選擇的是’小型汽車(chē)’頁(yè)面，不過(guò)我們現(xiàn)在還沒(méi)有設(shè)計(jì)這一部分，可以請(qǐng)您點(diǎn)擊‘中型汽車(chē)’試試嗎？”在用戶確認(rèn)之后，將“中型汽車(chē)”的頁(yè)面展示給他，之后盡量不要干預(yù)，保持中立旁觀。

2. 如果“電腦”不小心放錯(cuò)了應(yīng)該響應(yīng)用戶操作的頁(yè)面，應(yīng)當(dāng)迅速撤下并換回之前的頁(yè)面，協(xié)調(diào)者應(yīng)該立刻向用戶解釋?zhuān)⑻嫠匦逻M(jìn)行剛才的操作，“您選擇的是‘關(guān)于我們’?！比缓?，“電腦”馬上給出正確的頁(yè)面。

“電腦”失誤會(huì)造成負(fù)面效果

注意，“電腦”失誤會(huì)嚴(yán)重影響測(cè)試效果。因?yàn)槊慨?dāng)頁(yè)面隨用戶操作呈現(xiàn)時(shí)，用戶自然會(huì)對(duì)系統(tǒng)的運(yùn)作形成自己的態(tài)度。如果出現(xiàn)了錯(cuò)誤的頁(yè)面，別以為你可以讓用戶當(dāng)作什么都沒(méi)發(fā)生（只有科幻片才能消除記憶）。即便你馬上更正并解釋?zhuān)脩粢矔?huì)從你的解釋和行為中讀取到一些其他的信息，或許會(huì)對(duì)之后的測(cè)試造成影響。錯(cuò)誤頁(yè)面的出現(xiàn)也會(huì)打斷用戶的操作流程，并讓他們感到疑惑。

最后，如果在后面的測(cè)試中，屏幕出現(xiàn)的是他們沒(méi)有預(yù)料到的內(nèi)容，他們也可能會(huì)懷疑是原型又出了問(wèn)題。這會(huì)極大影響用戶的心理預(yù)期，讓他們不再信任這個(gè)測(cè)試方法，同時(shí)也不能以平穩(wěn)的心態(tài)來(lái)對(duì)待測(cè)試。

既然“電腦”失誤會(huì)嚴(yán)重影響測(cè)試效果，在正式測(cè)試之前就很有必要先進(jìn)行小規(guī)模的測(cè)試，先行修復(fù)原型中存在的問(wèn)題。

結(jié)論

避免犯錯(cuò)：不做原型測(cè)試的風(fēng)險(xiǎn)極高。你的設(shè)計(jì)一定要經(jīng)過(guò)測(cè)試，無(wú)論你是否有過(guò)這樣的安排，因?yàn)橐坏┠愕南到y(tǒng)投向市場(chǎng)，所有使用它的用戶就在替你測(cè)試。與其讓真實(shí)的用戶逐漸對(duì)你的產(chǎn)品失望，還不如在低風(fēng)險(xiǎn)的測(cè)試階段，盡可能多地收集用戶反饋，不斷學(xué)習(xí)、改進(jìn)設(shè)計(jì)。

產(chǎn)品正式發(fā)布之后才發(fā)現(xiàn)的問(wèn)題，會(huì)導(dǎo)致一系列嚴(yán)重的后果：銷(xiāo)售受挫、取消訂單、用戶對(duì)產(chǎn)品理解不足、口碑惡化、退貨退款、售后電話猛增、用戶培訓(xùn)成本上升、份額降低、凈推薦值降低、品牌形象惡化等。

公司不得不趕緊解決問(wèn)題，研發(fā)團(tuán)隊(duì)加急修復(fù)漏洞、重新編碼、改變視覺(jué)效果、改動(dòng)內(nèi)容、再匆忙投入市場(chǎng)，但最后發(fā)現(xiàn)也只是杯水車(chē)薪，這一切還會(huì)耗費(fèi)非常巨大的成本。重新設(shè)計(jì)、重新編碼、質(zhì)量檢驗(yàn)、改變影響策略和內(nèi)容，這些都遠(yuǎn)比改造原型更加昂貴。

無(wú)論你選擇動(dòng)態(tài)還是靜態(tài)原型，高保真還是低保真，都有必要進(jìn)行原型測(cè)試。通過(guò)測(cè)試不斷學(xué)習(xí)并改進(jìn)設(shè)計(jì)，這樣一來(lái)，你的客戶看到的永遠(yuǎn)都是你成功的一面。

原作者：Kara Pernice

原文鏈接：https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/

翻譯：「即能」小程序，公眾號(hào)：「即能Upskill」

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

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