交互设计规范之轮播

  • 经验类型规范/资料
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-禁止演绎
1914 0 0 2021-09-24

轮播

Carousel 


一.定义

同类型图片/碎片的自动轮播或手动轮播。


二.用途

用于扩充单位面积内的展示信息量


三.类型

自动轮播、手动轮播

1.自动轮播

1.1 样式描述

元素包括:轮播图、轮播定位点;

1.2 布局说明

1)通栏轮播时,图片之间需间隔一定像素距离;固定区域内轮播时可根据效果不增加间隔;

2)定位点位置可居中、居左或居右;

【交互说明】

1)从首图开始循环轮播,从进入页面开始计时,单次切换间隔4秒、滑动持续时间300毫秒;

2)支持手动触发滑动,图片单次切换间隔时间以滑动频率为准,滑动持续时间300毫秒;

3)手势滑动的消耗时间不计入自动轮播间隔时间中。

【交互说明】

1)从首图开始循环轮播,从进入页面开始计时,单次切换间隔3秒、滑动持续时间300毫秒;

2)支持手动触发滑动,图片单次切换间隔时间以滑动频率为准,滑动持续时间300毫秒;

3)手势滑动的消耗时间不计入自动轮播间隔时间中;

4)循环滚动轮播。


2.手动轮播

1.1 样式描述

元素包括:轮播图/轮播碎片;

1.2 布局说明

1)元素之间需间隔一定像素距离;

2)一屏内需看到大于1个的可滑动元素。

【交互说明】

1)初始状态定位在首图/首个碎片;

2)不支持循环,滑动至最前/最后时需弹性效果响应。


3.场景举例



Powered by Froala Editor

全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票