又到了細(xì)節(jié)篇的時(shí)間啦，今天的主角是分頁符，也叫頁面指示器（Page Indicator），iOS規(guī)范將其稱為Page Controls。看到這些名字可能讓人覺得相對(duì)陌生，但其實(shí)它是頁面中再熟悉不過的控件了。
分頁符是用來表示頁面總數(shù)和指示當(dāng)前所在頁面的，經(jīng)常伴隨輪播圖、卡片、引導(dǎo)頁等出現(xiàn)。我們平時(shí)溝通交流的時(shí)候?qū)λ男稳菘赡苁恰拜啿c(diǎn)”、“進(jìn)度點(diǎn)”等，也確實(shí)有很多分頁符都采用了圓點(diǎn)的樣式，不過也不乏一些有趣新穎的設(shè)計(jì)，下面就來分析一下分頁符該如何設(shè)計(jì)。?
顏色
? 常見的分頁符顏色有黑色、白色、灰色，無色系可以很好的適應(yīng)頁面各種顏色的內(nèi)容，配合透明度變化或者使用APP的主題色，來表現(xiàn)當(dāng)前所在頁面。
在選擇顏色的時(shí)候結(jié)合底部頁面的內(nèi)容來考慮，比如引導(dǎo)頁等內(nèi)容比較固定可控的頁面，我們?cè)谶x擇顏色的時(shí)候可以避開頁面內(nèi)容的顏色。
而像banner、廣告位等內(nèi)容經(jīng)常變化的頁面，不能控制每一張圖，就需要我們考慮如何避免分頁符與底下內(nèi)容的相融。常見的處理方法有在內(nèi)容上增加一個(gè)深色的漸變蒙層，這樣就可以解決白色的分頁符在淺色背景上不突顯的問題，但這種方式也不可避免的對(duì)背景圖有一定影響，所以也可以只在分頁符部分加透明黑色蒙層。也可以為分頁符增加描邊以區(qū)分，比如淘寶的分頁符就加上了1px的灰色描邊，以保證在各色背景中的顯示效果。
形狀
分頁符的形狀有圓形、矩形、線形以及特殊形狀。我們應(yīng)該考慮內(nèi)容的數(shù)量、產(chǎn)品的風(fēng)格來以及項(xiàng)目時(shí)間來選擇使用。
圓形
最有代表性的形狀應(yīng)該就是圓形了，它可以承載較多的頁面數(shù)量，iOS規(guī)范中限定是不超過20頁，相同大小的圓點(diǎn)與正方形，圓點(diǎn)給人的視覺感受會(huì)比正方形小，讓人覺得更有空間感，在數(shù)量多的情況下也比較透氣。
選擇圓形不管從承載數(shù)量或是設(shè)計(jì)風(fēng)格上都不會(huì)出錯(cuò)，是非常安全的方案。不過它也有一點(diǎn)缺憾就是太平淡了，如果你的產(chǎn)品用戶眾多且年齡跨度大，圓點(diǎn)會(huì)是一個(gè)非常好的選擇。但如果你的產(chǎn)品是針對(duì)小眾人群，希望突出產(chǎn)品個(gè)性，這張安全牌就不適合了。
?
矩形
相比于圓形，矩形的使用要求內(nèi)容展示數(shù)量不宜過多，一般2-5個(gè)較為合適。此外矩形還可以做變形，比如斜邊的矩形、圓角矩形、菱形等，讓造型更加個(gè)性。
線形
線性多在金剛區(qū)中使用，因?yàn)榻饎倕^(qū)的圖標(biāo)數(shù)量比較靈活，隨著產(chǎn)品功能的變化可能增加或減少，而線性的分頁符更像一個(gè)進(jìn)度條既可以表現(xiàn)當(dāng)前進(jìn)度，在數(shù)量不穩(wěn)定的情況下也仍然可以保證每頁展示圖標(biāo)完整性，不會(huì)出現(xiàn)末頁圖標(biāo)數(shù)量空缺的情況。
?
特殊形狀
特殊形狀是結(jié)合產(chǎn)品的特點(diǎn)或是品牌元素設(shè)計(jì)的，在功能逐漸趨同的形勢(shì)下，利用設(shè)計(jì)細(xì)節(jié)讓產(chǎn)品更有自己的特色也增加趣味性。如下圖騰訊動(dòng)漫和叭噠都選取了與品牌相關(guān)的元素作為當(dāng)前頁的形狀。
引導(dǎo)頁因?yàn)槭且粋€(gè)比較穩(wěn)固的模塊，內(nèi)容和數(shù)量也是固定的，比較適合我們做一些趣味性的設(shè)計(jì)。比如我之前做的一個(gè)閱讀類的概念作品，引導(dǎo)頁就沒有用慣用的圓形分頁符而是符做了特殊設(shè)計(jì)。選擇了書的造型，三個(gè)引導(dǎo)頁分別對(duì)應(yīng)書的開始閱讀、閱讀中、閱讀完的形狀。
?
數(shù)字
也有一些APP選擇了數(shù)字來表達(dá)，使用數(shù)字讓分頁符不受內(nèi)容數(shù)量的影響，在數(shù)量變化大，或是內(nèi)容數(shù)量多的時(shí)候適合使用，使視覺效果比較可控。
? 添加成功后新建一個(gè)文件看看成果吧。點(diǎn)擊symbols，找到我們剛才添加的文件就可以插入使用我們預(yù)設(shè)好的組件了，到這一步我們已經(jīng)完成了自己本地組件庫的建立和使用。? ? ?
?
動(dòng)效
? 分頁符可以做為變量的因素分別有顏色、透明度、形狀、角度以及大小，動(dòng)效可以是單一變量構(gòu)成，也可以組合多個(gè)變量。根據(jù)我合作過的前端普遍評(píng)定，顏色、透明度變化實(shí)現(xiàn)成本最低，也是使用較多的方案。然后是同樣形狀的大小變化，也是比較好處理的。一些基本的形狀變化可以依靠代碼實(shí)現(xiàn)，有些也可以找到源代碼稍加修改就可以使用。涉及到特殊形狀的話就需要使用切圖了，這種相對(duì)來說就會(huì)麻煩些。所以具體的實(shí)現(xiàn)還是需要和前端的同事商量，聽取他們的意見。畢竟越復(fù)雜的動(dòng)效花費(fèi)的時(shí)間也越多，應(yīng)該根據(jù)項(xiàng)目排期衡量選擇定優(yōu)先級(jí)。
?
?
顏色變化
【嗶哩嗶哩】?
?
透明度變化
【虎嗅】?
?
大小變化
【毒】?
?
形狀變化?
【自如】??
?
角度變化
【轉(zhuǎn)轉(zhuǎn)】
?
組合變化
常見的組合變化比如大小+透明度、形狀+透明度、顏色+形狀等。
如下圖中愛范兒的分頁符動(dòng)效，不僅發(fā)生了形狀變化顏色變化，還承擔(dān)了時(shí)間進(jìn)度的作用，當(dāng)黃色充滿整個(gè)矩形，就會(huì)滾動(dòng)到下一頁的內(nèi)容，讓等待內(nèi)容變化的過程更加可控，巧妙地給了用戶心理預(yù)期。
【愛范兒】
位置
分頁符通常跟隨內(nèi)容出現(xiàn)在其上方或下方，位置沒有限制靈活度比較高可以選擇居中、居左、居右，具體則需要我們根據(jù)其內(nèi)容來選擇最合適的位置，有兩個(gè)目標(biāo)，一個(gè)是避免其對(duì)內(nèi)容的關(guān)鍵信息造成遮擋；一個(gè)是有效合理的利用和節(jié)省頁面空間。比如視頻類APP考慮到banner中標(biāo)題的顯示，大多都把分頁符放在右下角的位置；而引導(dǎo)頁的分頁符為了保持畫面平衡則一般是居中的位置，下面就把常見的分頁符位置列舉一下。
以上就是我總結(jié)的分頁符的設(shè)計(jì)思路，當(dāng)然并不是說要一味去追求復(fù)雜的設(shè)計(jì)效果，但我們也絕不該停留于遵照慣例麻木套組件的階段。在時(shí)間允許的情況下可以試著去思考，嘗試各種方案，即使有時(shí)候也會(huì)需要放棄自己認(rèn)為最有趣的方案，而選擇兼顧成本排期的結(jié)果，但過程中的無數(shù)可能不正是設(shè)計(jì)的樂趣嗎？即使小如分頁符，也值得我們多想一步（為啥突然雞湯了，這不是我……總之fighting！(??????)??）?
劃重點(diǎn)
1. 選擇分頁符顏色時(shí)還需考慮其在同色系背景時(shí)的顯示問題。解決方案可以是添加蒙層或描邊。·分頁符的形狀有圓形、矩形、線形、特殊形狀、數(shù)字等，各有其特點(diǎn)，可以根據(jù)頁面內(nèi)容選擇適合的形狀。
2. 設(shè)計(jì)動(dòng)效時(shí)可以和前端的同事商量，根據(jù)項(xiàng)目排期衡量調(diào)整方案。
3. 選擇位置時(shí)有兩個(gè)目標(biāo)，一個(gè)是避免其對(duì)關(guān)鍵信息造成遮擋；一個(gè)是有效利用和節(jié)省頁面空間。
?
原文地址：海鹽社（公眾號(hào)）
作者： 焱小玖
