菜单 关闭

在移动列表缩略图:何时使用它们,将它们

通过 极光哈雷12月6日2015年

简介:决定在哪里显示缩略图列表项基于图像的相对重要性相关的文本,图片是否会显示列表项,,小图片是否认识不同。。


一个常见的问题我们收到客户和参与者培训课程是否包括图像缩略图列表中移动项目的设计;manbetx官方网站手机版如果是的,是否将这些缩略图左边或右边的主要文本。正如所料,不存在放之四海而皆准的回答,但是有指南,以帮助确定在各种情况下的最佳行动。。

形象有帮助吗?吗?

不要认为,你有图片可以部分甚至全部在一个列表上的项目,你必须显示他们。。

我们首先考虑的是是否图像将帮助用户决定他们应该选择从列表中项。更好的是:问问你自己是否有人能够决定导航使用只有图像。如果图像本身肯定是不够的(因为它太小,区分相关细节或因为它是一个通用的股票填充图像),消除它。。

例如,茶的缩略图展示Teavana移动网站(下图)不太可能帮助用户决定哪些茶适合他们的口味,也很难看到茶叶和其他成分的分解在这么小的尺寸。所采取的屏幕空间缩略图会更好地利用文本信息如茶的口味或咖啡因水平——内容,帮助用户作出明智的导航选择,但目前埋在每一个细节页面。。

分类浏览页面Teavana移动网站
茶缩略图Teavana移动网站上不是有意义的:用户不太可能使用视觉信息选择一个类型的茶,因为他们看起来都在这些观点本质上是相同的。。

相反,如果单纯的文字会让用户很难选择一个合适的项目(至少没有pogo粘),那么缩略图应该包含在某种形式。这是最常见的零售和酒店行业,用户强烈的美学:之间的区别,说,两个礼服通常是解释最好的图像——即使是微小的。当然,如果列表内容主要是视觉(e。g。,视频或照片),然后浏览网页上的图片应该被优先帮助导航,需要大缩略图或一个基于网格的布局根据相关的文本也需要显示出来。。

位置:左或右?吗?

如果你已经决定包括项目缩略图,下一个问题你会问是在哪里放置它们。来确定是否位置向左或向右的相关文本,衡量图像提供的文本信息在列表项。视觉是最重要的信息为用户浏览列表吗?或者是图片只是一个辅助工具?万博官网manbetx下载吗?

如果图像是必要的选择列表中的一个项目,把它放在左边(从左到右的语言;为从右到左镜子这设计建议manbetx官方网站手机版),帮助用户快速过滤的列表缩略图不用看文字。否则,如果图像是次要的文本,位置在右边的文本描述。。

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

列表页面布局HotelTonight和酒店。com
在选择酒店时,用户物理位置的美学感兴趣,所以酒店缩略图是有用的,虽然可能不如其他重要文本属性,如价格和酒店评级。左:今晚酒店的缩略图足以分辨细节,但酒店名字是截断而不是包装到一个新行。右:酒店。com文本分配更多的空间,但是它显示缩略图太小,是有用的。。

另一个因素,可以帮助你选择缩略图的位置你是否总有适当的图像列表项。如果你不能总是与每个列表项包括一个图像,右边的缩略图,支持文本扫描。这将保证文本左对齐用户将能够他们的眼睛向下移动左边的页面,以确定哪些项目是最有趣的。。

缩略图放置在洛杉矶时报和纽约时报移动新闻网站
左:底部三个缩略图在《洛杉矶时报》的手机网站太小辨认,吸引读者,然而一个图像必须包括每个故事由于左对齐的位置。右:缩略图的右对齐放置在《纽约时报》移动网站允许使用缩略图的遗漏。在视觉进行最影响的情况下,使用宽屏图像。。

结论

确定图像的相对重要性,行为态度研究调查面试来洞察用户的偏好。一旦定义图像的优先级,理想的缩略图位置将很容易决定。。

决策树在何时何地显示列表缩略图在移动

像往常一样,一定要使用纸上原型测试潜在的新布局,确保你走正确的道路在投资之前太多的时间和金钱。更多的指导方针在移动设计,manbetx官方网站手机版参加我们的课程视觉设计为移动manbetx官方网站手机版和平板电脑。。