本文是《設計模式週週看·Ant Design 為你講透設計模式》週刊第十四期內容，從上期內容

開始，我們就開啟了一趴新的設計模式型別：互動操作。本期是互動操作的第二個模式：懸浮工具。

What 是什麼

簡介：

「懸浮工具」其實很常見，在 PC 端，就是當用戶滑鼠掠過物件時就懸浮顯示一些工具和功能；在移動端，當用戶點選物件時，懸浮工具就會顯示在旁邊。

例子：

花瓣網在滑鼠滑動在圖片卡片上時，圖片上方就會出現放“採集”和喜歡的功能。

Why 為什麼

「懸浮工具」在大多數時候是不可見的，可以保持介面的乾淨整潔。當用戶需要它們時，透過響應使用者的操作，立即出現並吸引使用者的注意力。

彈出選單 Pop-up（右鍵選單 right-click ）、下拉選單 Pull-down 和選單欄都符合這些條件，但它們在某些型別的介面上不太容易被發現 —— 它們最適合用於傳統桌面應用程式，而不是基於網頁的介面。懸浮工具更加容易被發現，因為它們隨使用者手勢而產生和消失，簡單而自然。

When 什麼時候使用

「懸浮工具」通常用在列表型介面上，比如展示照片、訊息、搜尋結果，等等。使用者可以對每一個物件執行一組操作動作。

因為操作項較多，而在大多數時間裡使用者其實都需要有一個乾淨的頁面環境，如果這些操作項總是可見的話，會使介面看起來擁擠而雜亂。

需要注意的是「懸浮工具」通常用在使用滑鼠控制的介面上，觸控式螢幕裝置則需要點選或長按才會喚起相應的功能介面。

How 如何使用

快速響應懸停動作，但不要使用過於誇張的動畫轉換，簡單直接的顯示：

在使用者將滑鼠指標移動到其上時，不要放大懸停區域，或者是重新佈置頁面。

讓懸停動作儘可能地輕量和快捷，以便使用者可以更加容易地觸及到所需要的工具。

在使用者將滑鼠指標移開之後立即隱藏所有工具。

如果懸停區域是一個列表中的某一個物件，你也可以透過改變背景色或增加邊框的方式來高亮突出該物件。顯示工具的動作會將使用者的目光吸引到該區域，但高亮物件會帶來更好的效果。

Example 案例

案例一：Slack 使用者評價功能欄

使用者需求：

對於使用者評價進行相關操作

Slack 的懸停工具會顯示在討論區的每個帖子裡。 使用懸停工具讓功能很容易理解，使用者學習起來沒有成本。

案例二：Youtube 播放器操作欄

使用者需求：

在觀看影片時做相關操作

在 YouTube 中，YouTube 影片播放器僅在滑鼠滾動到播放器區域本身時控制顯示。 否則它們會被隱藏起來，這樣就不會分散使用者的注意力，全屏觀看影片的效果也更好。

案例三：美團 App 使用者對於卡片的操作

使用者需求：

使用者選擇卡片是否符合使用者喜好

美團 App，長按推薦卡片會針對卡片的內容，探出不同狀態的提醒，比如對於到店消費類內容是“距離太遠”，對於自提類消費是“不想自提”，對於外賣類內容是“配送時間較長”。唯一的不足是，不管選擇什麼原因，所給出的提示都是一樣的。

更多案例

你可以在下方檢視「

懸浮工具

」更多的案例：

共建計劃

當然，如果你覺得你也有好的案例想要提交給我們，歡迎在下方提交~

注：本模式來源

《Designing Interfaces》

，案例由 Ant Design 團隊收集整理，如有侵權請聯絡刪除。

2021 年期 Ant Design 設計週刊《設計模式週週看——Ant Design 為你講透設計模式》，是由 Ant Design 的設計師編寫的設計方法內容。歡迎大家關注

@AnT Designer

及 Ant Design 專欄，獲取第一時間更新：

我們懷著滿腔熱情，希望可以將這份週刊作為

互動體驗教案級別的內容

呈現給大家，也歡迎大家向我們提出寶貴意見。