标签式导航（Tab）通常分为顶部、底部、顶，底混合使用，衍生出适合各个场景下但不同搭配组合。
注意目前手持设备，以右手单手为例，对于整个屏幕但操作热区与死角
image.png
形式：
底部、顶部、滑动、下拉、宫格式、抽屉式
1.底部Tabbar
主要是列出应用程序重要的功能，方便用户在不同功能模块之间进行快速切换。
规则：
1.用作APP的一级分类，数量控制在3-5个之间
2.使用Badge进行内容更新的提示。
3.样式一般采取图标+文字的方式。用户在使用习惯上已经接受了这种底部固定菜单，随着手机屏幕的增大，用户在单手握持手机时，点击区域也比较便捷舒适。
4.标签栏显示目前主要有两种
image.png
注意：
5个标签但产品一般为功能较为复杂繁多但产品内，慎用。3个标签但导航一般在简单的工具类app中，例如借贷类但借款页、还款页、个人信息页。常用是4个标签，优先级较高，用户使用频繁，彼此相互独立。 b.舵式导航，把类似生产内容但主功能按钮放在中间，标签突出醒目，同时该主标签可能增加了一些功能扩展，来满足产品的特殊要求，体现产品个性化。例如：微博，简书，lofter，咸鱼等。
image.png
总结：
优点是：用户可以迅速的实现页面之间的切换且不会迷失方向，简单而高效。缺点是会占用一定高度的空间，对小屏手机可能视觉体验不够友好。
2.顶部Tabs
遵循用户从上至下的阅读习惯，常用于二级分类，方便用户在不同视图中进行切换
规则：
1.标签数量尽量控制在2-4个。标签文案需要精简2-4字。
2.超过数量或文案字数过长，采用滑动手势、下拉式或收起标签按钮进行优先级高的显示。
3.在ios端的次级页面中，不建议使用左右滑动来切换Tab，整个和ios左滑返回存在冲突。例如：详情页的Tab。
4.部分app可以采用顶部双层tab，不同模块放置在导航栏区域，不同视图放置在导航栏下方。（虾米音乐，播放框占据底部导航区域）
image.png
总结：
1.缺点是对于大屏手持设备来说不能单手操作
2.屏幕顶部是拇指最难触达的区域，把菜单放在顶部会让用户更难浏览你的界面，但用户使用菜单的频率非常高
3.传统菜单中，顶部从左至右从最高优先级选项开始排列（更符合用户阅读习惯）。目前的菜单层次结构将最低优先选项或重点选项放置在前面（提高点击率）
3.滑动式
image.png
总结：
1.缺点是用户只能看到可见范围内的几个选项，其余选项用户不可预知。但是，当用户探索购物或新闻类选项时，依然可以采用。
2.一般通过设计师的视觉设计与引导，确保提供足够的视觉线索，用弱化边缘元素来表明水平滚动后有更多的元素。
4.下拉式
image.png
总结：
1.下拉菜单有一个双重角色定位：首先，作为一个页面标题，虽然选项隐藏其下，向下的箭头表明有可能迅速切换到相似的部分。其次，除了切换同级选项（不绝对），切换到下级项目也是能被用户接受的。
2.下拉菜单把用户习惯从网页端迁移到移动端，用户的接受程度比侧抽屉菜单要强，页面整洁度与汉堡菜单不分伯仲。
5.抽屉式
通过纵向排列切换项解决了多平行项之间的切换问题，适用于不需要频繁切换的次要功能，例如：对设置、关于、皮肤设置等功能的隐藏。
image.png
总结：
1.通过点击屏幕左上角的按钮唤出切换项，有些可以通过右滑动手指来完成，搭配简单的滑动动画，拉出一个抽屉。
2.缺点在于次级功能入口较为隐蔽，用户不易发现，使用功能需要二次点击，增加用户使用成本。
6.宫格式
将主要入口全部聚合在主页中（类似pc桌面图标排列，又称为桌面式导航，每个导航相互独立，模块信息无交集，无法跳转互通）
image.png
总结：
1.广泛应用于各平台系统的中心页面
2.这样的组织方式无法让用户在第一时间看到内容，选择压力大。现在采用宫格导航多是作为二级页面的内容列表的一种图形化形式呈现，或作为一系列工具入口的聚合，类似支付宝、微信支付页面、银行app
设计原则
1.高亮：当前选中标签高亮，标识已选的状态
2.节制：数量（底部<5，字段<4），过多考虑组合或隐藏
3.事实意义：标签是对内容视图或模块的平级切换。如果要对页面元素进行操作，可以使用工具栏而非标签栏。
4.提示：新消息使用badge数字气泡或其他形式提示
5.表达明确：图标指示明确，底部标签栏尽量使用系统图标，或图标加文字辅助。辅助文字不能太长，避免折行显示。
6.帮助引导：用户在标签之间进行跳转时，内容已经产生状态变化，最好借助引导动画辅助说明。
网友评论