《使用者體驗草圖設計工具手冊》丨NOTES

當前瀏覽器不支援播放音樂或語音，請在微信或其他瀏覽器中播放 Happy Pharrell Williams – Happy [From 「Despicable Me 2」]

本書講了什麼

本書將指導你如何一步一步地用草圖來表達你的設計理念，並介紹了多種草圖方法。適合於所有設計行業的從業人員參考閱讀，設計組織的領導者也可以參考閱讀，包括設計師、可用性專家、人機互動界人士、產品經理人及商業高管等。

作者什麼來頭

Bill Buxton ，微軟首席使用者體驗設計專家。

第 1 章  進入角色

1.1 介紹 設計使用者體驗草圖

通過草圖，設計師能夠遵循從想法的產生、完善直至選定的過程。也能通過使用草圖來進行討論、交流與評估他人的想法。使用者體驗設計師要專注於建立長時間使用的使用者體驗，所以設計草圖需要包含動作、互動行為，以及隨著時間發展而改變的體驗。

1.2 為什麼要設計草圖

• 草圖是幫助設計師表達、發展及溝通設計想法的工具。

• 設計流程是爲了正確的設計，然後將設計做正確。

• 想法發散與收斂的關係：產生併發散設計，選擇並收斂設計。

1.3 繪畫本

用來記錄、演進、展示、收藏想法的基本材料。繪畫本鼓勵使用者收集和發展大量想法並進行選擇，固定在單一思維上並非有用。在許多想法中提煉的過程是爲了使我們正確的設計，而發展某一個想法的過程則是爲了讓設計做得正確。 /* 挑選本子和畫筆內容略過 */

1.4 10 加 10 ：收斂設計漏斗

拓展 10 種不同的想法，並對選出的想法進行改良。設計漏斗描述了作為一名互動設計師在思考問題時的習慣性運用的流程。 10 加 10 方法內容如下：

• 闡明你的設計挑戰。

• 針對這個挑戰，對此係統拓展出 10 個以上不同的設計概念。

• 減少設計概念的數量。

• 選擇最優希望的設計概念，作為起始點。

• 對某設計概念創造出 10 個細節或衍生變化。

• 將你最好的想法向一組人陳述。

• 當你的想法改變的時候，將它們畫出來。

第 2 章  對現實世界進行取材

儘管大部分人認為草圖是一種建立新想法的方法，然而草圖的很大一部分其實是關於快速收集現有想法。從我們周圍世界中進行取材是有巨大價值的。當你從他人處獲得想法時，你可以使用那些想法作為起始點，來激發你產生不同的方向，進行頭腦風暴，將現有想法發展爲新想法，或對大量想法進行融合。你不必一個人做這件事情，有一些方法來記錄這些獲取的想法，使你可以與同事們進行分享和討論。

2.1 塗鴉式草圖

快速畫出想法――任何地點，任何時候――抓取想法的精髓。塗鴉草圖是非常快速的繪畫，不去關注細節，具有非常低的保真度，關注關鍵思路來鼓勵交流。

從現有系統中抓取想法，重點關注整體佈局及各專案是什麼。你所建立的塗鴉草圖完全取決於你想要突出的重點是什麼。要考慮：

• 包含哪些細節？包含的細節要突出抓取的主要概念。

• 哪些進行抽象表現？次要的部分可以某種方式弱化。

• 什麼可以忽略？不重要的細節完全可以忽略。

塗鴉式草圖：

• 是非常快速的畫出來的；

• 一種在匆忙時快速抓取想法的方法；

• 需要犧牲細節和保真來換取速度；

• 通過練習，不用看也可以畫出來。

2.2 用相機取材

抓取啓發性的瞬間。 開始取材的最簡單方法是拍下你所討厭的環境和物體， 指出不恰當的設計，並解釋為什麼。發現差的設計意味著讓自己對厭惡的設計物體變得敏感，並嘗試理解為什麼這個設計讓你不快。 對激發興趣的設計進行取材 ，你也需要對優秀的設計敏感。要養成照片取材的習慣，最好做一個部落格來存放自己所發現的設計。對啓發你的事情進行取材，許多有用的想法和跨領域創意可能來自日常生活中激發你興趣的事物。

