移动端的列表设计中，是否添加缩略图，缩略图放左边还是右边？

预计阅读时长：5m 44s（1773 字；8 图）
配图制作工具：Figma、OmniGraffle

是否添加缩略图？

1. 若列表本身的内容就是视觉化的，例如视频、图集等等，那使用缩略图来作为导航就很合适。这种情况下，可使用尺寸足够大的缩略图，并将其放在重要的浏览位置上。或者，根据相关文字信息的长度，合理使用宫格排版。

2. 若图片有助于指引用户选择列表中的条目，则展示缩略图。
   反之，如果图片过小导致识别性很差，或，都是非常普通的通用图片，根本不起任何作用，则不需要展示出来。将腾出来的空间用于展示其他必要的、有用的信息更好。

3. 高质量的图片能让界面更丰富、美观，更具视觉吸引力，同时也可避免浏览纯文本长列表带来的视觉疲劳和压力。因此，大部分列表都是图文结合。

4. 若图片对用户没有帮助，且从视觉设计的角度而言，无需使用图片作为排版的辅助元素，则不展示缩略图。
   
   
   

缩略图放在左边还是右边？

1. 人们的阅读习惯一般为从左至右，以下的设计规则都基于这一点。

2. 若列表中，不是所有条目都有合适、可用的缩略图，则将缩略图放在右边，用于辅助文字信息。
   这样，不管是显示缩略图的条目、没有合适缩略图的条目，还是使用全尺寸图片的条目，文字都统一为左对齐，用户的视线流可以沿着左侧向下，提高浏览、获取信息的效率。

   例如：聚合类新闻客户端，通过抓取互联网内容为用户推荐新闻信息。图片的质量和数量均不可控，可能出现封面图质量很差或者没有封面图的情况，因此将缩略图放在右边。
   例如：UGC 内容列表，不一定有图片，且图片质量不可控，因此将缩略图放在右边。

3. 根据缩略图与文字信息的权重比较，确定缩略图的位置。

• 商品或服务购买类列表（例如购物、订外卖、订酒店等）：图片比文字更重要，放在左边，有助于用户快速筛选查找。
  1）用户往往无法仅凭文字信息做出合适的选择。
  2）图片一般更能直观地展示出产品的相关信息和不同产品之间的差异，是用户浏览列表的首要因素。
  3）一般对图片质量要求较高。

  例如，在马蜂窝上订酒店时，我们首先关注的是酒店的环境，酒店的图片非常重要，比这个酒店叫什么还重要，所以放在左边。
  例如，在京东上买饼干，我们仅看图片就可以判断这个饼干是不是我想要的，然后再关注价格和其他次要文字信息，所以将商品缩略图放在左边。
  例如，在淘宝上买保温杯，我们首先看这个保温杯长啥样，视线沿着左侧图片一直向下，浏览更顺畅，可更快找到喜欢的保温杯。

• 娱乐生活类资讯列表（时尚娱乐、生活搞笑等）：图片比文字更重要，放在左边，吸引用户注意力。
  1）往往使用吸引人眼球的图片，第一时间抓住用户的注意力，激发用户的好奇心、点击欲。
  2）图片也可传达出资讯相关的信息，帮助用户理解内容，用户不需要仔细、完整地阅读标题。

• 新闻资讯类列表（时事、科技、汽车、财经、军事等）：文字标题最重要，图片仅为次要信息。缩略图放在右边，可保证用户在浏览信息时，不受到图像的干扰，获取信息的效率不受影响。
  1）用户更关注新闻标题。
  2）图片质量一般不高，往往无法清晰传达内容，是相对次要的辅助信息（尤其是时事新闻类）。

• 以上为一般情况的设计原则。针对特定的产品，可通过问卷或访谈等方法调查、研究用户的态度和倾向，确定图文优先级。
  
  

4. 与产品性质、定位等因素有关

• 现在大部分的资讯列表，都是左文右图。
• 有些应用的列表和以上提到的设计规则有所不同。例如，搜狐新闻、IT 之家的资讯列表就是采用的左图右文。

• 有些应用的列表在产品迭代的过程中出现过不一样的排版设计。例如，网易新闻客户端之前是左图右文，后来又改为了左文右图。

• 以上这些情况可能是与产品的性质、定位等因素有关，或者，有其他具体的原因吧。毕竟，没有放之四海而皆准的绝对方案，具体情况具体考虑～
  
  
  

缩略图的尺寸多大合适？

1. 图片相较于文字信息的重要程度决定了缩略图的尺寸。缩略图越不重要，尺寸应当越小。

2. 缩略图不宜过大。
   1）过大的图片会吸引用户过多的注意力，分散用户对其他内容的关注；
   2）图片过大可能导致文字信息因显示空间不足而被截断，从而影响可读性；
   3）图片过大可能导致加载时间过长。

3. 缩略图不宜过小。
   1）若尺寸过小，识别性会大大降低，甚至失去其在列表中的作用；
   2）在减小图片尺寸时，可结合裁剪和缩放进行处理，以缓解过度缩小造成的识别性问题。

---

1. 以上内容包含个人理解，仅作为个人学习笔记使用。如有错误，欢迎指正啊，非常感谢～
2. 以下为参考文章链接，非常感谢这些作者～
   APP列表页配图，放左边好呢，还是右边好？（作者：三圈儿哥；来源：站酷）
   左图右文与左文右图（作者：Ricky_W；来源：UI 中国）
   List Thumbnails on Mobile: When to Use Them and Where to Place Them（作者：Aurora Harley；来源：NN/g）
   APP设计｜移动端缩略图设计攻略（翻译：Terry；来源：人人都是产品经理）
   移动端界面列表设计里的缩略图：何时使用？放在哪里？（翻译：小球娘；来源：知乎）