Storyboard故事板是交互設(shè)計(jì)常用的設(shè)計(jì)手法，但是很多同學(xué)在實(shí)際創(chuàng)作的過程中卻對(duì)它一知半解。故事板起源于電影制作行業(yè)，在UX設(shè)計(jì)中，故事板可以幫助我們展示產(chǎn)品的使用情境，包括用戶交互的流程，都可以借由這樣連續(xù)的插畫和分鏡，把一個(gè)人和產(chǎn)品或服務(wù)之間的交互體驗(yàn)呈現(xiàn)出來(lái)。今天UXD就通過一篇文章，全面地向同學(xué)們介紹一下，什么是交互設(shè)計(jì)中故事板的正確打開方法。

01 Storyboard簡(jiǎn)介

故事板的想法是在20世紀(jì)30年代早期由沃爾特·迪斯尼工作室提出的。迪斯尼動(dòng)畫師韋布·史密斯創(chuàng)造了在不同的紙上的場(chǎng)景，然后把它們釘在公告板上按順序講述故事的想法，從而創(chuàng)造了第一個(gè)故事板(克里斯托弗·芬奇，沃爾特·迪斯尼的藝術(shù)，艾布拉姆斯，1973)。第一個(gè)完整的故事板是1933年的迪斯尼短片《三只小豬》(沃爾特·迪斯尼的故事，亨利·霍爾特，1956)而創(chuàng)作的。

這是電影故事板。像這樣的電影故事板的目的是傳達(dá)相機(jī)角度和場(chǎng)景的感覺。您會(huì)注意到單個(gè)鏡頭(面板)的尺寸對(duì)應(yīng)于標(biāo)準(zhǔn)的電影屏幕尺寸。

但是UX故事板卻和電影故事板有很大的不同。交互設(shè)計(jì)的設(shè)計(jì)對(duì)象是用戶的行為，UX故事板的目的即是考慮和傳達(dá)一系列的狀態(tài)與行為，而不是提供特定的視覺方向。UX故事板展示了某人如何與未來(lái)的產(chǎn)品或服務(wù)互動(dòng)，重要的是所涉及的行為和情緒。

02 優(yōu)點(diǎn)

1.說明用戶體驗(yàn)的重要步驟

顯示的屏幕被繪制在紙上或使用其他專用軟件，以說明用戶體驗(yàn)的重要步驟。用戶準(zhǔn)確地理解軟件與硬件將如何工作，比抽象描述好得多。

2.印象深刻，可讀性強(qiáng)

認(rèn)知心理學(xué)家杰羅姆·布魯納（ Jerome Bruner ）認(rèn)為，當(dāng)一個(gè)事實(shí)被包裹在一個(gè)故事中時(shí)，我們記住它的可能性要高22倍。為什么？因?yàn)楣适铝钊穗y忘。故事幫助我們快速抓住一個(gè)想法的要點(diǎn)。它們引發(fā)我們的情感。

3.喚起設(shè)計(jì)師與觀者的同理心

通過圖畫與文字結(jié)合的方式，故事版的情節(jié)代入感強(qiáng)，是設(shè)計(jì)師以用戶為中心進(jìn)行設(shè)計(jì)的關(guān)鍵步驟之一，與此同時(shí)，觀者在了解設(shè)計(jì)師的設(shè)計(jì)時(shí)，有很大的可能開始就被故事版的展示形式與內(nèi)容吸引。

4.參與感與趣味性

故事版不僅可以敘事軟硬件產(chǎn)品的使用流程，還可以添加一些趣味性與幽默感，是的廣泛的傳播與討論變得可能。在閱讀故事版時(shí)，觀者的參與感更強(qiáng)，觀者與設(shè)計(jì)作品的互動(dòng)性更好。

03 故事板三要素

1.用戶：在設(shè)計(jì)前期進(jìn)行問卷調(diào)查、用戶訪談和實(shí)地觀察等用戶研究過后，需要確立典型的用戶畫像。繪制同理心地圖（empathy map）。在故事版的敘述過程中，需要將這個(gè)典型用戶（persona）視覺化展示出來(lái)，并且把同理心地圖中所看、所聽、所想、所說、所做的一些重要內(nèi)容以敘述性故事的形式展示出來(lái)。

2.場(chǎng)景：在故事版中需要展示出故事發(fā)生前、發(fā)生時(shí)和發(fā)生后的場(chǎng)景

