中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

懸浮按鈕要怎么設(shè)計(jì)才能帶來好體驗(yàn)?

2021-03-03    分類: 網(wǎng)站建設(shè)

懸浮操作按鈕(Floating Action Button,F(xiàn)AB),或者說懸浮按鈕,是 Android 應(yīng)用中最常見的一個(gè)控件。懸浮按鈕通常是圓形,底部的Material Design 風(fēng)格的陰影讓它看起來懸浮在整個(gè)UI之上。懸浮按鈕是Android UI 交互中最關(guān)鍵的元素之一,在用戶流程中至關(guān)重要。懸浮按鈕非常的易用,但是要正確的使用它,還是要遵循一些基本的規(guī)則。

在今天的文章中,你會找到下面問題的答案:

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

懸浮按鈕的好實(shí)踐有哪些?

懸浮按鈕要如何同動效結(jié)合起來優(yōu)化用戶體驗(yàn)?

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

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

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

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

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

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

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

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

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

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

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

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

懸浮按鈕會分散用戶的注意力。

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

懸浮按鈕好實(shí)踐

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

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

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

有人能猜出它與分享相關(guān),那么它的分享功能具體是指向什么地方,有什么效果,你能確知么?你想要知道,就必須點(diǎn)擊它。的確,點(diǎn)擊這些按鈕來發(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)式的按鈕本身并不存在問題,前提是,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ī)范中對于懸浮按鈕所承載交互和圖標(biāo)有指引說明。

懸浮按鈕和動效

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

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

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

不過,這樣的設(shè)計(jì)要注意幾點(diǎn):

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

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

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

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

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

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

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

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

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

結(jié)語

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

當(dāng)前文章:懸浮按鈕要怎么設(shè)計(jì)才能帶來好體驗(yàn)?
網(wǎng)站地址:http://m.rwnh.cn/news14/103914.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、品牌網(wǎng)站制作軟件開發(fā)、網(wǎng)站改版、建站公司、網(wǎng)站收錄

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)
唐海县| 璧山县| 保山市| 略阳县| 阿勒泰市| 抚顺市| 清镇市| 平安县| 鄂温| 孝感市| 奉化市| 颍上县| 八宿县| 稷山县| 淮北市| 安乡县| 常德市| 汤阴县| 阿荣旗| 蒙自县| 博罗县| 汨罗市| 张家港市| 鄯善县| 将乐县| 绍兴县| 凤山市| 久治县| 胶南市| 穆棱市| 蓬溪县| 泽普县| 嘉兴市| 进贤县| 乌审旗| 察哈| 惠来县| 辽阳市| 临高县| 正阳县| 瑞昌市|