你需要知道的關於用戶體驗草圖的一切

如果你做過任何嚴肅的創意工作，那麼你對創意塊太熟悉了。 感覺就像碰了一堵磚牆：你能想像的想法都不夠好，或者在現實生活中行不通。

對於設計師來說，這種感覺再熟悉不過了。 然而，就像任何沒有明確解決方案的複雜問題一樣，一個聰明的過程可以帶來所有的不同。 這就是用戶體驗草圖的用武之地。

用戶體驗草圖是用戶體驗設計中一個至關重要但經常被忽視的方面。 草圖是一種非常有效的設計交流方式，同時允許設計師嘗試多種想法並在確定一個想法之前對其進行迭代。

在這篇文章中，我打算涵蓋您需要了解的有關 UX 草圖的所有內容，包括以下幾點：

• UX草圖和線框簡介
• 用戶體驗草圖基礎、工具和技術
• 用註釋、註釋、數字澄清草圖
• UX素描技巧和竅門
• 旨在提高質量和生產力的微型方法
• 您需要了解的有關 Wireflow 的所有信息
• 用戶體驗流程草圖快速指南

用戶體驗草圖是一個兩步過程

在設計中必須考慮許多選項，從而選擇和執行最佳選項。 設計師考慮他們的選擇，然後著手製定細節，從而使 UX 設計分為兩步：

• 創意產生

在最初的步驟中，會產生多個想法，但由於它們無法完全成型，因此某些元素不完整或缺失的情況並不少見。 主要是考慮不同的方法，並根據您的任務和項目的各種約束來決定哪種方法最有效。

• 添加細節和細化

一步一步地，您確定了一些有希望的變體並著手製定細節，從而使一些想法變得不合適。

UX 草圖和線框：介紹和分類

您的線框可能會因所需的詳細程度、顏色和样式、是否要向某人展示等因素而有所不同。

我挑出了以下草圖類型：

• 草圖：創意生成

這些是最初的草圖。 較低級別的細節被簡單地記錄下來。 使用有限數量的顏色。

我畫了很多基本的草圖，從不同的角度考慮問題，考慮不同的解決方案。 在繪製這樣的草圖的同時，我也在努力生成盡可能多的解決方案變體。

在這個特定的步驟，不完整讓我的思想得到解放，這就是為什麼在這個階段避免陷入細節如此重要的原因。 我的目標是產生盡可能多的想法並選擇最有前途的想法。

• 線框：規範，詳細階段

我通常會挑選有希望的草圖並仔細研究細節，然後我會選擇最好的變體並更詳細地進行設計。

然而，這並不意味著每一個細節。 顯而易見的事情可能會被注意到。 此外，某些方面將難以在紙上描述​​。

在這一步，我繪製了所有重要的細節，但我還沒有在 Balsamiq 中繪製線框。 在紙上完成所有工作後，我開始在 Sketch 中繪圖。

數字工具比紙張提供了更多的創作自由，您可以輕鬆地將注意力轉移到小事上。 例如，您可以專注於“像素拋光”而不是設計。

• 視覺設計草案

這是一種很少使用的方法，但有時它可能會有所幫助。 在項目的早期階段考慮了各種視覺解決方案，但為所有這些創建數字草圖可能需要很長時間。 這就是為什麼我首先在紙上繪製設計草圖，以考慮不同的選項並選擇視覺設計方向。

• 組件/元素細分

當我已經有了一個大致的想法並且正在考慮特定的頁面功能或界面組件的組成部分時，我發現這種技術很有用。 我繪製不同的頁面元素，深入細節，然後繪製頁面元素的不同可能位置。

元素，即使是最簡單的元素，也必須有狀態； 可以按下一個按鈕，它有一個懸停文本塊，可能為空，也可能不為空。 它越複雜，它的狀態就越多。

基礎知識入門

• 準備好你的工具。 找到最方便的地方，一張有足夠空間的大桌子。 拿很多紙，準備一些鋼筆和記號筆。
• 暖身。 為了做好準備，我建議畫一些線條、圓圈、基本模板和圖標。
• 定義你的目標。 決定你想畫什麼。 設定你的目標並決定你要講什麼故事。 確定所需的詳細程度。 決定你是否準備好畫很多。
• 定義您的目標受眾。 如果您是為自己執行此操作，則無需擔心草圖的外觀。 但是，如果您打算向客戶展示您的圖紙，請確保您有一些額外的時間來為您的草圖添加更多細節。
• 設定一個時間範圍。 決定了你準備分配給素描的時間，比如說 30 分鐘，這將幫助你專注於你的工作。

