app底部导航栏(app底部导航栏高度)

APP导航常用的四种方式

各种APP导航的范例： 请戳这里

一、标签式导航

标签式导航是苹果ios可以自动生成一种导航控件，开发起来方便。所以这种经典的底部导航栏受到绝大数app设计师的青睐。这种设计符合手机端用户单手操作的习惯，包括新版微信，淘宝，支付宝，百度手机等都采用的这一方式。这个APP导航方式占大多数。

试用项：入口选项数目不多，且用户需要在选项见频繁切换执行多任务。

注意项：这种模式不适合太过复杂和不稳定的结构。

一般为四个导航按钮最为普遍，最方便操作的是第二和第三个按。受制于屏幕宽度的限制，通常采用标签式导航设计方式，栏目的个数是有限的，不能超过5个。4个为最佳选择。过多的话明显不利于用户的切换。从界面布局来看，也降低体验友好度。

目前也有部分APP在标签式导航的基础上，衍生出了一种交互比较好的弹出导航菜单。

如图：

这种方式应该说应用了web端的元素和使用方式，相当于有了二级菜单。很不错的尝试。如果导航菜单很多，除了下面我们说到的抽屉式APP导航设计以外，这种弹出式的导航菜单何尝不是一种选择。

二、抽屉式导航

抽屉式导航追求核心内容的突出，弱化导航界面，常见于一些信息流产品（知乎、path、facebook等）。抽屉式导航在形式上一般位于当前界面的后方，通过左上角的按钮或手势滑动呼出。由于隐藏在屏幕在外，所以导航界面的空间较大，为可扩展性和个性化带来了更多可能。由于导航默认是隐藏的，在选择后需要有明确的提示来告知用户的当前位置。 功能模块化和轻便化。

适用项：以当前内容为核心展示的应用。

注意项：隐藏的导航内容，需要更好的方式调出（如手势） 。

抽屉式滑动导航也分为2种导航布局，

第一种：列表形式如下图。

第二种：图标卡片式布局（ios7侧边导航设计）

三、桌面式导航

桌面式导航，是一种类似于手机桌面各个应用入口的导航方式。一般是将全应用信息进行独立分类，做到信息互斥，类别各自有独立入口，内容间基本并列。用户进入到一个入口之后，只处理与此入口相关的内容，如果要跳转至其他入口，必须回到入口汇总界面。

这种导航方式在工具类app中比较适用，每个工具都有一套独立的体系。带来的问题是用户需要更多的操作路径，且不适合在多任务中使用。

适用项：分类清晰，入口独立且固定。

注意项：不适合在交叉类别中使用。

四、移动APP导航之点聚式导航

点聚式导航最早来自于应用path，它将用户最频繁使用的多个核心功能点汇聚在主界面中显示，方便用户随时呼出使用，它不同于传统标签栏那样占据界面最下方一栏，而是通过一个点的方式汇聚这些功能的入口。

由于点聚式导航所占用的空间较小，所以它常出现在一些主要流程界面中，作为全局导航使用。

适用项：需要提取最核心的几个点来展示产品特性。

注意项：汇聚后将使部分导航隐藏，需要良好的引导。

end

产品笔记一：使用axure8.1制作手机app底部导航栏效果

使用工具：Axure pr 8.1版本。

制作效果如下图：选中任意tab切换到对应界面，以及选中状态的改变。

作为一名初学者，元件的组合选中以及拖动，动态面板的使用，中间还是有几个细节需要注意的，笔者初学自己研究了好久，百度并没有用，也许是关键词不合适，总找不到合适的答案。好，废话不多说，下面开始操作步骤。

1.1、创建导航栏母版，axure界面左侧底部母版栏，点击加号创建一个母版并命名。

1.2、双击母版，进入母版编辑页面。在这里进行那些拖动等操作啦。

2.1、我们观察到导航栏总共5个tab组成，每个tab里有两个元素一张图片，一个文本标签。但是为了可以方便的设置宽高调整距离均分屏幕并且组合拖动设置点击状态等，我们将图片和文本放到一个矩形框里。

2.2、拖动一个矩形到界面上，拖动一张图片原件，一个文本标签元件。如下图，调整大小样式等。

2.3、要想整体拖动这三个元件，那么就要将这三个元件组合在一起。按住command键（我用的mac），选中矩形，图片，文本标签 右键--点击组合，即可将是哪个元件组合在一起。

2.4、点击组合元件右键--转换为动态面板。双击它，会弹出下面的弹窗，输入动态面板名称。添加状态：选中以及未选中两个状态。你可以先添加选中，然后双击选中状态进入编辑选中状态页面，添加选中时的图片，文字以及文字颜色等。然后回到动态面板点击加号旁边的复制可以复制选中的状态，并命名为未选中，双击未选中去修改里边的图片以及文字颜色等即可。这样间距之类的就不用去重复设置了。

2.5、其他四个tab只要复制第一个创建编辑好的动态面板去修改里边的状态的图片和文字就好了，就不用重复创建了。

2.6、拖动到底部导航栏矩形内部调整好间距均分屏幕。

3.1、给每个tab点击时要进入对应的页面，那么我们在下图中添加5个对应的页面。

3.2、选中第一个tab，在左侧首页属性，点击鼠标单击时。如下图：

点击链接，打开链接，当前窗口，点击首页，确定。

3.4、至此底部导航栏母版制作完毕。然后最后一步，将母版应用在各个页面上。点击右侧底部导航栏，右键--选择将母版添加到页面中。选择全部全部页面即可。

点击首页Tab，选中首页时，其他tab的状态需要变成未选中。这个是如何改变呢？通过页面载入时，设置各个tab的状态

4.1、比如点击找车页面，右侧属性，点击页面载入时。如下图：

4.2、双击页面载入时，弹窗，选择设置面板状态，找车选择选中状态，其他选择未选中状态。其他tab相同设置。如下图：

至此，所有步骤完成。

发布预览一下就可以了。

uni-app 自定义组件ADTabBar 底部导航栏 支持中间自定义按钮 支持小程序

uni-app自带的底部导航栏虽然也很好用，但是遇到中间需要有一个自定义按钮的需求的时候如果使用自带的midButton，就只支持App，小程序什么都不支持。

ADTabbar自定义底部导航栏支持App、小程序的中间自定义按钮，可以自己设置css让他凸起。

注：配合该组件的根页面（也就是每个底部菜单对应的第一个页面），需要用到自定义组件模式，详细用法可以看Demo工程

暂不支持nvue

还有不足的地方会及时优化，也欢迎提出建议！

Demo工程

在 template 中使用组件

东方财富app怎么删除底部导航栏图标

通过“桌面管理”功能进行操作删除即可。通过查询东方财富app官网得知，东方财富app可通过“桌面管理”功能进行操作删除底部导航栏图标。

app最底下的分类栏叫什么

app最底下的分类栏叫底部导航栏。底部导航栏在屏幕底部显示三到五个目的地。每个目的地都由一个图标和一个可选的文本标签表示。当点击底部导航图标时，用户将被带到与该图标关联的顶级导航目的地。