鑒於國內交互設計名詞混亂不統一，很多設計師不知道如何用專業術語稱呼一個控制項，因此我開了《這個控制項叫什麼》專題，梳理控制項的名稱和使用事項，希望能為推動交互設計發展，做出一點微小的貢獻。

Page Indicator（頁面指示器，iOS規範稱為Page Controls）是附著在輪播圖、一組卡片或者頁面的底部，用來表示頁面總數量和指示當前停留的頁面。通常由一組等距的小圓點組成，小圓點的數量代表頁面總數，其中深色或實心的小圓點代表當前頁面。

如何使用

• 不要顯示太多Pagination Dots（分頁點）

  超過10個Pagination Dots很難在一屏內展示，超過20個頁面用戶瀏覽起來會非常耗時。如果超過20個頁面請考慮使用其他形式或控制項展示。

• 注意滑動衝突

  一般來說用戶在移動端習慣於使用左右滑動操作Page Indicator，因此要注意同頁面內會不會與其他支持左右滑動的控制項（例如：頂部Tabs、地圖、輪播圖等）產生手勢衝突。舉個反面例子，iOS官方地圖可以在鎖屏顯示地圖導航，由於鎖屏本身有Page Indicator響應左右滑動切換到相機和搜索頁面，導致與導航界面內頂部的路線指示Page Indicator產生手勢衝突，無法操作。

  

  iOS鎖屏地圖導航

• Pagination Dots樣式可以特殊化

  如果Page Indicator指示的某個頁面較為特殊，可以為其定製特別的樣式，例如鎖屏頁用戶可以不解鎖直接向左滑動打開相機，因此為相機的Pagination Dots設計了特殊樣式突出這個功能。天氣App中一眼就明白第一個Pagination Dots是當前GPS定位地址。

  

  鎖屏頁和天氣App

• 不要把Page Indicator做到頁面內

  Page Indicator的層級比頁面要高，因此切圖和研發工程師溝通實現方案時，一定要確認把Page Indicator單獨切圖處理。千萬不能把Page Indicator嵌入到頁面里，導致滑動頁面時，Page Indicator跟隨頁面一起運動。

  

  不能把Page Indicator嵌入到頁面里

相關資料

• Page Indicator和進度條相結合
  一號店的輪播圖把Page Indicator和進度條相結合，這樣用戶既可以知道當前所指示的頁面，也能對下一張頁面何時輪播有預期，便於用戶較為專註的瀏覽輪播圖的內容。
  一號店輪播圖

推薦閱讀：