“ 故事也許是人類(lèi)最早的敘事方法。大多數(shù)人在童年時(shí)，故事用來(lái)引導(dǎo)他們的行為，了解歷史文化和培養(yǎng)社會(huì)認(rèn)同感。”－Form Wikipedia

1.什么是故事（WHAT）

在討論如何打造故事感體驗(yàn)之前，我們先聊聊什么是故事。

故事（Storytelling）是通過(guò)文字，聲音或圖像來(lái)傳播的事件。它在各種文化扮演著娛樂(lè)，教育，傳播文化和價(jià)值觀的作用。講故事或許是人類(lèi)最早的敘事方法。大多數(shù)人在童年時(shí)，成人都會(huì)用故事來(lái)引導(dǎo)他們的行為，傳授歷史文化和培養(yǎng)社會(huì)認(rèn)同感。注1

講故事是一種解釋和分享的方法。這在我們生活中非常普遍。它們可以彌合文化，語(yǔ)言和年齡之間的分歧。例如在教育中，可以通過(guò)故事讓人更加容易理解。又如遠(yuǎn)古社會(huì)，人類(lèi)使用紀(jì)錄和傳播故事，這些壁畫(huà)即使過(guò)了上千年，依舊能理解其中部分含義。

古埃及金字塔中的。圖片來(lái)自 forum.china.com.cn

甚至在工作中，通過(guò)講故事的形式，也可以讓信息在人與人之間更加的傳輸。比如說(shuō)在討論用戶需求的會(huì)議上，通過(guò)講故事的手法，產(chǎn)品設(shè)計(jì)可以將用戶需求轉(zhuǎn)化為一個(gè)個(gè)場(chǎng)景故事，便可以準(zhǔn)確的讓別人理解。 人類(lèi)從古至今一直深受故事影響。從圣經(jīng)到現(xiàn)代小說(shuō)無(wú)不是故事。因此當(dāng)人的大腦在聽(tīng)到故事時(shí)，會(huì)產(chǎn)生特別的反應(yīng)。

在論文《A Theory of Narrative Empathy》中描述到，當(dāng)人類(lèi)聽(tīng)到故事時(shí)，大腦中的”鏡像神經(jīng)細(xì)胞“（一種神經(jīng)細(xì)胞，使人們學(xué)會(huì)從簡(jiǎn)單模仿到復(fù)雜模仿 －Wikipedia）會(huì)異?；钴S，促進(jìn)人類(lèi)引發(fā)共鳴并理解別人的行為，所以故事很容易讓人類(lèi)沉浸其中。注2

2.為什么要打造故事感（WHY）

畫(huà)報(bào)是我們最近研發(fā)的圖片社交產(chǎn)品。研發(fā)這款產(chǎn)品時(shí)，圖片類(lèi)社交產(chǎn)品已經(jīng)非常之多。如何在這片紅海中，找到屬于自己的產(chǎn)品定位，這是我們思索的問(wèn)題。然而我們發(fā)現(xiàn)，現(xiàn)有的產(chǎn)品例如微信朋友圈，Instagram，F(xiàn)acebook等，更多的是分享“某時(shí)刻狀態(tài)（Moment）”，例如我養(yǎng)了只貓，周日早晨為它拍了許多照片并分享到朋友圈，講究的是快速和即時(shí)性。但是如果我出國(guó)旅游了30天，那么我可能需要一種可以承載我整個(gè)旅行過(guò)程的工具。

Wechat朋友圈和Facebook主頁(yè)，他們更多的是分享“某時(shí)刻的狀態(tài)”

我們認(rèn)為承載一段過(guò)程的最佳工具是故事而非狀態(tài)，由于人類(lèi)大腦對(duì)故事非常敏感，容易引起共鳴，且故事人人都可以理解，可以傳遞信息。所以我們嘗試使用故事來(lái)包裝這些照片

3.如何打造故事感（HOW）

當(dāng)思索如何打造故事感時(shí)，我們第一步反思的是：日常生活中，我們是如何接觸一段故事的？我們以看電影的場(chǎng)景進(jìn)行探索。

一般來(lái)講，看電影有三個(gè)步驟：

