这个控件叫:Page Indicator/Page Controls/页面指示器

鉴于国内交互设计名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和使用事项,希望能为推动交互设计发展,做出一点微小的贡献。

Page Indicator(页面指示器,iOS规范称为Page Controls)是附着在轮播图、一组卡片或者页面的底部,用来表示页面总数量和指示当前停留的页面。通常由一组等距的小圆点组成,小圆点的数量代表页面总数,其中深色或实心的小圆点代表当前页面。


Page Indicator

用户可以通过左右滑动切换上一个/下一个页面,或者点击Page Indicator本身来切换,一般来说移动端点击Page Indicator顺序切换上一个/下一个页面,而PC端可以精确点击其中一个小圆点到达特定的页面。

如何使用

  • 不要显示太多Pagination Dots(分页点)
    超过10个Pagination Dots很难在一屏内展示,超过20个页面用户浏览起来会非常耗时。如果超过20个页面请考虑使用其他形式或控件展示。

  • 注意滑动冲突
    一般来说用户在移动端习惯于使用左右滑动操作Page Indicator,因此要注意同页面内会不会与其他支持左右滑动的控件(例如:顶部Tabs、地图、轮播图等)产生手势冲突。举个反面例子,iOS官方地图可以在锁屏显示地图导航,由于锁屏本身有Page Indicator响应左右滑动切换到相机和搜索页面,导致与导航界面内顶部的路线指示Page Indicator产生手势冲突,无法操作。


    iOS锁屏地图导航
  • Pagination Dots样式可以特殊化
    如果Page Indicator指示的某个页面较为特殊,可以为其定制特别的样式,例如锁屏页用户可以不解锁直接向左滑动打开相机,因此为相机的Pagination Dots设计了特殊样式突出这个功能。天气App中一眼就明白第一个Pagination Dots是当前GPS定位地址。


    锁屏页和天气App
  • 不要把Page Indicator做到页面内
    Page Indicator的层级比页面要高,因此切图和研发工程师沟通实现方案时,一定要确认把Page Indicator单独切图处理。千万不能把Page Indicator嵌入到页面里,导致滑动页面时,Page Indicator跟随页面一起运动。


    不能把Page Indicator嵌入到页面里

相关资料

  • Page Indicator和进度条相结合
    一号店的轮播图把Page Indicator和进度条相结合,这样用户既可以知道当前所指示的页面,也能对下一张页面何时轮播有预期,便于用户较为专注的浏览轮播图的内容。


    一号店轮播图








《这个控件叫什么》专题

这个控件叫:Badge/徽标/小红点
这个控件叫:A-Z index/字母索引导航
这个控件叫:Segment Controls/分段控件(附录与Tabs的区别)
这个控件叫:Skeleton Screen/加载占位图
这个控件叫:Stepper/步进器
这个控件叫:Switch/开关/滑动开关/切换开关
Toast(吐司提示)的曾经、现在与未来
这个控件叫:Picker/选择器/拾取器
这个控件叫:Soft Keyboard/Virtual Keyboard/软键盘/虚拟键盘
这个控件叫:Action Sheet/动作菜单/动作面板/行动列表
这个控件叫:Popover/气泡弹出框/弹出式气泡/气泡
这个控件叫:Text fields/输入框/文本框
这个控件可能叫:Notice Bar/通告栏

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,827评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,778评论 4 61
  • 对我来说,完美的电影仿佛是在眼睛的后面展开一样,是你自己的眼睛在投射它,所以你看见的就是你想看见的。电影正如思维,...
    SongYao瑶阅读 3,126评论 0 1
  • 谨以此文献给我的舍友 6月24日,你的生命,永远定格在了这一天。距离你20岁还有不到100天的日子。 我在暑假设想...
    闲来谈谈阅读 3,486评论 1 1
  • 风 吹起 一池水 摇了水草 拂了树上蝉 惊了几声蝉鸣 穿了金黄的稻田 惹了稻子直点头笑 赶了天空中的卷积云 闻了远...
    叶抽抽阅读 1,886评论 1 0

友情链接更多精彩内容