在日常瀏覽APP的過程中，經(jīng)?？梢钥吹巾撁孢x擇器，它們的位置各有不同，樣式也多種多樣。這篇文章就和大家淺談一下頁面指示器的常見位置及設(shè)計(jì)樣式。

目錄

1.什么是頁面指示器

2.常見位置

3.常見樣式

4.不用頁面指示器的情況

什么是頁面指示器

通常在 banner或圖片底部出現(xiàn)的多個(gè)小圓點(diǎn)，稱之為頁面指示器。它的作用是告知用戶頁面的總數(shù)量，以及當(dāng)前所處的位置。如下圖：

常見位置

頁面指示器的常見位置有底部中間、底部右側(cè)、外部中間三種。

1.底部中間

這是最常見的位置，清晰明了的告訴用戶頁面數(shù)量及當(dāng)前位置。如下圖：

金剛區(qū)的頁面指示器也放在了底部中間的位置，既不會(huì)遮擋重要內(nèi)容，又可以告知用戶還有更多的功能。如下圖：

以京東和淘寶為例，它們之間不同的地方是京東屬于翻頁形式，滑動(dòng)跳轉(zhuǎn)到另一頁功能。而淘寶采用了滑塊的形式，用戶滑動(dòng)多少就顯示多少功能。

2.底部右側(cè)

當(dāng) banner 底部左側(cè)有標(biāo)題文字時(shí)，為了不遮擋內(nèi)容，所以把頁面指示器放在了底部右側(cè)的位置。如下圖：

3.外部中間

通常出現(xiàn)在卡片樣式的 banner 下方，既可以不遮擋內(nèi)容，讓用戶把注意力都集中到 banner 上，同時(shí)又起到了分隔模塊的作用。如下圖：

常見樣式

頁面指示器的常見樣式有規(guī)則形狀、異形、數(shù)字三種。

1.規(guī)則形狀

規(guī)則形狀是最常見的，比如圓形、圓角矩形。如下圖：

PS：話說，你看京東的頁面指示器像不像貪吃蛇~

2.異形

除規(guī)則形狀外，根據(jù)產(chǎn)品特性所創(chuàng)造的各種異形也比較常見。如下圖：

以騰訊動(dòng)漫和新草為例，騰訊動(dòng)漫使用了一個(gè)動(dòng)漫笑臉顯示當(dāng)前指示的頁面，新草則直接用了它的APP 圖標(biāo)形狀來顯示。

3.數(shù)字

數(shù)字通常用在圖集、相冊(cè)等以純圖為主的場(chǎng)景中，告知用戶圖片總數(shù)量及當(dāng)前位置。如下圖：

以小米有品和馬蜂窩為例，小米有品展示的商品大圖，馬蜂窩展示的是用戶上傳的照片，所以它們的都使用了數(shù)字樣式的頁面指示器。

不用頁面指示器的情況

如果不加頁面指示器，用戶就不能明確的知道當(dāng)前的banner或卡片是單張還是多張。這時(shí)還有另外一種表現(xiàn)方法，就是把兩邊的 banner 露出來一部分，來取代頁面指示器的作用。

優(yōu)點(diǎn)是：可以讓用戶把全部的注意力都集中到 banner 上，同時(shí)又告知用戶它是可以翻頁的。

缺點(diǎn)是：兩邊多出來的部分，會(huì)讓頁面看起來擁擠、雜亂，沒有那么清爽，同時(shí)用戶不能明確的知道當(dāng)前所處的位置。如下圖：

右圖是我去掉了兩邊多出的部分，頁面是不是看起來舒服多了？當(dāng)然，這讓它看起來像一張不能翻頁的卡片~

在實(shí)際操作中，我們需要根據(jù)具體的需求來選擇合適的頁面指示器。

總結(jié)

今天主要講述的一件事是頁面指示器的常見位置及樣式，我總結(jié)了以下幾點(diǎn)：

1.頁面指示器的主要作用是告知用戶頁面的總數(shù)量及當(dāng)前位置；

2.放在底部右側(cè)可以避免遮擋內(nèi)容，放在外部中間既可以讓用戶把注意力集中到 banner 上，又可以起到分隔模塊的作用。；

3.不使用頁面指示器時(shí)，可以采用兩邊內(nèi)容露出一部分的方式。

原創(chuàng)： 青山

公眾號(hào)：海鹽社