干货丨移动端导航的七种设计模式

在有些情况下，简单的底部tab式导航难以满足更多的操作功能，这个时候我们就需要一些扩展形式来满足需求。如微博和QQ空间、闲鱼都做了这种扩展，也因此给设计增加了一些个性化的亮点（如图）

在这些APP中，为了让用户更简单的贡献内容，突出了按钮的设计，让平淡的标签栏多了几分趣味。

标签导航总结：

实际上，底部Tab模式导航在iOS和Android上一直是最安全的一种导航模式，他不怎么出彩，但是绝对不会犯错。在大屏幕时代，底部Tab模式的导航更能适应，也更好设计。

适用于：入口分类数目不多，可以控制在5个以内，且用户需要在入口间频繁切换来执行多个任务

需要注意：结构太过复杂而且不稳定的应用不适合标签式导航

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

但是，抽屉栏式导航有两大缺陷

1、在大屏幕手机上，单手持握时处于操作盲区，难以点击

我们看到随着iPhone6和iPhone6 plus的推出，到今年6S的持续推进，大屏幕手机时代就这么不可阻挡的来了，而屏幕顶部左上角的抽屉栏位置，一个需要被经常操作的入口，现在，处在了操作盲区。（如下图）

2、 抽屉式导航可能会降低你产品一半的用户参与度

抽屉栏为页面带来干净的设计的同时，也让用户忽视隐藏的信息，既然你第一眼看不到这些入口，那么你也就会时常忘记它们在哪儿。这也导致了隐藏在抽屉栏内的信息内容用户点击率下降，参与感降低。

那么，问题来了，到底什么时候适合用侧导航呢？

我们总结一下：

l 如果应用主要的功能和内容都在一个页面里面。只是一些用户设置这类低频操作内容需要显示在其他页面里。为了让主页面看上去干净美观，可以把这些辅助功能放在抽屉栏里。

l 如果你的应用有不同的视图，且他们是平级的，需要用户同等地对待，抽屉栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。

l 在大屏时代使用抽屉栏，手势操作显得尤为重要，从屏幕边缘唤出抽屉栏是个不错的选择。

需要注意的是：需要用户有一定参与的信息层级，最好不好放置在抽屉栏

如果说标签式导航是APP中最普遍的导航方式，那么列表式导航就是最必不可少的一种信息承载模式，这种导航结构简单清晰、易于理解、冷静高效，能够帮助用户快速定位到对应内容。在APP中的应用也分为两种

1、 作为主导航使用

如果该APP主要表达的信息层级较为单一，且并不会在入口间频繁且反复跳转，那么将列表式导航作为主导航是一种不错的选择。例如杂志Elle，作为一个杂志APP，他以文字、图片表达为主，层级浅且内容评级，用列表式导航作为主导航来构架内容，简单而直接。（如下图）

2、 作为辅助导航来展示二级甚至更深层级的内容

你几乎在所以APP中都能看到它的应用，作为信息梳理条目，列表数量尽量保持在一屏以内，超过一屏最好再分一级，而且按照人一次只能记住4项事物的心理法则最重要的内容归纳在前4个列表更容易被人们记住。如果不同种类的内容放在同一页面，那么要注意为这些内容分类，比如微信的设置页面，用留白的方式来区分内容的不同（如下图）

总结：

列表式导航大多作为辅助导航来展示二级甚至更深层次的内容，若要作为主导航，必须满足层级浅且内容平级的条件

需要注意的是：

l 列表式导航的数量保持在一屏以内，超过一屏最好再分一级，

l 将最终要的内容归纳在前4个列表更容易被人们记住

l 要注意为列表内容分类。

当你的信息足够扁平，可以尝试平铺式导航。这种导航方式很容易带来高大上的视觉体验，最大程度的保证了页面的简洁性和内容的完整性，且一般都会结合滑动切换的手势，操作起来也非常方便。PChouse是一个家居杂志的APP，杂志休闲随意的特质，非常适合平铺式导航，最大限度的保持了图片的完整性。（如下图）

但缺点是用户只能切换的相邻页面，很难跳转到非相邻的页面，很容易迷失位置，因此平铺式导航都会添加几个小点来指示当前位置。如墨迹天气中切换城市的操作就运用了平铺式导航，优点是可以在一个页面完整展示当前城市的情况，快速切换到其他城市。但如果你设置的城市比较多，就很难快速定位到某个城市，但所幸手势操作切换方便，且正常情况下，用户最多只会设置2-3个页面，不会造成太大的负担。

（编辑：南平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!