手机端的几类导航设计

在使用不同的app时，我们都会看见界面上出现各式各样的导航。有的位于顶部、有的位于底部侧部，有的甚至一直悬浮在界面中。

今天一起来看看手机端的导航设计吧～～之前也写给相关的文章，这一次是为了补充吧。。

一、标签式导航设计

标签式导航又叫Tab式导航，是移动应用中最普遍、最常用的导航模式。这类信息优先级较高、用户使用频繁，彼此之间相互独立，通过标签式导航的引导，用户可以迅速的实现页面之间的切换且不会迷失方向，简单而高效。标签式导航又分为底部标签导航和顶部标签式导航

底部标签式导航

我们每天使用的app中，大多都有底部标签导航，比如常用的qq、微信、微博。将导航放置在屏幕底部是为单手持握时拇指操作带来了更大的舒适性和方便性，也符合拇指热区的范围。将导航放置在屏幕底部也不仅仅关乎到拇指操作的舒适性，还关系到视线问题。如果放在上面，用手指操作时，会挡住阅读的视线；如果控件在底部，不管手怎么移动，至少不会挡住主要内容，从而给予清晰的视角。呈递内容的屏幕在上方，控制按键在下方。

底部tab式导航

顶部标签式导航

顶部式导航一般是将内容进行分流，分类。顶部tab标签适用于沉浸式类的app，比如新闻资讯类、小说阅读类app，因为内容多，需要进行分类。对于目前的app来说，几乎都是底部标签导航和顶部标签导航相结合的。目前市场上多数顶部导航都能通过滑动进行切换，也相当于二级导航。

顶部tab标签导航

二、抽屉式导航

抽屉式导航将部分信息内容进行隐藏，突出了应用的核心功能。设想你的产品信息层级有非常多的页面和内容，难以在一屏内显示全部内容，那么你一定首先会想到去设计一个底部或顶部的tab导航，但导航太多无疑显得臃肿，而且使用户难以点击，那么这个时候，抽屉式导航是个不错的选择。

抽屉式导航

三、宫格式导航

宫格式导航又叫桌面式导航，块与块之间，相互独立，无法实现互相跳转。每一块功能都十分明确。

宫格式导航

三、悬浮icon导航

悬浮icon导航，是将导航页面分层，无论你到达APP的哪个页面，悬浮icon永远悬浮在上面，你依靠悬浮层随时可以去想要去的地方，同时，为了让悬浮icon不遮挡某个页面的操作，通常悬浮的icon都可以在屏幕边缘自由移动。

悬浮时导航

---

我们在设计导航的时候，一定要从功能入手，去考虑选择哪一种导航合适。另外导航设计需注意以下三个设计原则：

1.高亮。选中的标签应处于高亮的状态。

2.节制。尤其是底部导航设计一定要节制，最多不超过5个标签。

3.表意明确。不要乱设计导航，要让用户明白此导航的作用，减少误操作。

个人公众号，欢迎一起交流、学习呀！