創(chuàng)造富有故事性的網(wǎng)頁 你需要熟悉這7個維度

網(wǎng)站能承載多種多樣的內(nèi)容,但無論是哪種內(nèi)容,通常都會遵循一定的信息架構(gòu),在這其中,故事是很特別的一種類型,講故事,往往能以更敘事、更情感化的方式,將內(nèi)容傳遞給用戶。
一個好的故事,往往始于筆端,但是最終呈現(xiàn),還是要依靠精巧的設(shè)計。那么設(shè)計是如何講好故事的呢?今天的文章,為你分享一下創(chuàng)造故事的7個維度。
1、圖片
首先,想要講好故事,要通過設(shè)計在視覺上吸引用戶。這一切要從干凈清晰的視覺設(shè)計開始。壯美的圖片,有趣的插畫,驚艷的視頻,都會抓住用戶的注意力,并給予用戶第一印象。
在視覺上足夠突出的圖片,搭配以文案,一切開始擁有了畫面感,而故事因此而誕生。從照片到色彩,從文字到細節(jié),故事所傳達出來的信息和氣質(zhì),和整個視覺設(shè)計應(yīng)該是保持一致的,而好的故事,能夠帶著用戶一路走過來。
2、角色
當我們在設(shè)計網(wǎng)站的時候,常常會探討用戶本身和故事的角色。在網(wǎng)站的開發(fā)過程中,用戶所代表的身份,和呈現(xiàn)在用戶面前的角色,有著怎樣的關(guān)系,這是內(nèi)容和設(shè)計上需要探討的關(guān)鍵問題。
這個角色可以是一個貫穿整個設(shè)計是實體角色,也可以是被包含在視覺和文字內(nèi)容中的一種“氣質(zhì)”,或者“腔調(diào)”。
Freddie 公司旗下產(chǎn)品MailChimp 中所創(chuàng)建的視覺形象就是一只有趣的猴子,而這只猴子不僅僅是他們的LOGO,而且這個形象貫穿了整個設(shè)計,這個角色為整個產(chǎn)品作出了不小的貢獻:
·首先,這個形象和公司、產(chǎn)品的名稱相互呼應(yīng),也解釋了為什么叫MailChimp。雖然MailChimp 這個生造的詞匯會讓用戶感到迷惑,可是看到猴子的形象,他們能夠很快Get到這個命名的含義。
·這個形象還揭示出了這個公司的特色,有趣的設(shè)計和獨特的氣質(zhì)。
·猴子Freddie 本身就代表著故事,它是怎么來的?名字怎么起的?這個形象本身就自帶故事屬性。
3、互動
引導(dǎo)用戶與內(nèi)容進行互動,這是設(shè)計能帶來的重要價值之一。通過動效和行為召喚(CTA)讓用戶自然地注意到關(guān)鍵的內(nèi)容和重要的控件,引導(dǎo)用戶與之交互,這是為了促使用戶與內(nèi)容緊交互,參與到這個故事中來。
想要用戶參與到故事中來的另外一種方式則是視差滾動。它從視覺上鼓勵用戶持續(xù)地向下滾動,在保證體驗愉悅的同時,用動態(tài)而有趣的視覺設(shè)計,強化互動。
一個好故事并不需要做的太復(fù)雜。Humaan 就很直接的借助團隊照片和懸浮動效來講述故事,幫助訪客了解這個團隊的成員。這種設(shè)計簡單而有效。(注意懸浮狀態(tài)下每個成員姿勢和表情的變化,非常有意思)
4、游戲
故事本身的構(gòu)建可能是最麻煩的地方,相反,講述故事反而是簡單的事情。如果你不知道要如何呈現(xiàn)故事,那么不妨將它設(shè)計成一個簡單的游戲,為用戶提供一個有趣的聽故事的渠道。
而借助游戲講述故事的技巧在于,保持簡單和提供獎勵。不論是虛擬的成就徽章,還是優(yōu)惠券,你要讓用戶從中獲利,才能促進他們繼續(xù)聽取你的故事。
你所提供的游戲并不一定要像Pokemon Go 那樣有趣而好玩,Dropbox 通過完成任務(wù)獲得額外的云盤空間,一樣是非常有效的手段。Dropbox 所設(shè)定的任務(wù)多種多樣,有邀請好友,也有帳號鏈接郵箱,但是無論是哪種,都具有一定的游戲性,達成了一定有獎勵。許多忠誠的Dropbox 用戶都是這么一步一步過來的。
當然,對于不想玩這些游戲的用戶而言,直接付費一樣可以達成效果。你要讓用戶覺得,不論怎么玩,他們都是贏家。
5、微交互
如今的網(wǎng)頁和APP設(shè)計中,有著大量的動效和微交互。許多社交媒體都樂于使用微交互,因為它們簡單,并且能夠帶來優(yōu)秀的體驗。
微交互所帶來的有趣體驗為用戶創(chuàng)造出一個有趣的瞬間。每次保存設(shè)置,發(fā)送消息,登錄帳號,都會伴隨著好玩而微妙的微交互,以Instagram 中點贊的按鈕為例,用戶在嘗試過之后,對于這種交互會有的沉迷的感覺,樂此不疲。
有意義的微交互非常重要。就像上面所說的點贊,它是具有功能性的,它給整個產(chǎn)品的體驗帶來了明顯的提升。
6、敘述
故事的構(gòu)成大多不復(fù)雜,開頭,過程,結(jié)局,這三者是絕大部分的故事的三個基本環(huán)節(jié)。
如果你需要講述故事,這種公式化的結(jié)構(gòu)其實是最容易為用戶所接受的:
開頭:LOGO和標題。讓用戶知道這是什么網(wǎng)站,以及他們?yōu)槭裁磿谶@里。
過程:通過陳述內(nèi)容,展現(xiàn)特殊性。你的網(wǎng)站能給用戶帶來什么不一樣的東西?他們能預(yù)期一些什么東西?
結(jié)局:行為召喚,呼吁用戶購買,或者訂閱,等等。
7、簡單
雖然這可能會和上面的一條有所沖突,但是故事最好還是保持簡單。簡單的故事往往能更快的讓用戶Get到核心信息。
故事要能夠抓住用戶的注意力,給用戶留下好印象,讓他們成為回頭客。
UpStream 在自己的首頁上就做到了這一點——雖然用戶可以通過滾動,到中間部位查看更多的內(nèi)容,但是只需快速的掃視開頭,中間和結(jié)尾三個部分,就能搞清楚這個故事的全貌。通過視覺設(shè)計搭配文字,就能搭建出一個故事的梗概。此外,屏幕上的“參與”按鈕也相當?shù)?ldquo;誘人”。
簡單的故事往往更加有效。
結(jié)語
你在設(shè)計故事的時候應(yīng)該明白,你自己的故事往往更加動人。一個真實的故事,帶有你自己的烙印,講述出來才更容易觸動到用戶。
相關(guān)文章
- 簡單而片面的說,爬蟲就是由計算機自動與服務(wù)器交互獲取數(shù)據(jù)的工具,這篇文章主要想談?wù)勁老x獲取數(shù)據(jù)的這一部分。爬蟲請注意網(wǎng)站的Robot.txt文件,不要讓爬蟲違法,也不要2017-12-18
- 設(shè)計師可能無法減少App加載頁面的等待時間,但是可以讓等待時間變得有趣~,本文主要為大家淺淡App加載頁面的等待體驗設(shè)計技巧,有興趣的朋友們就來了解下吧2017-12-15
- 表單無論實在網(wǎng)頁設(shè)置中,還是在APP、應(yīng)用程序、軟件界面中都被廣泛運行,從而一個好的表單設(shè)計就非常重要了,本文主要為大家分享幾個交互好且轉(zhuǎn)化率高的表單設(shè)計技巧,有2017-11-20
適配iPhone X要點:十分鐘快速掌握iPhone X UI界面適配技巧
目前,第一批預(yù)約iPhone X手機的朋友們已經(jīng)拿到真機了,目前還沒有適配iPhone X的應(yīng)用運營商,相信都在加班加點適配呢,本文為大家?guī)砹诉m配iPhone X的要點,讓你十分鐘快2017-11-08如何讓網(wǎng)頁可讀性更強?善用F式布局設(shè)計增強網(wǎng)頁可讀性方法解答
雖然網(wǎng)頁排版方式千變?nèi)f化,但是布局方式通常都遵循著幾種常見的規(guī)則,F(xiàn)式布局式設(shè)計能夠增強網(wǎng)頁可讀性,這種說法是有跡可循的,本文就為大家介紹如何運用F式布局,有興趣2017-11-08- 在網(wǎng)頁的設(shè)計中表單都是界面中最常見,也是最重要的組件之一,對于設(shè)計師、前端和開發(fā)者而言,應(yīng)當對于表單的設(shè)計盡量多上心,讓它們更加易用,細致的設(shè)計對于用戶的體驗、2017-10-26
登錄頁面怎么設(shè)計更好?登錄頁面設(shè)計的15個心理學(xué)策略
有很多東西下意識地影響了我們的日常決策,這里面很多都是微妙的心理因素在起作用,大家都知道用戶體驗設(shè)計跟心理學(xué)相關(guān),甚至?xí)苯佑绊懏a(chǎn)品的轉(zhuǎn)化率,那么,登錄頁面怎么2017-10-10網(wǎng)站評論模塊怎么設(shè)計 10個關(guān)鍵點告訴你如何設(shè)計產(chǎn)品評論模塊
網(wǎng)站不僅內(nèi)容很重要,評論模塊同樣也很重要,那么,網(wǎng)站評論模塊怎么設(shè)計呢?對此,本文就為大家詳細介紹10個關(guān)鍵點告訴你如何設(shè)計產(chǎn)品評論模塊,有興趣的朋友們就來了解下2017-09-25網(wǎng)站導(dǎo)航設(shè)計怎么才是符合搜索引擎優(yōu)化?SEO網(wǎng)站導(dǎo)航建設(shè)技巧分享
搭建網(wǎng)站的任何細節(jié)都需要考慮到是否利于SEO優(yōu)化,在網(wǎng)站導(dǎo)航設(shè)計的過程中,我們應(yīng)該怎么樣進行操作才是符合搜索引擎優(yōu)化的呢?對此,本文就為大家進行簡單解答2017-09-21- 在做網(wǎng)站設(shè)計的過程當中,很多人可能會對于頁腳這個方面產(chǎn)生忽略,但是實際上在我們平時的使用下來的整體的分析數(shù)據(jù)表明,頁腳對于一個網(wǎng)站來說還是有非常重要的作用的,那2017-09-04