滑动页面时的控件设计规范

最近工作中遇到吸顶、吸底的一些问题，于是就收集总结了一下做了一个提案，后期也结合工作中的实际项目将用到的场景提炼了一下，做了一份滑动页面时的设计规范，这里是摘录了前期提案部分。

之前只写了吸顶规范，吸底和锚点等因为也属于滑动页面时需要注意的控件，所以现在补上。文章封面就偷个懒不想改了😄

一、吸顶

PC端及移动端的顶部常有一些顶部导航栏，标示当前所在的页面名称、返回上一页面按钮的放置，一些全局操作按钮的放置、搜索等内容，这些会占用页面较高的空间，某些页面用户在往上滑动的时候，想要做一些更符合用户使用场景的内容调整，比如填写很长的表单，或者查看较多的信息内容，如果一直保留较高的导航栏，会压缩页面高度使用空间，用户体验并不好。

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

吸顶元素：全局导航、全局搜索、原标题栏、Tab切换、操作栏、表头

下面介绍几种如何使用吸顶优化使用体验的方式：

1.改变背景颜色及样式

这种方式一般运用首页有Banner图的情况，那么上滑吸顶后，导航区域背景的颜色以及文字、控件的颜色也需要调整。

2.隐藏及缩减

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

3.替换及更改布局

标题栏在没有吸顶的状态下是有主标和副标两行文字，但是在吸附情况下只保留了主标一行文字。这都是对吸顶内容的权衡和调整。使多行信息变一行，压缩冻结模块的空间。当用户想需要专注填或看表单信息时，头部内容无需占据那么大的位置，压缩冻结后可以让用户看到更多表内容。为了方便用户在浏览页面信息时随时的可操作性，全局操作按钮需要放在顶部导航上展示。

4.阶段性冻结-两阶段

这种方式前端使用的是固定高度的方式，一般只分两阶段冻结，第一阶段冻结顶部关键内容，第二阶段继续冻结需要专注浏览的信息内容上的导航或关键操作。

5.阶段性冻结-多阶段

这种方式前端使用的是向下撑开内容的方式，一般运用在顶部有需要冻结的导航等且下面内容有多个表格的情况，滚动到当前的表格就冻结该区域的表头。

二、吸底

PC端及移动端的底部也有一些操作栏，比如表单的填写操作，或者支付按钮按钮的放置，移动端底部还会有全局的导航栏，这些也会占用一定的空间，吸底可以根据使用场景选择吸底方式。

需要注意吸底的是具有操作价值的内容

吸底元素：操作按钮、 引导操作、移动端的导航栏…

1.1 固定-PC

PC端在表单内容较多、查看内容文章、需要引导用户操作比如支付等场景下，当用户需滑动查看更多内容，可将操作类按钮吸底，需要吸底的内容可以根据布局调整显示。

1.2 固定-APP

移动端底部也常会有一些吸底的控件，比如底部导航栏、主操作按钮、需要引导或便捷用户操作的控件等。一级页面导航会固定在底部，当改页面有主按钮，比如结算等则将该栏放到导航栏上面，如果还有引导类或便捷操作类控件则再放到主操作栏上面。

2.1 非固定-PC

当PC端展示内容分多段，且其中有需要引导用户操作的按钮，建议在滚动到该段时将该操作按钮吸底，滚动到另外一段内容后再取消吸底。

2.2 非固定-APP

吸底内容可以根据具体情况显示或隐藏，这种非固定的方式常用于移动端阅读及查看话题评论时。

三、锚点及回到顶部

也属于页面滚动时需要的控件，配合滚动条用于跳转到页面指定位置。

PC端和移动端都可以在内容过多时使用回到顶部控件，PC端的锚点定位类似导航一样可以放到页面左侧或者右侧，但其实只是页面的内容定位；移动端可以利用滚动条做时间轴类型的定位或者分页定位。

1.1 回到顶部-PC

当PC端页面内容区域比较长时比如瀑布流的使用，用户需要频繁返回顶部查看相关内容时，可以滚动后出现回到顶部控件。

1.2 回到顶部-APP

当页面内容区域比较长时；当用户需要频繁返回顶部查看相关内容时，可以使用回到顶端返回页面顶部。如果当前页面是主页，可以滚动后主页按钮便成回到顶部按钮，这样可以避免遮挡内容，优化阅读体验。

2.1 锚点-PC

当PC端有多条组合内容时，可以左侧做一个锚点定位配合滚动条快速定位到页面需要查看的内容。

当PC端使用上下布局时，且内容区域居中固定时，锚点悬浮在左侧显示，当屏幕小于一定尺寸时，锚点缩小悬浮于页面左侧，鼠标移入时再显示。

当PC端左侧有导航，锚点定位可以放到右侧，常用于阅读文章等场景。

2.2 锚点-APP

当有时间类型的内容比如浏览照片时，可以采取时间轴定位的方式快速滑动到需要查看的内容；内容过多的情况下也可以采取分页的形式，滚动后将分页及回到顶部固定在底部右下角位置。

总结：