干货 | 移动平台列表缩略图设计思考

2017-04-05 本文已影响194人浪奔的兔纸

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

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

了解图片的作用和必要性

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

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

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

图片的位置：左还是右？

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

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

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

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

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

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

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