本書講了什么

本書將指導(dǎo)你如何一步一步地用草圖來表達(dá)你的設(shè)計(jì)理念首尼，并介紹了多種草圖方法易稠。適合于所有設(shè)計(jì)行業(yè)的從業(yè)人員參考閱讀脐帝，設(shè)計(jì)組織的領(lǐng)導(dǎo)者也可以參考閱讀，包括設(shè)計(jì)師仆百、可用性專家厕隧、人機(jī)交互界人士、產(chǎn)品經(jīng)理人及商業(yè)高管等俄周。

作者什么來頭

Bill Buxton吁讨，微軟首席用戶體驗(yàn)設(shè)計(jì)專家。

第1章 進(jìn)入角色

1.1 介紹 設(shè)計(jì)用戶體驗(yàn)草圖

通過草圖峦朗，設(shè)計(jì)師能夠遵循從想法的產(chǎn)生挡爵、完善直至選定的過程。也能通過使用草圖來進(jìn)行討論甚垦、交流與評估他人的想法茶鹃。用戶體驗(yàn)設(shè)計(jì)師要專注于創(chuàng)建長時(shí)間使用的用戶體驗(yàn)，所以設(shè)計(jì)草圖需要包含動(dòng)作艰亮、交互行為闭翩，以及隨著時(shí)間發(fā)展而改變的體驗(yàn)。

1.2 為什么要設(shè)計(jì)草圖

草圖是幫助設(shè)計(jì)師表達(dá)迄埃、發(fā)展及溝通設(shè)計(jì)想法的工具遭垛。

設(shè)計(jì)流程是為了正確的設(shè)計(jì)垦江，然后將設(shè)計(jì)做正確鲤竹。

想法發(fā)散與收斂的關(guān)系：產(chǎn)生并發(fā)散設(shè)計(jì)，選擇并收斂設(shè)計(jì)流译。

1.3 繪畫本

用來記錄、演進(jìn)者疤、展示福澡、收藏想法的基本材料。繪畫本鼓勵(lì)使用者收集和發(fā)展大量想法并進(jìn)行選擇驹马，固定在單一思維上并非有用革砸。在許多想法中提煉的過程是為了使我們正確的設(shè)計(jì)，而發(fā)展某一個(gè)想法的過程則是為了讓設(shè)計(jì)做得正確糯累。/*挑選本子和畫筆內(nèi)容略過*/

1.4 10 加10：收斂設(shè)計(jì)漏斗

拓展10 種不同的想法算利，并對選出的想法進(jìn)行改良。設(shè)計(jì)漏斗描述了作為一名交互設(shè)計(jì)師在思考問題時(shí)的習(xí)慣性運(yùn)用的流程泳姐。10加10方法內(nèi)容如下：

闡明你的設(shè)計(jì)挑戰(zhàn)效拭。

針對這個(gè)挑戰(zhàn)，對此系統(tǒng)拓展出10個(gè)以上不同的設(shè)計(jì)概念胖秒。

減少設(shè)計(jì)概念的數(shù)量缎患。

選擇最優(yōu)希望的設(shè)計(jì)概念，作為起始點(diǎn)扒怖。

對某設(shè)計(jì)概念創(chuàng)造出10個(gè)細(xì)節(jié)或衍生變化较锡。

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

當(dāng)你的想法改變的時(shí)候盗痒，將它們畫出來。

第2章 對現(xiàn)實(shí)世界進(jìn)行取材

盡管大部分人認(rèn)為草圖是一種創(chuàng)建新想法的方法低散，然而草圖的很大一部分其實(shí)是關(guān)于快速收集現(xiàn)有想法俯邓。從我們周圍世界中進(jìn)行取材是有巨大價(jià)值的。當(dāng)你從他人處獲得想法時(shí)熔号，你可以使用那些想法作為起始點(diǎn)稽鞭，來激發(fā)你產(chǎn)生不同的方向，進(jìn)行頭腦風(fēng)暴引镊，將現(xiàn)有想法發(fā)展為新想法朦蕴，或?qū)Υ罅肯敕ㄟM(jìn)行融合。你不必一個(gè)人做這件事情弟头，有一些方法來記錄這些獲取的想法吩抓，使你可以與同事們進(jìn)行分享和討論。

2.1 涂鴉式草圖

快速畫出想法――任何地點(diǎn)赴恨，任何時(shí)候――抓取想法的精髓疹娶。涂鴉草圖是非常快速的繪畫伦连，不去關(guān)注細(xì)節(jié)雨饺，具有非常低的保真度钳垮，關(guān)注關(guān)鍵思路來鼓勵(lì)交流。

