产品设计

    今日:66| 主题:15793
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[交互设计] 用好这4个设计建议,让你的轮播图点击率更高! ...

[复制链接]
梦琪 发表于 2016-10-19 09:04:36
331 8

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
@腾讯ISUX - Jana:轮播图(Carousels)这样的交互方式,在web时代似乎已经司空见惯。当一群人在会议室里争夺首屏焦点图的优先级时,使用轮播图,似乎能够不费吹灰之力地解决这场争端,没有人是输家。然而,轮播图这种方式真的有效吗?如何设计才能带给用户更好的体验呢?
事实上,“万能和事佬”轮播图的点击率通常都很低,转化效果也并不好,却往往占用了页面最抢眼的大面积位置。想象这么一个场景:当你走进图书馆想找一本特定的书阅读时,一个销售员挡在你面前让你先看一个大广告图,然后等你还没读完具体讲了什么内容时,他又突然换了一张,是不是很惹人厌呢?大部分轮播图的设计也是如此。
确保你真的需要使用轮播图首先,设计不当的轮播图容易被用户当成与他想浏览的内容不相关的广告图片而直接无视。在各种网页中早以身经百战的用户,会选择最快速的方式找到和浏览他们想要看的内容。把精力放在翻看没有预期的轮播图上显然是低效的,一上来就自动进入了用户的视觉盲区。下面的热力图展示了用户的浏览行为习惯:快速扫描找到想要阅读的区域,然后再进行有序的沉浸式阅读,毫无例外他们都忽略了看起来像广告的图片部分。

用好这4个设计建议,让你的轮播图点击率更高!                                      ...-1 (图书馆,点击率,会议室,销售员,优先级)

(以上热力图源自 James Royal-Lawson)


用好这4个设计建议,让你的轮播图点击率更高!                                      ...-2 (图书馆,点击率,会议室,销售员,优先级)

(以上热力图源自 Nielsen Norman Group)
除此之外,在2013就有研究结果表明,轮播图的交互效果十分不理想: 只有 1% 的用户点击了轮播图上切换按钮,其中 84% 的用户只在首屏点了1次。
友荐云推荐




上一篇:图标设计的三个小原则,你的UI设计师都知道么? ...
下一篇:细微处见功夫!聊聊那些不被重视的交互稿细节 ...
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

xixiangfeng 发表于 2016-10-19 16:15:51
也是蛮拼的
回复 支持 反对

使用道具 举报

zerphy 发表于 2016-10-23 04:05:47
嘘,低调。
回复 支持 反对

使用道具 举报

纸飞机的春天 发表于 2016-10-31 00:32:49
梦琪你怎么看?
回复 支持 反对

使用道具 举报

景晓蓉 发表于 2016-11-3 11:09:52
前排,留史!
回复 支持 反对

使用道具 举报

XDXY 发表于 2016-11-5 15:40:01
非常好,顶一下
回复 支持 反对

使用道具 举报

tonyvsk 发表于 2016-11-19 04:54:33
锄禾日当午,梦琪真辛苦。谁知坛中餐,帖帖皆辛苦!
回复 支持 反对

使用道具 举报

窗外的雨、 发表于 2016-11-20 08:42:35
人的一生至少要有一次一见钟情,那看来我已经让很多人不枉此生了。
回复 支持 反对

使用道具 举报

非常完美 发表于 2016-11-21 04:27:23
收藏了,很不错的内容!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表