旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 行業(yè)資訊 > UI設(shè)計(jì)-關(guān)于浮動按鈕的5種設(shè)計(jì)方式
UI設(shè)計(jì)-關(guān)于浮動按鈕的5種設(shè)計(jì)方式
時(shí)間:2018-01-25來源:lb577.com點(diǎn)擊量:作者:yanglihan
時(shí)間:2018-01-25點(diǎn)擊量:作者:yanglihan

浮動式按鈕(FAB)就是在用戶界面上方浮動的圖標(biāo),它的形狀、位置和顏色使得它從界面的其他部分有明顯的區(qū)別。在2014年谷歌發(fā)布了Material Design principles后,浮動式按鈕開始逐漸被推廣。在此之后,浮動按鈕的設(shè)計(jì)在web和移動設(shè)計(jì)中得到了廣泛的應(yīng)用。

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

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

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

在這個(gè)屏幕上,一個(gè)浮動式按鈕是App的主要操作,功能是暫?;蚧謴?fù)播放,告訴用戶這是一個(gè)音樂類APP

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

 

 

 

預(yù)約申請免費(fèi)試聽課

填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2021/ lb577.com 北京漫動者教育科技有限公司 備案號:京ICP備12034770號 監(jiān)督電話:010-62568622 郵箱:bjaaa@aaaedu.cc