美文网首页新学霸社群
第36周+《交互设计 - BackTop 控件》+林灿业+新学霸

第36周+《交互设计 - BackTop 控件》+林灿业+新学霸

作者: 林灿业 | 来源:发表于2019-09-22 17:58 被阅读0次

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、回到顶部过程中不刷新页面;

相关文章

网友评论

    本文标题:第36周+《交互设计 - BackTop 控件》+林灿业+新学霸

    本文链接:https://www.haomeiwen.com/subject/vbfzectx.html