控件集——Page Controls/頁面指示器

定義

Page Controls,頁面指示器[1]是映射的一種 姑尺。是附著在頁面的底部竟终,用來表示可滑動切換的頁面總數(shù)量和指示當(dāng)前停留頁面的一組等距分布的小指示點。

頁面指示器可以被理解為是橫向的頁面滾動條(變體)切蟋,或橫向的索引導(dǎo)航(區(qū)別在于頁面指示器不可點擊)统捶。

頁面指示器向用戶展示了總共有多少頁面可被觀看,以及現(xiàn)在在那個頁面上柄粹,如果指示點過多則可以被精簡喘鸟。

在移動端上,用戶可以通過滑動操作瀏覽所有的頁面(有些帶有頁面指示器的頁面在其左右兩側(cè)有箭頭按鈕可點擊切換)驻右,但不可以通過點擊頁面指示器上的小點通往相應(yīng)的頁面什黑。在電腦端上,通晨柏玻可以通過點擊任何一個指示點到達(dá)其映射的頁面愕把。

Iphone 中的 Page Controls


使用規(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]

蘋果系統(tǒng)中鎖屏界面的頁面指示器特殊化

不要把頁面指示器做到圖片中室抽。頁面指示器的層級要高于頁面狠半,因此無論在業(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)真考慮吃粒。

[1]龍爪槐守望者徐勃,http://www.reibang.com/p/0bd339cb99e6

[2]http://www.reibang.com/p/0bd339cb99e6

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末肖爵,一起剝皮案震驚了整個濱河市劝堪,隨后出現(xiàn)的幾起案子秒啦,更是在濱河造成了極大的恐慌余境,老刑警劉巖芳来,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異侥涵,居然都是意外死亡芜飘,警方通過查閱死者的電腦和手機(jī)嗦明,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來汹桦,“玉大人舞骆,你說我怎么就攤上這事径荔”繁梗” “怎么了胧谈?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵难菌,是天一觀的道長遇绞。 經(jīng)常有香客問我摹闽,道長付鹿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮吵血,結(jié)果婚禮上钱贯,老公的妹妹穿的比我還像新娘喷舀。我一直安慰自己硫麻,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布唾戚。 她就那樣靜靜地躺著,像睡著了一般绪囱。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上莹捡,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天鬼吵,我揣著相機(jī)與錄音,去河邊找鬼篮赢。 笑死齿椅,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的启泣。 我是一名探鬼主播媒咳,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼种远!你這毒婦竟也來了涩澡?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎妙同,沒想到半個月后射富,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡粥帚,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年胰耗,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片芒涡。...
    茶點故事閱讀 38,716評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡柴灯,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出费尽,到底是詐尸還是另有隱情赠群,我是刑警寧澤,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布旱幼,位于F島的核電站查描,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏柏卤。R本人自食惡果不足惜冬三,卻給世界環(huán)境...
    茶點故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望缘缚。 院中可真熱鬧勾笆,春花似錦、人聲如沸桥滨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽该园。三九已至酸舍,卻和暖如春帅韧,著一層夾襖步出監(jiān)牢的瞬間里初,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工忽舟, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留双妨,地道東北人。 一個月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓叮阅,卻偏偏與公主長得像刁品,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子浩姥,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,612評論 2 350