站内公告:
联系我们CONTACT
2019-12-06 点击量:
又到了细节篇的时间啦,今天的主角是分页符,也叫页面指示器(Page Indicator),iOS规范将其称为Page Controls。看到这些名字可能让人觉得相对陌生,但其实它是页面中再熟悉不过的控件了。
分页符是用来表示页面总数和指示当前所在页面的,经常伴随轮播图、卡片、引导页等出现。我们平时沟通交流的时候对它的形容可能是“轮播点”、“进度点”等,也确实有很多分页符都采用了圆点的样式,不过也不乏一些有趣新颖的设计,下面就来分析一下分页符该如何设计。
常见的分页符颜色有黑色、白色、灰色,无色系可以很好的适应页面各种颜色的内容,配合透明度变化或者使用APP的主题色,来表现当前所在页面。
在选择颜色的时候结合底部页面的内容来考虑,比如引导页等内容比较固定可控的页面,我们在选择颜色的时候可以避开页面内容的颜色。
而像banner、广告位等内容经常变化的页面,不能控制每一张图,就需要我们考虑如何避免分页符与底下内容的相融。常见的处理方法有在内容上增加一个深色的渐变蒙层,这样就可以解决白色的分页符在浅色背景上不突显的问题,但这种方式也不可避免的对背景图有一定影响,所以也可以只在分页符部分加透明黑色蒙层。也可以为分页符增加描边以区分,比如淘宝的分页符就加上了1px的灰色描边,以保证在各色背景中的显示效果。
分页符的形状有圆形、矩形、线形以及特殊形状。我们应该考虑内容的数量、产品的风格来以及项目时间来选择使用。
最有代表性的形状应该就是圆形了,它可以承载较多的页面数量,iOS规范中限定是不超过20页,相同大小的圆点与正方形,圆点给人的视觉感受会比正方形小,让人觉得更有空间感,在数量多的情况下也比较透气。
选择圆形不管从承载数量或是设计风格上都不会出错,是非常安全的方案。不过它也有一点缺憾就是太平淡了,如果你的产品用户众多且年龄跨度大,圆点会是一个非常好的选择。但如果你的产品是针对小众人群,希望突出产品个性,这张安全牌就不适合了。
相比于圆形,矩形的使用要求内容展示数量不宜过多,一般2-5个较为合适。此外矩形还可以做变形,比如斜边的矩形、圆角矩形、菱形等,让造型更加个性。
线性多在金刚区中使用,因为金刚区的图标数量比较灵活,随着产品功能的变化可能增加或减少,而线性的分页符更像一个进度条既可以表现当前进度,在数量不稳定的情况下也仍然可以保证每页展示图标完整性,不会出现末页图标数量空缺的情况。
特殊形状是结合产品的特点或是品牌元素设计的,在功能逐渐趋同的形势下,利用设计细节让产品更有自己的特色也增加趣味性。如下图腾讯动漫和叭哒都选取了与品牌相关的元素作为当前页的形状。
引导页因为是一个比较稳固的模块,内容和数量也是固定的,比较适合我们做一些趣味性的设计。比如我之前做的一个阅读类的概念作品,引导页就没有用惯用的圆形分页符而是符做了特殊设计。选择了书的造型,三个引导页分别对应书的开始阅读、阅读中、阅读完的形状。