iOS系统首屏,页码指示符用来表示页面总数以及当前所在位置.我们时常见到这种通过系统首屏来演示页码指示符使用方式的范例,实际上,页码指示符能完美适用的界面环境并不多,而系统首屏正是其中之一,因为用户明确的知道自己的手机里装有很多app以至于第一屏无法完整呈现,需要通过横向滑动查看更多.

    很多app或网页都会使用这种元素来暗示用户可以通过横向滑动来查看同级的其他页面,也有一些是将其用在界面中特定的区域来暗示其中存在更多内容.不能否认,这种形式的页码指示符在app和移动Web的界面设计当中都很流行,但是要知道,它同时也是用户最容易忽略掉的界面元素之一.在我们所做的一系列可用性测试当中,用户经常难以发现这些在尺寸上过于微小的圆点,进而错失了那些可以通过横滑来查看到的内容或功能入口.所以,我们认为圆点形式的页码指示符至少不能被用作关键功能和内容的唯一导航方式.

    虽然iOS允许你将这些圆点渲染成其他颜色,但想要使如此微小的元素一目了然的突显在界面当中还是非常困难的,除非你能确保将其置于高对比度的纯色背景上.很多产品会将圆点们放置在五颜六色的banner图上,使这些本就难以被留意到元素不知不觉的融入到背景当中,进一步降低了可发现性.如果一定要这样做,那么必须确保圆点和背景色之间始终具有较高的对比度,最好是使用纯色背景.

    iOS的Zappos,在第一张底图上,页码指示符已经很弱了,而在右侧第二张底图上,几乎完全消失了.

    有一部分产品则在iOS的基础上进一步自由发挥,将圆点改为方形或其他形状,布局上也更加随意.不妨设想,即便用户已经习惯了iOS的小圆点模式,现在他们就算发现了界面中的这些小元素,还要猜想这些方块会不会就是代表着以前的那些小圆点 – 可发现性没有显着提升,同时还造成了认知上的困难.如果要使用页码指示符,尽可能使用用户已经熟悉的圆点模式,并将其居中的置于对应内容的下方.

    Android中的Fab,借鉴了iOS模式的小圆点,但将其置于了内容的右侧,相比于居中的位置,更难被发现.

    即便用户能够注意到页码指示符,这里还有一些潜在问题,譬如小圆点们可以让用户知道有多少同类型的信息视图以及当前所处位置,但无法提供任何与内容本身相关的信息.此外,用户对互动的控制权也非常弱,必须按照次序逐一浏览,无法直接跳转.所以,如果在你的需求当中这些体验要素比较重要,那么小圆点恐怕不是你的最佳选择.

    鉴于小圆点页码指示符所存在的一些可用性问题,我们建议:

    首先考虑你的内容是否适宜通过横滑的方式依次浏览,还是可以通过更复杂同时也更灵活的其他导航方式进行架构. 对于横滑浏览的内容,尽量采用右边缘露出一部分内容的方式来加强对于"更多"的暗示,而不要单纯依靠页码指示符.