这个控件叫: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/通告栏

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,776评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,527评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,361评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,430评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,511评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,544评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,561评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,315评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,763评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,070评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,235评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,911评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,554评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,173评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,424评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,106评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,103评论 2 352

推荐阅读更多精彩内容

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