底部导航栏的表现形式

底部导航栏的表现形式有三种:

1.文字 + 图标:文字的存在能够更好的让用户对图标进行理解,提高用户的识别效率;

2.文字:主要出现在以图片和视频为主的产品和界面中,抖音,美图秀秀,小红书这三款app的底部导航栏都是以文字作为模块的切分,在使用过程中,更能够的  关注 与阅读内容,底部导航栏的视觉层级相比上面的那种层级比较低,不影响浏览视觉,同时文字按钮也降低了用户的理解成本。

3.图标:很少用,很多图标没有很强的辨识度,只用图标,会造成用户的认知负担,不建议使用独立的图标。

小总结

1.当页面图片以图片为主时,使用纯文字或者纯图标能够降低底部图标对用户造成的干扰,但是纯图标的底部导航栏降低了用户的识别度,引起用户使用时的认知负担。

2.文字+图标的搭配属于最稳妥的方式,适用于大部分的产品底部图标设计。

3.图标是由有识别度的特征线索组成的,而面性图标的识别度速度更快。

4.线性图标的内部间距比较宽的时候,更容易识别,内部间距比较窄的时候,使用面性图标会更好。

5.图标的特征线索在边缘的地方,使用线性的图标识别度更高。

原文地址:https://www.cnblogs.com/wangqian888/p/10850434.html

时间: 2024-10-15 06:23:56

底部导航栏的表现形式的相关文章

实现底部导航栏

许多的App都使用底部导航栏来实现导航功能,我们可以使用RadioGroup+RadioButton的形式或者直接Button数组的方式实现,而谷歌官方提供了FragmentTabHost来方便快捷实现底部导航栏. android.support.v4.app.FragmentTabHost 主要代码: fragmentTabHost.setup(this, getSupportFragmentManager(), R.id.layout_content); for (int i = 0; i 

Android实习札记(5)---Fragment之底部导航栏的实现

Android实习札记(5)---Fragment之底部导航栏的实现 --转载请注明出处:coder-pig 在Part 4我们回顾了一下Fragment的基本概念,在本节中我们就来学习Fragment应用的简单例子吧! 就是使用Fragment来实现简单的底部导航栏,先贴下效果图: 看上去很简单,实现起来也是很简单的哈!那么接着下来就看下实现的流程图吧: 实现流程图: 看完流程图是不是有大概的思路了,那么接着就开始代码的编写吧: 代码实现: ①先写布局,布局的话很简单,一个FrameLayou

移动端底部导航栏固定——兼容IOS

问题:移动端前端底部导航栏设计 兼容安卓下的各种浏览器和IOS自带的Safari,但是不兼容苹果下的 钉钉. 具体代码格式: <body> <!-- 头部导航栏 --> <div class="header">内容</div> <!-- 内容 --> <div class="content">内容</div> <!-- 底部导航栏 --> <div class=&q

Android仿小米商城底部导航栏之二(BottomNavigationBar、ViewPager和Fragment的联动使用)

简介 在前文<Android仿小米商城底部导航栏(基于BottomNavigationBar)>我们使用BottomNavigationBar控件模仿实现了小米商城底部导航栏效果.接下来更进一步的,我们将通过BottomNavigationBar控件和ViewPager空间的联动使用来实现主界面的滑动导航. 导航是移动应用最重要的方面之一,对用户体验是良好还是糟糕起着至关重要的作用.好的导航可以让一款应用更加易用并且让用户快速上手.相反,糟糕的应用导航很容易让人讨厌,并遭到用户的抛弃.为了打造

Android Fragment解析及UI底部导航栏实例

import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.view.View; import android.view.View.OnClickListener; import and

Android应用底部导航栏(选项卡)实例

现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其中各个类的作用以及资源文件就不详细解释了,还有资源图片(在该Demo中借用了其它应用程序的资源图片)也不提供了,大家可以自行更换自己需要的资源图片.直接上各个布局文件或各个类的代码: [1]  res/layout目录下的 maintabs.xml 源码: <?xml version="1.0

FragmentTabHost+FrameLayout实现底部导航栏

app经常用到底部导航栏,早前使用过RadioGroup+FrameLayout实现或者RadioGroup+ViewPager实现,现在基本使用FragmentTabHost+FrameLayout来实现,因为使用起来简单易用.下面写一个小例子简要地总结一下这个组合. 首先,看一下例子的最终运行效果图 -> 这5个图标的效果其实都是一样的,只要做出来一个,以此类推就可以写出其他几个 第一步, FragmentTabHost+FrameLayout布局,先看一下代码: <?xml versio

Android底部导航栏

Android UI-仿微信底部导航栏布局 Android基础入门教程——5.2.1 Fragment实例精讲——底部导航栏的实现(方法1)

TabHost实现底部导航栏

源代码及可执行文件下载地址:http://files.cnblogs.com/rainboy2010/tabnavigation.zip          现在很多Android应用界面都采用底部导航栏的设计方式,这样可以使用户灵活的切换不同的页面.采用TabHost控件很容易实现一个底部导航栏的功能,下面以模仿鲁大师客户端底部导航栏为例小试牛刀 1.设计主界面,布局文件tab_ludashi.xml如下: <?xml version="1.0" encoding="u