▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來(lái)到專(zhuān)業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長(zhǎng)

作者：蔡林燕

編輯：劉麗

共 4207 字，預(yù)計(jì)閱讀 11 分鐘

我們的大腦更喜歡用故事來(lái)感知世界，理解故事是什么，以及故事的構(gòu)建方式，可以幫助我們?cè)?/span>設(shè)計(jì)中思考如何建立以用戶(hù)為主角的成長(zhǎng)過(guò)程，在潛意識(shí)水平上與用戶(hù)進(jìn)行交流，讓用戶(hù)在使用中有清晰的目標(biāo)和操作指導(dǎo)。在用戶(hù)體驗(yàn)設(shè)計(jì)中運(yùn)用故事化的技巧可以加強(qiáng)用戶(hù)的記憶，創(chuàng)造良好的產(chǎn)品使用體驗(yàn)，拉近與用戶(hù)之間的關(guān)系。文章中講述了一種常用的故事結(jié)構(gòu)，用生動(dòng)的案例讓我們理解如何講故事的構(gòu)建方式運(yùn)營(yíng)于用戶(hù)體驗(yàn)設(shè)計(jì)之中。

Photo by iam_os

故事的存在幾乎和人類(lèi)歷史一樣古老。自從我們的祖先從擁有自我意識(shí)以來(lái)，就開(kāi)始互相講述故事了。在本文中，我將討論網(wǎng)頁(yè)設(shè)計(jì)師如何使用講故事來(lái)創(chuàng)造令人愉快的體驗(yàn)，同時(shí)，和大家講一些使用故事化的技巧。

1. 為什么故事很重要

每個(gè)有意識(shí)的人都生活在他們獨(dú)有的故事中。通常，故事的基本結(jié)構(gòu)是，先說(shuō)明主角的現(xiàn)狀，然后描述主角如何走向更好未來(lái)的過(guò)程。就這么簡(jiǎn)單，因?yàn)槲覀兛偸翘幱诓粷M(mǎn)足的狀態(tài)，并試圖去改變這種情況。

每個(gè)人都會(huì)將自己視為前往某個(gè)已知或未知目的地的英雄。這通常是潛意識(shí)的，所以沒(méi)有人會(huì)主動(dòng)去考慮這個(gè)，但是人們總是下意識(shí)的認(rèn)為他們是生活中的主角。一種簡(jiǎn)單的測(cè)試方法是與朋友共處一夜后，要求他們回憶一下昨晚的事件。幾乎每個(gè)人講述的故事都會(huì)將自己定位為主角。

實(shí)際上，科學(xué)家驗(yàn)證了我們的大腦天生就愛(ài)聽(tīng)故事。早在沒(méi)有互聯(lián)網(wǎng)，甚至沒(méi)有寫(xiě)作的時(shí)代，使某件事變得令人影響深刻的最好方法就是將其變成一個(gè)故事。一個(gè)故事之所以令人難忘，是因?yàn)樗诼?tīng)眾和主角之間建立了聯(lián)系。我們對(duì)主角很同情，并將自己代入了主角的位置，設(shè)身處地為他們著想。通過(guò)這種方式，我們所有的思想和情感都投射到了故事上，不可避免地產(chǎn)生了共鳴，就好像面對(duì)的是發(fā)生在自己身上的時(shí)間。因此，從虛構(gòu)故事中獲得的啟示很容易對(duì)我們產(chǎn)生至關(guān)重要的影響，幾千年來(lái)的文字沉淀直接影響了我們的文化。最重要的是，故事可以幫助我們生存和發(fā)展，這就是為什么我們的大腦會(huì)進(jìn)化到通過(guò)故事來(lái)感知世界。

當(dāng)涉及到用戶(hù)體驗(yàn)時(shí)，如果公司關(guān)心的是如何與用戶(hù)進(jìn)行清晰的溝通并使其與產(chǎn)品進(jìn)行互動(dòng)，那么正確的故事就顯得尤為重要。有些用戶(hù)瀏覽網(wǎng)站 10 秒鐘后離開(kāi)的原因是：繁多的信息使他們思考過(guò)多，以至于無(wú)法理解你為他們提供的內(nèi)容以及他們應(yīng)該感興趣的原因。減少思考的最佳方法是在潛意識(shí)水平上與用戶(hù)進(jìn)行交流。前文中提到過(guò)，人們?cè)跐撘庾R(shí)里認(rèn)為自己是生活中的主角，因此與他們交流的最佳方法是通過(guò)講故事。如果做得正確，點(diǎn)擊 CTA 按鈕將是生存與消亡之間的選擇。

