四步搞定分页符设计

又到了细节篇的时间啦，今天的主角是分页符，也叫页面指示器（PageIndicator），iOS规范将其称为PageControls。看到这种名字可能让人认为相对陌生，但似乎它是页面中再熟悉不过的控件了。

分页符是用来表示页面总数和指示当前所在页面的，经常伴随轮播图、卡片、引导页等出现。我们经常沟通交流的之后对它的形容可能是“轮播点”、“进度点”等，也确实有众多分页符都运用了格子的款式，不过也不乏一些有趣新颖的设计，下面就来预测一下分页符该怎么设计。

颜色

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

在选取色彩的之后结合上面页面的内容来考量，比如鼓励页等内容非常固定可控的页面，我们在选取色彩的之后可以避免页面内容的颜色。

而像banner、广告位等内容常常变化的页面，不能控制每一张图，就必须我们考量如何导致分页符与上面内容的相融。常见的处理方式有在内容上提高一个黑色的渐变蒙层，这样就可以解决红色的分页符在白色背景上不突出的弊端，但这些方法也不可导致的对背景图有一定影响，所以也可以只在分页符部分加透明白色蒙层。也可以为分页符增加描边以区别，比如淘宝的分页符就加上了1px的黑色遮罩，以保证在各种背景中的显示效果。

形状

分页符的样式有方形、矩形、线形或者特殊颜色。我们必须考量内容的数量、产品的风格来并且项目时间来选取使用。

圆形

最有代表性的颜色必须就是圆形了，它可以承载较多的页面数量，iOS规范中限定是不少于20页，相同大小的格子与正圆形，圆点给人的视觉体验会比正方形小，让人认为更有空间感，在次数多的状况下也非常透气。

选取圆形不管从承载数量或是设计样式上都不会错误，是十分安全的方案。不过它还有一点缺憾就是太平庸了，如果你的产品客户很多且年纪跨度大，圆点会是一个特别好的选择。但即使你的产品是对于小众人群，希望突显产品个性，这张安全牌就不适合了。

矩形

相比于方形，矩形的使用规定内容展示数量不宜过多，一般2-5个较为适合。此外矩形还可以做变形，比如斜边的圆形、圆角方形、菱形等，让外型非常个性。

线形

线性多在金刚区中使用，因为金刚区的界面数量相当灵活，随着产品用途的差异可能降低或下降，而线性的分页符更像一个进度条既可以体现当前进度，在总量不稳固的状况下也一直可以确保每页展示图标完整性，不会出现末页图标数量空缺的状况。

特殊形状

特殊颜色是结合产品的特征或是品牌元素设计的，在功能日益弱化的态势下，利用设计细节让产品更有自己的传统也降低趣味性。如下图腾讯动漫和叭哒都选择了与品类相关的元素成为当前页的形状。

引导页因为是一个非常稳定的模块，内容和次数也有固定的，比较合适我们做一些创意性的设计。比如我之前做的一个阅读类的概念作品，引导页就没有用惯用的圆形分页符而是符做了特殊设计。选择了书的造型，三个引导页分别对应书的开始阅读、阅读中、阅读完的形状。

数字

也是一些APP选择了数字来表达，使用数字让分页符不受内容数量的妨碍，在总量变化大，或是内容数量多的之后适合使用，使视觉效果非常可控。

添加成功后新建一个文件看看成果吧。点击symbols，找到我们今天添加的文件就可以插入使用我们预设好的模块了，到这一步我们将要完成了自己本地组件库的构建和使用。

动效分页符可以做为函数的原因分别有色彩、透明度、形状、角度或者大小，动效可以是单一变量组成，也可以组合多个变量。根据我合作过的前端普遍评定，颜色、透明度变化推动成本最低，也是使用众多的方案。然后是相同颜色的大小差异，也是非常好处理的。一些基本的颜色差异可以依靠代码实现，有些也可以找到源代码稍加更改就可以使用。涉及到特殊颜色的话就必须使用切图了，这种相对来说都会帮忙些。所以准确的推动还是必须和前端的亲戚商量，听取他们的看法。毕竟越复杂的动效花费的时间也越多，应该按照项目排期衡量选择定优先级。

颜色变化

【哔哩哔哩】

透明度变化

【虎嗅】

大小变化

【毒】

形状变化

【自如】

角度变化

【转转】

组合变化

常见的组合变化包括大小+透明度、形状+透明度、颜色+形状等。

如下图中爱范儿的分页符动效，不仅出现了外形差异颜色变化，还承担了时间进度的作用，当红色充满整个圆形，就会滚动到下一页的内容，让期待内容差异的过程非常可控，巧妙地给了用户心理预期。

【爱范儿】

位置

分页符通常跟随内容发生在其顶部或下方，位置没有限制灵活度非常高可以选用居中、居左、居右，具体则必须我们按照其内容来选取最适合的位置，有两个目标，一个是导致其对内容的关键信息导致遮挡；一个是有效合理的借助和削减页面空间。比如视频类APP考虑到banner中标题的显示，大多都把分页符放在右下角的位置；而引导页的分页符为了维持画面平衡则通常是居中的位置，下面就把常用的分页符位置列举一下。

以上就是我总结的分页符的设计模式，当然并不是说要一味去追求复杂的设计效果，但我们也绝不该停留于按照惯例麻木套模块的阶段。在时间允许的状况下可以试着去探讨，尝试各类方案，即使有之后也会必须舍弃自己觉得最有趣的方案，而选用注重成本排期的结果，但过程中的无数可能不正是设计的乐趣吗？如果小如分页符，也值得我们多想一步（为何忽然鸡汤了，这不是我……总之fighting！(๑•̀ㅂ•́)و✧）

划重点

1.选择分页符颜色时还需考量其在同色系背景时的显示难题。解决方案可以是添加蒙层或缩放。·分页符的颜色有方形、矩形、线形、特殊颜色、数字等，各有其特征，可以按照页面内容选取合适的颜色。

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

3.选择位置时有两个目标，一个是导致其对关键信息产生遮挡；一个是有效运用和节省页面空间。