網頁設計(ji)師總在尋找更多的創意和方法來提升用戶體驗，所以他們也會越來越多地在設計中運用講故事的方法。

當設計師將故事(shi)變成一個網站的(de)時候，這種引人入勝的(de)體驗也(ye)能(neng)更加有效地吸引用(yong)戶。講故事(shi)的(de)形式有很多，也(ye)可以橫跨多種不同的(de)設備(bei)，運用(yong)在不同類型的(de)網站中。

用社(she)交媒體講故(gu)事

現如今，社(she)交媒(mei)體(ti)和(he)網頁設計之間的(de)(de)關系越(yue)來(lai)越(yue)緊(jin)密。即(ji)便(bian)是很多大(da)型企業也將社(she)交媒(mei)體(ti)的(de)(de)按鈕放(fang)在每個頁面上，這(zhe)使(shi)得分(fen)享和(he)發布信息更加簡單快捷。這(zhe)也 使(shi)得品牌的(de)(de)用戶和(he)粉絲更便(bian)捷地(di)同產品供(gong)應(ying)商(shang)和(he)服務供(gong)應(ying)商(shang)溝通了。社(she)交媒(mei)體(ti)讓品牌可以將產品以講故事(shi)的(de)(de)方式推向市場，俘獲忠實(shi)的(de)(de)顧客和(he)用戶，而社(she)交媒(mei)體(ti)可以以多樣(yang)的(de)(de)形式傳(chuan)遞出品牌的(de)(de)激情，達(da)成目的(de)(de)，或者炒作(zuo)。

下面以Tommy-Hilfiger的Facebook頁面為例。這個美國潮牌的Facebook頁面有著870萬粉絲，如此眾多的粉絲都是Hilfiger品牌故事的忠實 聽眾。Hilfiger在頁面上分享設計、名人合作伙伴的照片和新聞以及各種宣傳活動，圖示通過圖片、視頻、文字等多種形式傳遞給用戶，引人入勝。

使用圖片講故(gu)事(shi)

有(you)時候，簡單而不張揚的圖片可以(yi)更(geng)(geng)好地(di)講述一(yi)個故(gu)事。一(yi)圖勝千言這句(ju)話沒有(you)錯，人本身是視覺動物，圖片信(xin)(xin)息(xi)更(geng)(geng)容易被吸收，所以(yi)合理地(di)運用圖片語(yu)言，可以(yi)更(geng)(geng)加有(you)效地(di)傳達信(xin)(xin)息(xi)。

LinkedIn的(de)(de)(de)注冊頁(ye)面就(jiu)很好的(de)(de)(de)說(shuo)明了(le)(le)這(zhe)一(yi)點(dian)。當你打開注冊頁(ye)面的(de)(de)(de)時候(hou)，左側(ce)的(de)(de)(de)用(yong)戶小頭像是極具目的(de)(de)(de)性的(de)(de)(de)，它向用(yong)戶展(zhan)示了(le)(le)網站(zhan)(zhan)用(yong)戶的(de)(de)(de)多(duo)樣性，并且傳遞出一(yi)個(ge)信(xin)息(xi)：這(zhe)個(ge)網站(zhan)(zhan)真(zhen)正是適合每個(ge)人(ren)的(de)(de)(de)。這(zhe)些照片中(zhong)的(de)(de)(de)人(ren)，種(zhong)族背景(jing)不(bu)盡相同(tong)，有男(nan)有女，不(bu)包(bao)括老年人(ren)，并且每個(ge)人(ren)看起(qi)來(lai)自(zi)信(xin)而(er)快樂。哪怕是不(bu)明白(bai) 社交(jiao)網絡的(de)(de)(de)人(ren)也能夠(gou)通(tong)過這(zhe)個(ge)簡單(dan)的(de)(de)(de)信(xin)息(xi)了(le)(le)解到這(zhe)個(ge)星球(qiu)上來(lai)自(zi)不(bu)同(tong)地域不(bu)同(tong)背景(jing)的(de)(de)(de)人(ren)正匯聚于此，使(shi)用(yong)共同(tong)的(de)(de)(de)服務一(yi)起(qi)交(jiao)流 ，甚至業務往來(lai)。

使用插(cha)畫(hua)來(lai)講故(gu)事

同圖片一樣，用插(cha)畫來講述故事也(ye)有著(zhu)不錯的效果(guo)。作(zuo)為視覺上的輔助，插(cha)畫會讓(rang)用戶更(geng)加易于理解品(pin)牌故事。比起(qi)照片的簡單直白，插(cha)畫的表(biao)達方(fang)式更(geng)多，它可以以抽象(xiang)的方(fang)式來表(biao)達，也(ye)可以更(geng)以更(geng)加寫(xie)實的方(fang)式來講述。

在Evernote Clipper的(de)(de)網頁中，我們看(kan)(kan)到了(le)使用(yong)了(le)偏向寫實手法的(de)(de)故事(shi)闡述方式。插畫與文字結合在一起，告訴用(yong)戶(hu)Web Clipper是如(ru)何工作的(de)(de)，看(kan)(kan)起來像故事(shi)書(shu)一樣簡單直白。

使用吉(ji)祥物來講故(gu)事

說道吉祥物，滑稽(ji)可愛幽默賣萌是(shi)它們的優勢。當一個(ge)公司機構或者網站擁有吉祥物的話(hua)，用(yong)它來同用(yong)客戶進(jin)行交流是(shi)一個(ge)簡單方便的方法，可以通(tong)過它以幽默的方式向(xiang)客戶來傳遞品牌價值，講(jiang)述品牌故(gu)事，比如(ru)MailChimp。

