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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,974评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,193评论 4 61
  • 清晨醒来的时候发现自己内心有一种内疚感恐慌感。偶尔会在醒来的时候有这样的感觉。是觉得昨天过的不充实吗?觉得自己话太...
    何仙姑的胭脂水粉阅读 818评论 0 2
  • 05.01_Java语言基础(数组概述和定义格式说明)(了解) A:为什么要有数组(容器)为了存储同种数据类型的多...
    树深时见鹿丶阅读 1,521评论 0 0
  • 办班受挫 许小川今天开了学期总结会回家,一路上心事重重的。校长半是调侃半是威胁...
    王栎涵阅读 3,273评论 2 4