UI设计干货素材|轻松搞定页面分页符（指示器）的设计

页面指示器（Page Indicator），iOS规范将其称为Page Controls。看到这些名字可能让人觉得相对陌生，但其实它是页面中再熟悉不过的控件了。

 

分页按钮

分页符是用来表示页面总数和指示当前所在页面的，经常伴随轮播图、卡片、引导页等出现。我们平时沟通交流的时候对它的形容可能是“轮播点”、“进度点”等，也确实有很多分页符都采用了圆点的样式，不过也不乏一些有趣新颖的设计，下面就来分析一下分页符该如何设计。

一、颜色

常见的分页符颜色有黑色、白色、灰色，无色系可以很好的适应页面各种颜色的内容，配合透明度变化或者使用APP的主题色，来表现当前所在页面。

 

分页布局

在选择颜色的时候结合底部页面的内容来考虑，比如引导页等内容比较固定可控的页面，我们在选择颜色的时候可以避开页面内容的颜色。

二.形状

分页符的形状有圆形、矩形、线形以及特殊形状。我们应该考虑内容的数量、产品的风格来以及项目时间来选择使用。

 

分页

三.动效

分页符可以做为变量的因素分别有颜色、透明度、形状、角度以及大小，动效可以是单一变量构成，也可以组合多个变量。

 

分页

四.位置

分页符通常跟随内容出现在其上方或下方，位置没有限制灵活度比较高可以选择居中、居左、居右，具体则需要我们根据其内容来选择最合适的位置，有两个目标，一个是避免其对内容的关键信息造成遮挡；一个是有效合理的利用和节省页面空间。

 

寻呼指示勘探

 

Volumen iPhone的iOS 9

更多UI设计细节素材到搜UI（sooui)，初学者临摹学习是进步的秘诀！

重点

a.选择分页符颜色时还需考虑其在同色系背景时的显示问题。解决方案可以是添加蒙层或描边。

b.分页符的形状有圆形、矩形、线形、特殊形状、数字等，各有其特点，可以根据页面内容选择适合的形状。

c.设计动效时可以和前端的同事商量，根据项目排期衡量调整方案。

d.选择位置时有两个目标，一个是避免其对关键信息造成遮挡；一个是有效利用和节省页面空间。