最近在做一个核心功能流程的优化改造，到项目后期主要在抠静态页面的细节、实现，还是经研发小哥哥提示才意识到，页面滑动的时候是不是像以前一样导航栏是否吸附在页面顶部就可以、导航栏内容是否变化等等这些问题还需要仔细考虑。

本文就来分析下，在App中上滑页面时可以将哪些内容吸顶、有哪些注意事项、有哪些巧妙的变化等等。

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

从功能交互来看，整个页面架构中最具全局价值的组件就是导航栏。在苹果HIG中描述了，导航栏是用来指示当前页面状态、连接父子及页面的，通常包括回退按钮、页面标题、管理当前页面内容的控件（比如搜索、设置、关注、发布按钮等高频使用控件）。

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

另外，在国内App中很常见的一中页面结构是顶部为banner区、金刚区或瓷片区，中下部是整个商品内容的卡片区，在卡片区的头部会有标签或锚点导航。当用户滑动至商品内容的卡片区时，卡片区的标签或锚点导航，对当前状态的展示也有重要作用。

从业务诉求来看，在一些 to C 的电商类App或者营销类页面中，一些活动入口、营销激励信息等都是具有重要价值的内容，也可考虑在用户上滑页面时固定吸附在页面顶部，以增加曝光、起到激励作用。比如下图网易严选的购物车页面：

吸顶内容除了导航栏，还有一条满额免邮、凑单的营销信息通栏。

没有任何一项内容能随随便便吸顶

隐藏&缩减

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

比如京东首页：

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

不过大家发现了没有，标题栏在没有吸顶的状态下是有主标和副标两行文字，但在吸附情况下只保留了主标一行文字。这都是对吸顶内容的权衡与调整。

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

当上滑浏览购物车详情时，将原标题栏隐藏，只将全部、降价这些用来筛选商品的标签栏吸顶。

再比如下图京东的搜索结果列表页：

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

替换

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

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

默认状态下导航栏中不显示的是页面的标题电影。而当上滑查看该电影详情信息时，原标题就隐藏了，取而代之的是该电影的海报缩略图、电影名以及用户浏览豆瓣电影评价最关注的内容——用户评分。

知乎、淘票票中也都有类似的处理：

过渡平滑

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

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

划重点

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

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

本文原创，未经作者允许不可转载！

更多内容，欢迎关注作者微信公众号：海盐社！