
本書(shū)講了什么
本書(shū)將指導(dǎo)你如何一步一步地用草圖來(lái)表達(dá)你的設(shè)計(jì)理念,并介紹了多種草圖方法。適合于所有設(shè)計(jì)行業(yè)的從業(yè)人員參考閱讀,設(shè)計(jì)組織的領(lǐng)導(dǎo)者也可以參考閱讀,包括設(shè)計(jì)師、可用性專(zhuān)家、人機(jī)交互界人士、產(chǎn)品經(jīng)理人及商業(yè)高管等。
作者什么來(lái)頭
Bill Buxton,微軟首席用戶體驗(yàn)設(shè)計(jì)專(zhuān)家。
第1章 進(jìn)入角色
1.1 介紹 設(shè)計(jì)用戶體驗(yàn)草圖
通過(guò)草圖,設(shè)計(jì)師能夠遵循從想法的產(chǎn)生、完善直至選定的過(guò)程。也能通過(guò)使用草圖來(lái)進(jìn)行討論、交流與評(píng)估他人的想法。用戶體驗(yàn)設(shè)計(jì)師要專(zhuān)注于創(chuàng)建長(zhǎ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 繪畫(huà)本
用來(lái)記錄、演進(jìn)、展示、收藏想法的基本材料。繪畫(huà)本鼓勵(lì)使用者收集和發(fā)展大量想法并進(jìn)行選擇,固定在單一思維上并非有用。在許多想法中提煉的過(guò)程是為了使我們正確的設(shè)計(jì),而發(fā)展某一個(gè)想法的過(guò)程則是為了讓設(shè)計(jì)做得正確。/*挑選本子和畫(huà)筆內(nèi)容略過(guò)*/
1.4 10 加10:收斂設(shè)計(jì)漏斗
拓展10 種不同的想法,并對(duì)選出的想法進(jìn)行改良。設(shè)計(jì)漏斗描述了作為一名交互設(shè)計(jì)師在思考問(wèn)題時(shí)的習(xí)慣性運(yùn)用的流程。10加10方法內(nèi)容如下:
闡明你的設(shè)計(jì)挑戰(zhàn)。
針對(duì)這個(gè)挑戰(zhàn),對(duì)此系統(tǒng)拓展出10個(gè)以上不同的設(shè)計(jì)概念。
減少設(shè)計(jì)概念的數(shù)量。
選擇最優(yōu)希望的設(shè)計(jì)概念,作為起始點(diǎn)。
對(duì)某設(shè)計(jì)概念創(chuàng)造出10個(gè)細(xì)節(jié)或衍生變化。
將你最好的想法向一組人陳述。
當(dāng)你的想法改變的時(shí)候,將它們畫(huà)出來(lái)。
第2章 對(duì)現(xiàn)實(shí)世界進(jìn)行取材
盡管大部分人認(rèn)為草圖是一種創(chuàng)建新想法的方法,然而草圖的很大一部分其實(shí)是關(guān)于快速收集現(xiàn)有想法。從我們周?chē)澜缰羞M(jìn)行取材是有巨大價(jià)值的。當(dāng)你從他人處獲得想法時(shí),你可以使用那些想法作為起始點(diǎn),來(lái)激發(fā)你產(chǎn)生不同的方向,進(jìn)行頭腦風(fēng)暴,將現(xiàn)有想法發(fā)展為新想法,或?qū)Υ罅肯敕ㄟM(jìn)行融合。你不必一個(gè)人做這件事情,有一些方法來(lái)記錄這些獲取的想法,使你可以與同事們進(jìn)行分享和討論。
2.1 涂鴉式草圖
快速畫(huà)出想法――任何地點(diǎn),任何時(shí)候――抓取想法的精髓。涂鴉草圖是非??焖俚睦L畫(huà),不去關(guān)注細(xì)節(jié),具有非常低的保真度,關(guān)注關(guān)鍵思路來(lái)鼓勵(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é)完全可以忽略。
涂鴉式草圖:
是非常快速的畫(huà)出來(lái)的;
一種在匆忙時(shí)快速抓取想法的方法;
需要犧牲細(xì)節(jié)和保真來(lái)?yè)Q取速度;
通過(guò)練習(xí),不用看也可以畫(huà)出來(lái)。
2.2 用相機(jī)取材
抓取啟發(fā)性的瞬間。開(kāi)始取材的最簡(jiǎn)單方法是拍下你所討厭的環(huán)境和物體,指出不恰當(dāng)?shù)脑O(shè)計(jì),并解釋為什么。發(fā)現(xiàn)差的設(shè)計(jì)意味著讓自己對(duì)厭惡的設(shè)計(jì)物體變得敏感,并嘗試?yán)斫鉃槭裁催@個(gè)設(shè)計(jì)讓你不快。對(duì)激發(fā)興趣的設(shè)計(jì)進(jìn)行取材,你也需要對(duì)優(yōu)秀的設(shè)計(jì)敏感。要養(yǎng)成照片取材的習(xí)慣,最好做一個(gè)博客來(lái)存放自己所發(fā)現(xiàn)的設(shè)計(jì)。對(duì)啟發(fā)你的事情進(jìn)行取材,許多有用的想法和跨領(lǐng)域創(chuàng)意可能來(lái)自日常生活中激發(fā)你興趣的事物。
相機(jī)取材:
可以提供豐富的想法來(lái)源;
想法會(huì)留下設(shè)計(jì)需要避免的線索;
想法會(huì)帶來(lái)設(shè)計(jì)啟發(fā)的來(lái)源;
養(yǎng)成習(xí)慣,照片取材是觀察世界的最佳實(shí)踐。
2.3 收集圖片和簡(jiǎn)報(bào)
成為半組織性的搜尋者/收集者。收集圖片和簡(jiǎn)報(bào)是你可以利用周邊世界來(lái)獲取想法和設(shè)計(jì)過(guò)程的另一種方法。簡(jiǎn)言之,就是收集他人創(chuàng)建的界面、視覺(jué)或數(shù)字傳達(dá)內(nèi)容、收集你所喜歡的與不喜歡的,收集他人的反應(yīng)。無(wú)論好的壞的都是有用的。
收集圖片和簡(jiǎn)報(bào):
搜尋和收集是一項(xiàng)持續(xù)性活動(dòng);
在任何場(chǎng)景所遇到的圖片都可能有幫助;
培養(yǎng)自己收集和組織的習(xí)慣。
2.4 玩具箱和物理收集
收集實(shí)體物品。收集的物品分為兩部分:被拆分的和重建的。將一件物品拆成不同的部件可以教會(huì)你它的設(shè)計(jì)過(guò)程,手把手教你完成構(gòu)建的思考過(guò)程。拆分物品還能讓你用新的方法來(lái)進(jìn)行組裝。/*收集過(guò)程與方法略*、
玩具箱和物理收集:
收藏是設(shè)計(jì)流程的基礎(chǔ);
收藏實(shí)物可以出發(fā)想法和討論;
實(shí)物可以被拆開(kāi)并成為新物品的一部分;
隨著藏品增加,積極展覽可以拓展它的作用。
2.5 分享發(fā)現(xiàn)的物品
分享是豐富想法的極好來(lái)源,不要因?yàn)椴幌敕窒矶划?huà)草圖。為了分享而重畫(huà)具有很多好處。
第3章 單一圖像
典型的草圖將能及時(shí)捕捉一個(gè)單一瞬間,通常是你設(shè)想的用戶體驗(yàn)中的單一場(chǎng)景。然而我們不會(huì)教你如何成為藝術(shù)家,我們會(huì)向你展示可以用來(lái)創(chuàng)造草圖的不同方法。
3.1 草圖前的熱身
通過(guò)聽(tīng)一段故事,用一只筆不離紙的劃線來(lái)表達(dá)故事,然后讓大家來(lái)評(píng)論。你會(huì)發(fā)現(xiàn):
一根簡(jiǎn)單的線條也能千變?nèi)f化;
繪圖者的意圖未必會(huì)和觀看者的理解相匹配;
評(píng)論是發(fā)現(xiàn)的過(guò)程;
評(píng)論需要認(rèn)真的觀察。
3.2 畫(huà)出你所見(jiàn)
繪畫(huà)精確性的練習(xí)。首先根據(jù)你的想象來(lái)畫(huà)出一個(gè)人。然后找一張人物畫(huà)進(jìn)行臨摹。最后畫(huà)出你實(shí)際看到的,將之前臨摹的圖片旋轉(zhuǎn)一百八十度,不要看成人物,而是一堆抽象線條。現(xiàn)在把三張畫(huà)放在一起對(duì)比,你會(huì)發(fā)現(xiàn)旋轉(zhuǎn)一百八十度之后的臨摹畫(huà)在精確度和細(xì)節(jié)上有很大進(jìn)步。你現(xiàn)在掌握了:
繪畫(huà)的一大部分是基于精確的觀察;
假設(shè)實(shí)物看上去什么樣子會(huì)讓繪畫(huà)變得困難;
觀察和繪畫(huà)是你可以練習(xí)的技能。
3.3 草圖詞匯表
畫(huà)物體、人和他們的行動(dòng)。草圖詞匯表中的元素有:
基本草圖元素,線條、矩形、三角形、圓形等。
組合物體,通過(guò)將基本草圖元素組合而成的物體。
人,火柴人或漫畫(huà)式的草圖,或抽象形狀都可以代表人物。
活動(dòng),通過(guò)區(qū)別人的姿勢(shì),可以表達(dá)出人的不同活動(dòng)。
身體與情感,不同姿勢(shì)可以表達(dá)情感,可以在頭上加符號(hào)說(shuō)明。
臉和表情,通過(guò)眉毛與嘴的組合就能表達(dá)表情。
組合姿勢(shì)和臉,在人臉上加以匹配的姿勢(shì)。
組合不同草圖元素來(lái)表達(dá)狀態(tài),將人的姿勢(shì)與簡(jiǎn)單物件組合,來(lái)組成描述具體情況的簡(jiǎn)單草圖。
3.4 普通草圖
草圖的基本元素:繪畫(huà)、注釋、箭頭和備注。草圖不僅是繪畫(huà),還包含有空間關(guān)聯(lián)性的文字注釋?zhuān)颡?dú)立的文字備注。箭頭是一種特殊的注釋方式,它能起到很大的說(shuō)明作用。
3.4合作式草圖
用草圖來(lái)進(jìn)行頭腦風(fēng)暴,表達(dá)想法,促進(jìn)交互。必須考慮參與者如何觸碰到繪畫(huà)區(qū)域并在上面添加標(biāo)記(最好同時(shí)進(jìn)行),并且可以對(duì)草圖進(jìn)行指點(diǎn)。
3.6 繪圖軟件
用常見(jiàn)的數(shù)碼呈現(xiàn)工具來(lái)畫(huà)草圖。
3.7 用辦公用品進(jìn)行草圖繪制
使用常見(jiàn)辦公用品來(lái)創(chuàng)建可編輯草圖。
3.8 模板
預(yù)先畫(huà)好草圖中固定、不變的部分,作為使用及重用的模板。模板可以是照片、描圖、數(shù)碼或紙張形式。
3.9 照片描圖
創(chuàng)建草圖輪廓集,以建立草圖構(gòu)成基礎(chǔ)。有些實(shí)物很難畫(huà),通過(guò)照片描圖,可以快速創(chuàng)建并使草圖變好看的不同組件。首先拍好一張照片,對(duì)照片進(jìn)行描圖,保存描圖作為草圖元素,然后復(fù)制并在你的草圖中使用。


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

3.11 用塑料泡沫設(shè)計(jì)草圖
在物理介質(zhì)上設(shè)計(jì)草圖。紙筆故事板和草圖可以和模型配合來(lái)模擬與該設(shè)備的交互過(guò)程。


第4章 及時(shí)抓拍:視覺(jué)化敘述
想象一個(gè)人與系統(tǒng)一段時(shí)間內(nèi)的交互行為是交互設(shè)計(jì)的特別之處。故事板用一系列獨(dú)立的圖像來(lái)捕捉這些時(shí)間元素,這些圖像一屏接一屏地描述發(fā)生了什么。
4.1 順序故事板
視覺(jué)化說(shuō)明一段時(shí)間內(nèi)的交互順序。順序故事板用來(lái)講述一段時(shí)間內(nèi)所展現(xiàn)的用戶體驗(yàn)順序的視覺(jué)化故事。故事板的難點(diǎn)在于決定哪些草圖作為關(guān)鍵幀,觀看者是否可以腦補(bǔ)這些幀之間的轉(zhuǎn)變空間。對(duì)故事板進(jìn)行注釋可以起到幫助作用,特別是用來(lái)解釋轉(zhuǎn)變中用戶的交互行為。關(guān)鍵決策:要在場(chǎng)景中畫(huà)出用戶嗎?應(yīng)該使用哪些幀來(lái)表現(xiàn)順序?應(yīng)該展現(xiàn)哪些關(guān)鍵轉(zhuǎn)變?

4.2 狀態(tài)轉(zhuǎn)變圖
一種視覺(jué)化描述一段時(shí)間內(nèi)狀態(tài)、轉(zhuǎn)變及決策路徑的方法,與順序故事板類(lèi)似。
4.3 分支故事板
視覺(jué)化說(shuō)明一段時(shí)間內(nèi)的交互決策。

4.4 敘述性故事板
講述一段時(shí)間內(nèi)關(guān)于使用情境的故事。故事板草圖可以是手繪的也可以是照片組成的。手繪故事板的步驟:
畫(huà)出故事板沒(méi)幀的輪廓;
設(shè)計(jì)故事線;
畫(huà)出定場(chǎng)鏡頭(介紹);
通過(guò)合適的照片繼續(xù)故事線草圖的繪制;
突出動(dòng)作和行動(dòng);
向他人迭代說(shuō)明。

第5章 讓用戶體驗(yàn)活靈活現(xiàn)
如果故事板中的每幅草圖間都已經(jīng)有了良好的起承轉(zhuǎn)合,那么你就可以將這個(gè)故事板升級(jí)成為一個(gè)可互動(dòng)的視頻。這些視頻可以通過(guò)回放這些故事,展示故事的分支劇情來(lái)進(jìn)行可視化的敘述。將交互流程制作成一個(gè)圖像配準(zhǔn)的動(dòng)畫(huà)。將故事草圖中的每一幀放到PPT的每一頁(yè)就行了,還可以通過(guò)超鏈接來(lái)展示分支故事。
第6章 邀請(qǐng)他人參與草圖設(shè)計(jì)
動(dòng)畫(huà)原型可以通過(guò)回放故事或是呈現(xiàn)故事不同的分支劇情對(duì)交互流程提供可視化的敘述。其另外一種用途是引領(lǐng)目標(biāo)用戶進(jìn)入這種可視化敘述,讓用戶進(jìn)行真實(shí)的行為操作并獲得自己真實(shí)的感受,產(chǎn)生真正的用戶體驗(yàn)。然后你可以探尋用戶對(duì)于這個(gè)動(dòng)畫(huà)原型的真實(shí)感受?;蛘吣氵€可以向他人展示你的工作,然后請(qǐng)他們?yōu)槟闾岢鼋ㄗh。
6.1 探尋原始的心智模型
系統(tǒng)中視覺(jué)元素會(huì)向用戶傳達(dá)很多信息,然后用戶會(huì)以此為依據(jù)去解釋整個(gè)系統(tǒng)的工作原理,最終形成關(guān)于此系統(tǒng)的心智模型。你可以讓用戶看著系統(tǒng)原型草圖并解釋這些元素,來(lái)簡(jiǎn)單快速的發(fā)現(xiàn)他們的心智模型,通過(guò)對(duì)比用戶與系統(tǒng)實(shí)際存在的心智模型間的差異及不匹配,你可以迅速找出系統(tǒng)的可用性問(wèn)題,為你的設(shè)計(jì)迭代提供線索。
6.2 綠野仙蹤
草圖在人的操縱下對(duì)人們的操作進(jìn)行反饋。你自己扮演系統(tǒng)后臺(tái),接受并分析用戶的操作行為,然后人為的做出相對(duì)應(yīng)的反饋。
6.3 發(fā)聲思考
讓用戶一邊使用界面草圖,一邊描述自己的想法和動(dòng)機(jī)。通過(guò)聆聽(tīng)用戶的想法及操作計(jì)劃,你能了解到他們的意圖以及解決問(wèn)題的策略,然后你可以根據(jù)這些進(jìn)一步檢驗(yàn)產(chǎn)品是否滿足了用戶期望。
6.4 草圖板
將草圖張貼到布告欄與同事進(jìn)行分享,一旦畫(huà)出項(xiàng)目原型就應(yīng)曬出來(lái),向別人講述草圖的過(guò)程可以幫你理清思路,回答他人的質(zhì)疑會(huì)讓你得到新視角。
6.5 審查
把你的草圖創(chuàng)意呈現(xiàn)出來(lái),請(qǐng)大家提建議。