浮動(dòng)操作按鈕（Floating Action Button , FAB）將是Material Design的下一件大事！它以圓形的樣子漂浮在用戶界面上，有著特異的作用。這些圖標(biāo)有著特殊的運(yùn)動(dòng)行為，漂浮在UI上方并執(zhí)行一些操作，如啟動(dòng)、變形。他們有兩個(gè)不同的尺寸，包括迷你型和默認(rèn)大小。

浮動(dòng)操作按鈕是一個(gè)優(yōu)雅、動(dòng)態(tài)、輕量級(jí)和始終如一的設(shè)計(jì)元素，提供快速而有效的導(dǎo)航和增強(qiáng)用戶體驗(yàn)。按照規(guī)則和指導(dǎo)方針，它被定位在右邊，使程序通用并且擴(kuò)展其功能。根據(jù)谷歌的規(guī)范，浮動(dòng)操作按鈕應(yīng)具有建設(shè)性的色調(diào)，提供快速訪問(wèn)重要工具的功能。

1. 著色UI

雖然用戶界面可以飽滿厚重，Lois Yang還是通過(guò)選擇一個(gè)有吸引力的顏色來(lái)完成其優(yōu)秀的工作。帶有微妙的陰影效果的堅(jiān)實(shí)紅色背景使得圖標(biāo)能夠?qū)?nèi)容區(qū)分，抓住用戶的注意力。

2. 通過(guò)Eric Azares添加媒體

靜止在屏幕的底部，一個(gè)○形按鈕被其他四個(gè)快速訪問(wèn)的CTA（Call to action，行為召喚）環(huán)繞，展示成一個(gè)圓形的形狀。四個(gè)按鈕顏色鮮艷，帶有快速邏輯符號(hào)并且顯示出相對(duì)巨大的規(guī)模。

3. PSD模板

PSD模板界面由Daniel De Santis設(shè)計(jì)，它提供一個(gè)很好的高效浮動(dòng)操作按鈕例子。浮動(dòng)操作按鈕帶出一個(gè)大面板覆蓋了整個(gè)屏幕。此外，這個(gè)功能也可以免費(fèi)。所以盡情下載來(lái)享受吧！

4. 用戶體驗(yàn)探索

浮動(dòng)操作按鈕是復(fù)雜的，它要在一行中體現(xiàn)一系列操作按鈕調(diào)用。展示在屏幕的較低部分，這些按鈕需要以水平方式從左到右依次放置。

5. 魔法按鈕

漂浮魔術(shù)按鈕由Lee Giles開(kāi)發(fā)，有著極簡(jiǎn)約的功能。快速訪問(wèn)提供給用戶工作小組來(lái)創(chuàng)建他們的書(shū)籍。這個(gè)設(shè)計(jì)高度兼容材料站和應(yīng)用聚集。

6. 拇指界面

拇指的用戶界面由Jochem Van Der Veer設(shè)計(jì)，其轉(zhuǎn)向定位在右側(cè)，有一個(gè)簡(jiǎn)單的外觀和引人注目且功能強(qiáng)大的設(shè)計(jì)。它有時(shí)放置應(yīng)用程序標(biāo)識(shí)的迷你版本。

7. Alternacare

Alternacare 由MayurKarodia設(shè)計(jì)，允許用戶在幾秒內(nèi)解決冗余信息并實(shí)現(xiàn)目標(biāo)。浮動(dòng)操作按鈕的大膽外觀和鮮艷顏色主題使它區(qū)別于其他內(nèi)容，吸引用戶的注意力。

8. 水滴型FAB

Shu Makino設(shè)計(jì)的浮動(dòng)操作按鈕是一個(gè)有著標(biāo)準(zhǔn)工作流程的動(dòng)畫(huà)GIF。由一個(gè)一致的變調(diào)支持，它包含了七個(gè)不同的項(xiàng)目，會(huì)一個(gè)接一個(gè)的出現(xiàn)，并靜止在屏幕的右側(cè)。

9. 安卓分?jǐn)?shù)

這個(gè)浮動(dòng)操作按鈕由Matt Legaspi精心設(shè)計(jì)，看起來(lái)精致且有著復(fù)雜的行為召喚。配上誘人的雙色調(diào)顏色主題，將行動(dòng)轉(zhuǎn)化為焦點(diǎn)時(shí)達(dá)到卓越的美學(xué)審美。

10. Swipii應(yīng)用概念

由Sarah Ahmad設(shè)計(jì)的概念是許多新解決方案的獨(dú)特制定。它的功能很好，使訪問(wèn)變得更加容易。它靜止在應(yīng)用程序每個(gè)頁(yè)面的右邊，顯示一個(gè)QR（快速響應(yīng)）代碼的彈出頁(yè)面，幫助快速地收集點(diǎn)。

總結(jié)

浮動(dòng)操作按鈕不僅讓用戶界面高效而有吸引力，還有助于用戶體驗(yàn)。他們已經(jīng)成為應(yīng)用程序的必須元素，因?yàn)樗麄儓?jiān)持方便直接的功能，并且使應(yīng)用程序更加以用戶為中心，也更富有成效。

本文翻譯自：

PS: 關(guān)于移動(dòng)開(kāi)發(fā)，這些產(chǎn)品你可以關(guān)注>>

      關(guān)于UI用戶界面，這些產(chǎn)品你可以關(guān)注>>

      關(guān)于移動(dòng)用戶界面設(shè)計(jì)的最新產(chǎn)品和資訊，請(qǐng)<>!