autojs遍历当前页面所有控件_UI设计干货素材|轻松搞定页面分页符(指示器)的设计...

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

bb386b1a5a710e409d6a736b0e577dfb.png

分页按钮

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

一、颜色

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

114761d2a29e4e3d60e8ebe51e7845a6.png

分页布局

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

二.形状

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

90aaf24af01d069c5d03e965efd96e0e.png

分页

三.动效

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

f05e4b5d96e7955c98cac14b96f43351.png

分页

四.位置

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

de00328b1f8a82b33026f31136db4b86.png

寻呼指示勘探

2ab9f2c8c31feb63b803f07e6e54f0e0.png

Volumen iPhone的iOS 9

更多UI设计细节素材到搜UI(sooui) www.sooui.com

4e38b96b0866d7d2cfb93c7837e67b95.png

重点

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

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值