聊聊导航×吸顶

全文2639字，阅读需要6min左右

吸顶，字面意思为吸附在某空间的顶部。在生活中经常能见到应用吸顶的产品，如吸顶灯、吸顶电扇、吸顶喇叭等等。

在移动端产品设计与开发中，常见的一个需求是菜单滚动到顶部后吸顶，也即是固定在顶部。接下来介绍的就是在App中上滑页面时可以将哪些内容吸顶、有哪些注意事项、有哪些巧妙的变化等等。

1.需要吸顶的是具有全局价值的内容

从功能交互来看，整个页面架构中最具全局价值的组件就是导航栏。导航栏顾名思义，是用来指示用户所处的当前位置的功能组件，就像汽车导航一样。

导航的目的或者说导航存在的根本意义，就是为了让用户在功能千千万或内容万万千的app中迅速找到自己想要或需要的功能或内容。那么只要是有助于实现这一目的的设计，我们都可以划分在导航需要考虑的范畴之内。即使你不是导航，但是你会影响到用户能否迅速便捷的找到自己想要的，在这一刻你就是导航。

导航的形式有很多种，这里只列举一些常见的导航结构供大家参考：标签导航、舵式导航、抽屉导航、Tab导航、宫格导航、点聚导航、组合导航、列表导航、轮播导航、瀑布导航。有兴趣的同学可以具体了解导航相关主题，这里不作赘述。

而顶部导航栏则肩负起更具体的导航作用。在苹果HIG中描述了，导航栏是用来指示当前页面状态、连接父子页面的，通常包括回退按钮、页面标题、管理当前页面内容的控件（比如搜索、设置、关注、发布按钮等高频使用控件）。当然，由于主题相关，这里讨论的是顶部导航栏，底部或者侧边导航不在讨论范围内。

iOS13导航组件（部分）     （图源Xd-iOS插件库）

因为吸顶的组件会固定占用一块页面区域，减小了屏幕可展示内容，所以吸顶这块区域是非常宝贵的，如果导航栏中的内容价值较低，也可在滑动页面时将其隐藏或者缩小它所占据的页面空间。总而言之，没有任何一项内容能随随便便吸顶。

在国内App中（大家最熟悉的是电商类）很常见的一种页面结构是顶部为banner区、金刚区或瓷片区，中下部是整个商品内容的卡片区，在卡片区的头部会有标签或锚点导航（点击不同导航，滚动到不同内容区）。当用户滑动至商品内容的卡片区时，卡片区的标签或锚点导航，对当前状态的展示也有重要作用。

淘票票-锚点导航

从业务诉求来看，在一些to C 的电商类App等或者营销类页面中，一些活动入口、营销激励信息等都是具有重要价值的内容，也可考虑在用户上滑页面时固定吸附在页面顶部，以增加曝光、起到激励作用。例如虎嗅app（一个互联网资讯类app）的Pro会员页面，顶部除了用户名、搜索栏，还有开通黑卡会员的入口button；还有支付宝理财页面右上角的领福利入口等。

虎嗅Pro会员页面

  支付宝理财页面

2.隐藏&缩减

正如前面所说，吸顶所占的页面区域十分宝贵，一定要确保在用户上滑浏览内容时仍具有全局价值的组件才吸顶。并且如非必要，尽量减少吸顶区域的面积。

缩减

支付宝之前某个版本中有这样的功能：首页顶部使用最频繁的功能“扫一扫”会在上滑时吸附到搜索栏一行，保持在顶部不会消失，并且进行下滑操作时，“扫一扫”、“付钱/收钱”等四大功能会弹出，保证用户需要时随时可点击（不过不知道是不是因为这次双十一改版，这个功能不见了）。

因为“扫一扫”功能是使用频率非常高的一个功能，很多场景下用户一打开支付宝就会点开扫一扫，而确保高频使用的功能随时都可以在需要时被点击这个细节会很好地提升产品的体验感。所以将“扫一扫”上滑时吸顶到搜索栏这一细节是有必要的（因为迭代到最新版本没有了这一细节，所以无法举图例55）。

再比如京东首页：默认情况下，导航栏左侧展示活动入口，右侧展示活动入口及功能控件，在他们下方是通栏的搜索控件。上滑后原导航栏左侧的活动入口隐藏，搜索栏被缩短后放置在导航栏左侧。在滑动至下方商品卡片区域时，标签栏也会吸附在导航栏下方。

京东-上滑前活动入口在导航栏左侧 

上滑后活动入口消失，搜索栏吸顶

并且更细节的是，在下方内容feed流的tab栏在没有吸顶的状态下是有主标和副标两行文字，但在吸附情况下只保留了主标一行文字，这都是对吸顶内容的权衡与调整。

京东-上滑前的小字文案标注

上滑后省略小字节省面积

隐藏

而在一些偏内容浏览的页面中，在用户进行上滑进行沉浸地浏览时，其实会很明确地知道自己当前所在的页面位置，同时使用导航栏中功能控件的概率也很低，这时可以将原标题栏整个隐藏，只将一些服务于浏览内容的组件吸顶。

例如京东的搜索结果列表页：默认状态下，有导航栏、排序功能栏，以及商品内容的筛选栏。当上滑后导航栏、排序栏均隐藏，只保留了筛选栏。这也是考虑到用户通常会先使用搜索和排序功能，然后再上滑逐个查看商品，此时只有对内容的筛选功能贴合用户沉浸浏览商品时的诉求。释放出的页面空间也可以用来展示更多的商品内容，进而促进转化。

京东-搜索结果页的顶部原本有很多组件

上滑后只剩筛选标签

3.替换

这条跟上一条说的其实是一个道理。当用户用户滑动页面时，原来的导航栏中，例如页面标题，已经不是最重要的元素了。那么将这些元素隐藏或者缩短之后，剩余的页面空间也不能浪费，要提取对用户浏览全篇内容时最关键的因素，放置在空出的位置上。

当然这个缩减与新增孰前孰后也不是完全敲死的。比如认为用户在浏览时，某一项内容具有指明灯式的作用，就可以将其单拎出来吸顶，然后重新设计吸顶内容的布局。

比如豆瓣中，默认状态下导航栏中不显示的是页面的标题电影。而当上滑查看该电影详情信息时，原标题就隐藏了，取而代之的是该电影的海报缩略图、电影名以及用户浏览豆瓣电影评价最关注的内容——用户评分。知乎的回答详情页也是如此，上滑时问题隐藏，取而代之的是作者头像、名称、简介与关注组成的导航栏。

知乎-上滑前看得到问题

上滑后更关注作者

4.过渡平滑

当有上述页面组件的变化时，要通过渐隐渐现或者补间动画等形式，让不同组件或内容可以流畅过渡，不产生卡顿感。

另外在一些页面中，默认状态下导航栏的背景可能是图片，那么在上滑吸顶后，导航区域背景的颜色以及文字、控件的颜色也需要进行调整。

淘票票-首页上滑前导航栏背景色为主题色

上滑后导航栏背景色改变

总结

本文分析了在上滑页面时，导航栏中的全局性功能、关键信息，以及背负重要指标的营销类信息，可以吸附在页面顶部。

但吸顶区域寸土寸金，要隐藏或缩小原导航栏中不关键或不符合用户上滑浏览时操作预期的内容，展示用户最关注的信息、用户高频使用的功能或入口。同时在滑动吸顶的过程中要通过动效进行平滑过渡，保证页面流畅性。

参考：

海盐社：《上滑页面时，什么内容该吸顶呢？》作者：鹤一

人人都是产品经理：《从背后的产品逻辑出发，深入理解导航》作者：时光时光慢些吧