3.情節(jié)：在UX故事版中，由于設(shè)計(jì)產(chǎn)品的出現(xiàn)，導(dǎo)致故事中的情節(jié)發(fā)生變化甚至反轉(zhuǎn)。設(shè)計(jì)產(chǎn)品的出現(xiàn)也會(huì)對(duì)典型用戶的情緒產(chǎn)生變化：在故事版的創(chuàng)作過程中，需要表現(xiàn)出典型用戶在使用產(chǎn)品前后的情感變化，即表情變化。

04 如何講好故事？

19世紀(jì)德國(guó)劇作家和小說家古斯塔夫·弗賴塔格（Gustav Freytag）畫了一個(gè)簡(jiǎn)單的三角形來(lái)表示戲劇結(jié)構(gòu)，并強(qiáng)調(diào)了他認(rèn)為講故事所必需的七個(gè)部分 : 闡述(exposition)、煽動(dòng)事件(inciting action)、上升的動(dòng)作(rising action)、高潮(climax)、下降的動(dòng)作(falling action)、決議(resolution)和結(jié)尾(ending)。

1.解說(exposition) :講故事的人設(shè)置場(chǎng)景和人物的背景。

2.煽動(dòng)事件( inciting action ) :角色對(duì)已經(jīng)發(fā)生的事情做出反應(yīng)，并引發(fā)一連串的事件。

3.行動(dòng)起來(lái)( rising action ) :故事開始了。通常會(huì)有復(fù)雜的情況，這意味著角色試圖解決的問題會(huì)變得更加復(fù)雜。

4.高潮( climax ) :故事達(dá)到了主角和對(duì)手之間最大的緊張點(diǎn)(或者如果只有一個(gè)主要角色，那個(gè)角色的黑暗或光明似乎控制了局面)。

5.下降動(dòng)作( falling action ) :故事轉(zhuǎn)移到作為高潮的結(jié)果而發(fā)生的動(dòng)作，這也可以包含一個(gè)逆轉(zhuǎn)(當(dāng)角色展示他們?nèi)绾伪桓叱钡氖录淖?。

6.解決方案( resolution ) :角色解決問題或沖突。

7.結(jié)局( ending ) :結(jié)局通常是快樂的

05 如何為自己的設(shè)計(jì)創(chuàng)建故事板？

第一步：從純文本和箭頭開始。最主要的是將故事分解成各個(gè)時(shí)刻(背景、觸發(fā)因素、一個(gè)角色在這個(gè)過程中所做的決定，以及最終的好處或問題)。

