就经验来讲，大部分用户是美学驱动的，冗长的文字信息，带给用户浏览负担，而视觉化(内容多样性，如图文、视频、信息图等)的呈现，则可以降低阅读压力，让用户快速get到内容要点。然而，所有的列表信息是否都需要图片？图片排版是否有优先级？凡事不要总问经验，去追根溯源，说不定会撼动经验这棵大树，发现新大陆。

在电商类的平台设计中，我们通常有一个直觉，我们需要高清大图来渲染氛围，通过视觉化的形式吸引用户点击，通常电商类的列表我们会采用大图或者Gallery的形式进行设计，但这仅仅是从经验和感性的角度所做的一个判断。事实上这个问题并没有一个准确的答案，但通过对移动端网站/APP设计的分析，或许可以找到一些规律。

了解图片的作用和必要性

列表页一定需要图片吗？首先要考虑图片是否能辅助用户理解，或起到帮助用户决策的作用。检验的方式即如果只通过图片，你是否能够找到自己想要的东西。如果答案是否的话（也许是因为图片过小以至于看不清细节或是因为这些只是再普通不过的通用图片），那么请果断放弃吧。举个栗子：

Teavana 移动电商网站 (见下图)，以下是茶叶列表页面，这个列表设计是不太可能帮助用户决定哪些茶能符合他们的口味的，一是因为图片尺寸较小、无法辨识茶叶的细节，不同产品的图片看起来十分相似，且用户关心的咖啡因等构成成分在下一级的详情页当中，这样的列表缩略图和文本信息是没有太大意义的。

若仅凭列表文字，用户很难做出合适的选择(至少在不来回跳转页面的情况下)，那么列表设计中就可考虑使用缩略图。比如很多电商类网站都采用图文列表的方式，用户通过图片对比进行初步筛选。倘若列表内容主要是视觉性的(例如，视频或照片)，那么缩略图用于引起用户注意或引导用户点击再适合不过了，此种情况要确保缩略图够大，或是在保证相关必要文字展示的基础上使用宫格排版。

图片的位置：左还是右？

如果使用列表设计加入缩略图，则需考虑缩略图的位置。若确定房子关联文本的左边还是右边，则需权衡对比图片和列表项中的文本信息的重要性。如果图片是列表中的必要条件，要将其放在左边 (这指从左到右书写的语言中)，以帮助用户通过有缩略图的列表快速筛选，而不必看文本。否则，如果图片的重要性次于文本，将它放在说明文本右边的位置。

图片相对关联文本的优先级，也决定了缩略图的大小。越不重要的图片可以越小。但是如果缩略图太小了，它将不再可识别或者可用 (要缓解此问题，可使用裁剪和缩放的组合来减小图像大小，而不是只按比例缩小)。另一方面，太大的缩略图可能会分散用户注意力，使其注意不到其他有关信息，或导致关联的文本缩小或截断描述。较大的图片也会导致加载时间过长，引起用户不满。

要确定图像的相对重要性，需要进行用户态度研究，比如调查或访谈，深入了解您的用户喜好。一旦可以定义图像的优先级，就容易决定理想的缩略图位置。

根据图片的引导作用，可使用以下图片策略树，来判定是否需要图片、图片的位置以及图片的形式：

1. 若图片对用户判断没有任何作用，则不需要缩略图;

2. 若图片对用户判断有至关重要的作用，则可使用大图或Galley模式;

3. 若图文作用相当，List模式下缩略图的位置(左或右)取决于它相对于文字的重要性。

接下来对图片设计形式做如下说明：

01.无缩略图形式

下面的案例是百度地图搜索列表，此列表没有在文字前面添加一个对应的缩略图，事实上也没有合适的缩略图值得放在前面。按照我们前面提到的判断标准，如果这张图片对于用户识别这条信息没有帮助，那么就不应该添加缩略图，直接展示文字效率会更高。

但如果图片是具有一定的普遍认知的,添加缩略图会让用户的识别效率提高。比如 icon+文本，或国家列表中国旗标志+文本。

02.大图及Gallery形式

这里提到的大图是指通栏展示的图片设计，需利用较大空间通过图片进行信息传递的场景中，比如美食、艺术品、图片社区等平台。在这几类产品中可以说一图胜千言，一张精心设计的图片就足以让用户进一步点击，相比相关联的文本，其作用就没那么重要了。

这类形式下还有一个特殊的情景，那就是电商类产品。在很多标类商品或时尚品相关应用中一张图片就足以让用户判断出商品或引起用户点击的兴趣，但同时还想在单位空间内(通常指一屏内)展示更多的商品数。Gallery 是一个折中但又不错的展示形式。

03. List形式（缩略图的左右分布）

List 是在各类平台中最为常见的一种设计形式，图片的位置或左或右，这里需从图片是否比文字更重要及从左至右的浏览习惯来进行判断。

图片放在右侧的案例相对较少，但也有几个比较典型的案例,大致分为两类。

第一类，如 ProductHunt 。发布者的图片是该产品的重要信息之 一，但发布者的头像对于其它大量的访问者来说是没有太大意义的，所以被放置在了右边。

另外一类则是新闻类产品，很多平台选择将缩略图放置到右边。只看缩略图用户是无法获取足够信息来判断是否要进一步浏览的(当然，也有通过图片博人眼球的)。另外还有一个细节需要关注，新闻类产品有时为了确保时效性并没有提供缩略图，如果将缩略图放置在左边也会对排版带来一定的影响。

列表的设计要根据平台定位和用户需求实际考量，合理的设计一方面会带给用户良好的体验，一方面也会提升用户的点击意愿。

参考文章：

<移动设备上何时何地使用列表缩略图>

作者：Aurora Bedford

<如何正确的设计缩略图来提升用户点击意愿>

作者：不详