工作中常常出現(xiàn)這種情況：你花了無(wú)數(shù)個(gè)小時(shí)構(gòu)思、設(shè)計(jì)理論模型，到了投入生產(chǎn)才發(fā)現(xiàn)完全忘記放上標(biāo)識(shí)了。事實(shí)上，我們太容易陷入一個(gè)完美的產(chǎn)品快照中。為了提升你的設(shè)計(jì)能力，你需要專注于交互設(shè)計(jì)，通過(guò)原型設(shè)計(jì)可以幫助你實(shí)現(xiàn)這一目標(biāo)。

原型設(shè)計(jì)是一個(gè)迭代過(guò)程，它讓你能夠?qū)υO(shè)計(jì)進(jìn)行評(píng)估和測(cè)試。在過(guò)去的幾年里，針對(duì)每種場(chǎng)合和每個(gè)細(xì)節(jié)層次，我都會(huì)創(chuàng)建它們的原型?；仡櫸业脑O(shè)計(jì)過(guò)程，我發(fā)現(xiàn)：

• 原型為我提供了相當(dāng)豐富的反饋
• 原型幫助我向利益相關(guān)者闡明我的想法和概念
• 原型節(jié)省了我的工作成本和時(shí)間
• 原型讓我成為一個(gè)更好更周全的、會(huì)講故事的用戶體驗(yàn)設(shè)計(jì)師

在這篇文章中，我將向你介紹如何選擇正確的原型制作工具、讓你的原型更有真實(shí)感的技巧和竅門(mén)以及設(shè)計(jì)原型之前需要考慮的問(wèn)題，幫助你的設(shè)計(jì)更上一層樓。

一、找到合適的工具：如何評(píng)估現(xiàn)有的工具

在比較原型設(shè)計(jì)工具時(shí)，我們常常會(huì)面臨一個(gè)選擇的困境：許多工具提供的功能和價(jià)格都是類似的，讓人難以做出選擇。我個(gè)人偏好的工具是 Flinto，由于軟件的速度和細(xì)節(jié)優(yōu)勢(shì)，我用它來(lái)設(shè)計(jì)大部分的原型。不過(guò)保持靈活性也很重要：在某些情況下，我會(huì)改用像 HTML/CSS/JS 這樣的代碼編輯器來(lái)完成工作。

最后，你要選擇能使你的工作變得簡(jiǎn)單高效的設(shè)計(jì)工具。請(qǐng)記住，我們要能夠根據(jù)項(xiàng)目、團(tuán)隊(duì)和需求改變使用的工具。

在評(píng)估哪種工具最適合你時(shí)，請(qǐng)考慮以下事項(xiàng)：

1. 細(xì)節(jié)和自定義

選擇一個(gè)支持自定義過(guò)渡和多種手勢(shì)的工具，以滿足項(xiàng)目所需要的精細(xì)程度。

2. 選擇學(xué)習(xí)曲線

你最不想看到的事肯定是在實(shí)際設(shè)計(jì)之前必須從頭學(xué)習(xí)一個(gè)全新的工具。

因此，我建議你選擇一個(gè)學(xué)習(xí)曲線比較平緩的工具。

不管選擇哪種工具，它要能讓你應(yīng)用于原型設(shè)計(jì)過(guò)程，并且使你專注于自己的時(shí)間和想法，而不是學(xué)習(xí)軟件本身。

3. 團(tuán)隊(duì)協(xié)同

強(qiáng)烈建議你和同事使用相同的工具。

就像你可能會(huì)分享 Sketch 或 Illustrator 設(shè)計(jì)文件一樣，你也可以分享你的原型、重新調(diào)整素材和深入學(xué)習(xí)其他人是如何構(gòu)建特定的交互設(shè)計(jì)的。

盡管還要考慮一些其他的因素（例如，易于共享和輸出代碼），但上述要點(diǎn)是在你決定使用哪種原型制作工具時(shí)一個(gè)很好的思考起點(diǎn)。

請(qǐng)記?。汗ぞ卟皇侵攸c(diǎn)，重點(diǎn)是工具賦予你的創(chuàng)造力。

