手機(jī)應(yīng)用開(kāi)發(fā)：關(guān)于浮動(dòng)按鈕的5種設(shè)計(jì)方式

       浮動(dòng)式按鈕(FAB)就是在用戶界面上方浮動(dòng)的圖標(biāo)，它的形狀、位置和顏色使得它從界面的其他部分有明顯的區(qū)別。在2014年谷歌發(fā)布了Material Design principles后，浮動(dòng)式按鈕開(kāi)始逐漸被推廣。在此之后，浮動(dòng)按鈕的設(shè)計(jì)在web和移動(dòng)設(shè)計(jì)中得到了廣泛的應(yī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)畫引導(dǎo)用戶的視覺(jué)方向，并幫助用戶理解界面布局中剛剛發(fā)生的變化，告訴用戶是什么觸發(fā)了這樣的變化，以及如何在需要的情況下再次啟動(dòng)。

總結(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)。

       本文由培訓(xùn)無(wú)憂網(wǎng)AAA教育課程顧問(wèn)老師整理發(fā)布，更多手機(jī)開(kāi)發(fā)課程信息可關(guān)注培訓(xùn)無(wú)憂網(wǎng)手機(jī)開(kāi)發(fā)培訓(xùn)頻道或添加老師微信：15033336050

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://m.universityresearchassociates.com/news-id-5457.html 違者必究！部分文章來(lái)源于網(wǎng)絡(luò)由培訓(xùn)無(wú)憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注手機(jī)開(kāi)發(fā)頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050