2. 故事的結(jié)構(gòu)

讓我們來(lái)看看如何在設(shè)計(jì)中構(gòu)建和講述引人注目的故事。所有偉大的故事都需要遵一個(gè)結(jié)構(gòu)：有一個(gè)主角想要實(shí)現(xiàn)某件事，但是因?yàn)橐粋€(gè)問(wèn)題而無(wú)法實(shí)現(xiàn)。然后主角遇到一個(gè)引導(dǎo)者，為他們提供了一個(gè)可以克服障礙的計(jì)劃，最終獲得成功。每本好書(shū)、電視節(jié)目、電影、應(yīng)用程序、網(wǎng)站都具有這些元素。

《黑客帝國(guó)》是我最喜歡的電影之一。托馬斯 · 安德森（Thomas Anderson / Neo）是一名無(wú)聊且空虛的程序員，他正在尋找打破這種生活的方法。直到遇到了墨菲斯（Morpheus），墨菲斯指引他，并告訴他，目前人類(lèi)正在與一群機(jī)器人進(jìn)行秘密戰(zhàn)爭(zhēng)，而 Neo 正是傳說(shuō)中的救世主。因此，我們有一個(gè)想打敗機(jī)器人的英雄，但他目前缺乏必要技能和知識(shí)。墨菲斯成為他的引導(dǎo)者，給了他一粒藥丸，讓他脫離母體。細(xì)想一下，你會(huì)意識(shí)到所有的流行電影都在某種程度上遵循這種結(jié)構(gòu)。但是，不容易被發(fā)現(xiàn)，因?yàn)楹玫碾娪皶?huì)盡可能地掩蓋這一點(diǎn)。這樣一來(lái)，就可以避免被指責(zé)陳詞濫調(diào)，而且還能講述一個(gè)容易引起大眾共鳴的故事。在接下來(lái)的幾段中，我將介紹構(gòu)成故事的每個(gè)元素，并說(shuō)明如何使用它們來(lái)改善文案寫(xiě)作和總體設(shè)計(jì)。我分享的大多數(shù)見(jiàn)解都是我從唐納德·米勒的書(shū)《建立品牌故事》中學(xué)到的。

1）主角

你的用戶(hù)才是主角，而不是品牌。在用戶(hù)體驗(yàn)設(shè)計(jì)中，用戶(hù)常常被稱(chēng)為一個(gè)個(gè)角色。但是，我個(gè)人更喜建立品牌故事的方法，因?yàn)樗?jiǎn)單、更切中要害。人們往往對(duì)角色創(chuàng)建過(guò)程進(jìn)行了過(guò)度設(shè)計(jì)，很容易迷失方向并過(guò)多地關(guān)注無(wú)關(guān)緊要的細(xì)節(jié)。建立故事品牌的框架有助于關(guān)注重要信息。有兩件事需要說(shuō)明：

誰(shuí)是主角？
他們的最大愿望是什么？

我經(jīng)常遇到關(guān)于角色的問(wèn)題是：他們過(guò)于具體，包含了很多無(wú)用的信息。僅僅是為了包含這些信息，或者是因?yàn)?“我學(xué)習(xí)到的角色建立就是這樣” 。最好的故事寫(xiě)作方法是最大程度地增加與主角相關(guān)的人物數(shù)量。理清這些人物的通用特征，再為每一個(gè)人物增加特有特征。這樣，我們就擁有了一個(gè)符合邏輯的原型主角，他擁有屬于自己的個(gè)性。在每個(gè)故事的開(kāi)始，主角都會(huì)處于一種不好的狀態(tài) / 環(huán)境，最大的愿望就是想要改變現(xiàn)有狀況。這就是以上兩個(gè)問(wèn)題的答案。

故事發(fā)展路徑（受喬丹 · 彼得森的圖表啟發(fā)）