現在，一切就緒，可以開始了：

• 畫出邊緣。 繪製框架、瀏覽器或電話窗口、界面的一部分等。

• 添加最大或基本元素：菜單、頁腳、主要內容。

• 添加詳細信息。 添加相關細節，但在此階段保持簡單。

• 添加註釋和註釋。 僅當您計劃共享草圖時才需要這些。 然而，即使你只是為了你的眼睛，它們也很有用。

• 草圖替代品。 為您的解決方案草擬一些快速的替代方案。

• 選擇最佳解決方案。 選擇最佳選項。

• 添加陰影和斜角。 這對於共享目的尤其重要。 添加陰影以使您的草圖具有視覺吸引力，如果您打算與團隊成員和/或客戶分享它，這一點很重要。

• 保存草圖。 拍照或將其放入文件夾中。 我的桌子上有幾個紙盤用來畫草圖。

• 分享。 我通常使用以下分享方式之一：
  • 通過 Evernote 掃描草圖並向其他團隊成員或利益相關者提供永久鏈接。
  • 拍照並上傳到 InVision。
  • 將圖像上傳並映射到 Realtimeboard。
  • 或者只是通過電子郵件發送照片。
• 查看草圖並添加註釋。 休息一下，過一會兒再回到你的草圖上。 再看看他們。 草圖對你還有意義嗎？ 一個好的草圖必須易於理解。

用附加元素澄清草圖

找到或繪製適當的草圖，然後在其中添加以下細節：

1. 標題。 有時，添加標題是一個不錯的選擇。 如有必要，在草圖頂部寫下描述和日期。 標題將幫助您了解您正在查看的內容以及草圖是否相關。 如果您有很多草圖或要向其他人展示，這將特別有用。

2. 註釋。 註釋是靠近元素放置的名稱和註釋，用於解釋其內容或其他屬性。 它們添加了闡明其他元素並且通常難以繪製的細節。 例如，它可能是塊的名稱、一些交互細節、圖片的解釋、未來設計變化的一些想法等等。 您可以查看我的一個示例以查看註釋草圖的外觀。

3. 數字。 給草圖的元素或草圖本身編號。 您可以決定如何對它們進行排序（例如，通過交互流、創建它們的順序等）。 它在討論（尤其是遠程討論）中也可能很有用，因為您的同事和客戶只需在他們的反饋中指出草圖編號，您就會明白他們的評論指的是哪一個。

4. 箭頭。 您可以使用箭頭來指示屏幕轉換。 它們還可用於連接草圖的不同部分，指示一系列動作，等等。 由於箭頭的含義可能會有所不同，因此您可以在箭頭上方添加對箭頭含義的描述或解釋。 這是一個基本草圖的示例，顯示了轉換和幾種不同的狀態。

5. 筆記。 就像註釋一樣，註釋用於解釋概念。 但是，註釋與註釋的位置不同。 它們不連接到元素或位於所描述的元素附近，類似於此示例。 註釋可以放在頁面的頂部或底部。 他們甚至可以描述設計中未包含的元素、您可能遇到的問題、一般解釋、未草擬的想法等等。

6. 手勢。 手勢在觸摸設備設計的情況下是相關的。 繪製手勢可能需要練習。 用於指示不同類型動作的手勢有多種變體，因此最好提前決定如何指定特定動作（當然，如果它不明顯）並練習繪製它。

7. 回饋。 在將草圖展示給其他人之後，或者在您自己再看一遍之後，您可能會收到修復或改進草圖的建議。 用不同的顏色標記此類反饋通常很有用，以幫助區分反饋與原始草圖。

您可以為不同類型的元素使用不同的顏色。 有時，我用黑色畫圖，藍色鏈接，深綠色筆記，紅色標題和反饋。 嘗試在你的草圖中使用不同的顏色，但要確保你選擇的顏色是一致的！

更具體的提示和技巧

1. 不要擔心質量。 不要看 Dribbble 上的草圖； 它們是關於完全不同的東西。 請記住，草圖的主要目的是幫助您更清晰地思考、找到更好的解決方案並節省時間。

2. 實踐。 首先，您可以嘗試繪製一些應用程序。 打開網絡或移動應用程序並嘗試複製屏幕，描述筆記中的元素。 只要您有空閒時間，就練習繪製設計的基本構建塊。 一般來說，熟能生巧。 一段時間後，它將成為您設計師自我的一部分。