第二步：給你的故事增添情感。在每一步都添加表情符號(hào)，以幫助其他人了解角色頭腦中的想法。記得舉例說明一路上對(duì)成功/痛苦點(diǎn)的任何反應(yīng)(角色期望發(fā)生什么，結(jié)果如何影響他/她？試著把每個(gè)情緒狀態(tài)都畫成一個(gè)簡(jiǎn)單的表達(dá)。

第三步：將每個(gè)步驟翻譯成故事板框架。強(qiáng)調(diào)每一刻，想想你的角色對(duì)此有何感受。在繪制的過程中，可以手動(dòng)進(jìn)行繪制，也可以使用專門的故事版軟件，如storyboarder等。也可以使用photoshop手繪板或者ipad-procreate等設(shè)計(jì)工具進(jìn)行繪制。

第四步：在繪制手機(jī)界面的時(shí)候，繪制出主要的故事版中使用的功能即可。細(xì)節(jié)，如措辭，布局和風(fēng)格應(yīng)該在以后的過程中考慮。

第五步：故事敘述者的評(píng)論—有時(shí)出現(xiàn)在框架頂部或底部以推進(jìn)敘事；語(yǔ)言和思想活動(dòng)泡泡—把它們放在任何評(píng)論下面，并考慮你的觀眾將如何閱讀它們；人物與場(chǎng)景—展示足以表明對(duì)你的故事有意義的東西。

上圖故事內(nèi)容：今年假期，小美打算去海灘度假。但是她不知道去哪里更好，不知道如何開始。她在臉書上問朋友，沒有得到滿意的回復(fù)。她在谷歌上搜索，發(fā)現(xiàn)信息太多不知從何開始。第二天，她在公司隔壁的旅游代理處咨詢，卻發(fā)現(xiàn)等了好久好久… 她很無(wú)奈的說：“我還是家里宅吧”

第六步：設(shè)計(jì)清晰的結(jié)果。確保你的故事板讓你的觀眾對(duì)故事的結(jié)局沒有任何疑問:如果你在描述一個(gè)不利的情況——以問題的解決結(jié)束，如果你提出一個(gè)解決方案——以該解決方案對(duì)你的角色的好處結(jié)束。

06 注意事項(xiàng)

1.讓它不言自明。人們不應(yīng)該需要現(xiàn)場(chǎng)解說來(lái)了解發(fā)生了什么。刪掉任何不必要的多余部分。不管一個(gè)句子、圖片或頁(yè)面有多好，如果它不能增加整體信息的價(jià)值，你應(yīng)該刪除它。

2.不顯示用戶界面細(xì)節(jié)。這個(gè)故事應(yīng)該突出過程中的主要步驟。細(xì)節(jié)，如措辭，布局和風(fēng)格應(yīng)該在以后的過程中考慮。

3.可讀性強(qiáng)。你希望房間里的每個(gè)人都能夠在會(huì)議環(huán)境中閱讀你的漫畫。帶有大文本的橫向布局有助于確保每個(gè)人都能欣賞你的作品。

4.真實(shí)性。最重要的是讓角色、他們的目標(biāo)以及他們的經(jīng)歷盡可能清晰。如果你寫的東西與你的產(chǎn)品沒有共鳴，你的用戶就能看出來(lái)。因此，在真實(shí)的環(huán)境中關(guān)注真實(shí)的人，你的觀眾會(huì)同情他們。

5.你不需要擅長(zhǎng)畫畫。好消息是，在你開始畫場(chǎng)景故事板之前，你不需要擅長(zhǎng)畫畫。盡管繪畫經(jīng)驗(yàn)有所幫助，但最重要的是盡可能清楚地描述人物、他們的目標(biāo)以及他們的經(jīng)歷。你如何渲染這取決于你和你的技能和品味，但是在故事板的情況下，越少越好。

6.故事板保真度。把你的故事板風(fēng)格和技術(shù)想象成一個(gè)保真度譜上的點(diǎn)，或者抽象層次。斯科特·麥克勞（Scott McCloud）德解釋說，漫畫是一個(gè)相似/意義連續(xù)體，從完全真實(shí)的圖像到標(biāo)志性的圖像，抽象程度越來(lái)越高。低保真度意味著示意性的方框、圓圈和簡(jiǎn)筆畫，高保真度意味著攝影的真實(shí)性。

更多知識(shí)干貨以及其他海外留學(xué)的資訊可以關(guān)注UXD交互工業(yè)產(chǎn)品設(shè)計(jì)分享或者添加小助手，還可獲取講座直播哦~

|福利大放送 | WELFARE?
對(duì)于設(shè)計(jì)初學(xué)者，完成從0開始創(chuàng)作幾乎是不可能的，就像學(xué)習(xí)過程中書讀百遍其義自見一樣。有了大量的積累，才能在腦海里建立素材庫(kù)，這些素材庫(kù)能幫助同學(xué)們完成最初的設(shè)計(jì)想法積累，基于這樣的基礎(chǔ)再進(jìn)行個(gè)性化的創(chuàng)作，最終才能做出高質(zhì)量的作品集。全球院校最新作品集免費(fèi)拿！添加小助手即可獲取：

UXD交互工業(yè)產(chǎn)品設(shè)計(jì)學(xué)院是尤克斯國(guó)際旗下的一家專注于交互、服務(wù)、工業(yè)、產(chǎn)品設(shè)計(jì)專業(yè)的頂級(jí)設(shè)計(jì)學(xué)院。除了一對(duì)一設(shè)計(jì)課、基礎(chǔ)技能課程、小組課題、設(shè)計(jì)評(píng)圖、聯(lián)合教學(xué)外，我們提供不定主題的公開課和內(nèi)部小組課，教學(xué)計(jì)劃課程由三大部分組成，包括基礎(chǔ)軟件技能教學(xué)、設(shè)計(jì)理論系統(tǒng)講座、申請(qǐng)必備知識(shí)解析等。

本文版權(quán)歸UXD尤克斯所有??

部分圖片來(lái)自于網(wǎng)絡(luò)??

如有侵權(quán)請(qǐng)與我們聯(lián)系