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

作者:龙爪槐守望者

原文地址:zhuanlan.zhihu.com/p/26209465

转载无限欢迎,但请注明「作者」和「原文地址」。感谢您对作者版权的尊重。


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

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

v2-2b1384dfb64bd74990f797868e62fcdf_hd.jpg

Page Indicator

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


如何使用

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

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

v2-9ecb34aa65b428ab6227432c84ac256e_hd.jpg

iOS 锁屏地图导航

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

v2-60e8b223fb82858cb308b379ab178884_hd.jpg

锁屏页和天气App

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

v2-c9c89811f109ae6ed14d002254dc216a_hd.jpg

不能把 Page Indicator 嵌入到页面里

相关资料

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

欢迎阅读上一期 A-Z index/字母索引导航:uicircle.club/a/94


更多文章,欢迎访问 uicircle.club

微信公众号:uicircle

成为会员

UIcircle Member

Local Groups

UIcircle 会员

目前仅需 59 元即可加入我们

成为会员后,您可以

  • 加入内部的 Slack Channel 及微信群
  • 报名参与各种线下设计、聚会活动
  • 其他会员福利,如周边礼物、软件折扣等

如有疑问,可以先 了解我们

加入我们