Vibe Coding 前端互動效果術語手冊：用精準描述讓 AI 一次做對

本文根據小紅書圖文《Vibecoding 前端交互效果術語手冊（入門）》的公開圖片整理。原帖把常見前端互動分成十二類，並提供可交給 AI 的描述方法。本文為繁中學習筆記，個別原圖裁切處不作補寫或推測。

五步描述公式

1. 觸發時機：何時開始，例如頁面載入、懸停、點擊、進入視口。

2. 作用對象：卡片、按鈕、導覽列或背景。

3. 變化內容：透明度、位移、縮放、旋轉、顏色、陰影。

4. 時長與緩動：例如 0.3 秒、ease-out。

5. 收尾狀態：復原、停留、消失或只播放一次。

筆記

給【元素】加【效果術語】效果：當【觸發時機】時，【元素】【做什麼變化】，時長【X 秒】，緩動【ease-out】，並交代【收尾狀態】。

例：滑鼠懸停卡片時，卡片向上移動 4 像素、陰影加深，過渡 0.25 秒，ease-out，移開後恢復原狀。

入場、載入與滾動

• 淡入（Fade In）：由透明變可見。

• 上浮入場（Fade Up）：由下方上移並淡入。

• 逐條入場（Stagger）：一組元素按順序錯開出現；可指定每項延遲 0.08 秒。

• 骨架屏（Skeleton Screen）：資料載入前顯示接近真實版面的灰色佔位輪廓。

• 滾動顯現（Scroll Reveal）：區塊進入視口約 80% 時淡入上浮，並只播放一次。

• 視差（Parallax）：背景與前景以不同速度滾動；手機端應關閉或簡化。

• 吸頂導覽（Sticky Header）：導覽列抵達頁頂後固定，並可由透明改為白底陰影。

• 平滑錨點（Smooth Scroll）：點目錄時平滑捲到標題，預留吸頂導覽高度。

懸停、點擊與回饋

• 懸停上浮（Hover Lift）：卡片上移 4px、陰影加深。

• 圖片放大（Image Zoom）：容器內圖片放大至約 1.05 倍並裁切溢出部分。

• 下劃線生長（Underline Slide）：導覽連結下方的 2px 線由左向右展開。

• 磁鐵按鈕（Magnetic Button）：游標靠近時按鈕向游標偏移，離開後回彈。

• 3D 傾斜（Tilt）：卡片隨游標位置最多約 8 度傾斜。

• 水波紋（Ripple）：由點擊位置擴散半透明圓形波紋。

• 按壓回彈（Button Press）：按下縮小至 95%，鬆開後復原。

• 載入按鈕（Loading Button）：提交時顯示載入、禁止重複點擊，完成後復原。

• 提示氣泡（Tooltip）：懸停圖示約 0.3 秒後顯示說明。

手機注意：手機沒有真正懸停。可在需求中補上：移動端改為點擊觸發或直接靜態展示。

彈層、導覽、表單與資料展示

• 模態框（Modal）、底部抽屜（Bottom Sheet）、側邊抽屜（Drawer）：都要清楚指定遮罩、出現方向和關閉方式。

• Toast：短暫成功或失敗提示，不打斷操作。

• 手風琴（Accordion）與折疊面板（Collapse）：以高度平滑過渡收納內容。

• Tabs、Carousel、漢堡選單與側欄折疊：用於內容和頁面間切換。

• 拖拽排序、看板拖拽、左滑操作：拖動時要呈現落點、讓位或操作按鈕。

• 浮動標籤、聚焦高亮、即時校驗、密碼可見切換：直接影響表單成功率。

• 進度條、步驟條、環形進度、時間軸：把完成度與進行位置可視化。

視覺特效、轉場與主題

• 毛玻璃（Glassmorphism）：低透明背景加 backdrop blur，例如約 12px 模糊和半透明描邊。

• 漸變流動、粒子背景、漸變文字、聚光燈懸停、卡片翻轉與波浪背景：宜克制使用，確保不影響閱讀。

• 頁面轉場（Page Transition）：舊內容淡出，新內容淡入上浮，例如總時長 0.4 秒。

• 暗黑模式與主題色切換：切換時全站顏色平滑過渡，並保存用戶選擇。

動效參數速查

• duration：一般 0.2 至 0.6 秒；入場可為 0.4 至 0.8 秒。

• ease-out：先快後慢，適合入場。

• ease-in：先慢後快，適合離場。

• ease-in-out：兩端慢、中間快，適合循環與左右移動。

• linear：勻速，適合跑馬燈或旋轉載入。

• spring：帶回彈感，適合拖拽、磁鐵按鈕和點讚。

• delay、stagger：控制逐條錯開；once：避免滾動入場反覆閃爍。

避坑清單

1. 每頁一至兩個重點動效已足夠，過多會顯得廉價且卡頓。

2. 優先使用 transform 與 opacity 做動畫，少改寬高和版面位置屬性。

3. 載入等待優先考慮骨架屏；轉圈較適合一秒內完成的操作。

4. 給 AI 明確色值，例如 #2E8B84，或指定使用頁面主題色。

5. 可連參考截圖交給 AI，並說明要參考該圖或網站的效果。

6. 大改前先要求 AI 說明會修改哪些檔案；不滿意可要求回到上一版。

來源與整理限制

來源為小紅書用戶「才巨智能」的圖文《Vibecoding 前端交互效果術語手冊（入門）》。本文按公開圖片和帖文描述整理，屬學習筆記，並非原作者完整 PDF 的轉載。

原始小紅書連結