記錄研究最近看到的一個很有意思的網站：convodesign101.xyz

Conversation Design

Made with Framer

convodesign101.xyz

convodesign101 是設計師 Chi Quach 使用 Framer 製作的 Conversation Design 入門與資源網站。作者描述它是一個帶有童趣與奇想感的 Conversation Design 設計師學習入門資源庫。

Siteinspire 也將它收錄在 Big Type、Colourful、Design & Art Direction、Technology、Educational Resource 等類別中。

網站的主題和內容本身就非常有意思，是關於對話設計（Conversation Design）: 一種基於「人類日常對話」為基礎的設計語言。

根據 Google 的定義，對話設計的核心邏輯在於：一個介面愈能善用人類的對話習慣，使用者就愈不需要刻意去學習如何操作它。（原文）

對話設計並不是指把現有的圖形使用者介面（GUI）直接加上語音輸入和文字轉語音（TTS），而是從人類對話的流程、語氣、邏輯與情境出發，重新設計人與機器之間的互動方式。

在 convodesign101 中，作者也把這個概念放進了生成式人工智慧（Generative AI）與代理式人工智慧（Agentic AI）的時代背景裡，讓對話設計（Conversation Design）不再只屬於語音助理（voice assistant），也成為設計人工智慧產品（AI products）、人工智慧代理（AI agents）與多模態互動（multimodal interaction）時的重要基礎。

互動式使用者介面設計（Interactive UI Design）

真正吸引我的，不只是它的內容，更是它的整體網頁體驗。

convodesign101 不像一般教學頁面，只是把資訊一段一段排出來。它更像一個可以滑動閱讀的數位展覽（digital exhibition）：大字、雲朵、氣泡、書本、卡片、資源清單，隨著頁面滾動（scroll）慢慢出現，讓讀者感覺自己不是在「看一篇文章」，而是在慢慢觀賞一個名為對話設計（Conversation Design）的小型設計展。

整套動態語法 (Motion Grammar)

很多網站都有滾動動畫（scroll animation）、滑鼠懸停效果（hover effect）與卡片翻轉（card flip），但 convodesign101.xyz 好看的地方在於：它不是把很多動畫效果堆在一起，而是建立了一套很一致的動態語法（motion grammar）。

整個網站裡的動態都有共同語氣。元素出現時，像小物件被放進畫面；滑鼠碰到卡片時，像卡片被輕輕拿起；書本在滑鼠懸停（hover）時，帶有微妙的三維透視（3D perspective）效果；多個元素出場時，不是同時出現，而是有節奏地一個接一個浮現；而每個互動也都不是機械式的緩動（ease），而是帶有物理感的彈簧動態（spring）。

這些互動共同建立出一種感覺。它讓網站不再只是冷冰冰的資訊頁面，而更像是一個可以被觸摸、翻閱與探索的知識物件。使用者在瀏覽的過程中，不只是接收資訊，而是在與內容產生互動，逐步發現其中的脈絡與細節。

這也是我覺得它最值得學習的地方。它不是只讓網站「動起來」，而是讓網站變得比較像一個有重量、有層次、可以被探索的內容空間。

文字的緩進與緩出：如同呼吸感的閱讀

網站裡的大文字採用了 Framer 的滾動連動變形（scroll-linked transform），以滾動位置（scroll position）為變數，雙向即時插值（interpolation）透明度（opacity）。

本質上，它是把滾動位置（scroll position）當成一條時間軸（time axis），文字則是這條軸上的關鍵影格動畫（keyframe animation）。慢慢滾動時，文字緩緩浮現；快速滾動時，文字快速掠過。無論使用者的速度快或慢，畫面感都很自然。

這讓文字的閱讀節奏不再完全由網站決定，而是隨著使用者的滾動速度（scroll speed）一起變化。讀者滑得慢，文字就像慢慢浮出來；讀者滑得快，文字就像從眼前掠過。這種處理讓大字不只是視覺標題，而變成一種會呼吸的閱讀節奏。

滑動方式呈現橫向時間軸

convodesign101 也運用滑動來創造敘事節奏。網站中有一段以橫向時間軸（horizontal timeline）的方式呈現對話設計（Conversation Design）的發展脈絡，從人類語言、書寫、印刷、電話、電子郵件（email）、簡訊（SMS）、虛擬助理（virtual assistant），一路延伸到生成式人工智慧（Generative AI）與代理式人工智慧（Agentic AI）。

這種處理方式讓時間軸不只是靜態資訊，而是一段可以被觀看、被移動、被經過的路徑。讀者不是一次看到所有歷史節點，而是隨著滾動（scroll）慢慢經過每一段資訊。這讓「時間」本身也變成一種介面體驗：不是列表，而是路徑；不是資料，而是旅程。

透明資料夾：把資源清單變成可以探索的內容容器

在這個網站中，我特別喜歡資源分享的設計方式。

