視覺(jué)性敘述是一個(gè)能讓設(shè)計(jì)師和用戶建立起情感聯(lián)系的有益工具恩尾。
本文內(nèi)容主要來(lái)自于國(guó)外關(guān)于Visual Storytelling的文章抛寝，并結(jié)合了自己的一點(diǎn)小感受弯蚜。
原文作者Twitter惕鼓，Justinmind
通過(guò)下來(lái)的內(nèi)容蟆肆，我們將探索視覺(jué)表現(xiàn)是怎樣敘述一項(xiàng)工作的流程期揪，同時(shí)尋找出能更好講述出我們的設(shè)計(jì)的視覺(jué)性敘述方式掉奄。
從生理上講，通過(guò)一系列的視覺(jué)表現(xiàn)形式來(lái)進(jìn)行設(shè)計(jì)講述凤薛，源自我們大腦中處理圖片信息的運(yùn)行機(jī)制姓建。用戶體驗(yàn)設(shè)計(jì)師的工作就是幫助用戶建立和培養(yǎng)一套能夠讓用戶更容易接受信息并做起正確決定的使用流程。
1.視覺(jué)性敘述（Visual Storytelling）具體指什么缤苫？
最簡(jiǎn)單的定義：視覺(jué)性敘述就是一種利用圖片信息（例如各種插畫速兔、照片、圖像或者視頻）在用戶的使用過(guò)程中講述一個(gè)完整的故事活玲，向用戶傳達(dá)出一個(gè)視覺(jué)上容易感知的使用流程涣狗。
2.視覺(jué)性敘述背后的科學(xué)道理
人類是視覺(jué)性物種：
· 人類的大腦有專門處理視覺(jué)信息的微調(diào)機(jī)制谍婉，相比于觸覺(jué)和聽(tīng)覺(jué)，大腦皮層上的大部分處理器都在進(jìn)行對(duì)視覺(jué)信息的處理镀钓。
· 大腦能更快速的鑒定出圖片穗熬。
· 大多數(shù)人通過(guò)視覺(jué)性輸入能夠更容易接受信息。
· 人們更容易通過(guò)圖片記住信息丁溅。
用戶通過(guò)視覺(jué)獲取信息時(shí)唤蔗，大多數(shù)人都采用快速瀏覽的閱讀方式，通過(guò)塊狀的信息掃描輸入窟赏。研究表明妓柜，大腦皮層的視覺(jué)處理機(jī)制能夠不聽(tīng)從大腦中的決策機(jī)構(gòu)，“自主”作出一些決策饰序。
3.人眼如何識(shí)別網(wǎng)頁(yè)的布局
人們?yōu)g覽網(wǎng)頁(yè)的典型視覺(jué)模式有兩種：Z模式和F模式（基于從左到右的瀏覽習(xí)慣）
在兩種模式中领虹，瀏覽順序都是從左到右，從上到下求豫，因此將展示內(nèi)容和視覺(jué)敘述合理化分布呈現(xiàn)塌衰，讓用戶更輕松的閱讀就顯得尤為重要。
F模式和Z模式的設(shè)計(jì)技巧：
· 將主要內(nèi)容置于頁(yè)面左邊和中間
· 每一行不超過(guò)75個(gè)字符
· 限制字符的線長(zhǎng)
· 文字之間可穿插一些圖片蝠嘉、標(biāo)題或者其他矚目性的元素
· 整塊整塊的文本會(huì)引起讀者的反感最疆，而谷歌則更傾向于采用長(zhǎng)文本框，因此設(shè)計(jì)師需要找到一個(gè)中立妥協(xié)的方案滿足大部分用戶的使用習(xí)慣
· 當(dāng)用戶向下滑動(dòng)頁(yè)面蚤告，需要確保下一個(gè)可見(jiàn)元素出現(xiàn)在頁(yè)面底部
4. 提高用戶體驗(yàn)的視覺(jué)敘述方式
良好的視覺(jué)敘述方式能夠幫助用戶更順序更清晰的明白整個(gè)使用流程和瀏覽順序努酸，那么什么時(shí)候需要改善頁(yè)面的視覺(jué)敘事方式？
·想要用戶繼續(xù)深入閱讀
·想要用戶點(diǎn)擊這個(gè)按鈕
·想要用戶將聯(lián)系方式留下來(lái)
·想要用戶信任當(dāng)前頁(yè)面（網(wǎng)站）
以下是9個(gè)提高用戶體驗(yàn)的視覺(jué)敘述方式：
1.采用能夠讓用戶感到愉悅的內(nèi)容
需要在專業(yè)性和普適性知識(shí)間尋求一個(gè)平衡杜恰，
2.為用戶挑選正確的故事背景
明確用戶目的获诈，用戶是來(lái)獲取知識(shí)的，還是來(lái)購(gòu)買產(chǎn)品的心褐？
3.讓故事保持簡(jiǎn)單
應(yīng)該讓用戶能在一句話之內(nèi)獲取到他們想要的產(chǎn)品概要
4.適當(dāng)增加交互舔涎、動(dòng)畫、或者視頻等
如果有必要逗爹，盡可能增加展示內(nèi)容中的交互亡嫌、圖像、動(dòng)畫掘而、或者視頻挟冠，因?yàn)檫@些元素更容易觸發(fā)用戶的情感反應(yīng)，能夠在用戶的記憶中存留更多的時(shí)間
5.采用積極樂(lè)觀的視覺(jué)引導(dǎo)元素
視覺(jué)性敘述中應(yīng)該避免運(yùn)用讓用戶產(chǎn)生消極情緒的圖片
6.不要害怕運(yùn)用一些全新的元素
即使為了保持品牌的視覺(jué)統(tǒng)一性袍睡，也要嘗試運(yùn)用新的視覺(jué)敘述風(fēng)格知染，比如大自然中的獲取的靈感元素
7.字體運(yùn)用和視覺(jué)性敘述風(fēng)格應(yīng)該保持一致
字體的選擇和應(yīng)用方法會(huì)直接影響到講述的視覺(jué)故事，就像襯線字體向用戶傳達(dá)了可靠性斑胜，而厚實(shí)的字體則會(huì)讓人感到親切
8.真實(shí)的元素有時(shí)候更可靠控淡，避免過(guò)度使用死板的圖片或視頻
用戶一眼就能看到那些非真實(shí)的圖片色瘩，非真實(shí)的圖片更多時(shí)候帶給用戶的是對(duì)當(dāng)前頁(yè)面（網(wǎng)站）的不真實(shí)感和不信任感，一旦用戶覺(jué)得設(shè)計(jì)缺少真實(shí)感逸寓，再好的視覺(jué)性敘述也是做無(wú)用功
9.尊重文化差異性
一種顏色或者一種元素在不同地區(qū)將會(huì)有不同的解讀
5. 將視覺(jué)性敘述融入到用戶體驗(yàn)設(shè)計(jì)中
從一開(kāi)始的制定用戶體驗(yàn)戰(zhàn)略的時(shí)候居兆，就應(yīng)該把視覺(jué)性敘述放在優(yōu)先位置考慮。
1.當(dāng)你考慮用戶的行為模式的時(shí)候竹伸，你需要預(yù)測(cè)用戶的行為來(lái)并且滿足用戶的期望值泥栖。
2.當(dāng)為滿足不同的產(chǎn)品利益相關(guān)者的需求而進(jìn)行設(shè)計(jì)平衡和調(diào)整的時(shí)候，你需要讓他們理解你為他們創(chuàng)造的視覺(jué)性敘述的重要性勋篓。
3.從始至終貫穿一套完整的視覺(jué)性敘述吧享。
6. 登陸性頁(yè)面的視覺(jué)性敘述
登陸性頁(yè)面，像網(wǎng)站主頁(yè)譬嚣，為用戶和產(chǎn)品品牌之間建立聯(lián)系搭建了橋梁钢颂，它們能夠增強(qiáng)品牌認(rèn)知性，并且?guī)椭谟脩舻氖褂弥屑訌?qiáng)他對(duì)當(dāng)前產(chǎn)品的視覺(jué)性敘述的認(rèn)知拜银。
因此殊鞭，主頁(yè)或者其他登陸性頁(yè)面應(yīng)該足夠簡(jiǎn)單明了，避免過(guò)多的導(dǎo)航選項(xiàng)尼桶，讓用戶直接明白產(chǎn)品的價(jià)值核心操灿。運(yùn)用“Z”模型和“F”模型，相應(yīng)的安排你的視覺(jué)性敘述結(jié)構(gòu)泵督，將主要內(nèi)容放置在用戶期望瀏覽到的地方趾盐，同時(shí)引導(dǎo)用戶來(lái)進(jìn)行內(nèi)容的深入了解，總而言之小腊，通過(guò)合適的視覺(jué)性敘述來(lái)讓用戶使用的輕松救鲤，愉悅和安心。
最后總結(jié)一波
當(dāng)你想要提高網(wǎng)頁(yè)設(shè)計(jì)的用戶體驗(yàn)時(shí)秩冈，考慮優(yōu)化產(chǎn)品的視覺(jué)性敘述是一個(gè)很好的辦法本缠，良好的視覺(jué)性敘述能夠讓用戶有一個(gè)持續(xù)性的情感體驗(yàn)和記憶。
