iOS系統首屏,頁碼指示符用來表示頁面總數以及當前所在位置.我們時常見到這種通過系統首屏來演示頁碼指示符使用方式的范例,實際上,頁碼指示符能完美適用的界面環境并不多,而系統首屏正是其中之一,因為用戶明確的知道自己的手機里裝有很多app以至于第一屏無法完整呈現,需要通過橫向滑動查看更多.

    很多app或網頁都會使用這種元素來暗示用戶可以通過橫向滑動來查看同級的其他頁面,也有一些是將其用在界面中特定的區域來暗示其中存在更多內容.不能否認,這種形式的頁碼指示符在app和移動Web的界面設計當中都很流行,但是要知道,它同時也是用戶最容易忽略掉的界面元素之一.在我們所做的一系列可用性測試當中,用戶經常難以發現這些在尺寸上過于微小的圓點,進而錯失了那些可以通過橫滑來查看到的內容或功能入口.所以,我們認為圓點形式的頁碼指示符至少不能被用作關鍵功能和內容的唯一導航方式.

    雖然iOS允許你將這些圓點渲染成其他顏色,但想要使如此微小的元素一目了然的突顯在界面當中還是非常困難的,除非你能確保將其置于高對比度的純色背景上.很多產品會將圓點們放置在五顏六色的banner圖上,使這些本就難以被留意到元素不知不覺的融入到背景當中,進一步降低了可發現性.如果一定要這樣做,那么必須確保圓點和背景色之間始終具有較高的對比度,最好是使用純色背景.

    iOS的Zappos,在第一張底圖上,頁碼指示符已經很弱了,而在右側第二張底圖上,幾乎完全消失了.

    有一部分產品則在iOS的基礎上進一步自由發揮,將圓點改為方形或其他形狀,布局上也更加隨意.不妨設想,即便用戶已經習慣了iOS的小圓點模式,現在他們就算發現了界面中的這些小元素,還要猜想這些方塊會不會就是代表著以前的那些小圓點 – 可發現性沒有顯著提升,同時還造成了認知上的困難.如果要使用頁碼指示符,盡可能使用用戶已經熟悉的圓點模式,并將其居中的置于對應內容的下方.

    Android中的Fab,借鑒了iOS模式的小圓點,但將其置于了內容的右側,相比于居中的位置,更難被發現.

    即便用戶能夠注意到頁碼指示符,這里還有一些潛在問題,譬如小圓點們可以讓用戶知道有多少同類型的信息視圖以及當前所處位置,但無法提供任何與內容本身相關的信息.此外,用戶對互動的控制權也非常弱,必須按照次序逐一瀏覽,無法直接跳轉.所以,如果在你的需求當中這些體驗要素比較重要,那么小圓點恐怕不是你的最佳選擇.

    鑒于小圓點頁碼指示符所存在的一些可用性問題,我們建議:

    首先考慮你的內容是否適宜通過橫滑的方式依次瀏覽,還是可以通過更復雜同時也更靈活的其他導航方式進行架構. 對于橫滑瀏覽的內容,盡量采用右邊緣露出一部分內容的方式來加強對于"更多"的暗示,而不要單純依靠頁碼指示符.