五種網頁效果名稱教學：毛玻璃、視差、輪播、跑馬燈與新粗野主義
想請 AI 改網頁，先學會五種效果名稱：Glassmorphism、Parallax、Carousel、Marquee、Neobrutalism。附中文解釋、可改寫提示詞，以及文字可讀性、手機與減少動態的驗收方式。
「讓首頁漂亮一點」可以得到很多種答案，但你心裡想的可能只是半透明卡片，AI 卻把字體、文案和整個版面都換掉了。
五種網頁效果名稱能縮小這個誤差：毛玻璃、視差捲動、輪播、跑馬燈，以及新粗野主義。它們分別涉及材質、移動方式、內容切換與整體風格，使用時要先說清楚改哪一塊。
名稱是共同詞彙，後面仍要接行為條件。例如輪播會不會自動換張、毛玻璃後面是照片還是純色，都會影響實際結果。
我建議一次選一種效果，先保留原文案和內容順序，再檢查手機是否仍然好讀。這比同時套上五種效果，更容易找到要修改的原因。
五種網頁效果各在改什麼？
先看下面的對照，選出最接近目的的那一種。表格的使用建議是本文整理，定義與限制則可回查連結中的設計研究及網頁文件。
| 中文與英文 | 看得到的變化 | 需求應補的條件 |
|---|---|---|
| 毛玻璃 Glassmorphism | 半透明表面讓模糊背景透出來 | 文字對比、模糊範圍、背景內容 |
| 視差捲動 Parallax scrolling | 前景與背景跟著捲動，以不同速度移動 | 哪一層移動、移動距離、手機處理 |
| 輪播 Carousel | 在一個區塊切換多張內容 | 自動或手動、上一張與下一張、暫停 |
| 跑馬燈 Marquee | 文字或圖示持續往同一方向流動 | 方向、速度、停止與減少動態版本 |
| 新粗野主義 Neobrutalism | 粗框、硬陰影與強烈色彩形成風格 | 哪些元素套用、字體與色彩範圍 |
其中，毛玻璃的研究說明提醒，半透明表面會受到背景影響。畫面看起來有玻璃感，並不代表按鈕上的字在每個背景都清楚。
新粗野主義也需要可辨識的按鈕、閱讀層級與留白。粗框只是外觀的一部分，不能拿來替代操作回饋。
怎麼把效果名稱寫進提示詞？
把「區塊、效果、保留內容、操作條件」寫在一起，AI 比較容易知道修改邊界。下面是本文提供的起始範本，實際數值可依你的頁面調整，沒有聲稱已經替所有網站測試。
只修改首頁介紹卡片，套用毛玻璃 Glassmorphism。保留所有文字與排列順序。背景照片可模糊，但標題、正文和按鈕必須清楚可讀。減少透明度時提供實色背景。
換成輪播時，就把材質條件改成切換規則：
把三則案例排成手動 Carousel，一次顯示一則。保留案例文字，提供有名稱的上一則、下一則按鈕與目前位置。鍵盤可以操作，不自動切換。
如果想做視差，請點出移動的是背景圖片，避免 AI 把正文也做成追著捲動的動畫。NN/g 的視差研究建議把閱讀與完成任務放在效果之前，尤其要留意載入時間及來回捲動的干擾。
跑馬燈與自動輪播，要多檢查什麼？
會自行移動的內容需要讓使用者控制。W3C 的輪播模式說明了旋轉控制、鍵盤操作與可存取名稱，不能只留幾顆沒有說明的小圓點。
「跑馬燈」也只是效果名稱。MDN 明確不建議使用舊的 HTML marquee 元素。請 AI 用現代樣式與動畫實作，並讓減少動態的設定得到靜止版本。
完成後，以手機寬度檢查三件事：文字有沒有被裁掉、控制鈕能否點選，以及停止動畫後資訊是否仍完整。毛玻璃則要把不同背景都帶入，確認文字沒有忽明忽暗。
常見問題
五種效果可以一起用嗎？
可以，但先逐一確認用途。例如案例可以輪播，導覽列使用毛玻璃。同一塊內容不需要同時一直移動、切換又模糊。
只講英文名稱就能保留文案嗎？
不能。要另外寫出「文字不改」，交件時再比對實際文字，不能只看畫面相似。
新粗野主義適合所有品牌嗎？
它有明顯的視覺性格。先選一個頁面測試是否符合品牌、是否影響閱讀，再決定要不要擴大套用。
從一張卡片開始改
挑一個目前最想調整的區塊，用上述範本交代效果與保留條件，完成後再親手操作。當你能清楚說出「哪裡變了、為什麼更好讀」，下一次修改就有依據。
