本文为社区首发签约文章，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. 关于因为网络、本机授权等导致呈现过错无法加载数据的状况，除了给出友爱的提示之外，要一起可以供给相似从头加载的功用，便于用户解决本机问题后，可以回来直接从头加载页面内容。

从心理上来说，人关于空白状态都是有点害怕的。因而，开发出好的体会的空页面就是需求给用户合理的解说和必要的引导，让空页面不那么空！