1、“BackTop”控件简介
网页右下角(一般)“BackTop”的按钮,以帮助用户快速回到当前页的顶部。
2、使用场景
2.1 页面太长(3屏高度以上)时;
2.2 需要回到顶部做查看内容或操作时;
3、两个细节
“回到顶部”过程中的两个小细节,一是出现“BackTop”按钮的时机,二是回到顶部的动画和速度:
3.1、时机:滚动一定高度后出现“BackTop”按钮,滚动不同高度出现“BackTop”按钮的细小差异,给用户带来的感受差异:
3.1.1 滚动高度小于0.8屏:页面还处于顶部的位置,在顶部位置出现“BackTop”的按钮,此时使用场景上没有这个需要,因为本身就处在顶部,在逻辑上也存在矛盾;
3.1.2 滚动高度0.8 - 1屏:此时第一屏未完全消失,第二屏内容已经展示0.8 - 1屏,屏幕内容即有第一屏内容,又有第二屏内容,此时告知用户可以回到顶部,是提前给用户以预期,给用户以安全感;
3.1.3 滚动高度大于等于1屏:第一屏完全消失,屏幕内容为第二屏内容,此时出现 “BackTop”,此时告诉用户可以回到顶部,错过了提前告知用户的时机;
3.2、点击“BackTop”回到顶部的动画与速度
3.2.1 动画:从当前位置回到顶部的动画,是直接跳转回到顶部,还是滚动回到顶部?个人感受如下:
跳转:一瞬间跳到顶部,和跳转到新页面的效果类似,不确定是在当前页面还是跳转到新的页面,不能给用户清晰的确定性;
滚动:从当前位置以一定的速度往上滚动到页面顶部,让用户明确知道,是在当前页面的滚动,并没有做页面跳转;
3.2.2 动画方式使用“跳转”的方式时,是一瞬间的,没有速度的问题,当动画方式是“滚动”的方式时,速度上需要从以下维度做考量:
回到顶部的时长:因为回到顶部最基本的作用就是快速回到页面顶部,故速度是第一考量因素,固定时间长度为0.4秒;(手工测试主流电商网站回到顶部的平均时长)
回到顶部的位置(距离):此距离是变化的,随着页面滚动的不同,距离不同,考虑在页面最底部的位置,以及在页面出现“TOP”按钮的位置,根据页面总长度适当调整回到顶部的时间,但不超过0.6秒;
回到顶部的速度:速度太快会把当前页面快速在你眼前刷过一遍,给人以眼花缭乱的眩晕感觉,比较不舒服,所以需要适当控制一下速度,在距离不长时,可降低滚动速度;
4、“BackTop”按钮规则小结
结合以上,“BackTop”按钮在实现上的交互说明如下规则:
4.1、页面滚动高度在“0.8屏”以内不显示“TOP”按钮,超过“0.8屏”以上显示“TOP”按钮;
4.2、从当前位置回到顶部的时间固定为0.4秒,页面太长时可适当调整到0.6秒,点回“TOP”按钮后,匀速滚动回当前页面的顶部,(页面短,滚动速度低,页面长,滚动速度高,总时长固定);
4.3、回到顶部过程中不刷新页面;
网友评论