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

可測驗的原型到底長什么樣？

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

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

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

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

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

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

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

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

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

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

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

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

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

靜態(tài)原型

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

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

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

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

TIPS：

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

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

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

圖片來源：NNGROUP.COM

原型的保真度指的是與最終成品在外觀和操作感覺上的相近程度，保真度的評價分為以下幾個維度：

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

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

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

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

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

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

TIPS：

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

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

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

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

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

低保真原型的好處

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

原型測試過程中保持與用戶的交互

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

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

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

TIPS：

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

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

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

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

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

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

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

結(jié)論

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

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

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

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

原作者：Kara Pernice

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

翻譯：「即能」小程序，公眾號：「即能Upskill」

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

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