3. 買個文件夾。 我經常不在辦公室工作，而是在咖啡館或家里工作。 紙質草圖很容易損壞，因此請購買一個簡單的文件夾以確保它們安全無虞。

4. 隨身攜帶工具。 這有助於確保您可以隨時在紙上記錄您的想法，否則您可能會忘記想法或無法足夠詳細地記住它。 我總是隨身攜帶一個記事本、幾張 A4 紙和鋼筆。

5. 與他人分享。 與其他人互動並與您的團隊溝通非常重要。 從長遠來看，讓其他人參與並獲得他們的反饋，尤其是在早期，有助於節省時間和資源。 您還可以鼓勵其他人按照他們設想的設計方式進行繪製。

6. 紙盤。 考慮在工作台上放置紙盤。 例如，我有三個：用於傳入的任務、草圖和乾淨的紙張。

7. 實驗和定制。 我的建議是基於我的經驗。 隨著時間的推移，你會發現什麼最適合你； 哪些方法，哪些步驟順序，哪些內容能夠充分發揮您的創造潛力。 只有不斷嘗試新事物，您才會到達那裡，這就是為什麼嘗試不同的格式、樣式和嘗試新模板很重要的原因。

8. 使用模板。 模板將節省時間並隱含地考慮格式限制，從而騰出更多時間專注於重要的事情。

其他改善草圖的小方法

這些不一定是技巧和竅門，但它們是方法、工具和建議的集合，可以提高您的工作效率或提高草圖的質量。

1. 創建一個草圖板。 使用筆和紙而不是數字素描工具的最大好處之一是您實際上可以將它貼在牆上。 您團隊中的每個人都可以看到並參與（儘管我建議設置審查會議）。
   
   • 你自己會看到你的草圖，這會激發你的思考，讓你看到全局，而不是孤立的部分，而是整個系統。 您將看到零件之間的相互作用以及它們相互配合的方式。
     
   • 創建草圖板 - 附上您的白板草圖。 如果您的辦公室沒有白板，您可以使用雙面膠帶或便利貼將您的草圖粘在牆上。 如果不想粘在牆上，可以找一大塊硬紙板代替。 我強烈建議使用草圖板，因為它們是最好的設計工具之一。
2. 使用白板。 白板是一個很棒的繪圖工具。 它有很多優點：
   • 它是協作的，很容易讓其他團隊成員參與討論和繪圖。 即使他們的想法不太適合，您也會理解他們的思維方式，這將幫助您達成一致。
     
   • 標記不會讓你專注於細節，你必須考慮一般的事情。 草圖可以解釋。
     
   • 白板易於清潔和修正。
     
   • 空間很大，您可以輕鬆地思考整個系統流程。
     
   • 您可以使用磁鐵附加草圖、打印輸出和參考資料。

3. 原型。 製作一個可點擊的原型來評估您的設計。 嘗試獲取有關某些元素的反饋。 這在您使用模板時特別有效 - 您的草圖大小相同。 顯然，如果您使用模板，繪製相同尺寸的草圖會容易得多。 我將通過為您提供一些可以下載和使用的模板來嘗試使其變得更加容易：移動、瀏覽器多窗口、瀏覽器滾動、角色。

4. 使用您的打印機和掃描儀。 用手畫出框架（你可以用尺子畫得更準確），然後用掃描儀或移動應用程序掃描它，然後打印出來。 您可以在打印前在圖像編輯器中編輯您的模板。 您可以刪除不必要的細節或複制一些元素。 您還可以打印現成的網站頁面、照片和其他描述性元素。 您可以將剪紙粘貼到草圖中。

5. 使用 Evernote 進行掃描。 Evernote 是一個很棒的設計工具。 您可以在其中保存和共享您的草圖，您可以創建主題，並使用標籤來組織您的草圖。 “掃描儀”模式的能力尤其令人印象深刻。 你把你的草圖放在它前面，它會“掃描”它，這樣你就得到了草圖的副本。 然後你可以邀請你的同事加入 Evernote 並給他們你的筆記鏈接。 由於有適用於平板電腦和手機的移動應用程序，您可以隨時將草圖放在手邊。

6. 混合素描。 要將一些生活和現實主義融入您的草圖中，您可以將它們與照片結合起來。 這意味著你必須拍一張照片，然後在上面畫一些帶有界面元素的故事。 這也可以幫助您注意一些交互問題和細節。

