issues
search
TokenYangForever
/
NewProject
0
stars
0
forks
source link
性能体验优化相关
#19
Open
TokenYangForever
opened
6 years ago
TokenYangForever
commented
6 years ago
骨架屏(skeleton screen)
简介
骨架屏(skeleton screen),它不是对响应速度的优化而是在用户体验上优化,让用户感觉'更快'。传统的加载过程都是一个菊花loading转圈圈,或者进度条什么的。
而在页面结构比较固定的情况下,使用骨架屏用户体验就比较好了,可以给人一种页面'预加载'的感觉,其实这个时候并没有获取到数据或者渲染完成。因为用户看到骨架屏后可以预感到页面内容,在它们实际出现之前,下面是一个使用骨架屏的示意图:
样式的实现
骨架屏的实现可以用css来写,也可以直接切图用图片,完成后还可以加上一些css动画效果。
逻辑的实现
在设计的时候需要注意的就是页面的状态,一般来讲只需要三种状态,这里结合我们的app项目(使用的vue框架)说明一下:会在vue实例的data中定义一个表示页面状态变量,模板根据这个状态来显示不同的内容。
1."预渲染"状态,这个阶段还没有调取接口,首先把页面的vue实例初始化完成,这个时候只显示骨架屏、一些不需要调接口获取的数据渲染出的内容、固定写死的内容。并且最好把所有的交互禁止掉(免得出错),就是尽管有的按钮已经渲染出来了,但是点击是没有效果的。
2.正常状态,这个阶段在调完接口获取到数据之后,修改页面的状态,把获取到的数据渲染成内容替换掉之前骨架屏的位置,页面其他内容不动,这个时候交互逻辑恢复正常。
3.异常状态,这种状态就是针对接口报错或者其他错误出现的时候,可根据需要显示特定错误页面的内容。
骨架屏(skeleton screen)
简介
样式的实现
逻辑的实现