移动端底部标签导航设计指南.pptxVIP

标签导航栏

上节课知识点回顾CONTENTS01.启动图标的类型02.03.04.启动图标的作用启动图标的设计流程图标的绘制方法05.图标的评判标准归纳

01.关于底部标签导航02.03.04.UI设计注意事项UI表现层类别分析移动端线上案例分析05.总结

一、关于底部标签导航移动端导航栏设计相当于自身的骨架，是支撑产品中功能交互和内容传播的血肉。导航系统指引着用户的操作轨迹，引导用户抵达目的地和进行相关的操作，将零散的内容和功能进行组织形成结构化的可视轨迹。导航的存在因此显得格外重要，也是梳理功能结构需要重点确定的内容，以此来形成整个产品的脉络。

一、关于底部标签导航

移动端导航栏比较常见的有：底部标签栏导航、舵式导航、顶部标签（Tab）导航、宫格式导航、轮播（平铺）式导航、悬浮icon导航、列表式导航栏、抽屉式导航、下拉导航/菜单导航等等。我们比较常见的产品中采用底部标签栏导航的居多，便于用户进行频繁的操作，这也是本文接下来重点和大家探索的话题方向。

在移动端产品中底部标签栏导航是最常用的导航模式，常作为一级目录的导航，位于产品界面底部。根据用户对于界面的操作热区来看，底部是用户可以轻松点击的区域，无论用户单手还是双手操作都十分便利。

在底部标签栏导航的基础上进行拓展栏设计也是比较常见的形式，也就是舵式导航。突出中间的功能强化用户的关注度，引导用户使用更多延展功能。底部标签栏导航和底部（舵式）拓展栏都属于底部导航的范围。

底部标签栏导航非常直观的告诉用户当前的位置，也便于用户进行同一层级间的不同模块切换。由于具有很强的包容性，不会与其他功能模块形成干扰，也能与多种导航模式进行组合使用。

底部标签栏导航在模块的选择上面通常是3-5个，比较常见的为5个，3个模块相对比较松散，运用案例不是很多，除非业务功能较少。在设计表现形式上面有：icon+文字、纯icon、纯文字形式，比较主流的还是icon+文字的形式，可以降低用户的理解成本和记忆负担，提高用户的操作体验。。二、UI设计注意事项

底部（舵式）拓展栏是为了突出中间功能设计，吸引用户关注度，提高更多隐藏功能的使用概率。这种导航模式较为常见，比如转转、抖音、马蜂窝旅游、闲鱼等等均有使用。可以提高导航栏设计的趣味性和特征性，引导用户操作更多功能和贡献更多内容。不过这样的设计由于关注度被吸引，进而影响其它一级模块的关注度，由于隐藏的功能增加了用户的记忆负担和操作负担，利弊权衡需要产品设计师进行评估。

在进行设计的过程中，功能模块的确定需要起到牵引的重要作用，链接起整个产品的功能脉络；设计表现上面需要区分默认和点击状态，可以跳出规范的束缚，但是需要在不影响其它业务模块的前提下进行。

底部标签栏导航在UI表现层方面也是千奇百态，除了常规的置底形式，设计师也发散了更多新颖的表现。突破现有规范的束缚，不被固有化思维所限制，才能不断的进行设计创新。三、UI表现层类别分析

1.最稳定的常规设计形式底部标签栏导航最常见的设计形式依然是置于底部的常规形式，通常是3-5个功能模块为主，其中5个功能模块是较为常见的。形成差异化的是在图标设计上面进行发挥，难度较大的设计是结合品牌基因或者特征性元素表达，也有一些是纯文字的设计形式。除了图标上面进行发挥以外，也有一些会在背景上面进行装饰，体现产品差异化。不过最常见的依然还是单色为主，或者根据模块的需求在切换的过程中选择使用不同的背景体现。虽然是最常规的导航模式，但是设计师依然可以在布局形式、图标风格、配色关系、背景装饰等方面进行发挥。

2.动静结合的微动效表现微动效在产品设计中的运用逐渐变得频繁，相较于静态的表现更能引起用户的关注度，也能带来趣味性和互动性。在底部标签栏导航中的图标设计上面，默认的采用静态展示，而点击状态以动效的形式进行演变过渡也是非常常见的设计处理。

在进行动效设计的时候，可以采用整个图标位移形成动效，这是最简单的动效表现，通常是上下弹跳位移。比较复杂的是图标本身的结构动效，这也是图标动效转换比较连贯的形式。。

3.突出规范框架的束缚表现虽然大部分产品设计都会优先采用官方的设计规范，但是为了突出设计的差异化，也会进行一些突出规范框架的设计。在保持原有不变的导航设计中，我们可以针对局部功能模块进行突出表现（比如舵式导航），也可以将点击状态进行突出表现。

4.悬浮层增强空间感一些产品为了增强界面结构的空间感，针对底部标签栏导航设计采用悬浮层的设计来进行表现，使得界面的通透性和呼吸感更强。这种设计形式依然保留了原本的结构，只是预留了左右和底部的间距，也有一些产品结合交互动效的形式表达，滑动过程中采用隐藏部分功能，增加浏览过程的内容输出面积。

5.底部拓展/隐藏式设计随着一些工具型产品的使用