網頁常見功能複雜度遞進，宛如變形金剛平時隱匿車輛形態，戰鬥時伸展四肢、揮舞武器。在交互設計中，我們稱這類「變形」為「漸進展開」——僅在使用者需要時才顯示資訊。妥善運用此原則，能讓產品保持簡潔、操作邏輯清晰。以下以實例說明四種核心觸發類型。

四大觸發類型

實現「漸進展開」的基本操作類型：分級式分層展現、點擊觸發、滑鼠滑過+點擊觸發、滑鼠滑過。可靈活結合產品風格特性，大幅提升設計質感。

分級式分層展現

以 Facebook 廣告投放流程為例：僅展示第一步，填畢點擊「繼續」進入第二步。

第二步「目標對象」輸入框承接第一步區域，頁面自然延長，無需跳轉。

第三步帳戶設置頁面龐大，使用者可回顧修改所有輸入。若一開始呈現完整長表單，使用者極易崩潰。此類「Next, Next, Next」模式常見於程式安裝，適用於網頁複雜流程，嚴格遵循層級結構由上而下順序。

點擊觸發

豆瓣說輸入框初始極小，點擊後展開較大輸入區與功能：推薦網址、發布照片、加入話題、計數器、發送鍵。繼續點擊「照片」等可進一步展開對應操作，使用者在逐步探索中完成任務。

Google+ 發布框同樣隱藏大量功能，含特色圈子選擇。

Twitter 輸入框隱藏定位與發布鍵。

Omniture 時間控件平時僅顯示「月、年+圖標」，點擊以浮層展開完整功能，方便對照報表選擇時間。點擊觸發實現成本低、節省空間，但前提是控件外觀需明顯可點擊，否則強大功能將永遠被雪藏。

滑鼠滑過+點擊觸發

Google Maps 預設僅顯示衛星視圖與即時路況，滑過展開 Google Earth 等功能，點擊 more 呈現更多選項。這樣隱藏優先呈現核心功能，初學者不受干擾，熟手隨時可用，僅付出一次點擊代價。

Flickr 個人頭像平時為小方圖，滑過出現下箭頭，點擊展開涵蓋帳戶主要功能的長列表。若平鋪頁面將佔據大量空間干擾瀏覽圖片；此設計讓頭像位置靈活、操作便捷。固定兩邊、延展另外兩邊的展開效果能保持延續感。

滑鼠滑過

YouTube 音量鍵「不需要時不出現」，滑過顯示調節條，動畫自然流暢，播放體驗優雅。

百度身邊餐廳列表隱藏「查看地圖、寫點評」，滑過顯示。若平鋪列表會佔用空間並干擾僅瀏覽部分飯店的使用者。

Notable 線上協作工具大量採用 onmouseover，界面簡潔，騰出空間呈現豐富協作內容。團隊成員列表滑過頭像即可直接管理。

小結

四種觸發類型可靈活組合，結合產品風格特性，讓設計增色不少。網頁中的「變形金剛」將複雜佔空間功能融合頁面，節省空間、降低資訊複雜度，尤其照顧新手使用者體驗，隱藏非常用控制選項，助其順利完成複雜操作。