二、超越設(shè)計(jì)保真度：如何讓原型真實(shí)感更強(qiáng)

當(dāng)你在進(jìn)行原型設(shè)計(jì)的時(shí)候，你可以使用一些技巧使你的原型真實(shí)感更強(qiáng)。

為什么真實(shí)感很重要呢？

因?yàn)槿绻粋€(gè)原型讓人感覺(jué)真實(shí)，你收到的反饋也會(huì)更具有建設(shè)性，在上交給開(kāi)發(fā)團(tuán)隊(duì)之前你也可以更有效地迭代它。

典型的經(jīng)驗(yàn)法則告訴我們：設(shè)計(jì)保真度越高越好。不僅設(shè)計(jì)保真度本身很重要，而且交互的保真度還可以轉(zhuǎn)化為產(chǎn)品的可用性。

你可以從以下幾個(gè)原則來(lái)考慮整個(gè)用戶體驗(yàn)，使你的原型脫穎而出：

1. 元素狀態(tài)

元素的狀態(tài)包括聚焦、活動(dòng)和懸停。

出于某種原因，許多設(shè)計(jì)師會(huì)忽略這些——盡管它們只是交互設(shè)計(jì)的基本部分。

如果在用戶測(cè)試中，用戶表示找不到該點(diǎn)擊哪里或者不清楚怎么導(dǎo)航，這就是你的設(shè)計(jì)不包含元素狀態(tài)所導(dǎo)致的結(jié)果。

一個(gè)最佳的原型設(shè)計(jì)實(shí)踐要從構(gòu)建組件狀態(tài)開(kāi)始。它能告訴用戶有哪些可交互的內(nèi)容，并為你提供更豐富的反饋。

懸停是桌面產(chǎn)品需要考慮的一個(gè)重要手勢(shì)，懸停效果有助于指示或強(qiáng)調(diào)用戶即將采取的操作。

我們以垃圾桶為例：

• 圖 1 將垃圾桶的的顏色改為紅色，表明這可能是一個(gè)危險(xiǎn)的操作
• 圖 2 包括了一個(gè)工具提示，用于指示將要執(zhí)行的操作
• 圖 3 更有趣，它使用圖標(biāo)本身來(lái)說(shuō)明你將要采取的操作

雖然這些只是微交互，但構(gòu)建一致的懸停效果能使你的用戶獲得可預(yù)測(cè)的體驗(yàn)和交互模式。

按/點(diǎn)擊/敲擊手勢(shì)也很重要，因?yàn)樗鼮槟銊倓傔M(jìn)行的操作提供了視覺(jué)反饋。

如果用戶在點(diǎn)擊時(shí)沒(méi)有觀察到狀態(tài)變化，他們會(huì)疑惑自己剛剛是否完成了那項(xiàng)操作。這一點(diǎn)對(duì)移動(dòng)設(shè)備端尤為重要，因?yàn)橐苿?dòng)端不可能存在懸停的狀態(tài)。而在電腦桌面上，點(diǎn)擊手勢(shì)會(huì)觸發(fā)一個(gè)活動(dòng)狀態(tài)。

讓我們一起看看這個(gè)例子（盡管有些夸張）：

點(diǎn)擊手勢(shì)能清楚顯示出操作已經(jīng)完成，避免用戶產(chǎn)生困惑。除了敲擊，我們還可以給屏幕之間的切換增添滑動(dòng)手勢(shì)。

滑動(dòng)手勢(shì)在 iOS 和安卓操作系統(tǒng)中已經(jīng)非常普及了，是用戶很熟悉的一種導(dǎo)航模式，因此在移動(dòng)端做 UI 交互時(shí)也可以加入滑動(dòng)手勢(shì)。

2. 過(guò)渡！過(guò)渡！過(guò)渡！

你是如何從一個(gè)頁(yè)面切換到另一個(gè)頁(yè)面的？

頁(yè)面間的過(guò)渡是一種能提供信息的手勢(shì)。

