定義
Page Controls,頁面指示器[1]是映射的一種 姑尺。是附著在頁面的底部竟终,用來表示可滑動切換的頁面總數(shù)量和指示當(dāng)前停留頁面的一組等距分布的小指示點。
頁面指示器可以被理解為是橫向的頁面滾動條(變體)切蟋,或橫向的索引導(dǎo)航(區(qū)別在于頁面指示器不可點擊)统捶。
頁面指示器向用戶展示了總共有多少頁面可被觀看,以及現(xiàn)在在那個頁面上柄粹,如果指示點過多則可以被精簡喘鸟。
在移動端上,用戶可以通過滑動操作瀏覽所有的頁面(有些帶有頁面指示器的頁面在其左右兩側(cè)有箭頭按鈕可點擊切換)驻右,但不可以通過點擊頁面指示器上的小點通往相應(yīng)的頁面什黑。在電腦端上,通晨柏玻可以通過點擊任何一個指示點到達(dá)其映射的頁面愕把。
使用規(guī)范
確保每個指示點等距。等距的指示點在視覺上是規(guī)律而舒適的森爽,且傳達(dá)「頁面平級」的暗示恨豁。
確保當(dāng)前頁面與當(dāng)前指示點的映射易于識別,運用特異的視覺效果指示當(dāng)前所停留的指示點及其映射的頁面爬迟。通常情況下該特異可表示為顏色特異 和形狀特異橘蜜。
不要在不同級的頁面上使用頁面指示器。頁面指示器不能夠顯示頁面與頁面之間的聯(lián)系和層級關(guān)系雕旨,頁面指示器是為同級頁面切換而設(shè)計的扮匠。
不要過多的顯示頁面。10個以上的指示點不能讓用戶一時間數(shù)清凡涩,且不能讓用戶在一時間全部瀏覽完畢棒搜。如果在應(yīng)用程序中 包含20個同級頁面需要顯示,可以考慮例如柵格這種不用順序瀏覽的導(dǎo)航形式去展示活箕。
請將頁面指示器放在需要導(dǎo)航的頁面的中下部力麸。頁面指示器需要一直處于這個位置(無論頁面寬度多少)】寺欤可以保證其清晰可見以及避免遮擋信息。
頁面指示器的起點或終點的樣式可以特殊化摸恍。如果Page Indicator指示的某個頁面較為特殊赤屋,可以為其定制特別的樣式类早,例如鎖屏頁用戶可以不解鎖直接向左滑動打開相機(jī)涩僻,因此為相機(jī)的Pagination Dots設(shè)計了特殊樣式突出這個功能逆日。[2]
不要把頁面指示器做到圖片中室抽。頁面指示器的層級要高于頁面狠半,因此無論在業(yè)務(wù)流程中的哪一步都不能把頁面指示器設(shè)定在圖片之中,而要單獨切圖處理已维。否則頁面指示器會隨著頁面一起滑動垛耳,且有可能影響原本視覺頁面的布局飘千。
延展
滾動條樣式的頁面指示器护奈。如下圖所示霉旗,頁面指示器被設(shè)計為滾動條樣式,但依舊保留頁面指示器在位置和尺寸上的規(guī)范屬性擅憔,不同的是其交互與滾動條完全一致檐晕。其優(yōu)點是解決了有10個以上同級頁面需要展示時辟灰,頁面指示器過長的問題伞矩,以及可能因為同級頁面過多而導(dǎo)致用戶滑動屏幕次數(shù)過多的問題乃坤。
頁面指示器與滾動條相結(jié)合。Instagram把頁面指示器和進(jìn)度條相結(jié)合厅须,這樣用戶既可以知道當(dāng)前所指示的頁面食棕,也能對下一張頁面何時輪播有預(yù)期簿晓,便于用戶較為專注的瀏覽輪播圖的內(nèi)容憔儿。
小結(jié)
雖然市面上頁面指示器有多種延展,但依然不能忽視原本頁面指示器的規(guī)范朝刊。筆者認(rèn)為拾氓,隨著頁面的滑動底哥,頁面指示器中指示點的切換也要同樣流暢,直接地從一個點的特異變成另一個點的特異未免些許生硬易阳,在設(shè)計時也需要認(rèn)真考慮吃粒。