?

全國統一服務熱線:18021770366

站內公告:

淮安市嘉瑞廣告有限公司主要提供廣告設計制作安裝服務以及網站制作,是一家經驗豐富的廣告設計制作公司,擁有十幾年廣告設計制作經驗!

聯系我們CONTACT

地址:淮安市翔宇大道1009號
熱線:0517-8588 1663
Q Q:34665706
郵箱:[email protected]

18021770366

新聞中心

當前位置:主頁 > 新聞中心 >

四步搞定分設計頁符設計

2019-12-11 點擊量:

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

四步搞定分頁符設計

頁符是用來表示頁面總數和指示當前所在頁面的,經常伴隨輪播圖、卡片、引導頁等出現。我們平時溝通交流的時候對它的形容可能是“輪播點”、“進度點”等,也確實有很多分頁符都采用了圓點的樣式,不過也不乏一些有趣新穎的設計,下面就來分析一下分頁符該如何設計。 

顏色

  常見的分頁符顏色有黑色、白色、灰色,無色系可以很好的適應頁面各種顏色的內容,配合透明度變化或者使用APP的主題色,來表現當前所在頁面。

四步搞定分頁符設計

在選擇顏色的時候結合底部頁面的內容來考慮,比如引導頁等內容比較固定可控的頁面,我們在選擇顏色的時候可以避開頁面內容的顏色。

四步搞定分頁符設計

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

四步搞定分頁符設計

形狀

分頁符的形狀有圓形、矩形、線形以及特殊形狀。我們應該考慮內容的數量、產品的風格來以及項目時間來選擇使用。

四步搞定分頁符設計

圓形

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

四步搞定分頁符設計

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

 

矩形

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

四步搞定分頁符設計

線形

線性多在金剛區中使用,因為金剛區的圖標數量比較靈活,隨著產品功能的變化可能增加或減少,而線性的分頁符更像一個進度條既可以表現當前進度,在數量不穩定的情況下也仍然可以保證每頁展示圖標完整性,不會出現末頁圖標數量空缺的情況。

四步搞定分頁符設計

 

特殊形狀

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

四步搞定分頁符設計

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

四步搞定分頁符設計

 

數字

?
渡劫5龙宫赚钱