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

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

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

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

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

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

针对这种相册，分析其逻辑如下：

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

（2）底部缩略图支持点击滑动和点击小图，选中缩略图后相册大图对应切换；

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

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

（2）相册上总数字和当前数字的显示，不至于让用户烦躁；

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

（4）相册大图的切换需要和底部的缩略图保持同步，且缩略图要有清晰的选中样式标明；

（5）相册底部的缩略图不是必须，在有些场景下是可以省去的；

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

（7）相册的切换支持←和→键。

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

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