通過(guò)過(guò)渡動(dòng)作往頁(yè)面中增加或者去除元素，你可以幫助用戶注意到頁(yè)面內(nèi)容的變化，同時(shí)你也能依靠固定元素來(lái)錨定 UI。

• 圖 1：左推，iOS 系統(tǒng)中一個(gè)創(chuàng)造性的過(guò)渡手勢(shì)，可以在屏幕間滑動(dòng)。這種方式在許多軟件包中很常見(jiàn)，但如果頁(yè)面間只有簡(jiǎn)單的布局差異，使用這種方式過(guò)渡可能會(huì)對(duì)用戶產(chǎn)生干擾。
• 圖 2：沒(méi)有過(guò)渡，如果改變的元素比較少，使用直接切換的方式是很有效果的。
• 圖 3：自定義轉(zhuǎn)換，這樣可以弱化屏幕切換帶來(lái)的割裂感，還可以提示用戶有哪些信息改變了。

3. 讓用戶自己探索

對(duì)用戶而言，沒(méi)有什么比用戶自己對(duì)全局的控制感更真實(shí)的了。這就意味著有時(shí)候必須讓用戶自己探索甚至稍稍出一點(diǎn)錯(cuò)。這是了解用戶如何自然地導(dǎo)航和如何學(xué)習(xí)使用 App 的一個(gè)好方法。

你可以通過(guò)為相同操作提供幾種不同的操作方法來(lái)確定哪種該作為主要方法，從而成功實(shí)現(xiàn)這一目標(biāo)。

思考這個(gè)目錄列表的用例：

可以通過(guò)溢出菜單快速訪問(wèn)操作

操作欄里對(duì)象的單個(gè)或批量操作

查看對(duì)象的其他詳細(xì)信息并提供相同的操作

4. （不要）滿足用戶期望

如果下載、上傳或搜索需要較長(zhǎng)的等待時(shí)間怎么辦？

在屏幕上添加帶有計(jì)時(shí)的動(dòng)畫(huà)效果，讓用戶做好等待的心理準(zhǔn)備。用戶在使用流程中遇到錯(cuò)誤是一個(gè)引導(dǎo)和糾正的好機(jī)會(huì)。

系統(tǒng)并不能做到完美，我們最好要了解如何才能幫助用戶成功，而不是僅僅在原型中提供一個(gè)順暢的路徑。問(wèn)問(wèn)你自己，怎樣能讓產(chǎn)品中有一些無(wú)傷大雅的小錯(cuò)誤？

語(yǔ)音驗(yàn)證就是一個(gè)很好的例子。

在設(shè)計(jì)原型時(shí)，我會(huì)故意放入一條提示錯(cuò)誤的消息，讓用戶知道他們的聲音太小了。這樣我就能夠估量用戶對(duì)于系統(tǒng)表現(xiàn)不完美的反應(yīng)，以此來(lái)調(diào)整消息和操作，最后取得成功。

5. 在目標(biāo)媒介上查看

想要制作一個(gè)移動(dòng)應(yīng)用程序？

請(qǐng)把你的原型搬到真機(jī)上試一試。

你的目標(biāo)媒介可能有自己的一套模式，你要留意這一點(diǎn)。如果原型沒(méi)有經(jīng)過(guò)適當(dāng)?shù)臏y(cè)試，你可能會(huì)錯(cuò)過(guò)一些有助于改善用戶體驗(yàn)的數(shù)據(jù)。

手機(jī)就是一個(gè)很好的例子：在真機(jī)上的測(cè)試可以向你揭露一些人體工學(xué)上的用戶體驗(yàn)問(wèn)題（例如：用戶需要伸手去夠一個(gè)按鍵）

6. 創(chuàng)造力和真實(shí)感

充分發(fā)揮你所使用的工具的功能。運(yùn)用視頻支持、創(chuàng)建 gif 動(dòng)畫(huà)或者截屏，幫助模擬用戶界面。

一個(gè)讓用戶信以為真的原型能給他們留下深刻的印象。我們也知道，一點(diǎn)點(diǎn)“小伎倆”有時(shí)能帶來(lái)最好的效果。

