懸浮按鈕要怎么設(shè)計(jì)才能帶來(lái)好的用戶體驗(yàn)？

    懸浮按鈕要怎么設(shè)計(jì)才能帶來(lái)好的用戶體驗(yàn)？懸浮操作按鈕或者說(shuō)懸浮按鈕，是 Android 應(yīng)用中最常見(jiàn)的一個(gè)控件。懸浮按鈕通常是圓形，底部的Material Design 風(fēng)格的陰影讓它看起來(lái)懸浮在整個(gè)UI之上。懸浮按鈕是Android UI 交互中最關(guān)鍵的元素之一，在用戶流程中至關(guān)重要。懸浮按鈕非常的易用，但是要正確的使用它，還是要遵循一些基本的規(guī)則。

    在今天的文章中，你會(huì)找到下面問(wèn)題的答案：

    什么時(shí)候適合使用懸浮按鈕？

    懸浮按鈕的最佳實(shí)踐有哪些？

    懸浮按鈕要如何同動(dòng)效結(jié)合起來(lái)優(yōu)化用戶體驗(yàn)？

    什么時(shí)候適合使用懸浮按鈕

    A、執(zhí)行關(guān)鍵的操作

    懸浮按鈕通常用來(lái)承載相關(guān)度最高、最常用、最重要的操作。通常，在應(yīng)用中，它應(yīng)該承載特征性的操作，核心功能，就像下面的例子一樣：

    懸浮按鈕用來(lái)觸發(fā)應(yīng)用中的主操作。屏幕上的暫停/播放交互使用懸浮按鈕來(lái)觸發(fā)，說(shuō)明這個(gè)應(yīng)用是一個(gè)音樂(lè)播放器。

    B、作為引導(dǎo)工具

    懸浮按鈕還可以為用戶提供下一步的提示和引導(dǎo)。Google 的研究表明，當(dāng)面對(duì)不熟悉的界面之時(shí)，許多用戶都傾向于點(diǎn)擊懸浮按鈕來(lái)探索，獲取引導(dǎo)。因此，懸浮按鈕在功能上有類似路標(biāo)的屬性。

    Twitter 就將發(fā)推功能做成了懸浮按鈕。

    C、并不是每屏都需要懸浮按鈕

    懸浮按鈕色彩顯眼，高亮，非常抓人眼球。當(dāng)你打開(kāi)界面的時(shí)候，想要不去注意到它都不行，因?yàn)樗黠@了。但是，并不是每個(gè)界面都需要懸浮按鈕，因?yàn)椴皇敲科炼加袠?biāo)志性的、重要的操作。

    不要濫用懸浮按鈕，它只為了關(guān)鍵操作而存在！

    Android 系統(tǒng)中 Google Photos 應(yīng)用就是一個(gè)典型的案例。當(dāng)你打開(kāi)它的圖庫(kù)的時(shí)候，首先映入眼簾的是用于搜索的懸浮按鈕，這個(gè)時(shí)候，懸浮按鈕存在2個(gè)關(guān)鍵的問(wèn)題：

    對(duì)于絕大多數(shù)的用戶而言，搜索是非主要交互。首要的操作是瀏覽圖片，所以此處并不需要懸浮按鈕。

    懸浮按鈕會(huì)分散用戶的注意力。

    小貼士：判斷一個(gè)界面的主要操作其實(shí)并沒(méi)有看起來(lái)那么簡(jiǎn)單。為了簡(jiǎn)化任務(wù)，并且考量你是否需要懸浮按鈕，可以參考這個(gè)“五分鐘規(guī)則”：如果你花費(fèi)了5分鐘還沒(méi)找到這一屏的主要操作，那么這說(shuō)明這一屏不需要懸浮按鈕。

    懸浮按鈕最佳實(shí)踐

    A、避免出現(xiàn)“迷之導(dǎo)航”

    實(shí)際上我們這里說(shuō)的迷之導(dǎo)航指的是“Mystery meat navigation”，通常簡(jiǎn)稱為MMN，這句諷刺式的術(shù)語(yǔ)源于Web Pages That Suck 的站長(zhǎng) Vincent Flanders，指的是那些難于被發(fā)現(xiàn)、目的不明、只有當(dāng)光標(biāo)移動(dòng)到其上才能發(fā)現(xiàn)、直到打開(kāi)才知道其內(nèi)容的“隱藏式”鏈接。

    實(shí)際上，懸浮按鈕所存在的問(wèn)題和MMN有點(diǎn)相似，它是一個(gè)典型的圖標(biāo)式按鈕，并不包含文字標(biāo)簽來(lái)說(shuō)明其功能，而通用的、普遍被認(rèn)識(shí)的圖標(biāo)始終是少數(shù)。舉個(gè)例子，下面的按鈕是什么功能？

    有人能猜出它與分享相關(guān)，那么它的分享功能具體是指向什么地方，有什么效果，你能確知么？你想要知道，就必須點(diǎn)擊它。的確，點(diǎn)擊這些按鈕來(lái)發(fā)現(xiàn)其功能，耗費(fèi)的時(shí)間非常短，風(fēng)險(xiǎn)也不高，但是這終究是一種認(rèn)知負(fù)擔(dān)，不是嗎？最麻煩的地方在于，用戶必須記住它的功能才行。

    將所有的的這些圖標(biāo)和相應(yīng)的APP都記住，這個(gè)工作量可不小。

    當(dāng)然，使用圖標(biāo)式的按鈕本身并不存在問(wèn)題，前提是，APP的上下文環(huán)境要明晰，用戶才能夠清晰判斷按鈕的含義和功能。舉個(gè)例子，你使用的是筆記類應(yīng)用，很明顯，主要的功能是記錄、查看筆記。那么這個(gè)時(shí)候，懸浮按鈕上的筆的圖標(biāo)，所表達(dá)的含義就很清晰了。

    B、一屏只使用一個(gè)懸浮按鈕

    懸浮按鈕在界面中是突出的，也是最具有侵略性的，所以要么只使用一個(gè)懸浮按鈕，要么干脆別用。

    C、懸浮按鈕只承載正向操作

    由于懸浮按鈕通常承載的是主要的、有代表性的操作，通常它應(yīng)該是個(gè)積極正向的交互，比如創(chuàng)建、分享、探索等。唯一的懸浮按鈕不應(yīng)該執(zhí)行破壞性的操作，比如刪除、歸檔。它不應(yīng)該是非特定的操作，或者是不完整的交互，比如剪切和粘貼是一組組合交互，它們應(yīng)該存在于菜單欄當(dāng)中，而非懸浮按鈕中。

    Material Design 的設(shè)計(jì)規(guī)范中對(duì)于懸浮按鈕所承載交互和圖標(biāo)有指引說(shuō)明。

    懸浮按鈕動(dòng)效

    懸浮按鈕本身非常靈活，它可以擴(kuò)展、變形，也可以給予反饋。

    A、擴(kuò)展為一系列操作

    在某些情況下，點(diǎn)擊懸浮按鈕可以擴(kuò)展出其他的常用操作（就像 Evernote這樣）。通過(guò)擴(kuò)展，用一組相關(guān)、常用的懸浮按鈕來(lái)替代原來(lái)的單一交互，這樣是可行的，它們是一體的，可展開(kāi)也能收納，不常駐，這和前面所提到的原則并不沖突。

    不過(guò)，這樣的設(shè)計(jì)要注意幾點(diǎn)：

    這些操作必須與開(kāi)始的總懸浮按鈕是關(guān)聯(lián)起來(lái)的，它們是一體的，不要把展開(kāi)后的按鈕視為單獨(dú)的存在。

    作為一般規(guī)則，這組拓展出來(lái)的按鈕不應(yīng)少于3個(gè)，不能多余6個(gè)，否則違反了作為懸浮按鈕的快速、高效的原則。

    B、懸浮按鈕變形為新的界面

    懸浮按鈕可以不一直都為按鈕形態(tài)，借助動(dòng)效它能夠延伸到整個(gè)屏幕，變?yōu)楠?dú)立的界面。

    懸浮按鈕能夠作為界面轉(zhuǎn)化的中間樞紐。

    當(dāng)懸浮按鈕變形為界面的時(shí)候，它闡明了前后界面之間的邏輯關(guān)系，就像下面的案例：

    C、滾動(dòng)的時(shí)候隱藏懸浮按鈕

    為了便于用戶在滾動(dòng)的過(guò)程中閱讀內(nèi)容，懸浮按鈕可以在滾動(dòng)界面的時(shí)候，隱藏起來(lái)。

    Medium 的 Android 版客戶端當(dāng)中，就是這么使用懸浮按鈕的，當(dāng)滾動(dòng)到文章底部的時(shí)候，懸浮按鈕會(huì)再次出現(xiàn)。實(shí)際上，他們的網(wǎng)頁(yè)端也采用了類似的設(shè)計(jì)模式。

    結(jié)語(yǔ)

    懸浮按鈕看起來(lái)很簡(jiǎn)單，但是要在APP設(shè)計(jì)的時(shí)候正確使用，還是要注意細(xì)節(jié)、場(chǎng)景和用戶需求的。正確使用懸浮按鈕，會(huì)有事半功倍的效果。