UI大牛教你浮動(dòng)按鈕

盡管浮動(dòng)按鈕看上去是一個(gè)很小很微不足道的設(shè)計(jì)元素，但它對(duì)用戶界面的影響是非常重要的，如果設(shè)計(jì)得當(dāng)，它就可以第一時(shí)間被用戶識(shí)別并點(diǎn)擊瀏覽。

Android應(yīng)用程序中的浮動(dòng)按鈕

1. 僅代表一個(gè)標(biāo)志性的行為

一般情況下，浮動(dòng)按鈕應(yīng)該突出最相關(guān)或最常使用的用戶操作，它應(yīng)該用于APP中主要特性的操作。如果你打算使用浮動(dòng)按鈕在你的APP當(dāng)中，在設(shè)計(jì)時(shí)必須仔細(xì)考慮清楚，用戶在點(diǎn)擊浮動(dòng)按鈕時(shí)必須是一個(gè)非常重要的目標(biāo)性行為。例如，一個(gè)音樂(lè)類的APP當(dāng)中的浮動(dòng)按鈕，一般都表示’Play/Stop’，而像Instagram這類似的APP一般會(huì)使用浮動(dòng)式按鈕來(lái)代表“拍照”功能。

在這個(gè)屏幕上，一個(gè)浮動(dòng)式按鈕是App的主要操作，功能是暫停或恢復(fù)播放，告訴用戶這是一個(gè)音樂(lè)類APP

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

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

浮動(dòng)按鈕是告訴用戶下一步該做什么的重要線索，谷歌的研究表明，當(dāng)面對(duì)一個(gè)陌生的App界面時(shí)，許多用戶會(huì)依靠浮動(dòng)按鈕來(lái)進(jìn)行導(dǎo)航。因此，浮動(dòng)式設(shè)計(jì)是告訴用戶下一步該做什么的重要線索。

在Twitter中使用浮動(dòng)按鈕鼓勵(lì)用戶發(fā)布內(nèi)容

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

在某些情況下，如下圖Evernote，它的浮動(dòng)按鈕進(jìn)行適當(dāng)?shù)男D(zhuǎn)后便顯示了其他操作選項(xiàng)，浮動(dòng)按鈕可以用一系列更完善的動(dòng)作來(lái)豐富功能，也可以設(shè)計(jì)浮動(dòng)按鈕對(duì)用戶進(jìn)行前后引導(dǎo)。一般情況下，可以設(shè)計(jì)3到6個(gè)操作選項(xiàng)（其中包括原來(lái)浮動(dòng)按鈕的操作項(xiàng)）。

Evernote

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

錯(cuò)誤示例：“Where I am”的行為與其他創(chuàng)建內(nèi)容的動(dòng)作無(wú)關(guān)。

4. 前后關(guān)聯(lián)使用場(chǎng)景

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

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

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

圖片來(lái)源：Ehsan Rahimi

圖片來(lái)源：Dribbble

總結(jié)

有些人可能會(huì)說(shuō)浮動(dòng)按鈕時(shí)一個(gè)糟糕的用戶體驗(yàn)，因?yàn)楹芏嘤脩艉驮O(shè)計(jì)并不習(xí)慣這個(gè)設(shè)計(jì)，我們都比較習(xí)慣使用我們所熟悉的工具，而浮動(dòng)按鈕的設(shè)計(jì)相對(duì)而言還是比較新的，而接觸新的事物往往都是比較困難的，但是這個(gè)困難能夠幫助我們做出更優(yōu)秀的用戶體驗(yàn)設(shè)計(jì)，只要使用得當(dāng)，浮動(dòng)設(shè)計(jì)會(huì)成為一種讓人喜聞樂(lè)見(jiàn)的設(shè)計(jì)體驗(yàn)。

原文地址：webdesignerdepot

譯文地址：51UXC

作者：NICK BABICH
相關(guān)文章--《UI大牛告訴你交互動(dòng)效原則》