三、在設(shè)計(jì)之前：根據(jù)受眾范圍設(shè)計(jì)需要的內(nèi)容

既然你已經(jīng)掌握了設(shè)計(jì)工具并了解如何設(shè)計(jì)出最好的產(chǎn)品原型，是時(shí)候開(kāi)始考慮受眾問(wèn)題了。問(wèn)問(wèn)你自己：這個(gè)原型是用來(lái)展示、交接還是用戶測(cè)試？你要記住：你做出來(lái)的原型不需要同時(shí)滿足所有人的要求。

原型設(shè)計(jì)與UX 框架結(jié)構(gòu)保持一致，便于管理

除了與團(tuán)隊(duì)保持一致以外，為了更好地確定你需要制作的內(nèi)容，你要考慮以下幾種情況：

1. 通過(guò)視頻會(huì)議軟件展示你的原型

大多數(shù)視頻會(huì)議軟件在共享屏幕時(shí)都會(huì)有一點(diǎn)延遲，而且每個(gè)會(huì)議的幀速率也不盡相同，你要預(yù)想到你很大一部分的操作會(huì)被跳過(guò)或者丟失。

2. 與開(kāi)發(fā)團(tuán)隊(duì)共享

如果你要向開(kāi)發(fā)團(tuán)隊(duì)提供原型來(lái)傳達(dá)交互模式，那就把它做成較小的插圖。

專業(yè)提示：試著提取出動(dòng)作的實(shí)際值，如持續(xù)時(shí)間、延遲、曲線等。

為了把所有的小插圖連接在一起，我喜歡用一個(gè) IA 圖或者高級(jí)別的體驗(yàn)地圖，這樣就能用作快速參考指南。（見(jiàn)下圖）

流程圖示例

通過(guò)簡(jiǎn)單地表達(dá)屏幕的意圖和用戶動(dòng)作，你就能讓開(kāi)發(fā)人員高度關(guān)注動(dòng)作的細(xì)節(jié)，同時(shí)也能了解動(dòng)作實(shí)施的背景情況。

在此例中，內(nèi)容和視覺(jué)保真度較低，因此我們可以清楚地展示批量操作欄和詳細(xì)信息面板的交互模式。

3. 用戶測(cè)試

這是你最希望原型盡可能接近真實(shí)的時(shí)候了。

在原型中，你不一定要讓操作按照步驟執(zhí)行，而要給訪問(wèn)的用戶提供多條路徑。不要強(qiáng)迫用戶一直沿著正確的路徑操作，相反地，你要讓用戶從與產(chǎn)品的互動(dòng)中自己去領(lǐng)悟。

如果你采用的是遠(yuǎn)程用戶測(cè)試，請(qǐng)確保原型的程序能夠輕松地被分享。

在這種情況下，InVision 是一個(gè)不錯(cuò)的選擇，它擁有強(qiáng)大的共享功能。雖然 InVision 不支持你在轉(zhuǎn)換中自己選擇想要的自定義級(jí)別，但你可以輕松地通過(guò)創(chuàng)建基本元素狀態(tài)和屏幕間的鏈接來(lái)幫助用戶在原型中移動(dòng)。

要點(diǎn)總結(jié)

• 選擇制作工具時(shí)不要太死板。任何工具都能做出你想要的原型，但也不要害怕在某一個(gè)高質(zhì)量工具中投入太多。
• 運(yùn)用一些技巧使你的原型感覺(jué)更真實(shí)。
• 原型是你的擴(kuò)展團(tuán)隊(duì)（即利益相關(guān)者、開(kāi)發(fā)團(tuán)隊(duì)、研究團(tuán)隊(duì)等）的最佳資源之一。
• 通過(guò)強(qiáng)迫自己考慮整個(gè)設(shè)計(jì)過(guò)程，原型設(shè)計(jì)會(huì)幫助你成為一個(gè)更周全的設(shè)計(jì)師。

作者：即能，公眾號(hào)：「即能學(xué)習(xí)」

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

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