背景
最近在优化一些产品的页面，某些页面用户在往上滑动的时候，想要做一些更符合用户使用场景的内容调整，在做之前，大概分析了下一些主流产品的做法。
这就不得不让我们先分析了解下 “顶部导航” 的作用及承载内容：顶部导航栏用于标示当前所在的页面名称、返回上一页面按钮的放置，一些全局操作按钮的放置、搜索等….
我们似乎已经习惯了导航栏的存在，哪怕只是放一个页面名称的情况下；如果不考虑以上因素，那么是不是可以把顶部导航栏隐藏掉？能使得页面展示更多的重要内容，毕竟APP页面的空间寸土寸金。这类一般比较适合一级页面，不需要返回至上一个页面。
在大量的分析一些产品后，发现滚动页面时冻结内容的变化形式大概分为以下几种：
1、改变背景和元素样式
2、隐藏导航栏、沉浸式浏览内容
3、更改布局、压缩空间
4、精简信息、替换内容
5、展示特定重要操作
6、阶段性冻结页面中的筛选内容
一、改变背景和元素样式
这种一般就是顶部是有色背景，在往上滑动页面的时候，由于顶部内容要冻结，为在页面上凸显出元素的层级感，所以冻结的内容要做相应的样式调整。
如下面自如首页banner为搜索元素的有色背景，当页面往上滑动时，相应的搜索元素也做了样式调整，即城市和消息由白色变成了黑色，搜索框增加了阴影，以适应白色页面内容区域的显示。
自如 “首页”
再如当当的首页，当页面往上滑动的时候，搜索框变为灰色来适应白色页面上内容区域的显示。
当当 “首页”
二、隐藏导航栏、沉浸式浏览内容
上面我们说了，移动端的页面上寸土寸金，想要某种场景下展示更多的重要内容，那就必须在某些时候隐藏掉一些相对次要信息。
如京东购物车页面往上滑动时，隐藏导航栏，沉浸式的页面浏览模式，能让单屏承载更多的内容，当往上滑动页面时说明用户想要浏览之前加入购物车的商品。
京东 “购物车”
再如京东搜索商品后的结果页面，往上滑动页面时，说明用户想要浏览筛选出自己想要的商品，此时顶部导航栏区域（搜索框及辅助操作）隐藏，只冻结条件筛选项，方便用户进行精细筛选。
京东搜索结果页
三、更改布局、压缩空间
这种一般就是多行信息变一行，压缩冻结模块的空间。
如京东 “首页”，当页面往上滑动的时候，原本单占一行的搜索框缩小宽度、移动至上面导航栏，占据原来运营位的位置，与一些全局操作按钮压缩在一行的空间；也就是当用户想要无目的的在首页浏览、瞎逛时，搜索框就无需占据那么大的位置，反而应让用户能快速的在单屏内看到更多的商品。
京东 “首页”
再如去哪儿上单个地方的详情页，当用户往上滑动页面时，城市名称与城市筛选按钮被压缩、移动至顶部导航栏，与搜索框和全局按钮在一行的位置。默认状态下城市名称单独一个区域，显示为较大的字体形式，头图背景为该城市的标志性建筑，容易把用户带入到情景中去，展开对该城市的无限遐想或唤起一些情感记忆，算是情感化设计的一种。但当用户往上滑动页面时，说明想要具体查看该城市周边的一些吃喝玩乐的相关，那么这时候头图及该城市的名称就显得不重要了。
去哪儿
四、精简信息、替换内容
这种一般是从默认的一种形式变为另一种形式的过程，当页面往上滑动时，由于冻结的内容较默认的变化较大，所以可认为是内容的替换。这种形式在个人中心页面运用的比较多。
如京东的 “我的” 页面，头部默认展示个人的一些信息，当用户往上互动页面时，渐隐出现顶部导航（小头像、页面名称、全局操作按钮），导航背景为主题色，把全局操作按钮放在顶部导航上展示是为了方便用户在浏览页面信息时随时的可操作性。
京东 “我的”
如高德地图 “我的” 页面，默认展示用户信息，当往上滑动页面时，顶部出现导航栏，个人头像被放小放在左侧，右侧为全局操作“设置”按钮。
高德地图 “我的”
再如马蜂窝 “我的” 页面，由于不是一级页面，故该页面默认有顶部导航栏，左上角为返回按钮，右侧为全局操作，头图为地球背景，上面的大数字为旅行的国家及城市数据，让用户更具有情景代入感。当往上滑动页面时，顶部导航上的信息做了稍微调整，头像被缩小放了上去，右侧设置按钮隐藏，背景替换为模糊背景。相较于前两个应用的个人中心页变化较小。
马蜂窝 “我的”
五、展示特定重要操作
如当当 “我的” 页面，顶部模块默认展示个人信息，当往上滑动页面时，顶部导航栏位置由原来的搜索按钮被放大为搜索框冻结在顶部，引导用户去搜索 “读书吧”，此种操作为特定的运营需求。
当当 “我的”
六、阶段性冻结页面中的筛选项
这种方式一般运用在类似首页这样的页面，第一屏一般为分类入口及运营位，第二屏以后一般为某个主题的商品或服务类展示，往往为图片加重要信息的展示形式。
如高德地图的 “附近” 和马蜂窝的 “首页”，页面上部分为一些分类入口及运营位，当页面往上滑动时，在筛选项滚动至页面顶部时冻结在顶部，便于用户沉浸式浏览商品及对商品的筛选。在比较自然的过渡情况下，对用户来说又像是一个全新的商品页面，转场比较自然，更容易让用户接受。
高德地图“附近”
马蜂窝 “首页”
总结
不管是在何种情况下顶部冻结的内容，都有一个相同的关键点，那就是过渡要自然，一般使用缩放、移动、渐隐渐显的方式，不会让用户感觉到明显的突兀。
同时要尽量精简需冻结的内容信息，原则就是对下面页面中的内容一定是有必要而存在的，如果非必须则可以考虑隐掉。要尽量缩减被冻结的位置空间，留出更多的页面空间以便于用户浏览主要信息内容。
当开发同学嫌麻烦而跟你说默认是啥样，滚动时也得啥样时，你可以就本身的产品站在用户使用场景及运营需要的角度跟他解释说明这么做的原因，而不是直接拿着某某产品应用的页面说，人家就是这么做的。站在自身产品和用户的角度考虑问题显然更有说服力一些，而不仅仅只是表面的展示和交互形式。
网友评论