定义
Page Controls,页面指示器[1]是映射的一种 。是附着在页面的底部,用来表示可滑动切换的页面总数量和指示当前停留页面的一组等距分布的小指示点。
页面指示器可以被理解为是横向的页面滚动条(变体),或横向的索引导航(区别在于页面指示器不可点击)。
页面指示器向用户展示了总共有多少页面可被观看,以及现在在那个页面上,如果指示点过多则可以被精简。
在移动端上,用户可以通过滑动操作浏览所有的页面(有些带有页面指示器的页面在其左右两侧有箭头按钮可点击切换),但不可以通过点击页面指示器上的小点通往相应的页面。在电脑端上,通常可以通过点击任何一个指示点到达其映射的页面。
使用规范
确保每个指示点等距。等距的指示点在视觉上是规律而舒适的,且传达「页面平级」的暗示。
确保当前页面与当前指示点的映射易于识别,运用特异的视觉效果指示当前所停留的指示点及其映射的页面。通常情况下该特异可表示为颜色特异 和形状特异。
不要在不同级的页面上使用页面指示器。页面指示器不能够显示页面与页面之间的联系和层级关系,页面指示器是为同级页面切换而设计的。
不要过多的显示页面。10个以上的指示点不能让用户一时间数清,且不能让用户在一时间全部浏览完毕。如果在应用程序中 包含20个同级页面需要显示,可以考虑例如栅格这种不用顺序浏览的导航形式去展示。
请将页面指示器放在需要导航的页面的中下部。页面指示器需要一直处于这个位置(无论页面宽度多少)。可以保证其清晰可见以及避免遮挡信息。
页面指示器的起点或终点的样式可以特殊化。如果Page Indicator指示的某个页面较为特殊,可以为其定制特别的样式,例如锁屏页用户可以不解锁直接向左滑动打开相机,因此为相机的Pagination Dots设计了特殊样式突出这个功能。[2]
不要把页面指示器做到图片中。页面指示器的层级要高于页面,因此无论在业务流程中的哪一步都不能把页面指示器设定在图片之中,而要单独切图处理。否则页面指示器会随着页面一起滑动,且有可能影响原本视觉页面的布局。
延展
滚动条样式的页面指示器。如下图所示,页面指示器被设计为滚动条样式,但依旧保留页面指示器在位置和尺寸上的规范属性,不同的是其交互与滚动条完全一致。其优点是解决了有10个以上同级页面需要展示时,页面指示器过长的问题,以及可能因为同级页面过多而导致用户滑动屏幕次数过多的问题。
页面指示器与滚动条相结合。Instagram把页面指示器和进度条相结合,这样用户既可以知道当前所指示的页面,也能对下一张页面何时轮播有预期,便于用户较为专注的浏览轮播图的内容。
小结
虽然市面上页面指示器有多种延展,但依然不能忽视原本页面指示器的规范。笔者认为,随着页面的滑动,页面指示器中指示点的切换也要同样流畅,直接地从一个点的特异变成另一个点的特异未免些许生硬,在设计时也需要认真考虑。