页面指示器(Page Indicator),iOS规范将其称为Page Controls。看到这些名字可能让人觉得相对陌生,但其实它是页面中再熟悉不过的控件了。
![bb386b1a5a710e409d6a736b0e577dfb.png](https://i-blog.csdnimg.cn/blog_migrate/4fe93f4ed23c1200efaeac8fbaad8e03.png)
分页按钮
分页符是用来表示页面总数和指示当前所在页面的,经常伴随轮播图、卡片、引导页等出现。我们平时沟通交流的时候对它的形容可能是“轮播点”、“进度点”等,也确实有很多分页符都采用了圆点的样式,不过也不乏一些有趣新颖的设计,下面就来分析一下分页符该如何设计。
一、颜色
常见的分页符颜色有黑色、白色、灰色,无色系可以很好的适应页面各种颜色的内容,配合透明度变化或者使用APP的主题色,来表现当前所在页面。
![114761d2a29e4e3d60e8ebe51e7845a6.png](https://i-blog.csdnimg.cn/blog_migrate/26324daafafd44b4526b3d14d633642b.png)
分页布局
在选择颜色的时候结合底部页面的内容来考虑,比如引导页等内容比较固定可控的页面,我们在选择颜色的时候可以避开页面内容的颜色。
二.形状
分页符的形状有圆形、矩形、线形以及特殊形状。我们应该考虑内容的数量、产品的风格来以及项目时间来选择使用。
![90aaf24af01d069c5d03e965efd96e0e.png](https://i-blog.csdnimg.cn/blog_migrate/ef2cd01b30ddc421c668beb6c78f329d.png)
分页
三.动效
分页符可以做为变量的因素分别有颜色、透明度、形状、角度以及大小,动效可以是单一变量构成,也可以组合多个变量。
![f05e4b5d96e7955c98cac14b96f43351.png](https://i-blog.csdnimg.cn/blog_migrate/3e8228189a1515509f641498dd6d1f1e.png)
分页
四.位置
分页符通常跟随内容出现在其上方或下方,位置没有限制灵活度比较高可以选择居中、居左、居右,具体则需要我们根据其内容来选择最合适的位置,有两个目标,一个是避免其对内容的关键信息造成遮挡;一个是有效合理的利用和节省页面空间。
![de00328b1f8a82b33026f31136db4b86.png](https://i-blog.csdnimg.cn/blog_migrate/8be441d98153f537118b20fcd54b1146.png)
寻呼指示勘探
![2ab9f2c8c31feb63b803f07e6e54f0e0.png](https://i-blog.csdnimg.cn/blog_migrate/1f579c72d5d54627cdde85f1986b529b.png)
Volumen iPhone的iOS 9
更多UI设计细节素材到搜UI(sooui) www.sooui.com
![4e38b96b0866d7d2cfb93c7837e67b95.png](https://i-blog.csdnimg.cn/blog_migrate/eebb0e7064881d79af7908b7eb706fae.jpeg)
重点
a.选择分页符颜色时还需考虑其在同色系背景时的显示问题。解决方案可以是添加蒙层或描边。
b.分页符的形状有圆形、矩形、线形、特殊形状、数字等,各有其特点,可以根据页面内容选择适合的形状。
c.设计动效时可以和前端的同事商量,根据项目排期衡量调整方案。
d.选择位置时有两个目标,一个是避免其对关键信息造成遮挡;一个是有效利用和节省页面空间。