作者不是把文章、書籍、活動這些分類做成普通清單，而是用透明資料夾（transparent folder）的方式來呈現。在透明資料夾（transparent folder）中，可以看到具像化的文章、小書本與票券圖示，一眼就能理解這些資料夾各自收納了什麼內容。

這個做法很聰明，因為資料夾本身就是一種很直覺的內容隱喻（content metaphor）：它不是單一連結，而是一個裝著資訊的容器。

更有趣的是，這些資料夾不是完全不透明的，而是帶有半透明質感（translucent texture），讓使用者隱約看見裡面裝著什麼。這種視覺處理會自然引發好奇心，讓人想靠近看看。

當滑鼠懸停（hover）上去時，互動也不是單純放大，而是讓裡面的內容物更明顯地跳出來。這讓滑鼠懸停（hover）這個行為不再只是裝飾性的動態回饋，而變成一種預覽機制（preview mechanism）：使用者不需要立刻點開，就能先獲得一些內容線索。

這個設計把原本很容易做得平淡的資源列表（resource list），轉化成一個可以被翻找、被預覽、被探索的內容區塊。它像是數位桌面上的一個資料夾，也像一個裝著書本、文章與活動票券的小收納盒。這種介於資訊結構（information architecture）與物件隱喻（object metaphor）之間的處理，替使用者介面（User Interface, UI）加入了很細膩的人味。

錯落延遲：高級感往往來自延遲感的淡入、淡出

很多網站的動畫效果會讓整個區塊一起淡入。但 convodesign101.xyz 更常使用錯落延遲（stagger），讓多個元素有順序地出現。

從觀察來看，它的延遲節奏大約會從 0 秒開始，接著以 0.075 秒、0.1 秒、0.16 秒、0.2 秒、0.3 秒到 0.5 秒這樣的短時間差逐步展開。這種延遲很短，但效果很好。因為它讓畫面像有呼吸，而不是一次把所有資訊丟給你。

這對內容型網站尤其重要。當一整排卡片、一組書本、一串資源、幾個氣泡（bubble）同時出現時，畫面會很平。但如果它們一個接一個出現，讀者會感覺畫面正在被「安排」出來。

錯落延遲（stagger）不一定是很華麗的動畫效果，但它會讓畫面有節奏，也會讓讀者更容易跟上內容的出現順序。很多時候，網站的高級感不來自特效本身，而是來自這種非常細微的時間差。

小螢幕上的互動挑戰

互動式設計在手機螢幕上的挑戰相對更大。大螢幕可以容納比較多的空間變化、橫向移動、物件層次與懸停互動（hover interaction），但手機螢幕的可視範圍有限，使用者也主要透過手指滑動與點擊操作，因此許多在桌機上非常迷人的動態效果，到了手機上都需要重新被轉譯。

實測 convodesign101 在小螢幕上的體驗仍然相當流暢。雖然部分動畫效果在手機上沒有大螢幕那麼完整、那麼有視覺張力，但它並不是把桌機版畫面直接縮小，而是針對手機版重新安排了觀看節奏。

這點尤其可以從橫向時間軸（horizontal timeline）看出來。一般來說，橫向時間軸在手機上很容易變得不好操作，因為小螢幕沒有足夠的橫向空間，也不適合一次顯示太多節點。但 convodesign101 並沒有直接把橫向時間軸改成垂直卡片流，而是保留了橫向移動的敘事感，並把它處理成一個畫面對應一個時間點的觀看方式。

設計啟發

convodesign101 展現了一種帶有策展感的互動式使用者介面設計（interactive UI design）。使用者不是單純閱讀內容，而是在探索內容。

每一次滑動、展開、切換、聚焦、懸停與點擊，都像是在展覽空間中移動視線，從一個展區走向另一個展區。網站中的卡片、標籤、導覽結構與內容區塊，都被設計成具有明確層次與互動回饋的介面元素。當使用者操作時，介面會透過位置變化、尺寸調整、透明度、動態效果與視覺焦點的轉移，持續告訴使用者現在在哪裡、可以往哪裡走，以及接下來會發生什麼事。

在這種設計裡，資訊不只是被排列，而是被安排成一段有節奏的觀看路徑。重要的內容被放大呈現，相關的內容被自然串接，而次要資訊則暫時退到背景，等待使用者主動發現。

因此，內容型網站不一定只能是文章列表，也不一定只能是乾淨的登陸頁（landing page）。它可以更像一個互動展覽（interactive exhibition）、一張桌面、一個書架、一個可以被探索的內容空間。

而過渡動態（transition）則是這套互動式使用者介面設計（interactive UI design）的重要組成。它負責連接不同狀態、建立空間感與操作感，讓使用者理解介面如何運作，也讓每一次互動都更自然流暢。

真正好的網站動態與互動設計，不是讓人說「這個動畫很酷」，而是讓人感覺自己想繼續滑下去，想點開它，想翻到背面看看，也想把這個小東西收藏起來。

這種策展感的互動設計，才能讓資訊內容不只是被閱讀，而是被體驗、被探索、被記住。