從現(xiàn)有系統(tǒng)中抓取想法额港，重點(diǎn)關(guān)注整體布局及各項(xiàng)目是什么饺窿。你所創(chuàng)建的涂鴉草圖完全取決于你想要突出的重點(diǎn)是什么。要考慮：

包含哪些細(xì)節(jié)锹安？包含的細(xì)節(jié)要突出抓取的主要概念短荐。

哪些進(jìn)行抽象表現(xiàn)？次要的部分可以某種方式弱化叹哭。

什么可以忽略忍宋？不重要的細(xì)節(jié)完全可以忽略。

涂鴉式草圖：

是非撤缯郑快速的畫出來的糠排；

一種在匆忙時(shí)快速抓取想法的方法；

需要犧牲細(xì)節(jié)和保真來換取速度超升；

通過練習(xí)入宦，不用看也可以畫出來。

2.2 用相機(jī)取材

抓取啟發(fā)性的瞬間室琢。開始取材的最簡單方法是拍下你所討厭的環(huán)境和物體乾闰，指出不恰當(dāng)?shù)脑O(shè)計(jì)，并解釋為什么盈滴。發(fā)現(xiàn)差的設(shè)計(jì)意味著讓自己對厭惡的設(shè)計(jì)物體變得敏感涯肩，并嘗試?yán)斫鉃槭裁催@個(gè)設(shè)計(jì)讓你不快。對激發(fā)興趣的設(shè)計(jì)進(jìn)行取材巢钓，你也需要對優(yōu)秀的設(shè)計(jì)敏感病苗。要養(yǎng)成照片取材的習(xí)慣，最好做一個(gè)博客來存放自己所發(fā)現(xiàn)的設(shè)計(jì)症汹。對啟發(fā)你的事情進(jìn)行取材硫朦，許多有用的想法和跨領(lǐng)域創(chuàng)意可能來自日常生活中激發(fā)你興趣的事物。

相機(jī)取材：

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

想法會(huì)留下設(shè)計(jì)需要避免的線索咬展；

想法會(huì)帶來設(shè)計(jì)啟發(fā)的來源；

養(yǎng)成習(xí)慣瞒斩，照片取材是觀察世界的最佳實(shí)踐破婆。

2.3 收集圖片和簡報(bào)

成為半組織性的搜尋者/收集者。收集圖片和簡報(bào)是你可以利用周邊世界來獲取想法和設(shè)計(jì)過程的另一種方法济瓢。簡言之荠割，就是收集他人創(chuàng)建的界面、視覺或數(shù)字傳達(dá)內(nèi)容、收集你所喜歡的與不喜歡的蔑鹦，收集他人的反應(yīng)夺克。無論好的壞的都是有用的。

收集圖片和簡報(bào)：

搜尋和收集是一項(xiàng)持續(xù)性活動(dòng)嚎朽；

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

培養(yǎng)自己收集和組織的習(xí)慣。

2.4 玩具箱和物理收集

