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

分享到:更多 ()

首先让我们稍微回想一下,我们在客户端列表页设计中最常见的就是 List、 Gallery、大图三种形式(如下图所示)。在日常的设计中大家无外乎是在尺 寸、字段、排版上做一些变化。

 

blob.png

 

在电商类产品的设计中大家通常有一个直觉,这个图片比较好看或者是需要 图片大一些来渲染氛围的时候就会选择大图或者 Gallery 形式来进行设计。 这些设计上的说辞还是偏感性,如果遇到不太赞同你观点的产品经理我们就 很难说服他。事实上这个问题并没有一个准确的答案,但通过对现有设计的 分析我们是可以找到一些规律的。

大家知道在 PinDesign 周刊中我一直强调想要科学论证我们的设计方案,如 果仅仅依靠偏感性层面的思考我们是很难站住脚的。但如果我们将自己的角 色定位在解决商业问题的设计师,那么似乎就有那么一点判断标准出现了。

缩略图在页面中的作用大致归纳一下可以定位在引起用户关注和辅助用户理 解这两点上。最终的目的还是为了帮助用户快速决策进入到下一级详情页, 提升 CTR 。如果你认同以上观点,那我就可以先抛出我的观点:缩略图如何展示取决于它的引导作用有多大

基于这个观点我大致画了一个判断流程图,试图建立一个简单的判断逻辑。在这个流程中,图片能否对用户的点击产生引导作用是唯一的判断标准。当我们再将现有的几种设计形式和这个判断标准对应起来,似乎就有了一个结论:

 

1. 如果图片对用户判断没有任何作用,那么不需要缩略图;

2. 如果图片对用户判断有至关重要的的作用,那么使用大图或Galley模式;

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

 

blob.png

这么解释似乎还是有点绕,我们还是结合实例来理解一下。

 

 01.无缩略图形式

以下的三个案例分别展示地理位置中的区、商铺名称和股票代码,它们都没有在文字前面添加一个对应的缩略图,事实上也没有合适的缩略图值得放在前面。

按照我们前面提到的判断标准,如果这张图片对于用户识别这条信息没有帮

助,那么就不应该添加缩略图。我们知道用户在浏览一张页面的时候,眼球

轨迹是从左至右的。如果图片无效,不如直接展示文字效率会更高。

 

blob.png

 

但如果图片是具有一定的普遍认知的,添加缩略图会让用户的识别效率提 高。比如下图中类目的 icon、国家的旗帜。

 

blob.png

 

02.大图及Gallery形式   

这里提到的大图指的是在客户端中通栏展示的图片形式,我们看到最多在于

图片自身需要较大空间进行信息传递的场景中。比如美食、艺术品、地图等

类型的应用中。在这几类产品中可以说是一图胜千言,一张精心设计的图片

就足以让用户进一步点击,相比之下文字的作用就没有那么强烈了。

 

blob.png

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

 

blob.png

 

03. List展示形式(缩略图左or右分布)  

List 应该是我们在各类应用中最为常见的一种设计形式了。如果你留心观察,我们会发现这其中有些图片放在左边,有些放在右边。这当然不是考虑到从右往左读的少部分用户使用习惯了,我们可以从图片是否比文字更重要这个角度来进行判断。

下图中的案例分别来自电商应用 Jet的商品列表、服饰应用 Rent Way 的图片 评价列表、IFTTT 的 Recipes 列表以及点评类应用 Yelp 的商铺列表。这些列 表中的图片在帮助用户识别判断信息上的重要度都要优于文字信息,用户基 本上只需要看看图片就可以决定是否需要点击进去进一步查看了。这其中我 特别喜欢 IFTTT 的案例,通过两个服务的品牌 Logo 的拼接形成的图片一眼 就能让用户辨识出这条 Recipe 是用来做哪两个服务之间的串联。

还是基于图片的重要度以及用户眼球的浏览轨迹,我们的判断是应该将图片放置在左侧。

 

blob.png

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

 

第一类是下图左一的 ProductHunt 。发布者的图片是该产品的重要信息之 一,但发布者的头像对于其它大量的访问者来说是没有太大意义的,所以被 放置在了右边。即使没有“顶”的操作在左边,基于以上的判断我还是认为发 布者的头像应该右置。因为在这个情景里发布者发布了什么信息才是访问用 户真正关心的内容,也决定了用户是否要点击进一步查看。

另外一类则是新闻类产品,很多平台选择将缩略图放置到右边。如果你仔细观察对比,如果只看缩略图用户是无法获取足够信息来判断是否要进一步浏览的。而且还有一个细节需要关注,新闻类应用有时候为了确保时效性并没有提供缩略图,如果将缩略图放置在左边也会对排版带来一定的影响。

 

blob.png

 

以上就是我们基于缩略图对于用户引导作用的强度而推导出的使用判断标 准,这其中引用了 Jet、Foursquare、NY Times、Glit 等国际知名产品的设 计作为案例。之所以选择他们也是因为这些公司在对于用户新闻和数据分析上都投入了不少的精力,在这一点上国内很多公司的投入相对还是较少的。

对于我们设计师而言,在这些成熟产品中去找规律也是一个“曲线救国”的好 办法,这也是我一直强调「竞品分析」重要性的原因。当然,以上这些观点 其实在我们团队的产品之前的项目验证中也是得到过验证,所以我也比较有 信心来与大家进行分享。

 

来源:uigreat

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 如何正确的设计缩略图来提升用户点击意愿

0
分享到:更多 ()