当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放 
Five Hundred Miles The Shadows - Dance With The Shadows/The Sound Of The Shadows 
亲爱的小伙伴们
好久不见啦
你们的涂涂回来啦！！
不知是时间太快还是指缝太粗
总是留都留不住
总之
感谢小伙伴们的不离不弃
话不多说
赶快准备好小板凳和瓜子
嗑着瓜子咱们就开聊吧
下面开始分享app的套路之一导航设计
一、导航的分类
1.标签式导航
又叫TAB导航，目前运用最广泛的导航设计，常见于社交类、电商类、支付类、新闻类、金融类、娱乐类等各大应用中。在app中出现在底部、顶部、或混合使用，在不同的产品需求中，稍有调整。
a 底部标签导航
例如，微信、微博、QQ、最右、京东等等，均采用底部标签导航的设计方法。
标签导航出现在底部，充当一级导航功能，层级较高、权重均衡，便于用户切换，同时也能比较清晰的体现整个产品的框架，数量不大于5个。
缺点：控件面积较大，导致版面旅降低
b 顶部标签导航
标签导航出现在顶部，常作为二级导航和底部导航混合使用，也有在垂直领做一级导航出现，数量原则上不超过5个，若超过5个，会结合交互中的滑动手势，又称滑动导航，滑动导航权重均衡便于用户切换。
缺点：需要滑动，直观性欠缺，设计时需适时引导用户。
2.分段式导航
通常用于app的顶部，作为二级导航出现，一般有2-3个功能切换，占位较小，版面利用率较高，IOS端可以直接使用空间完成。
例如，微信中的表情包模块，通过分段导航将表情包分为两个细分，满足用户的不同需求，同时也不会占据更多的版面。IOS可直接运用控件，美团的电影演出模块通过分段式
缺点：不适合安卓开发使用，通常不会作为一级导航出现
3.舵式导航
是标签导航的变种，出现在app的底部，当app的几个功能都很重要并且其中一个最重要时，可用高亮色放大这一功能，将图标放于app底部标签的中间的设计方法，例如LOFTER。或者，整个app同等重要的功能超过五个，并且有一个最重要，也可将多出的部分藏于中间图标的下一层级，例如微博 。
舵式导设计运用非常广泛，它能将重要的功能突出，便于用户识别，同时伴有交互设计，很好的提升用户体验。亦能添加更多的重要功能放于下一层级，提升了空间利用率。
同时，舵式导航也有一定的缺陷，功能超过5个时，隐藏在下面的功能不容易被发现。
4.抽屉式导航
用一个图标形式出现在app的左上角或右上角，点击图标弹出侧页或新页面的设计方式。
通常是功能较多的情况下的一种策略，舵式导航作为二级导航，能将不重要的功能隐藏起来，能让页面设计更干净利落，让用户专注主要功能。
例如QQ、单读、开眼视频等采用抽屉式将许多不常用的但必须要的功能藏于抽屉的下方，让页面变得干净简洁，让用户专著自己的核心需求，创造更好的用户体验。
抽屉式导航的使用频率是低于标签式导航，作为二级导航，隐藏起来的部分增加了用户的点击次数，使用率降低，因此，抽屉式导航的运用要根据具体的业务需求来判定。
5.宫格式导航
属于层级结构导航，宫格中的一个格子代表一个功能，类似于手机上各个运用的入口导航的性质。
例如支付宝、微信，通过运用宫格式导航的设计方式，可以增加跟多的功能接口，增强了app的功能拓展性。携程的宫格式配合版面的合理布局，实现了属性的分类。
宫格式导航，便于增加功能，可拓展性强。用户在切换下一个功能时，需返回到上一级页面，不利于频繁切换，信息的承载力较弱，很少有app将宫格式导航作为一级导航，常常与标签导航，抽屉导航等共同构成整个应用系统。
6.下拉式导航
现如今，下拉式导航并不常用，常见在生活服务类，股票类的app中，通过点击一个下拉图标引出一串列表的形式作为二级导航，因其收起来体积较小，能隐藏更多信息，有时会和滑动导航一起出现。
例如美团，顶部的下拉列表提供定位选择，能定位的同时也能让用户自己选择，提升用户体验。再例如，一级求职招聘BOSS中下拉列表的运用，隐藏了更多的信息，使页面看起来干净利落，但boss的下拉雷同抽屉式导航的缺点，隐藏了较多信息，需要更多点击才能找到需要的功能，降低了有些功能的使用率。
下拉式导航隐藏信息能力强，但其点开后体积很大且没有开关，不利于频繁切换，在app中不常用。
在一个应用当中，要根据实际的需求选择一种主要导航，
没有最完美的导航，只有更合适的导航
大家要根据项目需求进行选择。
以上就是涂涂今天分享的内容啦～
欢迎小伙伴和涂涂一起分享心得
希望对大家有所帮助啦
下一期涂涂将给大家分享关于app设计套路之——列表
喜欢涂涂就关注涂涂设计吧
嘘寒问暖 不如关注温暖哦～～
以上图片来源于网络
原创文章，作者：交互精选，如若转载，请注明出处：https://www.iamue.com/35215/