首先是選電影。我們會(huì)根據(jù)廣告，海報(bào)，豆瓣等宣傳渠道，對(duì)電影產(chǎn)生初步的印象。例如電影類(lèi)型，劇情簡(jiǎn)介，大概的氛圍，甚至演員導(dǎo)演，評(píng)分等等都會(huì)決定我是否選擇這部電影。

其次是觀影。當(dāng)我們進(jìn)入電影院，影院的環(huán)境，座位，甚至爆米花的香味都能快速建立一種“我正在看電影”的沉浸式體驗(yàn)。電影未播，體驗(yàn)先行。當(dāng)電影播放時(shí)，觀眾早已進(jìn)入狀態(tài)，通過(guò)生動(dòng)連貫的情節(jié)，跌宕起伏的高低潮，產(chǎn)生視覺(jué)與情感上沖擊，從而達(dá)到傳播電影主題的目的。

最后是評(píng)論。當(dāng)電影結(jié)束，人們一定會(huì)討論這部電影，只不過(guò)每個(gè)人的形式不同。如果與朋友一同觀影，那么電影結(jié)束后就開(kāi)始交換意見(jiàn)；如果是獨(dú)自觀影，那她也可以在豆瓣中進(jìn)行影評(píng)。

因此，我們可以清晰的梳理出看電影體驗(yàn)核心流程：

1.選影片>2.電影院觀影 >3.影評(píng)后感

將這個(gè)流程映射到產(chǎn)品設(shè)計(jì)中，它的核心體驗(yàn)流程便應(yīng)是：

1.找故事 >2.讀故事 >3.評(píng)故事

還有一個(gè)相對(duì)獨(dú)立的流程是寫(xiě)故事。這塊內(nèi)容會(huì)在下一個(gè)章節(jié)討論。 所以我們開(kāi)始從這3個(gè)核心流程開(kāi)始細(xì)分梳理體驗(yàn)?zāi)繕?biāo)。

3.1 找故事

核心體驗(yàn)?zāi)繕?biāo)：

1.讓用戶快速找到內(nèi)容并判斷是否值得閱讀。

2.讓用戶感覺(jué)這個(gè)App精致精美

對(duì)于第一個(gè)目標(biāo)，我們首先對(duì)信息進(jìn)行了分級(jí)。一級(jí)信息包括：封面，畫(huà)報(bào)名稱。 二級(jí)信息包括作者，熱度，互動(dòng)信息。通過(guò)這種方式，足以幫助用戶快速判斷內(nèi)容是否值得閱讀。

一級(jí)信息：封面，畫(huà)報(bào)名稱。 二級(jí)信息：作者，熱度，互動(dòng)信息

根據(jù)“Aesthetic－Usability Effect（即美即好用效應(yīng)）”注3。在處理第二個(gè)目標(biāo)時(shí)，通過(guò)優(yōu)化視覺(jué)表現(xiàn)來(lái)完成。為了圖片與文字信息不干擾，使用蒙層遮罩；為了保持界面干凈信息傳達(dá)的清晰度，選用了蘭亭細(xì)黑的字體；畫(huà)報(bào)之間使用超細(xì)間距排版；由于圖片外顯會(huì)裁減，我們嘗試讓開(kāi)發(fā)將人臉定位在封面中心進(jìn)行裁剪。

畫(huà)報(bào)封面，通過(guò)視覺(jué)讓故事精致，同時(shí)更容易理解

3.2 讀故事

核心體驗(yàn)?zāi)繕?biāo)：

1.沉浸式閱讀體驗(yàn)

2.針對(duì)不同場(chǎng)景，營(yíng)造符合的故事氛圍

首先是“沉浸式閱讀體驗(yàn)”。在展示樣式上，我們當(dāng)時(shí)考慮了兩種樣式，一種是類(lèi)似書(shū)籍，左右翻動(dòng)瀏覽?？紤]左右翻動(dòng)的原因是起源于我們的生活認(rèn)知，左右翻動(dòng)的方式可以讓用戶輕松感覺(jué)“我在閱讀一篇書(shū)／故事”。另一種是自上而下的流式排版方式。相比于左右滑，向下滑動(dòng)體驗(yàn)比較順暢，不會(huì)有明顯的卡頓感。最終我們選擇了后者，原因在于較低的編輯成本。對(duì)用戶而言，上下滑動(dòng)更容易排版。從信息呈現(xiàn)的角度來(lái)講，流式展示更容易體現(xiàn)故事更容易表現(xiàn)出故事的開(kāi)始，情節(jié)發(fā)展過(guò)程，乃至高潮，最后結(jié)尾的節(jié)奏感，呼應(yīng)上文提到的觀影體驗(yàn)。

