UI大牛教你浮動按鈕

盡管浮動按鈕看上去是一個很小很微不足道的設計元素，但它對用戶界面的影響是非常重要的，如果設計得當，它就可以第一時間被用戶識別并點擊瀏覽。

Android應用程序中的浮動按鈕

1. 僅代表一個標志性的行為

一般情況下，浮動按鈕應該突出最相關或最常使用的用戶操作，它應該用于APP中主要特性的操作。如果你打算使用浮動按鈕在你的APP當中，在設計時必須仔細考慮清楚，用戶在點擊浮動按鈕時必須是一個非常重要的目標性行為。例如，一個音樂類的APP當中的浮動按鈕，一般都表示’Play/Stop’，而像Instagram這類似的APP一般會使用浮動式按鈕來代表“拍照”功能。

在這個屏幕上，一個浮動式按鈕是App的主要操作，功能是暫?；蚧謴筒シ?，告訴用戶這是一個音樂類APP

根據(jù)Steve Jones的研究表明，當用戶首次使用時，浮動按鈕會表現(xiàn)出輕微的負面影響，但是當用戶在使用浮動按鈕成功的完成任務之后，相比于傳統(tǒng)按鈕，用戶就會更有效地使用這種方式。

2. 作為一種提供線索的工具

浮動按鈕是告訴用戶下一步該做什么的重要線索，谷歌的研究表明，當面對一個陌生的App界面時，許多用戶會依靠浮動按鈕來進行導航。因此，浮動式設計是告訴用戶下一步該做什么的重要線索。

在Twitter中使用浮動按鈕鼓勵用戶發(fā)布內容

3. 提供一套動態(tài)效果

在某些情況下，如下圖Evernote，它的浮動按鈕進行適當?shù)男D后便顯示了其他操作選項，浮動按鈕可以用一系列更完善的動作來豐富功能，也可以設計浮動按鈕對用戶進行前后引導。一般情況下，可以設計3到6個操作選項（其中包括原來浮動按鈕的操作項）。

Evernote

同時還要注意的是，這些動作必須與浮動按鈕彼此關聯(lián)，如果在工作欄上，不要把這些操作行為看成是各自獨立的。

錯誤示例：“Where I am”的行為與其他創(chuàng)建內容的動作無關。

4. 前后關聯(lián)使用場景

在用戶交互中的使用場景是非常重要的，有的時候，用戶只閱讀內容，有的時候用戶需要進行操作，這完全取決于當前的使用場景，結合用戶使用場景對用戶進行浮動式按鈕的引導，可以給任何一個App帶來最好的實現(xiàn)效果。以Google+為例，當用戶靜止在該頁面時，Google+就在用戶界面上顯示浮動按鈕，反之就將該按鈕隱藏。這兩個行為都是基于用戶的使用場景：當用戶正在進行滑動頁面操作的時候，他主要的行為就是滑動頁面，因此并不需要浮動按鈕，而當用戶停止滑動時，用戶就可能需要按鈕來進行某些發(fā)布內容的操作。

5. 將兩個模塊互相關聯(lián)

浮動按鈕不僅僅只是一個圓形的按鈕，它可以幫助用戶從一個界面到另一個界面進行連貫的切換，點擊浮動按鈕，按鈕圖形變換的同時界面狀態(tài)之間隨之進行狀態(tài)轉換。在下面的示例中的以動畫引導用戶的視覺方向，并幫助用戶理解界面布局中剛剛發(fā)生的變化，告訴用戶是什么觸發(fā)了這樣的變化，以及如何在需要的情況下再次啟動。

圖片來源：Ehsan Rahimi

圖片來源：Dribbble

總結

有些人可能會說浮動按鈕時一個糟糕的用戶體驗，因為很多用戶和設計并不習慣這個設計，我們都比較習慣使用我們所熟悉的工具，而浮動按鈕的設計相對而言還是比較新的，而接觸新的事物往往都是比較困難的，但是這個困難能夠幫助我們做出更優(yōu)秀的用戶體驗設計，只要使用得當，浮動設計會成為一種讓人喜聞樂見的設計體驗。

原文地址：webdesignerdepot

譯文地址：51UXC

作者：NICK BABICH
相關文章--《UI大牛告訴你交互動效原則》