敘事型網站是什麼？哪些店適合用它說故事

一般的網站像一本型錄：首頁放大圖和一句標語，往下是服務、價格、聯絡方式，每一段各自獨立，讀者跳著看也沒關係。敘事型網站比較像一部很短的紀錄片：一件事從開頭講到結尾，客人看完，記得的是你怎麼做事。

這篇想說清楚三件事：它到底是什麼、哪些店用了會加分、哪些情況其實不必用。

敘事型網站在做什麼

「敘事型」的意思是，網站的畫面本身在講故事：東西從哪裡來、怎麼做出來、店在什麼地方。一顆咖啡豆從產地到烘成深褐色，熱水淋下去，杯子裡的顏色一層一層出現，這些照順序排在讀者眼前，看完就知道這杯咖啡是怎麼來的。

做法不只一種。可以做成跟著捲動換畫面的段落：手指往上滑一點，豆子的顏色就深一點；也可以用照片、插圖和版面排出順序，一格接一格看下去。用哪一種，看故事和手上的素材決定，敘事型網站不一定要動。

這和在網站上放一支影片不一樣。影片是我們決定節奏，讀者只能看或不看；網頁上的畫面由讀者自己看，想多看一下就停住，想快點看完就往下看。而且文字、按鈕、價格都還是網頁上真的字，可以選取、可以被搜尋到，也可以被螢幕報讀軟體念出來。

一個敘事型網站，通常會有一到兩段「招牌段」：把最值得看的那段過程，用畫面照順序講完，其他段落則是一般的排版。不是每一段都在講故事，整頁都在演反而讓人累，也記不住重點。

判斷的方法很簡單：你的東西有沒有「過程」、「地方」或「來歷」可以講？

有過程的：烘豆、手工麵包、釀醬油、做陶、修鞋、裁縫。客人平常看不到你在店裡做了什麼，網站可以帶他看一遍。例如一間咖啡店，可以讓一顆豆子從產地、烘焙到萃取，一路講到最後那杯咖啡，再接上「來店裡喝一杯」的按鈕。
有地方的：民宿、露營區、茶園、老街上的小店。讀者還沒到現場，網站可以帶他走一段路，從巷口走到門口，從大廳走到房間的窗邊。
有來歷的：老店、產地品牌、傳了幾代的手藝。東西從哪裡來、店是怎麼開起來的，本身就是一條現成的故事線。
要讓人記得的：新品牌、要和同類區隔的店。客人比較了五間差不多的店，最後記得的常常是那個讓他「看了一段故事」的網站。

這些店的共同點是：客人選擇你，不只是因為價格或位置，而是因為喜歡你做事的方式。敘事型網站就是把「做事的方式」放到網站上。

故事不是講越多越好。有幾種情況，一般的網站反而更好用：

客人只想快點查資料。例如診所的門診時間、餐廳的訂位、工廠的規格表。讀者有明確的目的，要的是三秒內找到答案，這時候每多一段故事都是多一道關卡。
內容很多、常常更新。菜單每週換、商品幾十上百件、每天發消息。敘事的畫面是為一個固定的故事設計的，內容一直變，畫面就得跟著重做。這類需要的是好整理、好更新的架構，也就是多頁網站加後台。
還沒有故事素材。沒有照片、沒有過程可以拍，硬做出來的畫面只會是一層空殼。這時候可以先把一頁式網站做好，等素材累積了再加故事段。

有些店兩種需求都有：既要讓人記得，也要被搜尋到、常常更新菜單。這就是我們把方案分成「經營」和「故事」兩條線，又可以合成完整版的原因。

敘事型網站做得好，讀者會覺得「好舒服」；做不好，讀者會覺得「被綁架」。我們做的時候，會守住這幾條線：

第一個畫面就要看得懂你是誰。店名、賣什麼、主要的按鈕，不用捲動就要看得到。故事放在旁邊或後面，不能擋在前面。
有動畫的段落不能把人卡住。招牌段如果做成跟著捲動換畫面，讀者往下滑，頁面就要往下走，不能被強迫看完一段才放行。畫面可以停在原地換幾次，但停的時間要短，而且隨時可以繼續往下。
手機優先。很多客人是在手機上、通勤或排隊時點進來的。桌機上漂亮的橫向畫面，到手機要重新安排，不能只是縮小。
動畫是加分，不是門票。有些人在手機設定裡開了「減少動態效果」，有些舊瀏覽器不支援比較新的動畫技術。這些人看到的應該是一個排版完整、內容一字不少的網站，只是畫面不動而已。
字要是真的字。標題、價格、營業資訊都用網頁文字，不要做成圖片或影片裡的字。這樣搜尋引擎讀得到，讀者也可以放大、複製。

如果你在想自己的店適不適合，可以先回答一個問題：客人第一次點進你的網站，你最希望他看到哪一個畫面？

如果答案是一張照片加一句話，一頁式網站就夠了；如果答案是「我想讓他看到我們怎麼做」，那就是一段故事，可以考慮故事版。手機版與 SEO 的做法，和依方案排好的範例網站，整理在敘事型網站設計。

想看實際的樣子，可以到作品集依類別挑幾個範例網站看看；想知道各方案的差別，可以讀一頁式網站、經營版、故事版、完整版怎麼選。