7. 追踪現實世界。 如果您需要創建故事板，說明特定上下文中的體驗（例如，在公交車站使用智能手機的人），您需要包括對人物、地點和各種現實生活對象的描述。 這些可能很難繪製，特別是如果您沒有掌握繪圖技巧，但這裡有一個簡單的提示：拍攝對像或情況的照片，然後使用圖像編輯器獲取關鍵對象輪廓。 之後，您可以在草圖中使用生成的輪廓。 當然，如果你有平板電腦和手寫筆，那就更容易了。

Wireflow：概述系統流程和分支

線流本質上是系統流程的序列，一個接一個的屏幕，帶有分支和決策點。 我們應該考慮用戶如何處理他們的任務，他們從一個屏幕移動到另一個屏幕的方式，以及他們隨著時間的推移對產品的整體體驗。

Wireflow，或者您正在繪製的內容及其連接方式，可以根據以下方法進行組織：

• 順序。 一個序列是一個筆直的旅程，一個接一個的屏幕。 它也可以是一個帶有決策點的故事； 你不僅展示了旅程，還展示了用戶可以選擇的決策點和不同的路徑。 您可以顯示屏幕交互的結構。
• 狀態變化。 描述某些元素的不同屏幕狀態以及導致這些狀態之間轉換的條件或動作。
• 屏幕與屏幕元素。 您可以繪製整個屏幕或考慮微交互和交互。
• 平台。 您可以考慮一種平台體驗或多個平台。
• 範圍。 你會描繪用戶旅程的一部分還是整個旅程？ 一個用戶與系統的交互，還是多個用戶的交互？

我一般會嘗試定義以下線流類型，具體取決於組織和實際用途：

1. 映射整體流程和高級流程。 立即畫出屏幕變化的草圖，並畫出產品使用的大致歷程。 在這裡，您可以包含一些上下文，並且可以選擇顯示一些用戶交互。 例如，電子商務購物服務是一個相當長的旅程，可能包括很多步驟：用戶如何找到商店、他們訂購產品所經歷的步驟、他們如何付款等等。

2. 畫面流。 這側重於通過系統的特定功能流程。 它可以是一個小的直接屏幕序列，也可以是一個帶有分支的旅程。 例如，用戶上傳一些照片或視頻。

3. 導航方案。 繪製您的屏幕及其包含的選項。 這不應該映射旅程。 此步驟包括顯示用戶可以選擇的選項、用戶擁有的方向以及各種應用程序部分的信息。 我通常在項目開始時創建一個導航方案。 它有助於了解導航的結構（應該包括哪些點，需要多少級別）。

4. 屏幕狀態。 繪製屏幕或元素狀態（一個示例可能是文件上傳對話框）。 在這種情況下，例如，屏幕將具有以下狀態：

   • 空白的
   • 用戶在活動區域中拉取文件
   • 文件正在上傳
   • 文件已上傳
   • 有錯誤

繪製 UX 流程：快速操作指南

線流設計過程類似於線框一。 許多步驟相似或相同，但有一些重要區別：

定義你需要畫的東西。 準確地決定你想要畫什麼（例如，你的設計的一般歷史或片段）。 您想產生不同的選擇還是想仔細考慮一次旅程的細節？ 決定你是否要向其他人展示你的草圖。

定義應在繪圖中包含哪些關鍵幀和過渡。 如果您添加所有屏幕和班次，您的線流將非常長且複雜。 考慮你應該展示哪些關鍵屏幕來傳達有助於完成任務的交互本質。 屏幕切換也是如此。 您需要選擇哪些轉變對錶達您的想法更有用。 查看此示例以供參考。

定義起點。 你旅程的起點是什麼？ 您可以從入口點開始，即旅程的開始，例如，用戶登錄您的應用程序時看到的內容。 或者，您可以從中點開始，或者從最有趣/最困難/最重要的屏幕或流程步驟開始。 或者，您可以從用戶獲得的最終結果開始，並描述用戶為達到這一點所採取的步驟。

決定接下來會發生什麼。 繪製開始步驟後，通過回答以下問題來決定下一步做什麼：

• 這一步引導用戶走向何方？
• 你想讓他們走哪條路？
• 他們必須做什麼才能到達那裡？

繪製替代路線、條目。 考慮用戶可以到達每個步驟的替代方法：

• 如果用戶的 Internet 連接失敗會怎樣？
• 他們還有哪些其他選擇？
• 如果用戶或應用程序出錯，會出現什麼問題，會發生什麼？
• 如果用戶在這一步關閉應用會發生什麼？
• 用戶下次啟動應用程序時會從哪裡開始？

