四步搞定分淮安廣告公司頁符設(shè)計

2019-12-06 點擊量：

又到了細(xì)節(jié)篇的時間啦，今天的主角是分頁符，也叫頁面指示器（Page Indicator），iOS規(guī)范將其稱為Page Controls?？吹竭@些名字可能讓人覺得相對陌生，但其實它是頁面中再熟悉不過的控件了。

分頁符是用來表示頁面總數(shù)和指示當(dāng)前所在頁面的，經(jīng)常伴隨輪播圖、卡片、引導(dǎo)頁等出現(xiàn)。我們平時溝通交流的時候?qū)λ男稳菘赡苁?ldquo;輪播點”、“進(jìn)度點”等，也確實有很多分頁符都采用了圓點的樣式，不過也不乏一些有趣新穎的設(shè)計，下面就來分析一下分頁符該如何設(shè)計。 

顏色

  常見的分頁符顏色有黑色、白色、灰色，無色系可以很好的適應(yīng)頁面各種顏色的內(nèi)容，配合透明度變化或者使用APP的主題色，來表現(xiàn)當(dāng)前所在頁面。

在選擇顏色的時候結(jié)合底部頁面的內(nèi)容來考慮，比如引導(dǎo)頁等內(nèi)容比較固定可控的頁面，我們在選擇顏色的時候可以避開頁面內(nèi)容的顏色。

而像banner、廣告位等內(nèi)容經(jīng)常變化的頁面，不能控制每一張圖，就需要我們考慮如何避免分頁符與底下內(nèi)容的相融。常見的處理方法有在內(nèi)容上增加一個深色的漸變蒙層，這樣就可以解決白色的分頁符在淺色背景上不突顯的問題，但這種方式也不可避免的對背景圖有一定影響，所以也可以只在分頁符部分加透明黑色蒙層。也可以為分頁符增加描邊以區(qū)分，比如淘寶的分頁符就加上了1px的灰色描邊，以保證在各色背景中的顯示效果。

形狀

分頁符的形狀有圓形、矩形、線形以及特殊形狀。我們應(yīng)該考慮內(nèi)容的數(shù)量、產(chǎn)品的風(fēng)格來以及項目時間來選擇使用。

圓形

最有代表性的形狀應(yīng)該就是圓形了，它可以承載較多的頁面數(shù)量，iOS規(guī)范中限定是不超過20頁，相同大小的圓點與正方形，圓點給人的視覺感受會比正方形小，讓人覺得更有空間感，在數(shù)量多的情況下也比較透氣。

選擇圓形不管從承載數(shù)量或是設(shè)計風(fēng)格上都不會出錯，是非常安全的方案。不過它也有一點缺憾就是太平淡了，如果你的產(chǎn)品用戶眾多且年齡跨度大，圓點會是一個非常好的選擇。但如果你的產(chǎn)品是針對小眾人群，希望突出產(chǎn)品個性，這張安全牌就不適合了。

矩形

相比于圓形，矩形的使用要求內(nèi)容展示數(shù)量不宜過多，一般2-5個較為合適。此外矩形還可以做變形，比如斜邊的矩形、圓角矩形、菱形等，讓造型更加個性。

線形

線性多在金剛區(qū)中使用，因為金剛區(qū)的圖標(biāo)數(shù)量比較靈活，隨著產(chǎn)品功能的變化可能增加或減少，而線性的分頁符更像一個進(jìn)度條既可以表現(xiàn)當(dāng)前進(jìn)度，在數(shù)量不穩(wěn)定的情況下也仍然可以保證每頁展示圖標(biāo)完整性，不會出現(xiàn)末頁圖標(biāo)數(shù)量空缺的情況。

特殊形狀

特殊形狀是結(jié)合產(chǎn)品的特點或是品牌元素設(shè)計的，在功能逐漸趨同的形勢下，利用設(shè)計細(xì)節(jié)讓產(chǎn)品更有自己的特色也增加趣味性。如下圖騰訊動漫和叭噠都選取了與品牌相關(guān)的元素作為當(dāng)前頁的形狀。

引導(dǎo)頁因為是一個比較穩(wěn)固的模塊，內(nèi)容和數(shù)量也是固定的，比較適合我們做一些趣味性的設(shè)計。比如我之前做的一個閱讀類的概念作品，引導(dǎo)頁就沒有用慣用的圓形分頁符而是符做了特殊設(shè)計。選擇了書的造型，三個引導(dǎo)頁分別對應(yīng)書的開始閱讀、閱讀中、閱讀完的形狀。

數(shù)字