按鈕與連結詞條 2-04

浮動動作按鈕Floating Action Button

也常叫做:懸浮按鈕、FAB

你可能會這樣說

畫面右下角飄著一顆圓形按鈕,頁面怎麼捲它都不動,通常裝著整個網站最想叫你按的那個動作,例如新增商品或找客服。

白話解釋

浮動動作按鈕是固定飄在畫面角落的圓形按鈕,最常放在右下角,用來裝全站最重要的動作,像「新增商品」或「找客服」。

它不會跟著頁面捲動消失,怎麼滑都按得到;但一個畫面通常只放一顆,放多了反而讓人猶豫。

請 AI 做的時候,記得指定位置、大小和陰影,並說清楚按下之後要發生什麼事。

親手試試

✕ 主要動作藏起來
商品列表捲不到底,「新增商品」的入口藏在頁尾,訪客根本找不到。
✓ 固定在右下角
+
右下角固定一顆「新增」,捲到哪都按得到。

浮動動作按鈕一個畫面只放一顆——裝全站最想叫訪客按的那個動作。

圖 2-12 同一個商品頁:把最重要的動作固定在右下角,捲到哪都按得到。

這樣對 AI 說

中文就可以
幫我在商品頁右下角加一顆浮動動作按鈕,圖示用加號。
按下去前往新增商品表單,手機上同樣出現在右下角。
圓形直徑 56px,加陰影做出浮起來的感覺。
頁面往下捲時按鈕固定不動,別跟著捲走。

同一課的其他詞