上海移动端网站优化——移动导航的七种设计模式

根据产品层次的深度和广度，选择合适的导航模式是产品设计中的一个关键环节。让我们互相鼓励。

在前面写:我读过很多总结导航的文章，但是它们基本上是一样的，但是不够详细，也没有从我们常用的产品中分析出来。因此，我用自己的想法再次分析了它们。有些段落来自引文，比如我读过的一些文章《拇指热区》，但大部分分析来自我的原创作品。这篇文章应该说是站在巨人的肩膀上，并给出一些拙见。

任何应用程序的组织信息都需要通过某种导航框架来固定，就像建筑工人建造的高楼一样。基础非常重要。之后，你想建多少层楼，每层有多少个房间都建在地基上。新产品也是如此。合适的导航框架决定了产品的扩展和扩展。

不同的产品需求和业务目标决定了不同导航框架的设计模式。交互设计的第一步是确定导航的框架设计。框架确定后，血肉可以逐渐丰富。

首先，我们需要对组织信息进行分层。在这一步中，我们必须做好信息层次的扁平化工作。我们不能散布所有的组织信息。这样做只会让用户心烦意乱，让他们找不到他们想要的重要操作，我们也不能把层次搞得很深。用户没有那么多耐心和你玩捉迷藏。务必将核心、最稳定和最基本的功能元素放在第一页，将其他内容放在第二层、第三层甚至更深层。

然后，根据层次的深度和广度确定导航的设计模式。不要认为这有多难，移动终端的屏幕很大，操作模式不过是点击、滑动和按压。因此，导航模式通常分为以下7种类型(当然，您可以在这7种类型的基础上相互组合)。接下来，我们可以具体分析这7种导航模式。

一、标签导航

这就是我们通常所说的标签导航，它是移动应用程序中最常见和最常用的导航模式，适合在相关类型的信息之间频繁切换。这类信息具有很高的优先级，用户经常使用，并且相互独立。通过标签导航的引导，用户可以在页面间快速切换而不迷失方向，简单高效。应该注意的是，根据逻辑和重要性，标签导航被控制在5个以内，并且超过5个用户很难记住并且容易丢失。

选项卡导航进一步细分为三种类型:底部选项卡导航、顶部选项卡导航和底部选项卡扩展导航。

1.底部的标签导航

如果你看看现在手机上常用的应用，你会发现QQ、微信、淘宝、微博、美团、京东等。底部是所有选项卡导航。

这是一种符合拇指热区操作的导航模式，那么什么是拇指热区呢？当你在路上行走时，手里拿着手机并操作它；当站在公共汽车上，一只手拉扶手，另一只手操作时，你最常见的操作是用右手握住并操作手机。因此，对于手机来说，触摸的交互设计主要是针对拇指的。

然而，在手机操作中，拇指的可控范围有限，缺乏灵活性。特别是在今天的大屏幕手机中，拇指的可控范围不到整个屏幕的三分之一——主要集中在屏幕的底部，在拇指的另一侧。用右手拿着手机时(毕竟左撇子是少数，我们仍然需要为主流用户设计，下面的图显示了拇指的作用区域)

随着手机屏幕越来越大，内容显示越来越多，但单手操作变得更加困难。这就是为什么工具栏和导航栏通常位于移动电话界面的下边缘，而导航位于屏幕的底部，即拇指热区，当用一只手握住时，这给拇指操作带来了更大的舒适性。

将导航放置在屏幕底部不仅关系到拇指操作的舒适性，还关系到另一个问题:如果放置在屏幕底部，手指操作会阻挡阅读的视线。如果控件在底部，无论手如何移动，至少它不会阻挡主要内容，从而给出一个清晰的视角。呈现内容的屏幕在顶部，控制键在底部。

这也是为什么我是水果粉。与安卓手机在底部放置三个触摸式物理按键相比，iPhone在手机底部放置一个需要按下的家庭按键要好得多。这些靠近屏幕边缘的物理按键被挤压在一起，手指非常不方便操作。(华为甚至直接把3个物理键放在屏幕上)，尤其是玩游戏的时候，我总是误触发这3个物理键，造成无意的退出，非常不舒服。如果导航也被放在底部，舒适只能说再见(市场上的主流安卓手机)

2.顶部选项卡导航

安卓的物理密钥被放在底部。为了不创建堆栈，许多安卓应用程序使用顶部标签导航，这是一种妥协。(下图显示了微信安卓和iOS)

现在，在牺牲物理按键和拇指操作的舒适性的同时，微信安卓版已经放弃了顶级的导航方式，并与IOS保持一致。

当然，顶级导航也不是那么没用。现在，QQ音乐和酷音乐都使用顶部标签导航。为了更好地浏览基本信息(歌手、歌曲名称)和支持快速操作(播放/暂停),播放器需要固定在底部，那么顶部标签导航是一个不错的选择(如下图所示)

还有腾讯新闻和网易新闻等新闻应用，由于内容和类别更多，它们在顶部和底部使用双标签导航，而切换频率最高的标签位于顶部。这是为什么？因为新闻是在每个标签中沉浸式阅读，最常见的操作是在一个标签中连续向下滑动阅读内容，将常用的标签放在顶部并添加手势切换操作，实际上可以带来更好的阅读体验。

摘要:在两种情况下可以选择顶部选项卡导航。

L A功能必须固定在底部，所以其他标签只能固定在顶部，但为了操作方便，顶部标签导航最好支持手势操作，即滑动可以切换；

这款应用是一种身临其境的体验，比如新闻、小说等。为了给用户更好的阅读体验，标签可以放在顶部。