让页面加载变得更有趣

发布时间:2019-08-15

如何在进入一个新页面的过程中给予用户良好的体验呢?我们可以从以下三个方面进行分析:指示器、方向和顺序。

指示器  
用户每次进入一个新页面都要从后台请求数据,数据返回到页面完成渲染,内容才会展示出来。这个过程需要时间,需要用户去等待。指示器的作用就是填补用户等待的时间,减少用户因等待而产生的焦虑情绪。
1、 告诉用户系统当前的状态
防止用户焦虑首先我们要告诉用户页面加载的过程正在进行。如果我们不提示用户,那么用户看到的就是一尘不变的白屏。没有任何元素提示用户页面内容正在加载中。一旦你不知道自己所等待的流程是否正在进行,那么等待就是漫无目的的,焦虑情绪也会产生。所以使用一个loading动效弹框告诉了用户页面正在加载中。及时告诉用户系统当前的状态可以很好的起到安抚用户的作用。
2、 品牌基因植入
指示器的样式并没有特殊的要求,虽然大部分的产品使用的都是上面所提到的loading弹框,但是指示器样式和载体并不只限于此。我们可以选择进度条,也可以将loading的动效放到标题栏。
如果我们更进一步,可以将品牌基因植入指示器的设计中。指示器在产品中出现的场景会很多,我们可以花点心思,做的尽量精致一点。很多产品都选择通过一些有趣的动效分散用户在等待过程中的注意力。

方向
页面在水平方向上跳转目前来说依然是主流,分为左右平移和覆盖平移两种。当然不管是哪种,“从右到左”的页面跳转方式大行其道的原因是它这符合用户对于一个线性操作流程的的直观感受。目前也有很多产品选择在竖直方向上加载页面,以从下往上居多。那么竖直方向和水平方向的区别在哪呢?这个在上面也提到过,水平方向的页面流符合用户对于操作流程的直观感受。交互设计一定要符合用户的心理认知。

顺序
用户触发了某个交互动作进入一个新页面,然后页面和后台开始进行数据传输,数据传输完成后在页面渲染。
1、执行操作
从用户的角度来看,当他执行完操作1,后面的步骤就跟他没有关系了。那么在页面渲染完成前,我们应该给用户展示一个什么样的页面呢?处理方式简单粗暴——白屏。这对用户来说,不是一个友好的体验。如果你的页面布局样式相对固定,可以考虑先给用户展示页面框架,然后再展示具体的内容,这种加载机制就是占位符,又可以称之为“骨架屏”。与彻底的白屏相比,先给用户展示页面框架,用户在页面数据没有加载完成的情况下也可以了解页面的大致结构。此外用户一进入这个页面,发现这个页面不是空荡荡的,它已经有东西了,会觉得页面已经加载出来,从而产生一种“零等待”的错觉,体验更加流畅。
2、先文字,后图片
一个页面的内容量是很大的,如果我们获取完所有的信息才在客户端渲染,所耗费的时间是很长的。因此为了缩短用户的等待时间,我们可以考虑先展示一些网络资源较小的内容。例如,先加载文字,再加载图片。我们都知道5G时代即将到来,信息传输的速度大大加快。是不是意味着我们不需要考虑加载顺序了呢?当然不是!将信息展示给用户只是界面设计的最基本要求,我们的最终目的是帮助用户理解这些信息。一个页面的信息量是很大的,网速的提升可以做到让页面立马加载完成,但是一股脑的把所有信息展示给用户是否合理?分步骤地给用户展示信息,让用户更容易消化可能会更合适。

3、预加载
用户必须要进入这个页面才可以请求数据吗?可不可以事先加载好页面信息,这样用户进来就不需要加载了。这种提前加载好页面内容的机制就是预加载。网易新闻中,断网依然可以查看新闻,即使这条新闻你从来没有打开过。
不止是页面,当然现在我们学会使用弹框了,这是一个进步。我们添加商品到了购物车,不需要进入一个“添加成功”结果页,直接一个toast就可以了。
但弹框是最终答案吗?我们的最终的目的是为了让用户感知系统状态的变更,而用户与系统交互的触点又是一个个操作对象,为什么不直接通过改变操作对象的样式来完成信息的传达呢?还是添加商品到购物车的操作,这里通过动效演示了这个过程,不用任何文字,用户就能明白“商品已经添加到购物车”这个事实,并且提示了用户购物车的位置,信息的传达更具有指向型。