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

前语

在移动运用中，图片是最佳的视觉冲击元素，色彩丰厚、招引眼球的图片能够刺激用户的点击冲动，进而提高转化率。下面的一张图就是来自淘宝一个典型的对比，右图和左图比较，显然愈加具备招引力。那么在日常开发中有哪些影响图片体会的因素呢？

实例讲述开发中的图片用户体验要点

加载过程

图文列表通常首先招引眼球的是图片，但是假如体会做得不好差别还挺大的，比方下面这种列表，在加载过程中，由于网络速度较慢，导致图片区域全是空白 —— 这会导致用户无法预测界面的元素，然后影响用户体会。

实例讲述开发中的图片用户体验要点

在加载过程中，好的用户体会应该是给可预期的成果，而不是盲目猜想。

关于解决这种问题来说，有两种做法，一个是常见的占位图方式，还有一种是骨架屏。关于 Flutter 来说，占位图的方式能够运用 CachedNetworkImage 插件完成。

实例讲述开发中的图片用户体验要点

示例代码如下，这里运用了 CachedNetworkImage 的 placeholder 特点来回来一个占位组件，然后指示用户此处是一张图片。加载过程中，比较之前的左边空了一小半的体会来说好很多。

class TextImageListItem extends StatelessWidget {
  final String imageUrl;
  final String text;
  const TextImageListItem({
    Key? key,
    required this.imageUrl,
    required this.text,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(15.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          CachedNetworkImage(
            imageUrl: imageUrl,
            placeholder: (context, string) {
              return Container(
                width: 150,
                height: 100.0,
                color: Colors.grey[300],
                child: Icon(
                  Icons.image,
                  size: 20.0,
                  color: Colors.grey[400],
                ),
              );
            },
            width: 150,
            height: 100.0,
          ),
          const SizedBox(
            width: 10.0,
          ),
          Expanded(
            child: Text(
              text,
              maxLines: 3,
              style: const TextStyle(
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

至于骨架屏，引荐我们能够运用一个叫做 skeletons 的插件，既能够简单地运用也能够自定义骨架屏的样式，下面是运用骨架屏的最简单的办法，假如要和界面保持一致的话需求自定义列表视图。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('图文列表'),
    ),
    body: Skeleton(
      isLoading: _isLoading,
      skeleton: SkeletonListView(),
      child: ListView.builder(
        itemBuilder: (context, index) {
          return const TextImageListItem(
            imageUrl:
                'https://th.bing.com/th/id/OIP.dh9AWBD2vmtsJF6MLwxFdwE9DE?w=277&h=180&c=7&r=0&o=5&pid=1.7',
            text:
                '没有 UE 给交互作用怎么办？照着原型开发行不行？一张草图打天下？开发全凭项目经理一句话？这些状况下，怎么保障用户体会？本专栏将通过实例来讲怎么面向用户体会开发。',
          );
        },
        itemCount: 20,
      ),
    ),
  );
}

实例讲述开发中的图片用户体验要点

过错处理

图片一般状况下是能够正常加载的，但是假如遇到网络超时或许图片文件被误删，就或许加载不出来。这个时候假如没有任何指示，那么体会是很糟糕的。合理的做法是给出一个加载过错的占位图，这个在 CachedNetworkImage 中也供给了相应的特点，能够运用 errorWidget 参数回来加载图片犯错时的一个组件代替图片方位。这里我们特意修改了图片链接为一个过错链接来模拟加载过错的状况，然后在图片方位告知用户图片加载失利，代码如下。

CachedNetworkImage(
  imageUrl: imageUrl,
  placeholder: (context, string) {
    return Container(
      width: 150,
      height: 100.0,
      color: Colors.grey[300],
      child: Icon(
        Icons.image,
        size: 20.0,
        color: Colors.grey[400],
      ),
    );
  },
  errorWidget: (context, string, obj) {
    return Container(
        width: 150,
        height: 100.0,
        color: Colors.grey[300],
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.image_not_supported_outlined,
              size: 20.0,
              color: Colors.grey[400],
            ),
            Text(
              '图片加载失利',
              style: TextStyle(
                color: Colors.grey[400],
                fontSize: 12.0,
              ),
            )
          ],
        ));
  },
  width: 150,
  height: 100.0,
),

实例讲述开发中的图片用户体验要点

这种方式关于图片找不到处理是没问题的，但是假如是网络问题导致的，那么供给一个从头加载按钮体会会更好 —— 究竟你不能让用户为了从头加载一张图片来个顶部下拉改写。这种状况假如滑动了好几页的话，那用户还得从头找到之前的方位，体会就不怎么好了。因而，更好的方式是供给一个从头加载按钮，究竟实际图片文件被误删的或许性很低，网络原因导致加载不出来频次更高（尤其是支持 gif 图片的状况）。这种状况建议对列表元素进行进行二次封装，以便支持单个列表元素从头加载。最终完成的作用如下图所示，点击从头加载会将改写列表元素组件，然后完成从头加载。

实例讲述开发中的图片用户体验要点

操控图片文件巨细

这个其实和开发有很大关系，一般来说，假如列表存在图片的，建议生成缩略图。这是由于，假如直接运用原图的话，或许一次性加载几十张图片。现在的手机拍照图片动辄10几 M，假如一会儿加载几十张10M 的图片文件，列表大概率会卡死。因而，这种状况引荐是后端同学生成列表所需的缩略图，至于怎么裁剪或压缩也同时交给后端吧。

一个非常牛的缩略图编解码库

网上见过一个非常牛的库，叫做 BlurHash，能够将图片编码转换为字符（20-30个字符），然后前端将这字符解码烘托为图片，神奇的地方在于这张图片就像是原图模糊后的图片相同。这种图片能够代替占位图，下面是他们官网的一个演示作用，能够看到，比较灰不溜秋的占位图好很多。

实例讲述开发中的图片用户体验要点

总结

图片是前端运用中招引眼球的首要元素，能够采纳如下三种方式提高图片元素的用户体会：

  1. 加载过程中添加占位图或许运用骨架屏；也能够考虑运用 BlurHash 这个库，只是需求前后端配合。
  2. 充分考虑图片加载不出来的用户体会，最好是供给从头加载操作。
  3. 操控列表的图片文件巨细，能够要求后端在存储的时候生成尺度小、通过压缩的缩略图，避免列表开始。

源码地址：开发中的图片用户体会要点