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

分頁符是用來表示頁面總數(shù)和指示當(dāng)前所在頁面的，經(jīng)常伴隨輪播圖、卡片、引導(dǎo)頁等出現(xiàn)。我們平時溝通交流的時候?qū)λ男稳菘赡苁?ldquo;輪播點”、“進度點”等，也確實有很多分頁符都采用了圓點的樣式，不過也不乏一些有趣新穎的設(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ū)的圖標數(shù)量比較靈活，隨著產(chǎn)品功能的變化可能增加或減少，而線性的分頁符更像一個進度條既可以表現(xiàn)當(dāng)前進度，在數(shù)量不穩(wěn)定的情況下也仍然可以保證每頁展示圖標完整性，不會出現(xiàn)末頁圖標數(shù)量空缺的情況。

 

特殊形狀

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

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

 

數(shù)字

也有一些APP選擇了數(shù)字來表達，使用數(shù)字讓分頁符不受內(nèi)容數(shù)量的影響，在數(shù)量變化大，或是內(nèi)容數(shù)量多的時候適合使用，使視覺效果比較可控。

  添加成功后新建一個文件看看成果吧。點擊symbols，找到我們剛才添加的文件就可以插入使用我們預(yù)設(shè)好的組件了，到這一步我們已經(jīng)完成了自己本地組件庫的建立和使用。     

 

動效

  分頁符可以做為變量的因素分別有顏色、透明度、形狀、角度以及大小，動效可以是單一變量構(gòu)成，也可以組合多個變量。根據(jù)我合作過的前端普遍評定，顏色、透明度變化實現(xiàn)成本最低，也是使用較多的方案。然后是同樣形狀的大小變化，也是比較好處理的。一些基本的形狀變化可以依靠代碼實現(xiàn)，有些也可以找到源代碼稍加修改就可以使用。涉及到特殊形狀的話就需要使用切圖了，這種相對來說就會麻煩些。所以具體的實現(xiàn)還是需要和前端的同事商量，聽取他們的意見。畢竟越復(fù)雜的動效花費的時間也越多，應(yīng)該根據(jù)項目排期衡量選擇定優(yōu)先級。
 

 

顏色變化

【嗶哩嗶哩】 

 

透明度變化

【虎嗅】 

 

大小變化

【毒】 

 

形狀變化 

【自如】  

 

角度變化

【轉(zhuǎn)轉(zhuǎn)】

 

組合變化

常見的組合變化比如大小+透明度、形狀+透明度、顏色+形狀等。

如下圖中愛范兒的分頁符動效，不僅發(fā)生了形狀變化顏色變化，還承擔(dān)了時間進度的作用，當(dāng)黃色充滿整個矩形，就會滾動到下一頁的內(nèi)容，讓等待內(nèi)容變化的過程更加可控，巧妙地給了用戶心理預(yù)期。

【愛范兒】

位置

分頁符通常跟隨內(nèi)容出現(xiàn)在其上方或下方，位置沒有限制靈活度比較高可以選擇居中、居左、居右，具體則需要我們根據(jù)其內(nèi)容來選擇最合適的位置，有兩個目標，一個是避免其對內(nèi)容的關(guān)鍵信息造成遮擋；一個是有效合理的利用和節(jié)省頁面空間。比如視頻類APP考慮到banner中標題的顯示，大多都把分頁符放在右下角的位置；而引導(dǎo)頁的分頁符為了保持畫面平衡則一般是居中的位置，下面就把常見的分頁符位置列舉一下。

以上就是我總結(jié)的分頁符的設(shè)計思路，當(dāng)然并不是說要一味去追求復(fù)雜的設(shè)計效果，但我們也絕不該停留于遵照慣例麻木套組件的階段。在時間允許的情況下可以試著去思考，嘗試各種方案，即使有時候也會需要放棄自己認為最有趣的方案，而選擇兼顧成本排期的結(jié)果，但過程中的無數(shù)可能不正是設(shè)計的樂趣嗎？即使小如分頁符，也值得我們多想一步（為啥突然雞湯了，這不是我……總之fighting！(?•??•?)??） 

劃重點

1. 選擇分頁符顏色時還需考慮其在同色系背景時的顯示問題。解決方案可以是添加蒙層或描邊。·分頁符的形狀有圓形、矩形、線形、特殊形狀、數(shù)字等，各有其特點，可以根據(jù)頁面內(nèi)容選擇適合的形狀。

2. 設(shè)計動效時可以和前端的同事商量，根據(jù)項目排期衡量調(diào)整方案。

3. 選擇位置時有兩個目標，一個是避免其對關(guān)鍵信息造成遮擋；一個是有效利用和節(jié)省頁面空間。

 

原文地址：海鹽社（公眾號）

作者： 焱小玖