完善你的用戶體驗設計過程——原型設計指南
已發表: 2022-03-11原型製作的過程——從創建簡單的線框到測試功能齊全的模型——是任何設計師都可以掌握的最有力和最強大的技能之一。 這在工作場所也充滿了危險，因為跳過了這個過程，而不是僅僅將“設計一個原型”作為一個簡單的交付物交給下一個部門來建造。 無論您的企業在原型設計方面多麼勤奮，實際過程通常會成就或破壞您的最終產品。
如何以及為什麼實際構建原型通常是一個謎。 問很多設計師，他們會像迷糊的小狗一樣歪著頭。 “你的意思是？ 你就去做吧，”他們會說。 確實如此：我們都知道如何創建原型。 我們只是不知道我們是怎麼知道的。
考慮到原型通常是最有價值的可交付成果，這一點尤其重要。 客戶和經理想看看你做了什麼，無論是網站還是實體產品。 他們想嘗試一下，檢查各種元素，並了解工作流程。 他們想看看“它是如何工作的”。
建立一個原型是不夠的； 我們必須了解構建產品初稿所涉及的過程。 本文將深入探討設計師為實現這一目標而需要知道和做的一切。
原型設計 - 原型的用途
人類是高度視覺化的。 事實上，我們大腦皮層的 30% 純粹用於視覺。 所以當你看到一個原型時，最重要的是你看到了它！ 當客戶可以查看它並了解與產品相關的所有過程，尤其是未來測試的爭議領域時，該原型就會變得栩栩如生。
那麼什麼是原型？ 原型是一種可視化交互設計作品大雜燴的工具； 實際上，原型（幾乎在任何階段）都是之前所有工作的合併，成為一個單一的、可見的、功能性的作品。 這種視覺表示展示了產品在任何給定點的作用、交互元素是什麼以及產品在現實世界中的功能。
雖然原型設計的各個方面（如創建草圖）有很多機制，但很容易遺漏一些東西並犯錯誤。
這使得關於如何構建原型的工作變得非常有價值，因為它在許多方面描述了產品的目的是如何實現的。 不完美，而且大多數時候絕對不准確，但顧名思義，原型不是最終的。
他們減慢我們的速度以加快我們的速度。 通過花時間對我們的想法進行原型設計，我們可以避免代價高昂的錯誤，例如過早變得過於復雜和堅持一個薄弱的想法太久。
IDEO首席執行官兼總裁蒂姆·布朗
將原型視為一種展示功能的機制是一種簡單的方式。
這種對事物如何運作的實用解釋具有許多高價值的好處，包括：
- 使其成為現實——在構建任何原型之前，產品完全是概念性的！ 暫時沒問題，但最終它必須成為利益相關者和用戶最終理解和欣賞的東西。 原型是從概念到實際的第一步。
- 解決問題 -有時，我們面臨沒有解決方案的設計挑戰。 作為一項技能，原型設計是一種將問題可視化并快速引入解決方案的好方法。 如果它不起作用，請扔掉原型並重試。
- 迭代——原型設計是分階段進行的，但結果是一樣的：發展你的想法。 從草圖到高保真音響，每一次新的迭代都提供了大量的行為和功能來測試。 有了更多數據，我們可以更快、更智能地進行迭代。
- 檢測意想不到的場景——一旦有東西可見，我們就有了可供研究的產品的局限性，這也提供了更好的背景，說明什麼應該存在……什麼不應該存在！
- 檢測可用性問題——這就是許多設計師生活的地方：一旦產品有了任何類型的原型，可用性挑戰就會突然變得很容易發現和解決。
- 演示——任何階段的原型都是演示的標準。 無論您是在測試頁面版本還是向客戶展示產品，都應該有某種形式的原型。 如果不是，你可以打賭有人會問它在哪里以及為什麼不包括在內。
如何開始原型製作過程
從客戶那裡收到一份 50 頁的需求文檔後，看著一張空白的畫布可能會讓人望而生畏。 從客戶會議、餐巾草圖和骯髒的白板照片中回顧雜亂無章的想法很少有幫助。
因為原型是建立在許多其他信息之上的，所以提前收集必要的細節以將筆放在紙上是很重要的。 考慮以下清單並查看您的客戶或經理提供的詳細信息：
1. 項目的目標是什麼？
從大局開始。 產品是否解決了真正的需求？ 它如何解決這種需求？ 了解產品的實用性對於提供任何可行的解決方案都至關重要。
2. 人們目前使用哪些競爭產品？
強大的競爭分析將為產品類型的市場狀況提供清晰的畫面，以及當今用戶的期望。
3. 觀眾是誰？ 他們的目標是什麼？
了解人口統計和用戶需求為創建產品提供了必要的背景，這些產品旨在為那些特定的用戶類型提供服務並滿足他們的需求。
4. 它是什麼類型的產品，它用於什麼（設備）？
有這麼多不同的技術和解決方案，用戶體驗設計師需要知道產品將如何使用（網絡應用程序、響應式網站、移動應用程序等）、在什麼設備上以及不同版本將如何共存（如果有的話） ）。
5. 是否有任何視覺先例可循？
如果產品已經存在並且項目正在改進或重新設計，則考慮到當前用戶對產品的行為，可能存在一些需求。
6. 可交付成果是什麼？
設定對可交付成果和流程的期望對於您的計劃和工作流程至關重要。 每個項目都是不同的，但如果可交付成果定義明確，則用戶體驗設計過程的其餘部分更有可能順利進行。
繪製原型
隨著我們的數據可用和組織好，下一步是開始繪圖。 許多設計師在繪製出來之前就已經對佈局、結構甚至視覺設計的特定元素所屬的位置有了一個想法。 這很好，但最初草圖的目的是探索可用空間以突出可能的東西——更重要的是，什麼不是。
收集您選擇的書寫工具，無論是鉛筆和紙，還是白板和記號筆。 素描過程類似於作家的自由寫作或音樂家的彈奏。 根據您提前完成的所有工作繪製您的感受，並考慮以下部分：
01 | 用戶流 -遵循識別用戶流。 了解用戶如何實現他們的目標以及他們如何在系統中進行交互。
02 | 信息實體——每個用戶流都會顯示一些用戶輸入和輸出。 確定它們是什麼、它們與用戶行為和期望的關係、它們參與的交互以及它們的工作方式。
03 | 第一個草圖——在了解了誰將使用該系統、他們將要做什麼以及使用什麼之後，就該看看如何使用了。 繪製您的用戶流程——無需創建佈局，只需解決功能即可。
04 | 勾畫一個基本的結構——勾畫出你的用戶流程後，你將對產品的最佳佈局有一個更好的想法。 這將包括顯示為基本框或塗鴉的內容（文本、照片、視頻等）。 手寫時，它們不適合大小，因此所有結構和內容都只是為了可視化，而不是實際使用。
另一個技巧是在繪製草圖時使用草圖板、特殊配方的紙張或工具來製作更清晰的線框。 它們提供了相關視口的基本佈局，成本相當低，並且使用適當的模板還可以使草圖更清晰。 如果您是一個凌亂的抽屜，這些將非常有用，因為它們為智能手機和網絡瀏覽器提供了正確的縱橫比和網格線。
這個過程可以持續多久，但是一旦用戶流程完成並且完成該流程的過程很清楚，就該進入下一步了。 在素描和構建數字線框之間來回切換是個好主意，主要是為了保持過程的創造性。 隨著您通過更多流程進行，產品會感覺更加具體，您自然會從草圖轉移。
轉向數字化（低保真到高保真原型）
一旦有足夠的完整草圖繼續前進，就該將它們數字化了。 無論是 Adobe XD 還是 Sketch、Framer 或 Flinto，或者其他完全不同的東西，創建草圖的數字版本是使它們形式化的第一步。 因此，重點從創造性地添加必要的元素轉移到在設計中組織資產和結構。
隨著原型變得更加實用和元素更加結構化，產品逐漸成型。 當轉向數字原型時，保真度取決於交互性、視覺設計和內容的水平。 一個原型在這些區域可以分別是低保真或高保真，儘管高保真在最高級別包含所有三個。
在滿足用戶需求方面考慮層次結構。 每個草圖都連接到用戶流程和故事，草圖是確定產品佈局和結構的第一步。 今天的數字工具可以加快這方面的速度——例如，設置適用於所有頁面的主元素和頁麵類型的模板。
對於每個新的連線和迭代，要問兩個主要問題：這個頁面是否說明了它在更大的用戶流中的用途？ 交互是否有意義（意味著用戶是否了解如何完成操作）？ 我們經常問這些問題。 我們做的越多，每次新的迭代就越有可能使原型更接近最終草案。
數字原型也更容易測試，因為它們不僅更易讀，而且可以更快地複制和迭代。 這就是像 InVision 和 Proto.io 這樣的 UX 原型設計工具非常方便地創建可點擊原型的地方。 當它可點擊時，測試各個方面的可用性變得很容易，從單個按鈕到整個流程。
由於 InVision 等程序的易用性，可點擊原型在過去幾年中變得特別流行。 它對移動設備更有價值，現在每個主要的原型設計工具都提供了一些直接在測試設備上查看或測試移動線路的途徑。
借助一些工程知識或更強大的工具（例如 Justinmind 或 Axure），還可以構建功能原型，這些原型是交互式的，而不僅僅是單擊。 用戶可以測試諸如填寫表格、完成簡單或複雜的任務以及實際使用應用程序，而無需實際構建它。 接受過人機交互 (HCI) 設計培訓的設計師，包括許多 Toptal 設計師，會定期使用功能原型進行構建和測試。
交互式原型非常適合測試動畫、應用程序內的用戶操作以及有時無法在沒有功能操作的情況下測試的高級功能。
有目的的原型
原型設計的美妙之處和挑戰都在這個過程中。 我們可以對幾乎所有事情說同樣的話，但原型的開始和結束都是有目的的。 在不知道為什麼特定屏幕需要以某種方式運行、功能應該如何操作或用戶是否需要漏斗的情況下，製作的原型就沒有開發出來； 它被繪製然後臨時創建。
然而，即使構建的每一個線框都如此智能地完成，沿途提出的問題，考慮到每個相關的用戶故事並將信息架構用作地圖，仍然可能會遺漏一些東西。 這就是原型設計的挑戰：客戶、經理甚至設計師都忘記了原型不是最終的。 它們只是一個草稿，一個迭代直到下一個版本。 這都是用戶體驗設計過程的一部分。
因此，在構建下一組原型時，請記住至少要問一個非常重要的問題：這會產生預期的結果嗎？ 如果沒有，那麼這是另一個起草新版本的機會。
• • •
進一步閱讀 Toptal 設計博客：
- 電子商務用戶體驗——最佳實踐概述（附信息圖）
- 以人為本的設計在產品設計中的重要性
- 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例
- 移動界面的啟發式原則
- 預期設計：如何創造神奇的用戶體驗