iOS當中UI元素頁碼指示符(小圓點)的優(yōu)化。

發(fā)表日期：2015/8/12 11:45:29 文章編輯：瀏覽次數(shù)：2806

iOS的頁碼指示符，在形式上就是橫排的圓點，用來表示一系列可以通過橫滑瀏覽的分頁視圖。其中，代表當前視圖的圓點處于高亮狀態(tài)，其他的則是灰暗的半透明狀態(tài)。

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

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

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

iOS的Zappos，在第一張底圖上，頁碼指示符已經(jīng)很弱了，而在右側(cè)第二張底圖上，幾乎完全消失了。

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

Android中的Fab，借鑒了iOS模式的小圓點，但將其置于了內(nèi)容的右側(cè)，相比于居中的位置，更難被發(fā)現(xiàn)。

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

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