考慮替代流程。 分析歷史，設計替代流程，然後畫出草圖。

添加註釋、註釋、詳細信息。 添加解釋性元素，以澄清非顯而易見的細節。

保存。 製作草圖的數字副本。

分享。 分享草圖（例如，通過 Evernote 或 InVision）。

基本的 UX 流草圖技巧和竅門

首先繪製一個線流。 如果你要考慮一段很長的旅程，你最好做一個速寫，以了解你需要多少空間，以免錯過一些重要的步驟或細節。 之後很難將它們添加到紙質草圖中。

不要創建包含太多細節的巨大地圖。 紙質草圖沒有撤消按鈕，因此很難進行更改。 您可能會過於精確地繪製細節，這會分散您對生成不同高級變體的想像力。 與其創建一個可以說明整個系統的龐大方案，不如嘗試專注於關鍵腳本並嘗試為每個腳本專用一個單獨的頁面。

削減不必要的細節，並結合各種詳細程度。 沒有必要畫出所有的交互描述，所以盡量只使用你旅程的關鍵元素。 在繪製巨大的交互圖時，您無需詳細處理每個屏幕。 有些屏幕可以只用幾個方塊來表示，而其他的關鍵屏幕則可以詳細設計。

嘗試不同的紙張尺寸。 嘗試不同的紙張格式，A3 或 A5。 紙張尺寸會限制您，並會以不同方式影響您的流程。 一張小紙不會讓你添加許多屏幕或細節，但它可以幫助你專注於主要想法。 使用一張大紙，您可以繪製一段巨大的旅程、許多細節和附加註釋。 或者，您可以在其上放置一些小旅行。

便利貼也可以提供幫助。 您也可以嘗試使用便利貼。 您可以在它們上繪製單獨的屏幕或一些腳註，或者您可以繪製草圖元素的其他狀態。 它們的優點是可以輕鬆更換，您也可以簡單地將筆記移動到其他地方。 例如，如果流程發生了變化，您只需更改便利貼的順序即可。

使用模板。 嘗試使用模板。 它們將節省時間，並使您能夠創建更多可點擊的高質量原型。

嘗試使用白板。 白板有很多優點。 它變得越來越流行，因為它可以讓你用很多分支繪製一個巨大的旅程。 您可以在紙上繪製大量應用程序組件，然後使用磁鐵將它們附在白板上，將它們添加到旅程中。

繪製陰影。 陰影可以幫助您標記重要元素，並為您的草圖增加視覺吸引力。 我使用三種不同類型的陰影：

• 沿著光線方向的線條 - 這並不總是看起來很漂亮，但您可以使用刻度並將對象拾取到不同的“高度”。
• 用較深的顏色勾勒出某些部分（僅底部或底部和右側）
• 使用 Pro-marker（或您用於繪圖的應用程序中的等價物）

繪圖組件。 像“我畫得不好”這樣的反對意見可能會扼殺你的主動性。 它實際上比聽起來容易。 即使是最複雜的草圖通常也由許多基本塊組成，就像在這個例子中一樣。 如果您可以繪製點、線、三角形、正方形和圓形，那麼您就擁有了繪製草圖所需的基本構建塊。

把它們放在一起。 基本元素、按鈕、單選按鈕和下拉菜單由基本元素組成。 學會繪製這些元素後，可以將它們組合起來，繪製複雜的塊和組件。

包起來

這篇文章的目的不是為 UX 草圖或一般草圖創建終極的、萬能的指南，因為設計師有不同的需求和個人喜好。

如您所見，這需要涵蓋很多內容。 設計師使用無數的工具、技術和方法來製作 UX 草圖，而且這是相當主觀的。 某些技術可能適用於從事不同項目的不同人員，也可能不適用。 如果你剛剛開始，你絕對應該嘗試一下。 不斷的練習和實驗將幫助您找到適合您的方法。

您可以選擇最適合您的項目和設計方法的技巧和技術。 你對其他 UX 用戶有什麼額外的草圖技巧嗎？ 隨時在評論部分分享它們。

• • •

進一步閱讀 Toptal 設計博客：

• 電子商務用戶體驗——最佳實踐概述（附信息圖）
• 以人為本的設計在產品設計中的重要性
• 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例
• 移動界面的啟發式原則
• 預期設計：如何創造神奇的用戶體驗