自上而下的流式閱讀，相比于左右滑，向下滑動(dòng)體驗(yàn)更為順暢，不會(huì)有明顯的卡頓感。

2.針對(duì)不同場(chǎng)景，營(yíng)造更符合內(nèi)容的故事氛圍

針對(duì)如果營(yíng)造一個(gè)合適觀看故事畫(huà)報(bào)的氛圍。我們的解決方案是使用模板。對(duì)模板的定義類(lèi)似于影院環(huán)境和座位等對(duì)觀眾的影響，通過(guò)視覺(jué)的表現(xiàn)來(lái)營(yíng)造氛圍感。我們梳理出用戶大部分的照片場(chǎng)景，有針對(duì)性的進(jìn)行制作。在第一期，根據(jù)QQ空間用戶的照片上傳類(lèi)型，我們大概梳理出旅行，攝影，親子，追星，美食這幾類(lèi)主打方向?qū)δ０娴膰L試。

3.3 評(píng)故事

核心體驗(yàn)?zāi)繕?biāo)：

1.不影響讀故事體驗(yàn)

2.快速被用戶感知，快速贊評(píng)分享

評(píng)故事的設(shè)計(jì)目標(biāo)比較難處理，因?yàn)樗麄兪窍嗷_突的。既不能影響快閱讀，又要快速被感知到。所以我們的設(shè)計(jì)方案是：當(dāng)剛進(jìn)入故事詳情頁(yè)時(shí)，使用動(dòng)畫(huà)，將故事評(píng)論框從底部彈出，通過(guò)動(dòng)畫(huà)吸引用戶注意并告訴他：“贊和評(píng)論在這里”。文章《Animation：Form Cartoons to User Interface》注4，詳細(xì)論述了通過(guò)動(dòng)畫(huà)的表現(xiàn)手法來(lái)突出某些細(xì)節(jié)的方法。

當(dāng)用戶閱讀故事時(shí)，故事評(píng)論框自動(dòng)收起，當(dāng)上滑時(shí)，自動(dòng)出現(xiàn)。通過(guò)這種方式，達(dá)到既不影響讀故事體驗(yàn)，又快速被用戶感知的目標(biāo)。

當(dāng)剛進(jìn)入故事詳情頁(yè)時(shí)，使用動(dòng)畫(huà)，將故事評(píng)論框從底部彈出，通過(guò)動(dòng)畫(huà)吸引用戶注意并告訴他：“贊和評(píng)論在這里”

4. 誰(shuí)來(lái)寫(xiě)故事（WHO）

我們的核心用戶主要包括2類(lèi)人，達(dá)人和普通用戶。對(duì)于達(dá)人，我們的目標(biāo)是提高社區(qū)UGC的質(zhì)量。所以我們簽約了網(wǎng)絡(luò)攝影師。對(duì)于這些網(wǎng)絡(luò)攝影師來(lái)說(shuō)，多一個(gè)平臺(tái)曝光對(duì)他們而言有價(jià)值的。

對(duì)于用戶寫(xiě)故事的痛點(diǎn)在于，寫(xiě)故事幾乎等于寫(xiě)文章，門(mén)檻高。所以如何降低門(mén)檻是我們的核心目標(biāo)。在畫(huà)報(bào)上傳流程設(shè)計(jì)中，我們把流程控制在3步，盡量降低編輯門(mén)檻。同時(shí)提供模板來(lái)一鍵美化。

5. 總結(jié)

通過(guò)不斷細(xì)化目標(biāo)，我們發(fā)現(xiàn)畫(huà)報(bào)的核心體驗(yàn)和電影幾近一致，都在于打造沉浸式的體驗(yàn)，包括前期沉浸感鋪墊；之后深入淺出的理解故事，與作者產(chǎn)生共鳴；最后進(jìn)行吐槽和討論。這種體驗(yàn)的目標(biāo)理論上可以復(fù)用在所有以長(zhǎng)內(nèi)容為核心的產(chǎn)品中。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里