MailChimp有個非(fei)常有名的(de)吉祥物，名叫Freddie，它(ta)在傳(chuan)遞(di)企(qi)業(ye)理念和講述(shu)企(qi)業(ye)故事上有著極大的(de)貢獻(xian)。MailChimp不論(lun)是在業(ye)務還是在生活上都奉行(xing)輕松而(er)非(fei)嚴肅(su)的(de)理念，而(er)Mailchimp在描述(shu)Freddie的(de)時候，字里行(xing)間也能看出(chu)這家企(qi)業(ye)的(de)精神(shen)。

你(ni)還可以(yi)從Freddie不同的頭(tou)像上感受到(dao)(dao)這一(yi)點，不論是它微笑、眨(zha)眼還是用耳朵(duo)夾著鉛筆的時候，都(dou)通過表(biao)情傳遞著正能(neng)量，你(ni)可以(yi)直(zhi)觀地(di)體(ti)會到(dao)(dao)這個品牌形(xing)象接地(di)氣的設定，從容而有(you)風度。現在(zai)，你(ni)幾乎(hu)可以(yi)在(zai)MailChimp所有(you)的頁面上看(kan)到(dao)(dao)各種型態的Freddie。

使用視差效果講(jiang)故事(shi)

雖然國內網(wang)(wang)站運用的還不夠多(duo)，但(dan)是(shi)視(shi)差網(wang)(wang)站已經存在好(hao)幾年了，并(bing)且目前仍(reng)然處于(yu)潮流巔峰。而流行(xing)本身(shen)很可能就(jiu)證(zheng)明(ming)了，這(zhe)種(zhong)網(wang)(wang)站設(she)計本就(jiu)是(shi)最簡單有(you)效的講故事的方式(shi)。在使用視(shi)差滾(gun)動設(she)計的網(wang)(wang)站中，一(yi)直向下滾(gun)動瀏覽的方式(shi)就(jiu)是(shi)一(yi)個不斷透露更多(duo)信息的過程，就(jiu)像剝洋蔥(cong)一(yi)樣，它本質(zhi)上和講故事非常接近。

以The Royal British Legion為例，這(zhe)個網站就是(shi)通(tong)過(guo)視(shi)差(cha)滾動(dong)的(de)方式想你(ni)展示了捐助是(shi)如何全程使(shi)用(yong)過(guo)來的(de)必要(yao)信(xin)息。當(dang)你(ni)向下滾動(dong)的(de)時(shi)候，這(zhe)些充滿活力的(de)故(gu)事就通(tong)過(guo)視(shi)差(cha)特效一一展現在你(ni)的(de)眼前，你(ni)會看到軍團為退伍老兵所提供的(de)各(ge)種各(ge)樣有益的(de)服務。

使用過個性化(hua)來講故事

個性(xing)化是當代(dai)網頁設計(ji)中最重要的(de)(de)(de)因(yin)素之一(yi)。個性(xing)化是有效的(de)(de)(de)，而且是有力的(de)(de)(de)，當你為企業和(he)品(pin)(pin)牌尋求個性(xing)化的(de)(de)(de)時(shi)候，它就(jiu)是拉近企業/品(pin)(pin)牌和(he)客(ke)戶之間(jian)距離的(de)(de)(de)神奇工具，因(yin)為當你使(shi)用個性(xing)化的(de)(de)(de)時(shi)候，訪客(ke)、粉絲和(he)客(ke)戶會與這個品(pin)(pin)牌產生認同感和(he)共鳴，如此一(yi)來，自然就(jiu)會產生更大的(de)(de)(de)利潤空間(jian)和(he)可能性(xing)。

個(ge)性化(hua)讓你(ni)的(de)(de)品牌講述它偉大(da)的(de)(de)故事。就以Pet Relocation為(wei)例子，在(zai)這個(ge)網站(zhan)的(de)(de)團(tuan)隊(dui)介紹頁(ye)(ye)(ye)面(mian)中(zhong)，每個(ge)成(cheng)員都倍受矚(zhu)目(mu)，這與(yu)傳(chuan)統(tong)的(de)(de)“關(guan)于我們”頁(ye)(ye)(ye)面(mian)有著巨大(da)的(de)(de)差別。你(ni)會在(zai)頁(ye)(ye)(ye)面(mian)中(zhong)看到(dao)團(tuan)隊(dui)中(zhong)每個(ge)人、每個(ge)寵物(wu)的(de)(de)微笑著的(de)(de)頭像，當你(ni)鼠標移(yi)動(dong)到(dao)頭像上的(de)(de)時候(hou)，頭像會變成(cheng)更(geng)加(jia)個(ge)性化(hua)的(de)(de)樣子——更(geng)萌、更(geng)有趣。而這種設計正是要告訴訪(fang)客，這家機(ji)構的(de)(de)企業文化(hua) 是講究放(fang)松和自然的(de)(de)。

結語

在(zai)(zai)人(ren)類還生活在(zai)(zai)洞穴中的(de)(de)時候，墻壁上的(de)(de)繪畫就在(zai)(zai)講(jiang)(jiang)(jiang)述著(zhu)部落的(de)(de)故(gu)事(shi)。對人(ren)類而(er)言，講(jiang)(jiang)(jiang)故(gu)事(shi)本就是一個自然地傳遞信息(xi)的(de)(de)方(fang)式，直(zhi)到今天，它也依(yi)然是網(wang)頁(ye)設計(ji)中最重要(yao)的(de)(de)方(fang)式之一。你會發現，不僅越來(lai)越多的(de)(de)企業和品牌(pai)機構都會采用講(jiang)(jiang)(jiang)故(gu)事(shi)的(de)(de)方(fang)式來(lai)呈現自己，普通的(de)(de)網(wang)站設計(ji)中也會在(zai)(zai)越來(lai)越的(de)(de)細節(jie)中，融入故(gu)事(shi)性。