【小程序开发实战】用户体验优化——图片展示

「这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战」

前言

前面我们完成了小程序核心功能的基本实现，这一篇我们来讲一些常用的用户体验提升手段。尤其对于内容类的应用，图片是很重要的组成部分，所以对于图片展示和交互的优化自然是用户体验的一个重要提升。

图片使用场景

这里我们首先列举一下本小程序中当前涉及到图片的部分

• 内容列表中展示的图片
• 发布者及个人页展示的头像
• 发布页的图片上传区域

图片组件分类

这些展示图片的部分所使用的组件类型也不尽相同，分为以下四种：

1. vant图片组件<van-image>
2. vant上传组件<van-uploader>
3. 小程序开放数据组件<open-data>
4. 小程序原生图片组件<image>

第一种是用于展示图片最主要的方式，第二种用于特殊的上传场景，第三种则用于需要获取当前用户个人信息（比如头像和昵称等）所使用。

其中最后一种方式我们建议使用第一种所取代，因为一方面第一种是对最后一种的封装处理，另外小程序原生图片组件在实际使用中存在一些使用缺陷，比如 这类问题

那么针对上面三类图片组件的使用，我们有哪些优化手段呢，接下来我们就以真实改造进行讲解。

基础排版

比如这种最基本的图片展示场景，如果我们想让每张图片都以正方形进行展示，并且不管在怎样的手机屏幕上都正好每行展示3张，而且每张图片边缘要有一点间隔，每行图片要放在页面的左右居中位置。这要怎么实现呢？

假如给每张图片宽度设置为图片展示区域的33%可以使得每行正好展示3张图片，但这样要怎样给图片设置高度才能保证每张图片都以正方形进行展示呢。或许我们可以动态计算图片展示的真实宽度，然后再设置高度，但这样的方式很明显有点复杂。

有没有其他方式呢，这里我们介绍一下小程序的响应式像素单位——rpx。

响应式元素单位

rpx是以iphone6/7/8的屏幕宽度375px作为基准的，在iphone6/7/8的屏幕宽度上有750个物理像素，屏幕宽度和物理像素比恰好为1:2，所以1rpx对应其1个物理像素。

这也是为什么我们在使用rpx设置元素像素时要按iphone6/7/8模拟器中样式面板中看到的值乘2，举个具体的例子。

比如上图中，我们在iphone6/7/8的模拟器下给文字设置14px大小，是为了在当前屏幕获得恰当的视觉效果。但如果在iphone6/7/8 plus手机上仍展示14px，文字就会显得有些小了。

所以我们使用rpx取代px进行元素的单位设置，是为了元素能够在不同手机上展示自适应的大小，而不是同iphone6/7/8一样的固定数值。

图片宽高计算

那么既然rpx可以为我们做到元素大小的自适应，我们就可以利用这一特性来进行元素的排版。

比如对于一行要展示3张图片的排版，我们以iphone6/7/8作为基准，这种情况下，整个屏幕宽750rpx，我们减去图片区域两侧空出的80rpx，还剩下750-80=670rpx。

由于一行要展示3张图片，并且中间要留两道缝隙，所以对670进行三等分，正好多出的10rpx用于作为图片之间的缝隙，剩下的660rpx用于3张图片等分。

所以最后我们会给每张图片设置宽高都为220rpx，并且对于每行最后一张图片以外（即前两张）的图片都增加一个5rpx的右边距。

<van-image
  width="{{ '220rpx' }}"
  height="{{ '220rpx' }}"
  radius="10rpx"
  src="{{ imageItem }}" fit="cover"
/>

.image-wrap:not(:last-child) {
  margin-right: 5rpx;
}

这样即实现了我们上面所说的每行3张图片自动占满图片展示区域，并且图片整体在屏幕中央左右居中，除每行最后一张的图片之间存在间隙。

动态排版

上面实现了多张图片的等分排版，但每条内容可能展示的图片张数是不确定的，所以我们还需要根据要展示的图片张数做相应的动态排版。

比如对于仅有一张图片的情况，其实我们应该对图片进行重点展示，而如果仍然以220rpx的正方形进行展示的话，就会显得右侧空白区域很多。

因此我们增加了对图片数量判断的逻辑，对仅有一张图片的情况进行铺满整行展示。

然后让我们看看其他数量图片的情况

我们可以看到，由于我们仅仅为图片展示区域的容器设置了弹性布局flex，所以容器内多个元素只会在超出容器大小后进行自适应展示。

我们为容器增加超出换行的属性flex-wrap: wrap;，从而使得当图片总宽度超出容器后进行自动换行，而不是自适应容器大小进行展示，具体用法可参考 flex语法

这里很巧合的是，由于我们对每个图片列表中最后一张图片以外的元素都加了5rpx的右边距，所以当存在四张图片时，由于第3张图片也存在5rpx的右边距，所以超出了容器宽度而展示在第二行。

但如果是5张图片呢？

很明显这个显示效果不符合我们的预期，所以我们不应该忽略4张图片下的展示巧合，而应该认真分析图片展示区域的布局，进行合理的设置。

我们根据 CSS选择器 巧妙地设计如下样式，优化多张图片的边距问题。

但这样的设计对于4张图片的情况展示还不算友好

我们希望像微博的排版方式，对4张图片的情况进行重新排版

于是我们为四张图片的情况增加特殊的排版样式如下

我们为四张图片情况的容器增加一个右侧的内边距，以使得容器的宽度不足以展示3张图片，从而使得第3张图片换行展示，从而实现2行展示，每行2张图片的效果。

总结

本篇我们以真实的小程序实例改造过程，结合多种技术手段完成了对于图片展示的体验优化，其中涉及到的主要知识点如下：

• 响应式元素单位rpx
• flex布局
• css选择器nth-child

如果你对用到的这些知识点还不太熟悉，建议看一下文中贴的超链接进行学习了解，后续我们将继续利用各种技术手段不断完善升级小程序的功能和体验等。