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