盧克 · 天行者（Luke Skywalker）想要擺脫無(wú)聊的家鄉(xiāng)，尋求冒險(xiǎn)；杰里 · 馬奎爾（Jerry Maguire）希望與客戶(hù)建立更私人化的關(guān)系；哈利 · 波特（Harry Potter）厭倦了與寄養(yǎng)父母的生活，養(yǎng)父母虐待他，而他希望魔法可以將他帶離那里。這些電影是截然不同的，主人翁也各不相同，但它們都具有這一共同特性：主角想要打破現(xiàn)狀，獲得比目前更好的生活。糟糕的現(xiàn)狀類(lèi)型或理想目標(biāo)是什么取決于不同的故事，我們討論的是基本框架，我建議你也可以嘗試在這種框架上構(gòu)建故事。所包含內(nèi)容都必須為情節(jié)服務(wù)。如果不是這樣做，你的故事將失去邏輯，讓用戶(hù)感到無(wú)聊。

2）問(wèn)題

每個(gè)用戶(hù)都有一個(gè)問(wèn)題，識(shí)別此問(wèn)題的最佳方法是將其視為反派。有什么可以變成反派的嗎？例如，對(duì)于時(shí)間管理應(yīng)用程序，反派是浪費(fèi)時(shí)間。當(dāng)涉及到解決問(wèn)題時(shí)，會(huì)存在外部問(wèn)題、內(nèi)部問(wèn)題以及哲學(xué)問(wèn)題。

問(wèn)題的層次

外部問(wèn)題是最明顯的。例如，對(duì)于 iPhone 用戶(hù)，外部問(wèn)題就是對(duì)智能手機(jī)的功能需求。但是，下面還有一個(gè)更深的層次，是一個(gè)內(nèi)部問(wèn)題。繼續(xù)以 iPhone 為例，一個(gè)內(nèi)部問(wèn)題可能是，用戶(hù)希望通過(guò)擁有時(shí)尚且小巧的智能手機(jī)來(lái)變得酷炫時(shí)尚。顯然，無(wú)需向用戶(hù)提及這一點(diǎn)，但設(shè)計(jì)人員必須了解這些內(nèi)部問(wèn)題。最后，哲學(xué)問(wèn)題是一個(gè)額外的層次。對(duì)于 iPhone 用戶(hù)，人們希望使用技術(shù)卻希望能夠不必處理過(guò)于復(fù)雜和笨拙的硬件。對(duì)于特斯拉的買(mǎi)家來(lái)說(shuō)，則完全是環(huán)保主義。在電影中，哲學(xué)問(wèn)題總是存在的，因?yàn)橹鹘潜仨氃谏婆c惡之間做出選擇。

3）引導(dǎo)

故事的主角正在尋找能夠到達(dá)目的地的相關(guān)幫助。可以是導(dǎo)師，也可以是一些資源，但是如果沒(méi)有外部幫助，主角將無(wú)法實(shí)現(xiàn)他們的目標(biāo)。因此，為客戶(hù)提供指南服務(wù)的網(wǎng)站已經(jīng)領(lǐng)先于競(jìng)爭(zhēng)對(duì)手。有一個(gè)失敗案例，一個(gè)公司的官網(wǎng)大段大段的介紹他們是如何出色。我理解這樣做是出于友好，并且是為了提高信譽(yù)，但是提供大量與用戶(hù)無(wú)關(guān)的信息會(huì)使他們感到無(wú)聊，用戶(hù)大概率會(huì)推出，選擇其他的產(chǎn)品。提高信譽(yù)的最好方法是列出公司獲得的一些獎(jiǎng)項(xiàng)，提供一些數(shù)據(jù)信息，最后提供 3 - 4 個(gè)優(yōu)質(zhì)案例。所有無(wú)聊的廢話(huà)都應(yīng)該被刪除，取而代之的是一兩句簡(jiǎn)短的話(huà)，說(shuō)明公司理解用戶(hù)的痛苦并同情他們

Mailchimp 登錄頁(yè)面的屏幕截圖

屏幕截圖來(lái)自 Mailchimp 的網(wǎng)站，告訴用戶(hù)他們正在努力實(shí)現(xiàn)的目標(biāo)（表明用戶(hù)是主角），而 Mailchimp 將為他們提供支持（表明 Mailchimp 是指南）。

4）計(jì)劃

