APP頁(yè)面指示器如何設(shè)計(jì)

2021-05-29    分類: 網(wǎng)站建設(shè)

一、什么是頁(yè)面指示器
通常在 banner或圖片底部出現(xiàn)的多個(gè)小圓點(diǎn),稱之為頁(yè)面指示器。它的作用是告知用戶頁(yè)面的總數(shù)量,以及當(dāng)前所處的位置。如下圖:

頁(yè)面指示器設(shè)計(jì)

頁(yè)面指示器設(shè)計(jì)

二、常見位置
頁(yè)面指示器的常見位置有底部中間、底部右側(cè)、外部中間三種。
1.底部中間
這是最常見的位置,清晰明了的告訴用戶頁(yè)面數(shù)量及當(dāng)前位置。如下圖:

頁(yè)面指示器設(shè)計(jì)

頁(yè)面指示器設(shè)計(jì)

金剛區(qū)的頁(yè)面指示器也放在了底部中間的位置,既不會(huì)遮擋重要內(nèi)容,又可以告知用戶還有更多的功能。如下圖:

頁(yè)面指示器設(shè)計(jì)

頁(yè)面指示器設(shè)計(jì)

以京東和淘寶為例,它們之間不同的地方是京東屬于翻頁(yè)形式,滑動(dòng)跳轉(zhuǎn)到另一頁(yè)功能。而淘寶采用了滑塊的形式,用戶滑動(dòng)多少就顯示多少功能。
2.底部右側(cè)
當(dāng) banner 底部左側(cè)有標(biāo)題文字時(shí),為了不遮擋內(nèi)容,所以把頁(yè)面指示器放在了底部右側(cè)的位置。如下圖:

頁(yè)面指示器設(shè)計(jì)

頁(yè)面指示器設(shè)計(jì)

3.外部中間
通常出現(xiàn)在卡片樣式的 banner 下方,既可以不遮擋內(nèi)容,讓用戶把注意力都集中到 banner 上,同時(shí)又起到了分隔模塊的作用。如下圖:

頁(yè)面指示器設(shè)計(jì)

頁(yè)面指示器設(shè)計(jì)

三、常見樣式
頁(yè)面指示器的常見樣式有規(guī)則形狀、異形、數(shù)字三種。
1.規(guī)則形狀
規(guī)則形狀是最常見的,比如圓形、圓角矩形。如下圖:

頁(yè)面指示器設(shè)計(jì)

頁(yè)面指示器設(shè)計(jì)

PS:話說,你看京東的頁(yè)面指示器像不像貪吃蛇~
2.異形
除規(guī)則形狀外,根據(jù)產(chǎn)品特性所創(chuàng)造的各種異形也比較常見。如下圖:

頁(yè)面指示器設(shè)計(jì)

頁(yè)面指示器設(shè)計(jì)

以騰訊動(dòng)漫和新草為例,騰訊動(dòng)漫使用了一個(gè)動(dòng)漫笑臉顯示當(dāng)前指示的頁(yè)面,新草則直接用了它的APP 圖標(biāo)形狀來顯示。
3.數(shù)字
數(shù)字通常用在圖集、相冊(cè)等以純圖為主的場(chǎng)景中,告知用戶圖片總數(shù)量及當(dāng)前位置。如下圖:

頁(yè)面指示器設(shè)計(jì)

頁(yè)面指示器設(shè)計(jì)

以小米有品和馬蜂窩為例,小米有品展示的商品大圖,馬蜂窩展示的是用戶上傳的照片,所以它們的都使用了數(shù)字樣式的頁(yè)面指示器。
四、不用頁(yè)面指示器的情況
如果不加頁(yè)面指示器,用戶就不能明確的知道當(dāng)前的banner或卡片是單張還是多張。這時(shí)還有另外一種表現(xiàn)方法,就是把兩邊的 banner 露出來一部分,來取代頁(yè)面指示器的作用。
優(yōu)點(diǎn)是:可以讓用戶把全部的注意力都集中到 banner 上,同時(shí)又告知用戶它是可以翻頁(yè)的。
缺點(diǎn)是:兩邊多出來的部分,會(huì)讓頁(yè)面看起來?yè)頂D、雜亂,沒有那么清爽,同時(shí)用戶不能明確的知道當(dāng)前所處的位置。如下圖:

頁(yè)面指示器設(shè)計(jì)

頁(yè)面指示器設(shè)計(jì)

右圖是我去掉了兩邊多出的部分,頁(yè)面是不是看起來舒服多了?當(dāng)然,這讓它看起來像一張不能翻頁(yè)的卡片~

在實(shí)際操作中,我們需要根據(jù)具體的需求來選擇合適的頁(yè)面指示器。

(鄭重聲明:本文版權(quán)歸原作者海鹽社青山所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如有侵權(quán),請(qǐng)聯(lián)系我們刪除;如作者信息標(biāo)記有誤,請(qǐng)聯(lián)系我們修改。)

本文標(biāo)題:APP頁(yè)面指示器如何設(shè)計(jì)
文章源于:http://www.bm7419.com/news49/115549.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、企業(yè)網(wǎng)站制作外貿(mào)建站、小程序開發(fā)、標(biāo)簽優(yōu)化App開發(fā)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

小程序開發(fā)