L.I.S.A. — Locomotive
加拿大設計工作室 Locomotive 用一個叫 L.I.S.A. 的虛擬對話角色取代傳統選單首頁,把整個官網變成一場一問一答的聊天。
- 1
把落落長的服務介紹頁改成一次只問一句話的對話式問答:每次只顯示一個問題配 2 到 4 個按鈕選項,使用者點選後才出現下一句
報價頁、客製化服務頁、需要先篩選訪客需求的著陸頁 - 2
回答完的上一句對話自動縮小、變淡並往上堆疊成可點擊的紀錄軌跡,點回去能修改先前的答案而不用整頁重填
多步驟表單、線上問卷、報名流程 - 3
導覽列文字滑過(hover)時做 0.2 秒左右的字母隨機打亂再定格效果,可用簡單的字元隨機替換或 Splitting.js 實作
個人作品集、設計工作室官網的導覽列
更多細節
為什麼紅
Awwwards 在 2026 年 9 月 16 日把它選為 Site of the Day,設計圈討論的重點是它整頁不做傳統的服務介紹版面,而是用類似聊天機器人的問答流程引導訪客(每次只丟一句話、給幾個按鈕選項讓你選),是 Locomotive 自家官網的形象作品,展現這間工作室在互動與動態網頁上的技術實力。
版面
整頁沒有多欄式排版,是單一置中的對話流:畫面中央大字顯示 L.I.S.A. 目前的提問,下方用像聊天選項的按鈕(不是打字輸入框)讓使用者點選回答;回答完,上一句對話會縮小、變淡,往上堆疊成可回頭點擊的紀錄軌跡,再露出下一句提問,模仿真人對話的節奏。畫面最上方是固定不動的 Header,左邊是 Locomotive® 的 Logo,中間是 Work / Agency / Careers / Store 導覽,右邊是「Let's talk」按鈕;畫面最底部常駐一條用 Three.js 畫的音波視覺化 canvas。手機版導覽會收進右上角的漢堡選單,點開後是全螢幕選單,底部附語言切換與地點資訊。
主題與配色
整體走黑白極簡風,主要文字色是 #000000、背景是 #FFFFFF(對話進行中的預設「lisa」主題)。網站另外準備了深色模式(背景 #000000、文字 #FFFFFF)以及兩組強調色主題:磚紅色背景 #DA382E、寶藍色背景 #312DFB 搭配白字 #FFFFFF,推測會依對話走到的分支切換背景色來區分情境或情緒。字體用系統無襯線字,不特別裝飾,靠文字本身的節奏與排版留白營造氣氛。
互動設計
- 進站有約 1.2 秒的黑底 Preloader,結束後 Logo 用 0.9 秒的縮放加淡入動畫(scale 0.9 到 1、透明度 0 到 1)登場,避免字體或版面跳動閃爍
- 導覽列連結與 Logo 滑過(hover)時文字會先隨機打亂重組幾次、再定格回原字的「shuffle」效果
- 核心是聊天機器人式的問答流程:每次只顯示一句提問與 2 到 4 個按鈕選項,不用打字,點選後上一句對話縮小變灰堆疊到上方,露出下一句提問
- 背景有可開關的環境音效(loop 播放),畫面上有 toggle sound 按鈕控制靜音與否
- 頁面底部有一條用 Three.js(WebGL canvas)畫的動態音波視覺化效果,常駐在畫面下緣
- 部分選項是「複製到剪貼簿」按鈕,點擊後會直接複製內容並顯示確認提示文字
其他可以學的
- 頁面進場先蓋一層純色 Preloader,約 0.9 秒後 Logo 用縮放(0.9 到 1)加淡入(透明度 0 到 1)的動畫移除遮罩,避免字體與版面載入時的閃爍跳動圖片或字體較重、講究第一印象的形象官網
- 用 CSS 變數(例如 --color、--color-bg)集中定義主題色,搭配 data-theme 屬性一鍵切換 3 種以上配色(黑白、紅底、藍底),讓同一套版面依情境或使用者選擇即時換色有多條產品線或需要依活動主題切換視覺的品牌官網