App中的页面指示器要如何设计？

在日常浏览APP的过程中，经常可以看到页面选择器，它们的位置各有不同，样式也多种多样。这篇文章就和大家浅谈一下页面指示器的常见位置及设计样式。

目录

1.什么是页面指示器

2.常见位置

3.常见样式

4.不用页面指示器的情况

什么是页面指示器

通常在 banner或图片底部出现的多个小圆点，称之为页面指示器。它的作用是告知用户页面的总数量，以及当前所处的位置。如下图：

常见位置

页面指示器的常见位置有底部中间、底部右侧、外部中间三种。

1.底部中间

这是最常见的位置，清晰明了的告诉用户页面数量及当前位置。如下图：

金刚区的页面指示器也放在了底部中间的位置，既不会遮挡重要内容，又可以告知用户还有更多的功能。如下图：

以京东和淘宝为例，它们之间不同的地方是京东属于翻页形式，滑动跳转到另一页功能。而淘宝采用了滑块的形式，用户滑动多少就显示多少功能。

2.底部右侧

当 banner 底部左侧有标题文字时，为了不遮挡内容，所以把页面指示器放在了底部右侧的位置。如下图：

3.外部中间

通常出现在卡片样式的 banner 下方，既可以不遮挡内容，让用户把注意力都集中到 banner 上，同时又起到了分隔模块的作用。如下图：

常见样式

页面指示器的常见样式有规则形状、异形、数字三种。

1.规则形状

规则形状是最常见的，比如圆形、圆角矩形。如下图：

PS：话说，你看京东的页面指示器像不像贪吃蛇~

2.异形

除规则形状外，根据产品特性所创造的各种异形也比较常见。如下图：

以腾讯动漫和新草为例，腾讯动漫使用了一个动漫笑脸显示当前指示的页面，新草则直接用了它的APP 图标形状来显示。

3.数字

数字通常用在图集、相册等以纯图为主的场景中，告知用户图片总数量及当前位置。如下图：

以小米有品和马蜂窝为例，小米有品展示的商品大图，马蜂窝展示的是用户上传的照片，所以它们的都使用了数字样式的页面指示器。

不用页面指示器的情况

如果不加页面指示器，用户就不能明确的知道当前的banner或卡片是单张还是多张。这时还有另外一种表现方法，就是把两边的 banner 露出来一部分，来取代页面指示器的作用。

优点是：可以让用户把全部的注意力都集中到 banner 上，同时又告知用户它是可以翻页的。

缺点是：两边多出来的部分，会让页面看起来拥挤、杂乱，没有那么清爽，同时用户不能明确的知道当前所处的位置。如下图：

右图是我去掉了两边多出的部分，页面是不是看起来舒服多了？当然，这让它看起来像一张不能翻页的卡片~

在实际操作中，我们需要根据具体的需求来选择合适的页面指示器。

总结

今天主要讲述的一件事是页面指示器的常见位置及样式，我总结了以下几点：

1.页面指示器的主要作用是告知用户页面的总数量及当前位置；

2.放在底部右侧可以避免遮挡内容，放在外部中间既可以让用户把注意力集中到 banner 上，又可以起到分隔模块的作用。；

3.不使用页面指示器时，可以采用两边内容露出一部分的方式。

原创： 青山

公众号：海盐社