相機取材：

• 可以提供豐富的想法來源；

• 想法會留下設計需要避免的線索；

• 想法會帶來設計啓發的來源；

• 養成習慣，照片取材是觀察世界的最佳實踐。

2.3 收集圖片和簡報

成為半組織性的搜尋者 / 收集者。收集圖片和簡報是你可以利用周邊世界來獲取想法和設計過程的另一種方法。簡言之，就是收集他人建立的介面、視覺或數字傳達內容、收集你所喜歡的與不喜歡的，收集他人的反應。無論好的壞的都是有用的。

收集圖片和簡報：

• 搜尋和收集是一項持續性活動；

• 在任何場景所遇到的圖片都可能有幫助；

• 培養自己收集和組織的習慣。

2.4 玩具箱和物理收集

收集實體物品。收集的物品分為兩部分：被拆分的和重建的。將一件物品拆成不同的部件可以教會你它的設計過程，手把手教你完成構建的思考過程。拆分物品還能讓你用新的方法來進行組裝。 /* 收集過程與方法略 * 、

玩具箱和物理收集：

• 收藏是設計流程的基礎；

• 收藏實物可以出發想法和討論；

• 實物可以被拆開併成為新物品的一部分；

• 隨著藏品增加，積極展覽可以拓展它的作用。

2.5 分享發現的物品

分享是豐富想法的極好來源，不要因為不想分享而不畫草圖。爲了分享而重畫具有很多好處。

第 3 章  單一影象

典型的草圖將能及時捕捉一個單一瞬間，通常是你設想的使用者體驗中的單一場景。然而我們不會教你如何成為藝術家，我們會向你展示可以用來創造草圖的不同方法。

3.1 草圖前的熱身

通過聽一段故事，用一隻筆不離紙的劃線來表達故事，然後讓大家來評論。你會發現：

一根簡單的線條也能千變萬化；

• 繪圖者的意圖未必會和觀看者的理解相匹配；

• 評論是發現的過程；

• 評論需要認真的觀察。

3.2 畫出你所見

繪畫精確性的練習。首先根據你的想象來畫出一個人。然後找一張人物畫進行臨摹。最後畫出你實際看到的，將之前臨摹的圖片旋轉一百八十度，不要看成人物，而是一堆抽象線條。現在把三張畫放在一起對比，你會發現旋轉一百八十度之後的臨摹畫在精確度和細節上有很大進步。你現在掌握了：

• 繪畫的一大部分是基於精確的觀察；

• 假設實物看上去什麼樣子會讓繪畫變得困難；

• 觀察和繪畫是你可以練習的技能。

3.3 草圖詞彙表

畫物體、人和他們的行動。草圖詞彙表中的元素有：

• 基本草圖元素，線條、矩形、三角形、圓形等。

• 組合物體，通過將基本草圖元素組合而成的物體。

• 人，火柴人或漫畫式的草圖，或抽象形狀都可以代表人物。

• 活動，通過區別人的姿勢，可以表達出人的不同活動。

• 身體與情感，不同姿勢可以表達情感，可以在頭上加符號說明。

• 臉和表情，通過眉毛與嘴的組合就能表達表情。

• 組合姿勢和臉，在人臉上加以匹配的姿勢。

• 組合不同草圖元素來表達狀態，將人的姿勢與簡單物件組合，來組成描述具體情況的簡單草圖。

3.4 普通草圖

草圖的基本元素：繪畫、註釋、箭頭和備註。草圖不僅是繪畫，還包含有空間關聯性的文字註釋，或獨立的文字備註。箭頭是一種特殊的註釋方式，它能起到很大的說明作用。

3.4 合作式草圖

用草圖來進行頭腦風暴，表達想法，促進互動。必須考慮參與者如何觸碰到繪畫區域並在上面新增標記（最好同時進行），並且可以對草圖進行指點。

3.6 繪圖軟體

用常見的數碼呈現工具來畫草圖。

3.7 用辦公用品進行草圖繪製

使用常見辦公用品來建立可編輯草圖。

3.8 模板

預先畫好草圖中固定、不變的部分，作為使用及重用的模板。模板可以是照片、描圖、數碼或紙張形式。

3.9 照片描圖

建立草圖輪廓集，以建立草圖構成基礎。有些實物很難畫，通過照片描圖，可以快速建立並使草圖變好看的不同元件。首先拍好一張照片，對照片進行描圖，儲存描圖作為草圖元素，然後複製並在你的草圖中使用。

3.10 混合草圖

合併草圖與照片。它可以讓你在草圖上新增位置的環境資訊。通過這種方式還可以強調註釋可能被人忽視的互動行為。還可以用來突出新設計會如何區別於當前的設計。

3.11 用塑料泡沫設計草圖

在物理介質上設計草圖。紙筆故事板和草圖可以和模型配合來模擬與該裝置的互動過程。

第 4 章  及時抓拍：視覺化敘述

想象一個人與系統一段時間內的互動行為是互動設計的特別之處。故事板用一系列獨立的影象來捕捉這些時間元素，這些影象一屏接一屏地描述發生了什麼。

4.1 順序故事板

視覺化說明一段時間內的互動順序。順序故事板用來講述一段時間內所展現的使用者體驗順序的視覺化故事。故事板的難點在於決定哪些草圖作為關鍵幀，觀看者是否可以腦補這些幀之間的轉變空間。對故事板進行註釋可以起到幫助作用，特別是用來解釋轉變中使用者的互動行為。關鍵決策：要在場景中畫出使用者嗎？應該使用哪些幀來表現順序？應該展現哪些關鍵轉變？

4.2 狀態轉變圖

一種視覺化描述一段時間內狀態、轉變及決策路徑的方法，與順序故事板類似。

4.3 分支故事板

視覺化說明一段時間內的互動決策。

4.4 敘述性故事板

講述一段時間內關於使用情境的故事。故事板草圖可以是手繪的也可以是照片組成的。手繪故事板的步驟：

• 畫出故事板沒幀的輪廓；

• 設計故事線；

• 畫出定場鏡頭（介紹）；

• 通過合適的照片繼續故事線草圖的繪製；

• 突出動作和行動；

• 向他人迭代說明。

第 5 章  讓使用者體驗活靈活現

如果故事板中的每幅草圖間都已經有了良好的起承轉合，那麼你就可以將這個故事板升級成為一個可互動的視訊。這些視訊可以通過回放這些故事，展示故事的分支劇情來進行視覺化的敘述。將互動流程製作成一個影象配準的動畫。將故事草圖中的每一幀放到 PPT 的每一頁就行了，還可以通過超鏈接來展示分支故事。

第 6 章  邀請他人蔘與草圖設計

動畫原型可以通過回放故事或是呈現故事不同的分支劇情對互動流程提供視覺化的敘述。其另外一種用途是引領目標使用者進入這種視覺化敘述，讓使用者進行真實的行為操作並獲得自己真實的感受，產生真正的使用者體驗。然後你可以探尋使用者對於這個動畫原型的真實感受。或者你還可以向他人展示你的工作，然後請他們為你提出建議。

6.1 探尋原始的心智模型

系統中視覺元素會向用戶傳達很多資訊，然後使用者會以此為依據去解釋整個系統的工作原理，最終形成關於此係統的心智模型。你可以讓使用者看著系統原型草圖並解釋這些元素，來簡單快速的發現他們的心智模型，通過對比使用者與系統實際存在的心智模型間的差異及不匹配，你可以迅速找出系統的可用性問題，為你的設計迭代提供線索。

6.2 綠野仙蹤

草圖在人的操縱下對人們的操作進行反饋。你自己扮演系統後臺，接受並分析使用者的操作行為，然後人為的做出相對應的反饋。

6.3 發聲思考

讓使用者一邊使用介面草圖，一邊描述自己的想法和動機。通過聆聽使用者的想法及操作計劃，你能瞭解到他們的意圖以及解決問題的策略，然後你可以根據這些進一步檢驗產品是否滿足了使用者期望。

6.4 草圖板

將草圖張貼到布告欄與同事進行分享，一旦畫出專案原型就應晒出來，向別人講述草圖的過程可以幫你理清思路，回答他人的質疑會讓你得到新視角。

6.5 審查

把你的草圖創意呈現出來，請大家提建議。