在移動應(yīng)用上故事怎么講才有逼格?

2015-11-6    用心設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

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

來源:莫貝網(wǎng)


bannner

“ 故事也許是人類最早的敘事方法。大多數(shù)人在童年時(shí),故事用來引導(dǎo)他們的行為,了解歷史文化和培養(yǎng)社會認(rèn)同感?!保璅orm Wikipedia

1.什么是故事(WHAT)

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

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

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

故事怎么講才有逼格?

古埃及金字塔中的壁畫。圖片來自 forum.china.com.cn

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

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

2.為什么要打造故事感(WHY)

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

故事怎么講才有逼格?

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

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

3.如何打造故事感(HOW)

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

一般來講,看電影有三個(gè)步驟:

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

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

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

故事怎么講才有逼格?

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

1.選影片>2.電影院觀影 >3.影評后感

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

1.找故事 >2.讀故事 >3.評故事

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

3.1 找故事

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

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

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

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

故事怎么講才有逼格?一級信息:封面,畫報(bào)名稱。 二級信息:作者,熱度,互動信息

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

故事怎么講才有逼格?

故事怎么講才有逼格?

畫報(bào)封面,通過視覺讓故事精致,同時(shí)更容易理解

3.2 讀故事

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

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

2.針對不同場景,營造符合的故事氛圍

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

故事怎么講才有逼格?

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

2.針對不同場景,營造更符合內(nèi)容的故事氛圍

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

故事怎么講才有逼格?

3.3 評故事

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

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

2.快速被用戶感知,快速贊評分享

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

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

故事怎么講才有逼格?

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

4. 誰來寫故事(WHO)

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

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

故事怎么講才有逼格?

5. 總結(jié)

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

參考資料

注1: Narrative. Form Wikipedia.https://en.wikipedia.org/wiki/Narrative

注2: Keen S. A theory of narrative empathy[J]. Narrative, 2006, 14(3): 207-236.

注3: Masaaki Kurosu & Kaori Kashimura. Apparent Usability vs. Inherent Usability: Experimental Analysis on the Determinants of the Apparent Usability. CHI’95 Conference Companion.

注4: Chang B W, Ungar D. Animation: from cartoons to the user interface[J]. 1995.

作者

Diawli 李榕
高級設(shè)計(jì)師,視覺設(shè)計(jì),來自社交用戶體驗(yàn)設(shè)計(jì)部(ISUX),主要負(fù)責(zé)畫報(bào)核心頁面輸出和整體風(fēng)格把控。
Xavieryuan 袁驍
設(shè)計(jì)師,交互設(shè)計(jì),來自社交用戶體驗(yàn)設(shè)計(jì)部(ISUX),主要負(fù)責(zé)畫報(bào)內(nèi)“找故事”模塊的體驗(yàn)設(shè)計(jì)和整體流程把控。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