一、适当减少标签数量
底部导航栏设计的核心就是标签的选取,选取太多则会使整个导航栏显得累赘和混乱。反之,选取过少则会导致用户无法快速找到自己需要的标签。
建议从应用的核心功能出发,选择涵盖各种主要功能的少量标签。其中,对于不常使用的功能可以通过弹窗等其他方式呈现,而非加入导航栏。
<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底部导航设计技巧,有效的测试和优化过程非常重要。
在进行测试和优化过程中,需要将重点关注于用户使用的便捷性,包括标签的大小、命名和可操作性等。
另一个优化重点是运行速度。仅当应用平滑快速地运行时,用户才能享受到优化过的底部导航栏的优点。