UI角度分析网页图片轮播控件Carousel Controls

·名词定义:

- 图片:

字面意为图画﹑照片﹑拓片等的统称。在当前互联网业内,从展现的形式上看,可以简单的分为静态和动态两种;

 

- 轮播:

中文字面:“轮播”,顾名思义,指轮流播放;

英文字面:“Carousel”包含有“旋转传送带”的释义;

在当前的互联网业内,“轮播”通常被用来指代“广告轮播”,即在某一个广告位同一时间段内会有N个广告轮流播放,第一个出现的广告是随机的,每刷新一次都会换一个广告,以此类推,从而保证每一个广告的出现次数基本相同。

 

- 图片轮播控件:

从UI的角度来看,图片轮播控件是指在特定的区域内,以某种约定规则或机制,实现多张图片轮流播放的一种屏幕界面交互对象;

 

- 我们的建议:在页面设计中,针对考虑引用图片的区域,如果设计师有达成以下目标的时候,可以考虑采用图片轮播控件:

1)提升单位面积利用率;

2)丰富单位面积下的展示信息;

3)增加用户操作趣味性;

 

 

·展现形式:

 从展现形式上看,目前主流的图片轮播控件大致可以分为以下几种:

1)幻灯片模式:在控件区域内,以类似幻灯片的样式轮流播放图片,仅展示或重点突出展示一张图片;

(参考站点http://m.www.yahoo.com/)

 

(参考站点http://www.amazon.cn/)

 

2)长胶带模式:当前控件区域内,类似拉拽长条胶带效果,进行多图片的同时展示;

(参考站点http://go.taobao.com/)

 

(参考站点http://co.youa.baidu.com/content/promo/sxq/index.html)

 

 

·交互形式:

从交互层面上看,目前主流的图片轮播控件大致分为以下几种:

1)全自动展示:不需要人为控制,由系统根据设定的展示逻辑顺序播放。

(参考站点http://www.qq.com/)

 

优点:完全根据设计师的想法,将需要的信息按照理想的顺序推销给用户,无需用户操控,用户学习成本很低;

缺点:用户属于被动接受的对象,对控件的控制力很弱,很大可能性会存在当前展示信息同用户需求不匹配的情况,造成控件使用效率的降低。

考虑到此类的交互形式对用户的非友好性,目前在互联网范围内应用已经很少,少量的现存应用基本都属于广告推广位;

 

2) 全手动展示:完全由用户手动操作,实现用户的自由控制;

(参考站点http://go.taobao.com/)

 

优点:除了默认展示页,将选择的权利交给了用户,让用户感觉更多的可控制性,提升了界面对用户的友好性;通常提供用户的控制原件有“翻页符”、“抓取拖动符”、“锚点定位器”等;

缺点:当轮播内容蕴涵规则或者顺序的时候,此控件的展示效率不可控;

 

3)自动兼手动展示:默认情况下控件依照既有逻辑进行自动播放,同时提供用户有效操作的权限;兼具了自动和手动的优点,是目前最常见的图片轮播控件展现形式;

(参考站点http://space.live.com/)

 

- 我们的建议:在有信息推广倾向的区块,比如广告展示、产品细节展示等,优先选择自动兼手动展示的交互样式;在某些更强调用户主观操作的页面,优先选择全手动展示的交互样式;

 

·间隔时间控制原则:

针对自动播放中的单图片展示时间控制,并没有精准的时间数据。但从经验上讲,目前主流的做法是根据实际轮播图片的信息容量来决定。在此控件的实际应用中,不建议在单图片上承载过多的信息量,从而避免由于轮播间隔时间过长,降低轮播控件的效率;

 

- 我们的建议:在自动展示阶段,原则上要求页面切换控制在2s以内;在手动展示阶段,原则上要求即时反馈,即最快速的响应用户的操作;

 

 

·循环控制原则:

1)全自动模式:在此模式下,原则上要求能做到循环播放效果,在可能的情况下,建议通过间隔时间的不同来描述一次循环的结束和开始;

2)全手动模式:在此模式下,建议不做循环,即在一维方向上,存在终点状态,以方便用户理解、操控;

3)自动兼手动模式:在此模式下,原则上要求保持自动和手动模式的统一,即如果自动模式下的展现为循环,手动模式下也提供与之匹配的循环控制,反之亦然;一般来说,建议此模式下,采用循环的展示、控制样式;

 

 

·换页操控原则:

1)线性翻页:在此模式下,通常采用的是通过单向或者多向的翻页符,提供用户控制上下轮播图片的切换,在此类控件中,要求相对的方向符具有可回溯性,翻页采用线性轮转,方便用户记忆和操作;

 

2)卷轴滚屏:在此模式下,通常使用方向性的控制键来操作图片的卷轴式滚动播放,实现图片的轮播;一般来说,我们要求卷轴式的最新滚动展示位和用户视线的焦点一致,以方便用户的关注和操作;简单来说,卷轴滚屏模式是线性翻页模式的叠加形式表现;

 

3)精确定位:在此模式下,通常采用定位符,提供用户精确定位、精确播放的操作体验,其常用的定位符包括了缩略图、内容概要、小图标等具有指示性功能的元素;

 

4)手动拖拽:在此模式下,控件的操作方式为模拟手拖拽地图的感觉,通常情况下,我们以手型光标位置为用户视觉焦点,即用户关注方向和鼠标拖拽方向相反;

 

