行業分享 2017-10-25 浮動按鈕體驗設計

利用5種浮動按鈕增加網站的體驗設計

在手機應用當中浮動的動作按鈕（FAB）或許可以提供我們在制作移動版網站提供一些交互的靈感，浮動的動作按鈕是一種漂浮在用戶界面上面的圖標。它的形狀、位置和顏色使它在眾多設計元素中脫穎而出。浮動按鈕在谷歌2014年的設計標準當中發布和推廣。現浮動按鈕用戶界面元素已被廣泛應用在Web和移動設計。

雖然浮動按鈕看起來非常地小，甚至看似微不足道的視覺組件，但它的作用是很重要的，總會引導用戶的點擊。只要對它正確使用，它的可以使用戶是立即識別和訪問點擊。

1、代表一個當前頁面最重要的動作

理想的情況是，浮動按鈕應突出最相關的或經常使用的操作，它應該被使用，你的應用程序的主要特點的行動。如果你想在你的應用程序使用的晶圓廠，設計必須仔細考慮和用戶的可能的行動必須歸結到一個單一的突出特點。例如，一個音樂應用程序可能有Fab表示“播放/停止”。Instagram的一個類似的應用程序可能有一個浮動按鈕，代表“拍照”。

一個動作按鈕代表應用程序中的主要作用。暫停或恢復在這個屏幕上播放告訴用戶，這是一個音樂應用程序。

根據研究史蒂夫·瓊斯，Fab顯示輕微的負對可用性的影響當用戶第一次使用按鈕。然而，一旦用戶成功地完成了任務，使用FAB，他們能夠比傳統的操作按鈕更有效地使用它。

2、最容易找到工具的辦法

浮動按地是一個自然的提示告訴用戶下一步要做什么。谷歌的調查顯示，當面對陌生的屏幕很多用戶依浮動按鈕導航。因此，FAB是非常有用的一個標志，我們不需要思考就知道下一步要做什么。

一個浮動的動作按鈕的使用推特鼓勵你的文章內容

3、提供一組動作（多個）

在某些情況下，它是適當的按鈕旋轉，讓其他幾個選項，可以在下面看到Evernote。Fab可替換自身一系列更具體的行動，你可以設計你的用戶是語境。作為一個經驗法則，提供至少三個選項后，按不超過六（含原浮動作按鈕的目標）。

也請記住，這些行動必須是初級行動Fab本身表達有關，且相互關聯：不要把這些發現的行為作為獨立的可如果位于工具欄。

別：“我的行動不創造內容的行為有關。

4、上下文感知

上下文在用戶交互的重要作用。有時用戶想消費的內容，有時他們要執行的操作。這一切都取決于上下文。使用一些上下文的行為可以帶來最好的用戶體驗的任何應用程序的浮動按鈕。讓我們來看看谷歌為例。谷歌顯示按鈕，當用戶與流接合，和隱藏在這種交往是相反的。這兩個操作需要引導?：當用戶與社會流的吸引力，一個主要的行為是滾動，因此不需要浮動按鈕，當用戶停止滾動，他們可能想要的東西后。