Human Interface Guidelines —— Page Controls

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

Page Controls

Human Interface Guidelines链接:Page Controls

Page Control

Page Control显示当前页面在一组水平页面中的位置。 它显示为一系列小指示点,用来表示将按照顺序打开的可用页面。 

实心点表示当前页面。 从视觉上来说,这些点总是等距离的,并且如果在屏幕上显示太多,则会被剪切。 用户可以点击 page control 的前端或后端来访问下一页或上一页,但是他们无法点击特定的点以访问特定的页面。 导航总是按顺序进行,通常是将页面从一边滑入滑出。

使用时注意

·不要使用page control展示具有次级页面的页面

Page control不显示页面如何关联指示或者哪个页面对应于每个点。 这种类型的控件设计用于同等地位的页面。

·不要显示太多页面

超过10个点几乎难以一眼就知道个数,超过20个的打开页面按顺序访问非常耗时。 如果您的app需要同时显示20多页,请考虑使用不同的排列方式(如grid),以实现非顺序导航。

·Page Control应在屏幕底部居中

Page Control应始终居中并位于内容底部和屏幕底部之间。 这使它可见,不会挡住内容。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

[小技巧]巧妙使用flex, letter-spacing实现过渡动画

本文作者:IMWeb DeepKolos 原文出处:IMWeb社区 未经同意,禁止转载 巧妙利用flex, 实现下面的效果~ 无需js来获取clien...

1997
来自专栏Coco的专栏

【前端性能】高性能滚动 scroll 及页面渲染优化

3207
来自专栏CSDN技术头条

有关网页渲染,每个前端开发者都该知道的那点事

【编者按】其实,有关网页渲染的文章很多,但是相关信息比较分散,且论述并不是很完整。如果要想对这个主题有个大致的了解,我们还得学习很多知识。因此,Web开发者Al...

2148
来自专栏吴老师移动开发

【iOS开发】UITableView优化

移动开发中,任何一个应用都或多或少的有列表的存在,列表的上下滑动直接关系到用户体验。如果处理不好,就会使得列表滑动起来有明显的卡顿效果。所以对列表的优化,让它更...

1251
来自专栏练小习的专栏

表格边框你知多少

table之间的边框存在共用问题,自然而然就存在冲突。既然存在冲突,那么就势必涉及到最后渲染哪一个样式的问题。本文就主要研究当冲突产生时,如何让浏览器按照自己意...

2296
来自专栏天天

css推荐写法

用"-"隔开比使用驼峰是更加清晰。产品线-产品-模块-子模块,命名的时候也可以使用这种方式

2102
来自专栏IMWeb前端团队

搞定这些疑难杂症,向css3动画说yes

本文篇幅比较长,涉及到的知识点也比较多,如3d,动画性能,动画js事件等,参考文献及demo展示也比较多,所以建议pc阅读效果更佳。 动画库 到现在来说css3...

3078
来自专栏HTML5学堂

HTML5项目开发备忘录

HTML5学堂:良好的项目开发,从缜密的分析与计划开始,充分的项目开发准备能够让之后的问题降低到最少,让我们的整体开发效率提升不少。精心准备了关于项目开发的相关...

4495
来自专栏吴小龙同學

Android 8.0 自适应图标

79910
来自专栏Coco的专栏

【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

2267

扫码关注云+社区

领取腾讯云代金券