我们从客户和参加培训课程的人员那里听到的一个常见问题是,是否在手机设计项目列表中包含图像缩略图;如果是,则将这些缩略图放在主文本的左侧还是右侧。正如所料,没有一刀切的答案,但有一些指导方针可以帮助确定各种情况下的最佳行动方案。

这个图像有用吗?

不要以为,仅仅因为列表中的某些甚至所有项目都有可用的图像,就必须显示它们。

首先考虑是否图像将帮助用户做出决定他们应该从列表中选择哪个项目。更好的方法是:问问自己,是否有人能够决定使用只有形象。如果图像本身绝对不够(因为它太小,无法区分相关细节,或者因为它是一种普通股票)填充图像),消除它。

例如,Teavana手机网站上展示的茶的缩略图(见下图)不太可能帮助用户决定哪种茶适合他们的口味,因为在这么小的尺寸下很难看到茶叶和其他成分的分解。缩略图占据的屏幕空间可以更好地用于文本信息,如茶叶的品茶笔记或咖啡因水平——这些内容可以帮助用户做出明智的导航选择,但目前隐藏在每个细节页面中。

类别浏览页面在茶瓦纳移动网站
Teavana移动网站上的茶叶缩略图没有意义:用户不太可能使用视觉信息来选择一种茶叶,因为它们在这些视图中看起来基本相同。

相反,如果文本本身会让用户很难选择合适的项目(至少没有文本)pogo粘),然后缩略图图像应包括在某些形式。这在零售业和酒店业是最常见的情况,这些行业的用户强烈地受到审美的驱动:比方说,两件衣服之间的区别通常可以用图片来解释——即使是很小的图片。当然,如果列表内容主要是视觉的(如视频或照片),那么图片在浏览页面上就应该优先考虑,以帮助导航,保证大的缩略图或一个基于网格的布局取决于需要显示多少关联文本。

位置:左边还是右边?

如果你已经决定包含项目缩略图,你可能会问的下一个问题是把它们放在哪里。要确定是将它们放置在关联文本的左侧还是右侧,请将图像与列表项中提供的文本信息进行权衡。对于浏览列表的用户来说,视觉信息是最重要的信息吗?或者图像只是一个辅助工具?

如果图像是在列表中选择项目所必需的,那么将其放在左边(使用从左到右的语言;为从右到左参照此设计建议),帮助用户快速筛选缩略图列表,而无需查看文本。否则,如果图像是文本的次图像,请将其放置在文本描述的右侧。

图像相对于文本的优先级也应该用于决定缩略图应该有多大。图像越不重要,它就越小。但是,请记住,如果缩略图太小,它将不再是可识别的和有用的(为了缓解这个问题,使用缩小图像大小时的裁剪和缩放组合,而不仅仅是按比例缩小)。另一方面,一个太大缩略图可以从其他相关信息分散用户不当,或导致问题相关的文本(例如,字体大小可能需要减少到一个不清晰的大小或描述可能需要被截断,对用户体验显著的危险)。还要记住,较大的图像需要更长的加载时间——在缓慢的加载速度下,这是一个相当恼人的问题。

列出HotelTonight和Hotels.com的页面布局
在选择酒店时,用户对实际位置的美学感兴趣,因此酒店缩略图很有用,尽管可能不如其他文本属性(如价格和酒店评级)重要。左图:今晚酒店的缩略图大到足以辨别细节,但酒店名称被截断,而不是换行。右图:Hotels.com为文本分配了更多空间,但它显示的缩略图太小,无法使用。

另一个可以帮助你选择放置缩略图的因素是是否始终为所有列表项提供适当的图像.如果您不能总是在每个列表项中包含图像,请将缩略图放在右侧以支持文本扫描。这将保证文本是左对齐的用户将能够把他们的眼睛移到左边以确定哪个项目最有趣。

缩略图放置的新闻项目在洛杉矶时报和纽约时报移动网站
左图:《洛杉矶时报》手机版网站的底部三张缩略图太小,难以辨认,也无法吸引读者,但由于位置靠左,每篇报道都必须包含一张图片。右:在《纽约时报》移动网站上,缩略图的右对齐位置允许省略缩略图。在视觉效果影响最大的情况下,使用全宽图像。

结论

确定形象、行为的相对重要性态度研究例如调查采访了解用户的偏好。一旦定义了图像的优先级,就很容易确定理想的缩略图位置。

在手机上何时何地显示列表缩略图的决策树

一如既往,请务必使用纸上原型测试未来的新布局在投入太多的时间和金钱之前,确保你走在正确的道路上。想了解更多的手机设计指南,请参加我们的课程手机和平板电脑的视觉设计