不就是一个空白页，有必要那么讲究吗？

本文为掘金社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！

前言

在各类软件应用中，会经常遇到空页面的情况，比如列表无数据、搜不到相应结果、用户数据没有添加等等。这种空页面看似很少出现，但是如果不注意体验的话，会让用户不快甚至是困惑。今天我们就来讲讲针对各类空页面，如何改善用户体验。

列表无数据

页面无数据通常会在列表类页面中出现，最为简单的方式就是用一个空图标+文字说明的方式告诉用户查询的结果为空，比如下面这样。

这是中规中矩的无数据空页面，遇到过奇葩的情况是直接给一个白屏 —— 你这是告诉用户是数据加载不出来呢还是没数据呢？ 相比这种静态的空页面，我们可以使用 Lottie 加载一些带动效的无数据指示，会让用户体验好很多。而需要写的代码其实并没有几行。

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    appBar: AppBar(
      title: const Text('抱歉'),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Lottie.asset(
            'assets/empty.json',
            repeat: true,
            width: 200.0,
          ),
          Text(
            '暂无数据',
            style: TextStyle(
              color: Colors.grey[400],
              fontSize: 14.0,
            ),
          ),
        ],
      ),
    ),
  );
}

找不到搜索结果

对于搜索，在没有搜到对应的数内容时，相比给一个空页面，给一些用户感兴趣的相似内容可能会更好，一方面可以让用户浏览替代的内容，另一方面可以在一定程度上提高转化率。典型的例子就是在商品搜索的时候，如果没有找到对应的商品，会推荐系统里相关的商品，比如下面是京东的例子。

用户数据没有添加

这是需要用户主动提交才会有数据的情况。糟糕的体验是只告诉用户没有数据，而没有引导用户去添加数据。比如我们的地址管理，我们来看到下面两种体验，一对比高下立现。

第一种一个是添加地址的按钮不够显眼，另外就是在需要用户操作的时候，缺乏引导。这会导致首次使用该功能的用户很迷茫，一时不知道从哪里添加收货地址。相比之下，下面的实现方式按钮位置更明显，而且通过动画能够让用户清楚地知道可以通过点击下面的按钮添加收货地址。

第二种方式实现的代码如下所示，这里的引导动画效果使用了 AnimatedPositioned 组件实现（相关文章可以参考：🚀🚀🚀庆祝神舟十三号发射成功，来一个火箭发射动画）。

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('收货地址'),
    ),
    body: Stack(
      children: [
        Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset('assets/common-empty.png', width: 100.0),
              Text(
                '暂无收货地址',
                style: TextStyle(
                  color: Colors.grey[400],
                  fontSize: 16.0,
                  height: 2,
                ),
              ),
            ],
          ),
        ),
        AnimatedPositioned(
          duration: const Duration(milliseconds: 500),
          bottom: _bottom,
          height: guideIconSize,
          left: MediaQuery.of(context).size.width / 2 - guideIconSize / 2,
          onEnd: () {
            setState(() {
              if (_bottom == minBottom) {
                _bottom = maxBottom;
              } else {
                _bottom = minBottom;
              }
            });
          },
          child: Icon(Icons.arrow_downward,
              color: Theme.of(context).primaryColor, size: guideIconSize),
        )
      ],
    ),
    bottomSheet: Container(
      height: 50.0,
      width: MediaQuery.of(context).size.width,
      color: Theme.of(context).primaryColor,
      margin: const EdgeInsets.all(0.0),
      child: TextButton(
        onPressed: () {
          if (kDebugMode) {
            print('跳到添加地址！');
          }
        },
        child: const Text('添加收货地址', style: TextStyle(color: Colors.white)),
      ),
    ),
  );
}

网络连接问题

网络连接偶尔会出现短时间连接断开导致无法加载后端数据的问题，这个时候可不能直接放个网络错误的指示页面就完了，比如下面这样。 动画确实改善了用户体验，但没有解决根本问题。我们来看一下我们自己网络连接有问题的时候的处理步骤：

1. 如果手机的网络连接没问题，我们会希望当前页面能够重新加载；
2. 如果手机网络有问题，我们可能会切换网络（比如切换到4G 网络），然后还是希望能够重新加载。

这个空页面没有提供重新加载的功能，这意味着用户需要返回到上一个页面，找到之前点击的内容，然后再进入这个页面来达到再次刷新的目的。这额外多了两个步骤，而且还需要用户记住之前点击的内容，体验就不怎么好了。这种情况只需要提供一个重新加载的按钮，体验就会好很多了。

总结

总结一下，如何提高空页面的用户体验，针对我们提到的4种情况有对应的4个原则：

1. 对于确实无数据的情况，给出有好的提示，比如实用动画+文字的形式。千万不要认为反正后台有数据，不会出现空页面而什么都不做——结果就是让用户看着白屏一脸懵逼！
2. 用户输入的搜索词可能会非常长（比如复制京东的商品名称去淘宝搜），很可能搜不到结果。如果可能，建议对于搜索词长的情况能够匹配一些标签，通过标签搜相关的内容推荐给用户，这比搜不到给一个空白页面的体验会好很多，而且海还会促进应用的内容或商品消费。
3. 对于需要用户执行添加动作才会有的数据（比如收货地址、收藏夹、好友等），要给出合理的引导，让用户能够顺利地完成相应的动作，而不是让用户自己摸索。
4. 对于因为网络、本机授权等导致出现错误无法加载数据的情况，除了给出友好的提示之外，要同时能够提供类似重新加载的功能，便于用户解决本机问题后，能够回来直接重新加载页面内容。

从心理上来说，人对于空白状态都是有点畏惧的。因此，开发出好的体验的空页面就是需要给用户合理的解释和必要的引导，让空页面不那么空！