一、適當減少標籤數量
底部導航欄設計的核心就是標籤的選取,選取太多則會使整個導航欄顯得累贅和混亂。反之,選取過少則會導致用戶無法快速找到自己需要的標籤。
建議從應用的核心功能出發,選擇涵蓋各種主要功能的少量標籤。其中,對於不常使用的功能可以通過彈窗等其他方式呈現,而非加入導航欄。
<com.google.android.material.bottomnavigation.BottomNavigationView\n ... app:labelVisibilityMode="labeled" app:menu="@menu/bottom_nav_menu" />
二、使用選中和未選中狀態的不同顏色
為了提高用戶體驗和可操作性,將選中和未選中狀態的標籤使用不同的顏色進行區分可以讓用戶更快有地區分當前所在標籤是哪一個。
一個常見的結合狀態顏色的方式是通過在colors.xml文件中定義不同顏色,並在標籤命名時使用指定的顏色名字。當標籤被選中時,該標籤背景顏色會切換成顏色值為選中狀態顏色的背景。反之,當該標籤為未選中狀態時,則背景切換成顏色值為未選中狀態的背景顏色。
<color name="nav_icon_selected">#000000</color> <color name="nav_icon_unselected">#cccccc</color> <menu xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/navigation_home" android:icon="@drawable/ic_home_black_24dp" app:showAsAction="ifRoom|withText" android:title="@string/title_home" android:checked="true" app:itemIconTint="@color/nav_icon_selected" app:itemTextColor="@color/nav_icon_selected" /> <item android:id="@+id/navigation_dashboard" android:icon="@drawable/ic_dashboard_black_24dp" app:showAsAction="ifRoom|withText" android:title="@string/title_dashboard" app:itemIconTint="@color/nav_icon_unselected" app:itemTextColor="@color/nav_icon_unselected" /> ... </menu>
三、添加選中狀態標籤的動畫效果
選中狀態標籤的動畫效果能夠使用戶更快速地區別當前所在標籤,並同時提高用戶對整個應用的操作體驗。
常見的動畫效果有放大縮小、顏色變化等以觀感舒適為主的效果。然而,動畫效果過於誇張可能導致用戶分散注意力,因此建議將動畫效果控制在適當的範圍內,以保證用戶能夠準確地識別標籤變化。
<com.google.android.material.bottomnavigation.BottomNavigationView\n ... app:itemIconTint="@color/bottom_refresh_color" app:itemTextColor="@color/bottom_refresh_color" app:labelVisibilityMode="labeled" app:itemBackground="@drawable/bottom_tab_selector" />
四、標籤與圖標結合
標籤與圖標不能單獨使用,應該它們結合使用,以減少用戶的記憶負擔。標籤能夠簡短明了的表達出功能,而圖標則能給用戶留下更加深刻的印象。
對於將圖標與標籤結合的最佳實踐是使用一種簡單明了的圖標,並在附近加入一行用一種清晰易懂的語言描述如何使用該圖標和功能的標籤。
<item android:id="@+id/navigation_home" android:icon="@drawable/ic_home_black_24dp" android:title="@string/title_home" />
五、標籤長度應該大於等於3個字符
標籤的長度通常應該大於等於3個字符,以保證標籤可以適應各種設備分辨率和響應式布局的要求。
當標籤的長度小於3字符長度時將導致在某些屏幕上,標籤文本被壓縮為省略號或在多行中顯示。這會給用戶帶來困惑和認知負擔。
<item android:id="@+id/navigation_home" android:icon="@drawable/ic_home_black_24dp" android:title="@string/title_home" />
六、標籤圖標預加載
標籤圖標預加載能提高標籤的加載速度,以獲得更快的響應體驗。
使用選項卡預加載通常會加速用戶體驗,並提高用戶操作流暢度。這可以通過在導航菜單的布局文件中設置app:itemIconTint屬性來實現。
<com.google.android.material.bottomnavigation.BottomNavigationView\n ... app:itemIconTint="@color/bottom_refresh_color" app:itemTextColor="@color/bottom_refresh_color" app:labelVisibilityMode="labeled" app:itemBackground="@drawable/bottom_tab_selector" />
七、標籤自定義樣式
為了增加品牌價值並提高應用個性化體驗,標籤樣式建議通過自定義來實現。
底部導航欄的自定義常見樣式有線條、邊框和獨特的圖標配色方式等。這種自定義樣式與應用的主要色調和視覺形象相符合,可以為應用添加獨特的外觀風格和品牌價值,增加與品牌的親和力。
<com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/navigation" ... android:background="?android:attr/windowBackground" app:itemIconTint="@drawable/bottom_nav_color_selector" app:itemTextColor="@drawable/nav_item_color_selector" app:labelVisibilityMode="labeled" app:menu="@menu/navigation" />
八、測試與優化
對於增加用戶體驗的Android底部導航設計技巧,有效的測試和優化過程非常重要。
在進行測試和優化過程中,需要將重點關注於用戶使用的便捷性,包括標籤的大小、命名和可操作性等。
另一個優化重點是運行速度。僅當應用平滑快速地運行時,用戶才能享受到優化過的底部導航欄的優點。
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/256389.html