收集實(shí)體物品哟忍。收集的物品分為兩部分：被拆分的和重建的狡门。將一件物品拆成不同的部件可以教會(huì)你它的設(shè)計(jì)過程，手把手教你完成構(gòu)建的思考過程锅很。拆分物品還能讓你用新的方法來進(jìn)行組裝其馏。/*收集過程與方法略*、

玩具箱和物理收集：

收藏是設(shè)計(jì)流程的基礎(chǔ)爆安；

收藏實(shí)物可以出發(fā)想法和討論叛复；

實(shí)物可以被拆開并成為新物品的一部分；

隨著藏品增加扔仓，積極展覽可以拓展它的作用褐奥。

2.5 分享發(fā)現(xiàn)的物品

分享是豐富想法的極好來源，不要因?yàn)椴幌敕窒矶划嫴輬D翘簇。為了分享而重畫具有很多好處撬码。

第3章 單一圖像

典型的草圖將能及時(shí)捕捉一個(gè)單一瞬間，通常是你設(shè)想的用戶體驗(yàn)中的單一場景版保。然而我們不會(huì)教你如何成為藝術(shù)家呜笑，我們會(huì)向你展示可以用來創(chuàng)造草圖的不同方法。

3.1 草圖前的熱身

通過聽一段故事找筝，用一只筆不離紙的劃線來表達(dá)故事蹈垢，然后讓大家來評論慷吊。你會(huì)發(fā)現(xiàn)：

一根簡單的線條也能千變?nèi)f化袖裕；

繪圖者的意圖未必會(huì)和觀看者的理解相匹配；

評論是發(fā)現(xiàn)的過程溉瓶；

評論需要認(rèn)真的觀察急鳄。

3.2 畫出你所見

繪畫精確性的練習(xí)。首先根據(jù)你的想象來畫出一個(gè)人堰酿。然后找一張人物畫進(jìn)行臨摹疾宏。最后畫出你實(shí)際看到的，將之前臨摹的圖片旋轉(zhuǎn)一百八十度触创，不要看成人物坎藐，而是一堆抽象線條。現(xiàn)在把三張畫放在一起對比，你會(huì)發(fā)現(xiàn)旋轉(zhuǎn)一百八十度之后的臨摹畫在精確度和細(xì)節(jié)上有很大進(jìn)步岩馍。你現(xiàn)在掌握了：

繪畫的一大部分是基于精確的觀察碉咆；

假設(shè)實(shí)物看上去什么樣子會(huì)讓繪畫變得困難；

觀察和繪畫是你可以練習(xí)的技能蛀恩。

3.3 草圖詞匯表

畫物體疫铜、人和他們的行動(dòng)。草圖詞匯表中的元素有：

基本草圖元素双谆，線條壳咕、矩形、三角形顽馋、圓形等谓厘。

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

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

活動(dòng)住练，通過區(qū)別人的姿勢，可以表達(dá)出人的不同活動(dòng)愁拭。

身體與情感讲逛，不同姿勢可以表達(dá)情感，可以在頭上加符號說明岭埠。

臉和表情盏混，通過眉毛與嘴的組合就能表達(dá)表情。

組合姿勢和臉惜论，在人臉上加以匹配的姿勢许赃。

組合不同草圖元素來表達(dá)狀態(tài)，將人的姿勢與簡單物件組合馆类，來組成描述具體情況的簡單草圖混聊。

3.4 普通草圖

草圖的基本元素：繪畫、注釋乾巧、箭頭和備注句喜。草圖不僅是繪畫，還包含有空間關(guān)聯(lián)性的文字注釋沟于，或獨(dú)立的文字備注咳胃。箭頭是一種特殊的注釋方式，它能起到很大的說明作用旷太。

3.4合作式草圖

用草圖來進(jìn)行頭腦風(fēng)暴展懈，表達(dá)想法，促進(jìn)交互。必須考慮參與者如何觸碰到繪畫區(qū)域并在上面添加標(biāo)記（最好同時(shí)進(jìn)行）存崖，并且可以對草圖進(jìn)行指點(diǎn)榄攀。

3.6 繪圖軟件

用常見的數(shù)碼呈現(xiàn)工具來畫草圖。

3.7 用辦公用品進(jìn)行草圖繪制

使用常見辦公用品來創(chuàng)建可編輯草圖金句。

3.8 模板

預(yù)先畫好草圖中固定檩赢、不變的部分，作為使用及重用的模板违寞。模板可以是照片贞瞒、描圖、數(shù)碼或紙張形式趁曼。

3.9 照片描圖

創(chuàng)建草圖輪廓集军浆，以建立草圖構(gòu)成基礎(chǔ)。有些實(shí)物很難畫挡闰，通過照片描圖乒融，可以快速創(chuàng)建并使草圖變好看的不同組件。首先拍好一張照片摄悯，對照片進(jìn)行描圖赞季，保存描圖作為草圖元素，然后復(fù)制并在你的草圖中使用奢驯。

3.10 混合草圖

合并草圖與照片申钩。它可以讓你在草圖上添加位置的環(huán)境信息。通過這種方式還可以強(qiáng)調(diào)注釋可能被人忽視的交互行為瘪阁。還可以用來突出新設(shè)計(jì)會(huì)如何區(qū)別于當(dāng)前的設(shè)計(jì)撒遣。

3.11 用塑料泡沫設(shè)計(jì)草圖

在物理介質(zhì)上設(shè)計(jì)草圖。紙筆故事板和草圖可以和模型配合來模擬與該設(shè)備的交互過程管跺。

第4章 及時(shí)抓拍：視覺化敘述

想象一個(gè)人與系統(tǒng)一段時(shí)間內(nèi)的交互行為是交互設(shè)計(jì)的特別之處义黎。故事板用一系列獨(dú)立的圖像來捕捉這些時(shí)間元素，這些圖像一屏接一屏地描述發(fā)生了什么豁跑。

4.1 順序故事板

視覺化說明一段時(shí)間內(nèi)的交互順序廉涕。順序故事板用來講述一段時(shí)間內(nèi)所展現(xiàn)的用戶體驗(yàn)順序的視覺化故事。故事板的難點(diǎn)在于決定哪些草圖作為關(guān)鍵幀贩绕，觀看者是否可以腦補(bǔ)這些幀之間的轉(zhuǎn)變空間火的。對故事板進(jìn)行注釋可以起到幫助作用壶愤，特別是用來解釋轉(zhuǎn)變中用戶的交互行為淑倾。關(guān)鍵決策：要在場景中畫出用戶嗎？應(yīng)該使用哪些幀來表現(xiàn)順序征椒？應(yīng)該展現(xiàn)哪些關(guān)鍵轉(zhuǎn)變娇哆？

4.2 狀態(tài)轉(zhuǎn)變圖

一種視覺化描述一段時(shí)間內(nèi)狀態(tài)、轉(zhuǎn)變及決策路徑的方法，與順序故事板類似碍讨。

4.3 分支故事板

視覺化說明一段時(shí)間內(nèi)的交互決策治力。

4.4 敘述性故事板

講述一段時(shí)間內(nèi)關(guān)于使用情境的故事。故事板草圖可以是手繪的也可以是照片組成的勃黍。手繪故事板的步驟：

畫出故事板沒幀的輪廓宵统；

設(shè)計(jì)故事線；

畫出定場鏡頭（介紹）覆获；

通過合適的照片繼續(xù)故事線草圖的繪制马澈；

突出動(dòng)作和行動(dòng)；

向他人迭代說明弄息。

第5章 讓用戶體驗(yàn)活靈活現(xiàn)

如果故事板中的每幅草圖間都已經(jīng)有了良好的起承轉(zhuǎn)合痊班，那么你就可以將這個(gè)故事板升級成為一個(gè)可互動(dòng)的視頻摹量。這些視頻可以通過回放這些故事涤伐，展示故事的分支劇情來進(jìn)行可視化的敘述。將交互流程制作成一個(gè)圖像配準(zhǔn)的動(dòng)畫缨称。將故事草圖中的每一幀放到PPT的每一頁就行了凝果，還可以通過超鏈接來展示分支故事。

第6章 邀請他人參與草圖設(shè)計(jì)

動(dòng)畫原型可以通過回放故事或是呈現(xiàn)故事不同的分支劇情對交互流程提供可視化的敘述睦尽。其另外一種用途是引領(lǐng)目標(biāo)用戶進(jìn)入這種可視化敘述豆村，讓用戶進(jìn)行真實(shí)的行為操作并獲得自己真實(shí)的感受，產(chǎn)生真正的用戶體驗(yàn)骂删。然后你可以探尋用戶對于這個(gè)動(dòng)畫原型的真實(shí)感受掌动。或者你還可以向他人展示你的工作宁玫，然后請他們?yōu)槟闾岢鼋ㄗh粗恢。

6.1 探尋原始的心智模型

系統(tǒng)中視覺元素會(huì)向用戶傳達(dá)很多信息，然后用戶會(huì)以此為依據(jù)去解釋整個(gè)系統(tǒng)的工作原理欧瘪，最終形成關(guān)于此系統(tǒng)的心智模型眷射。你可以讓用戶看著系統(tǒng)原型草圖并解釋這些元素，來簡單快速的發(fā)現(xiàn)他們的心智模型佛掖，通過對比用戶與系統(tǒng)實(shí)際存在的心智模型間的差異及不匹配妖碉，你可以迅速找出系統(tǒng)的可用性問題，為你的設(shè)計(jì)迭代提供線索芥被。

6.2 綠野仙蹤

草圖在人的操縱下對人們的操作進(jìn)行反饋欧宜。你自己扮演系統(tǒng)后臺，接受并分析用戶的操作行為拴魄，然后人為的做出相對應(yīng)的反饋冗茸。

6.3 發(fā)聲思考

讓用戶一邊使用界面草圖席镀，一邊描述自己的想法和動(dòng)機(jī)。通過聆聽用戶的想法及操作計(jì)劃夏漱，你能了解到他們的意圖以及解決問題的策略豪诲，然后你可以根據(jù)這些進(jìn)一步檢驗(yàn)產(chǎn)品是否滿足了用戶期望。

6.4 草圖板

將草圖張貼到布告欄與同事進(jìn)行分享挂绰，一旦畫出項(xiàng)目原型就應(yīng)曬出來屎篱，向別人講述草圖的過程可以幫你理清思路，回答他人的質(zhì)疑會(huì)讓你得到新視角葵蒂。

6.5 審查

把你的草圖創(chuàng)意呈現(xiàn)出來芳室，請大家提建議。