年薪20W的设计师是如何做导航设计的

你有没有考虑过这样一个问题？一般导航栏为什么要放在底部，为什么不放在左边或者右边？

那我们今天一起来揭开它的神秘面纱。

首先想了解它，就必须知道它设计的原理：拇指区域。

这里的拇指区域以热图的形式来展示。它可以显示出大拇指操作手机屏幕区域的难易程度。借以Hoober的研究结果，画出最常见的使用情境的拇指热图：

绿色表示拇指正常点击区域，黄色需要使用吃奶力气才能点击的区域，红色表示难以点击到的区域。我们设计导航系统的时候，也会遵循拇指热区的原则，把主要功能放在绿色区域，辅助功能放在黄色或者红色区域。

那么我们一款产品拥有巨量的标签，谁应该放在最容易点击的区域呢？显然是最常用的功能，常用功能通常不只有一个，就诞生了更加便捷的导航栏。

那么？都有哪些标签导航呢？我们一起看看吧。

一、底部标签式导航

底部标签导航是目前最常见的导航形式。底部导航一般采用3-4个标签，最多不会超过5个。

1. 优点

• 入口直接清晰，操作路径短，便于在不同功能模块进行跳转；
• 直接展示入口内容，内容曝光度高。

2. 缺点

• 功能之间无主次；
• 扩展性差，不利于后期的功能扩展。

二、舵式导航

舵式导航是 底部导航的一种扩展形式，像轮船上用来指挥的船舵，两侧是其他操作按钮。

普通标签导航难以满足导航的需求，就需要一些扩展形式，和标签导航相比，舵式导航把核心功能放在中间，标签更加突出醒目，同时对主功能标签做了扩展功能。

1. 优点

• 在默认加载的页面之外，又能够突出强调中间的入口；
• 入口直接清晰，操作路径短，便于不同功能模块进行跳转；
• 直接展示入口内容，内容曝光率高。

2. 缺点

与标签导航存在同样的弊端。

• 功能之间无主次；
• 扩展性差，不利于后期的功能扩展。

三、Tab标签式导航

一般 用于二级导航，当内容分类较多的时，一般采用顶部标签导航设计模式。

1. 优点

标签数量可以随意根据需求变化，可以左右滑动，衍生更多标签。

2. 缺点

操作热区较小，有APP设计的交互前与后的样式差异不大，容易造成误操作的困惑。

四、抽屉式导航

抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能，让用户更专注于核心的功能操作上去， 一般用于二级菜单。

1. 优点

• 节省页面展示空间；
• 注意力聚焦在当前页面。

2. 缺点

• 左上角的按钮存在于单手操作热区难以触达；
• 降低了用户对产品部分功能的参与度。

五、宫格式导航

主要将入口全部集中在主页面中，入口相互独立，没有太多的交集，无法跳转互通。

采用这种导航的应用已经越来越少，往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。

六、轮播式导航

采用Banner轮播导航，当应用信息足够扁平，内容比较单薄时使用。特别是在产品初期，缺乏用户和内容，这种导航目前已经很少用。

该方式就可以凸显产品核心功能给予用户使用（如：应用市场）。

七、列表式导航

现有APP中一种主要的信息承载模式，列表导航和宫格导航类似，属于二级导航。

列表式导航分为3类：标题式列表、内容式列表、嵌入式列表。

• 标题式列表：一般只显示一行文字，有的显示一行文字加一张图片等等。
• 内容式列表：主要以内容为主，所以在列表中就会体现出部分内容信息，点击进去就是详情。
• 嵌入式列表：嵌入式其实就是由多个列表层级组合而成的导航。

八、组合式导航

多用于产品本身 功能较为复杂，既需要用户能 聚焦于内容，又需要给出用户不同页面之间的入口，以便用户进行直接跳转，那就采用组合式导航，利用不同导航的特性来满足产品需求。

组合式导航目前最常见的导航方式。

如：标签式导航+列表式 ;标签式+宫格式 ; 舵式+列表式+标签式等等。

每个产品迭代发展和变化，也会导致产品导航在过程中不停的产生变化，就必须依据用户属性和使用场景进行调整。不拘泥任何模式，解决问题才是根本。

那我们该如何办呢？以下总结了几点建议：

1. 整理导航结构内容

APP常包括的内容是：标志、导航、搜索框、语言、登陆注册、口号等等这些内容。

这么多内容不可能全部放置在界面当中，所以设计的过程中，一定要提炼出自己核心的内容：用户一进来看到什么，会做什么操作，找到他们最常用的功能，他们最核心最重要的功能。

例如：抖音就是拍摄，支付宝就是支付，微信就是社交，小红书就是内容，根据最核心的内容，再去筛选层次更低的。

例如：抖音除了拍摄，还有浏览内容，抖音贴近社交就要突出这样的元素，那么消息和朋友都是很重要的内容。

2. 分析APP风格，确定导航的具体风格

在确定网站导航的构成内容之后，我们可以将这些信息列出，分析APP的整体风格和最佳的用户体验，确定好导航的表现形式。

3. 设计方案

在确定好导航的表现形式是做顶部固定导航还是底部固定导航之后，我们需要将确认好的导航内容进行组合排列设计。选出最优的一款设计方案。

在设计的过程中，我们需要遵从用户体验为上的设计原则，在保证内容可读的情况下，再去保证界面设计的最优。

举个例子：QQ音乐。

左图的QQ音乐原图主要是突出了播放内容，但跟右图相比，界面简单明了，也突出播放的重点，但是不符合现在的定位，现在的QQ音乐以内容作为核心需求，给用户提供更多的内容服务。

产生的影响：产品的需求在变化的同时，我们所使用的界面以及导航栏的选择也有所不同。

这个是最久之前的QQ音乐界面，这时候核心需求是播放工具，歌曲都是下载下来保存在手机中。

过渡到现在的版本，界面导航栏发生了变化，使用了多种导航栏的使用模式，同时此时在线听歌已经是常态，所以此时核心需求是提供歌曲内容，更多的展示内容是音乐，而不是最初的用户界面。

因此，导航也会跟着去变化。是一个由少到多的过程，需求在变多，提供的服务也在变多，导航栏的选择也在变化，去适应更多的需求变化。

那么我们一起看看咱们的国民软件-支付宝都用了哪些导航设计。

这是支付宝的首页，很容易我们就看到了他的「tab式导航」。

在「tab式导航」中，都是我们常用的功能，页面转换最多的页面。

接下来还有「宫格式导航」集合了日常所需的部门工具，属于工具类合集。

当然不止于此啦，在「我的」界面里依然有许多功能入口，采用了「列表式导航」。

观察市面上同类别的产品也是一样，不单只会适应一种导航栏模式，各类的导航栏都是能够去加以运用的。

纵观各类的APP也是一样，导航栏也是一直在变化的，但是核心点一直没有发生变化，那就是：给用户提供便利和美观。

九、总结

很多导航与导航之间可以相互搭配使用，没有最完美的导航，而设计导航的首要因素是要理解需求，从需求出发，以及配合相应的场景使用，做出最合适的设计模式。

本文作者@木纹

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！