页面加载功能设计总结（二）

时间：2019-07-04 13:56
发布：宁波达内培训
来源：网络
分享到：

交互设计一定要符合用户的心理认知。如果这个页面从底部弹出，会给用户一个暗示：这个页面是底部弹出的，那么我下拉是否就可以关闭这个页面呢？还是以“新增乘车人”页面为例，这里还是秉持着iOS右滑返回的机制。这个就造成了一个“手指向右，页面向下”的奇葩交互样式，明显有悖于用户的认知。

这种处理方式也给我们带来了启发。例如，微信中用户点击浮窗，文章页面是扩展开来的。那么我们可以脑洞一下，用户双指捏合的手势是否可以关闭文章页？

顺序

用户触发了某个交互动作进入一个新页面，然后页面和后台开始进行数据传输，数据传输完成后在页面渲染。这是用户进入一个新页面所经历的几个重要阶段，如下图所示，这里我将其分成了4个阶段。接下来我们从阶段1开始梳理页面加载过程的每一个步骤，力图发掘可以优化的点。

1）执行操作

从用户的角度来看，当他执行完操作1，后面的步骤就跟他没有关系了。那么在页面渲染完成前，我们应该给用户展示一个什么样的页面呢？上面看到的几款产品，他们的处理方式简单粗暴——白屏。这对用户来说，不是一个友好的体验。如果你的页面布局样式相对固定，可以考虑先给用户展示页面框架，然后再展示具体的内容，这种加载机制就是占位符，又可以称之为“骨架屏”。

与彻底的白屏相比，先给用户展示页面框架，用户在页面数据没有加载完成的情况下也可以了解页面的大致结构。此外用户一进入这个页面，发现这个页面不是空荡荡的，它已经有东西了，会觉得页面已经加载出来，从而产生一种“零等待”的错觉，体验更加流畅。

2）先文字，后图片

一个页面的内容量是很大的，如果我们获取完所有的信息才在客户端渲染，所耗费的时间是很长的。因此为了缩短用户的等待时间，我们可以考虑先展示一些网络资源较小的内容。例如，先加载文字，再加载图片。

我们都知道5G时代即将到来，信息传输的速度大大加快。是不是意味着我们不需要考虑加载顺序了呢？当然不是！

将信息展示给用户只是界面设计的最基本要求，我们的最终目的是帮助用户理解这些信息。一个页面的信息量是很大的，网速的提升可以做到让页面立马加载完成，但是一股脑的把所有信息展示给用户是否合理？分步骤地给用户展示信息，让用户更容易消化可能会更合适。例如，用户要查看跑步路线图，此时用户的注意力必然都在不断生成的跑步路线上，这个时候其余的内容可以延后展示，避免造成干扰。

3）预加载

用户必须要进入这个页面才可以请求数据吗？可不可以事先加载好页面信息，这样用户进来就不需要加载了。这种提前加载好页面内容的机制就是预加载。网易新闻中，断网依然可以查看新闻，即使这条新闻你从来没有打开过。

不止是页面

在文章最开头我说的是：狭义上的“前进”指的是用户触发某个交互动作进入一个新页面。为什么强调是“狭义”，因为用户只要触发某个交互动作完成状态的迁跃，我们都可以认为是“前进”，只不过我们习惯于使用一个新页面来表现新状态。当然现在我们学会使用弹框了，这是一个进步。我们添加商品到了购物车，不需要进入一个“添加成功”结果页，直接一个toast就可以了。

但弹框是最终答案吗？我们的最终的目的是为了让用户感知系统状态的变更，而用户与系统交互的触点又是一个个操作对象，为什么不直接通过改变操作对象的样式来完成信息的传达呢？还是添加商品到购物车的操作，这里通过动效演示了这个过程，不用任何文字，用户就能明白“商品已经添加到购物车”这个事实，并且提示了用户购物车的位置，信息的传达更具有指向型。