时间: 2024-11-03 20:46:59

UI角度分析网页图片轮播控件Carousel Controls的相关文章

Android客户端实现图片轮播控件_Android

本文和大家一起写一个Android图片轮播控件,供大家参考,具体内容如下 1. 轮播控件的组成部分     我们以知乎日报Android客户端的轮播控件为例,分析一下轮播控件的主要组成:        首先我们要有用来显示图片的View对象,根据上图中底部中央的5个点,我们知道需要5个ImageView来显示需要轮播的图片,另外还需要5个ImageView来显示5个点.现在考虑以下轮播组件应该具有的行为,首先需要每隔一定时间间隔切换到下一张图片,并且图片间切换的效果应该是平滑的,就像"翻书&qu

Android客户端实现图片轮播控件

本文和大家一起写一个Android图片轮播控件,供大家参考,具体内容如下 1. 轮播控件的组成部分 我们以知乎日报Android客户端的轮播控件为例,分析一下轮播控件的主要组成: 首先我们要有用来显示图片的View对象,根据上图中底部中央的5个点,我们知道需要5个ImageView来显示需要轮播的图片,另外还需要5个ImageView来显示5个点.现在考虑以下轮播组件应该具有的行为,首先需要每隔一定时间间隔切换到下一张图片,并且图片间切换的效果应该是平滑的,就像"翻书"一样.由此我们可

网页开发-网页图片轮播 图片显示问题

问题描述 网页图片轮播 图片显示问题 我要实现几张图片轮播:功能正常实现了,可是这个图片怎么显示地这么奇怪:半天找不出原因!求大神开发-网页图片轮播 图片显示问题-网页图片轮播代码"> 这个是两张图片...都只显示了各自的一半:我想要的是一整张一整张的显示: 解决方案 官网的正常没有,正常就是你使用有问题,或者自己导入的css重写了插件的css导致的jquery焦点图代码 解决方案二: css 的问题.这类的问题还是调试吧. 解决方案三: 你这是用插件的吧.原因应该是插件里面的css和你自

使用BootStrap建立响应式网页——通栏轮播图(carousel)_javascript技巧

1.bootstrap提供了js插件--轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg(保存大图)和data-img-xs(保存小图)属性保存图片的路径,利用jQuery的data函数取出data-xxxx属性进行动态加载. 图片居中显示:大图用背景图片来做比较好一点,小图用img来做比较好一点(因为小图的话需要等比例缩放,用背景图做不到等比例缩放). 承载轮播图的盒子高度:大图的的时

Android convinientbanner顶部广告轮播控件使用详解

本文实例为大家分享了convinientbanner顶部广告轮播控件的具体代码,供大家参考,具体内容如下 gradle中添加 compile 'com.bigkoo:convenientbanner:2.0.5' 布局 <com.bigkoo.convenientbanner.ConvenientBanner xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/convenientBa

Android仿京东淘宝自动无限循环轮播控件思路详解

在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于RelativeLayout,首先要考虑的就是自定义的控件需要扩展那些属性,把这些属性列出来.在这里是要实现类似于京东淘宝的无限轮播广告栏,那么首先想到的就是轮播的时长.轮播指示器的样式等等.我在这里列举了一些并且结合到了代码中. 1.扩展属性 (1)是否开启自动轮播的功能. (2)指示器的图形样式,一

android中的webview不能正常显示获取到的网页的图片轮播效果

问题描述 android中的webview不能正常显示获取到的网页的图片轮播效果 写了一个Android客户端软件,里边有个webview控件,获取到服务端的网页时出问题了. 网页上有个类似于HeadView的图片轮播效果,但是在客户端webview中不能正常显示. 解决方案 那你能将代码贴出来吗,这样猜不好猜的http://www.codesky.net/showhtml/26836.htm 上面的链接是一个关于webview显示获取到的网页图片轮播效果的源代码,你可以下载下来看看,然后找出自

内存在300m左右-WebView 关于显示图片轮播的网页,占很大内存,有什么方法优化

问题描述 WebView 关于显示图片轮播的网页,占很大内存,有什么方法优化 显示轮播图片40张,内存在300M左右,如何解决?同时图片切换也很不流畅 解决方案 ViewPager 显示图片,轮播 解决方案二: 以最省内存的方式读取本地资源的图片 Android 中加载图片的颜色模式有四种,分别是:ALPHA_8:每个像素占用 1byte 内存.ARGB_4444:每个像素占用 2byte 内存.ARGB_8888:每个像素占用 4byte 内存.RGB_565:每个像素占用 2byte 内存.

非常酷炫的Bootstrap图片轮播动画_javascript技巧

对于网站开发者来说,对展示内容增加一个滑动或者是轮播效果的是非常常见的需求.收费和免费的轮播插件多的是不胜枚举.其中很 多提供很多有用的配置选项和动态效果. 很多时候,如果你的项目需要的是一个轻量级的轮播,不需要很多的功能.同时你的项目是采用Bootstrap,(一个最流行的开源前端 框架)的话.你可以参考一下bootstrap官方组件. 这篇文章将展示如何在 Bootstrap轮播上添加有趣的动画效果.同时确保这个js组件自由扩展和快速上手. 介绍Animate.css 为了让我自己写的动画效