美文网首页每天写1000字每天写500字每周500字
焦点图和相册组件逻辑总结对比

焦点图和相册组件逻辑总结对比

作者: 莉莉妮特 | 来源:发表于2016-11-20 17:13 被阅读0次

    网站焦点图是一种网站内容的展现形式,可以简单理解为多张图片的组合,也叫轮播图。适当地在网站添加焦点图能够增加视觉冲击性,增加点击量。

    焦点图主要有以下几种实现方案:js/jQuery焦点图、flash焦点图、纯css焦点图。如果在焦点图上右键有Adobe Flash Player内容,就证明是flash焦点图;如果在浏览器工具中禁用了js,焦点图无法使用则证明是js焦点图,如果能继续使用则是纯css焦点图。

    在实际应用中,焦点图中不一定是使用本地图片,也有可能是使用外部图片链接。

    焦点图的样式可以吸引用户,而更重要的是内容,比如针对电商网站,美女,折扣,秒杀,色彩这些元素无疑最能吸引用户的眼球。

    下面的这个图看起来和焦点图比较像,不过它是另外一个重要的页面元素:相册。

    针对这种相册,分析其逻辑如下:

    (1)相册可以自动切换(使用不多),或者通过相册大图左右两侧的按钮来切换、

    (2)底部缩略图支持点击滑动和点击小图,选中缩略图后相册大图对应切换;

    相册的逻辑看起来相对简单,但是有很多细节需要重视:

    (1)相册显示应该是带有版本号的图片,如果几十张图片都调用原始图片,那绝对是一场灾难;

    (2)相册上总数字和当前数字的显示,不至于让用户烦躁;

    (3)相册的退出一般有下面几种形式:点击相册大图内容之外区域、点击相册大图右上角关闭按钮、使用esc快捷键;

    (4)相册大图的切换需要和底部的缩略图保持同步,且缩略图要有清晰的选中样式标明;

    (5)相册底部的缩略图不是必须,在有些场景下是可以省去的;

    (6)相册在切换的时候可以设置为循环切换,即最后一张和第一张是前后关系。如果不设置为循环切换,在第一张和最后一张操作时也有3种方法:设置为不可用状态、隐藏操作按钮、弹窗进行相应提示;

    (7)相册的切换支持←和→键。

    相册的使用一般不是单独的,而是和图片列表结合使用。图片列表的排版样式如何吸引用户是引导用户使用相册的途径之一。


    工作和日常生活中体验使用不同类型的产品,再加上自己的思考,是互相印证,也是积累沉淀的过程。说起来头头是道是第一步,在使用中不断地根据场景改进完善才是最重要的,毕竟想要用一个设计适用于所有场景是不可能的。

    相关文章

      网友评论

        本文标题:焦点图和相册组件逻辑总结对比

        本文链接:https://www.haomeiwen.com/subject/ferypttx.html