引導(dǎo)者為主角制定了行動(dòng)計(jì)劃。指南可以是一個(gè)人，也可以是一件事，引導(dǎo)主角為達(dá)到目標(biāo)而制定計(jì)劃，但其理念是存在一種幫助主角的外在力量。當(dāng)涉及數(shù)字產(chǎn)品和服務(wù)時(shí)，公司網(wǎng)站通常會(huì)有一小部分，給出用戶(hù)使用產(chǎn)品并從中受益的 3 – 4 個(gè)步驟。

Twitter登陸頁(yè)面

Twitter 以一種非常簡(jiǎn)單但有效的方式做到這一點(diǎn)。他們列出了 3 個(gè)簡(jiǎn)單的步驟，用戶(hù)可以采取這些步驟來(lái)開(kāi)始使用該服務(wù)。

5）戲劇化

核心一點(diǎn)就是，最有力的故事一般是關(guān)于生存的。這意味著你的故事中必須有戲劇性的元素。在《黑客帝國(guó)》中，如果 Neo 失敗，則機(jī)器將獲勝并消滅剩余的少數(shù)人類(lèi)。在《星球大戰(zhàn)》中，如果盧克不成功，那么邪惡的帝國(guó)將獲勝并繼續(xù)統(tǒng)治。在哈利 · 波特系列電影中，如果哈利和他的朋友們失敗了，那么整個(gè)學(xué)校及其老師都將處于危險(xiǎn)之中。在現(xiàn)實(shí)生活中，我們都擔(dān)心失去時(shí)間、金錢(qián)、人際關(guān)系、重要時(shí)刻和許多其他重要事情。這就是社交媒體巨頭如此成功的原因，如果你的產(chǎn)品可以幫助人們解決問(wèn)題，只需指出如果他們不使用你的產(chǎn)品 / 服務(wù)會(huì)發(fā)生什么。這不應(yīng)該是威脅，而是溫柔的提醒。這是執(zhí)行此操作的 3 個(gè)簡(jiǎn)單步驟：

提醒用戶(hù)他們的漏洞
讓用戶(hù)知道他們應(yīng)該做些什么
將讀者引導(dǎo)至可以幫助他們的 CTA

6）成功

故事需要解決或結(jié)束。當(dāng)說(shuō)到故事的結(jié)尾時(shí)，要想想你要給用戶(hù)提供什么，并向他們展示這種形象。如果想成功展示，理想的樣式是帶有標(biāo)語(yǔ)的簡(jiǎn)單照片。

我喜歡交友應(yīng)用程序 Hinge 的操作方式。他們直截了當(dāng)，并簡(jiǎn)單坦率。如果一張圖片勝過(guò)千言萬(wàn)語(yǔ)，那么一段視頻的價(jià)值至少是圖片的 2 倍。

無(wú)論你是否在設(shè)計(jì)中使用講故事的方法，我都希望本文內(nèi)容豐富且有趣。我想說(shuō)的是，這只是通過(guò)設(shè)計(jì)講故事的方式之一。我發(fā)現(xiàn)的另一種有趣的方式是使用亞里士多德的講故事方式。無(wú)論采用哪種方法，我都不希望人們遵循框架。這會(huì)扼殺了創(chuàng)造力和進(jìn)步。設(shè)計(jì)作為一門(mén)學(xué)科的偉大之處之一是它的可能性是無(wú)窮盡的，這意味著你可以自由地修改這些方法以匹配過(guò)程。

原文：https://bootcamp.uxdesign.cc/storytelling-in-web-design-b25735a448a1

作者：ASLAN FAKHRI

譯者：蔡林燕

審核：張聿彤

編輯：劉麗

本文已獲得作者正式授權(quán)，截圖如下：

?? 我們一起聊設(shè)計(jì) ???♂?

微信行業(yè)交流群

期待與更多優(yōu)秀設(shè)計(jì)師一起成長(zhǎng)

PS：歡迎大家關(guān)注三分設(shè)，每天早上9點(diǎn)，準(zhǔn)時(shí)充電。分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識(shí)，定期大咖老師直播分享，零距離連麥，答疑解惑。添加小小蟲(chóng)微信號(hào)【 Lil_Bug 】，備注【 三分設(shè) 】加入?。ㄖ幻嫦蛐菢?biāo)了公眾號(hào)三分設(shè)的粉絲）

推薦課程