可以丟掉PPT了，讓AI幫你做滾動敍事頁面

前排受到朋友白豆記低我一次地鐵救人嘅經歷畀我睇咗個好靚嘅網頁，用嚟解釋乜嘢係HTML 。佢唔係嗰種被動式、直接話你知 HTML 係乜，而係互動式，你可以喺網頁㩒掣睇一個個概念，仲可以做問答，成個過程等於令用戶主動參與。所以就由佢嗰度偷咗呢個方法返嚟，佢話畀我知，呢樣嘢叫做滾動敍事，於是我走去了解嚇。

現學現賣一下，乜嘢係滾動敍事呢？顧名思義，就係將碌嘅互動和同敍事嘅內容結合埋一齊嘅網頁展示方式。

典型例子就係蘋果嘅官網，佢每個版面都跟呢種設計——碌即互動，用戶每次向下碌，視覺元素會隨住變化，內容好似畫卷咁逐步展開，同時每格只講一件事，令人覺得個故事不斷推進。

所以呢種敍事對用戶嚟講會覺得好親切，而且每版只講一件事，可以令用戶好容易感受到個故事逐步向前推進。

睇嚇我上星期整嗰個「乜嘢叫 Skill」嘅滾動敍事頁面。

首先我透過一段互動演示，展示咗冇 Skill 嘅時候，我係點完成工作，呢度解釋咗點解我需要 Skill 。第二部分介紹咗 Skill 嘅主要構成，你㩒文件清單入面每個文件，就可以互動咁睇內容，後面仲出咗套選擇題測驗題，可以幫手判斷咩場景需要 Skill，加深理解。

最後，知道咗乜嘢係 Skill，就要知道點整，我喺裏面模擬咗同 AI 對話嘅動態互動，等 AI 幫我生成 Skill。

其實好簡單，你直接同 AI 講，幫我做個滾動敍事嘅 HTML 頁面就得喇，AI 完全明呢樣嘢係乜。

呢個就係我最近探索出嚟嘅好玩嘢，大家可以去試嚇，如果整咗好玩嘅嘢，都可以喺留言區分享。

前段時間受到朋友白豆記一次我的地鐵救助給我展示了一個非常酷炫的網頁，用來解釋什麼是HTML 。它不是那種被動式的、直接告訴你什麼是 HTML，而是互動式的，你可以在網頁點擊查看一個個只是概念，還可以做問答，整個過程相當於讓用戶主動的參與進來。所以就從他那裏偷來了這個方法，他告訴我，這玩意叫做滾動敍事，於是我就去了解了下。

現學現賣一下，什麼是滾動敍事呢？從名字就能看出來，它是把滾動的交互和敍事的內容結合在一起的網頁展示方式。

典型的例子就是蘋果的官網，它的每個頁面都遵循這樣的設計——滾動即交互，用戶每次向下滾動，視覺元素會隨之變化，內容像畫卷一樣逐步展開，同時每幀只講一件事情，讓人感覺故事在不斷推進。

所以這種敍事對於用戶來講它會感覺的非常的友好，就是而且它的它的每一次一個頁面，它只講一一個事情，就是可以讓用戶就是很容易感受到這個故事在逐步的去往下去推進。

來看一下我上週做的這個"什麼叫 Skill"的滾動敍事頁面。

首先我通過一段交互演示，展示了沒有 Skill 的時候，我是怎麼完成工作的，這裏解釋了我為什麼需要做 Skill 。第二部分介紹了 Skill 的主要構成，你點擊文件列表中的每個文件，就可以帶交互地查看內容，後面還給大家出了套選擇題，可以輔助判斷什麼場景需要 Skill，加深理解。

最後，知道了什麼是 Skill，就要知道怎麼做，我在裏面模擬了和AI對話的動態交互，讓AI幫我生成Skill。

其實非常簡單，你直接對AI說，幫我做個滾動敍事的 HTML 頁面就完事了，AI 完全明白這個東西是什麼。

這就是我最近探索出來的一個好玩的東西，大家可以去嘗試一下，如果做出了好玩的東西，也可以在評論區留言分享。