Human Interface Guidelines — Segmented Controls

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

Segmented Controls

Human Interface Guidelines链接:Segmented Controls

Segmented Control

Segmented Control是由两个或更多segments组成的线性集合,每个segments都是互斥的按钮。

 在控件内,所有 segments 的宽度相等。 像 buttons 一样,segments 可以包含文本或图像。 Segmented controls 通常用于展示不同的views。 例如,在地图中,segmented control可让您在地图,传输和卫星视图之间进行切换。

使用时注意

·限制segments的数量以提高可用性

 更宽的 segments 更容易点击。 在iPhone上,segmented control的 segments 应该少于等于5个。

·尽量保持 segment 中内容大小一致

由于所有 segment 都具有相同的宽度,因此如果内容填充了某些 segments 而不填充其他 segments ,则看起来效果并不好。

·避免在 segmented control 中混用文本和图像

 尽管单个 segment 可以包含文本或图像,但将包含文本和包含图像的 segment 混合在一个控件中可能会导致一个断开和令人迷惑的界面。

·将内容恰当的放置在自定义segmented control中

如果您更改 segmented control 的背景,请确保内容看起来没问题并且不会出现错位的情况。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python

爬虫项目:破解极验滑动验证码

一 介绍     一些网站会在正常的账号密码认证之外加一些验证码,以此来明确地区分人/机行为,从一定程度上达到反爬的效果,对于简单的校验码Tesserocr就可...

2.1K7
来自专栏Windows Community

UWP 手绘视频创作工具技术分享系列 - 位图的绘制

前面我们针对 SVG 的解析和绘制做了介绍,SVG 是图片的一种形式,而另一种很重要的图片是:位图,包括 png、jpeg、bmp 等格式。位图的基本规则是,组...

2777
来自专栏知晓程序

如何用 1 张图说 100 次我爱你?这个小程序帮你搞定

本期,知晓程序推荐的「字云」小程序,就能帮你用文字一键生成「图文并茂」的个性图片。

984
来自专栏walterlv - 吕毅的博客

WPF/UWP 的 Grid 布局竟然有 Bug,还不止一个!了解 Grid 中那些未定义的布局规则

发布于 2018-05-05 07:43 更新于 2018-08...

601
来自专栏Android群英传

花式实现图片3D翻转效果

1351
来自专栏前端那些事

理解标准盒模型和怪异模式&box-sizing属性

盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题) DTD规范 盒模型分为:标准w3c盒...

2386
来自专栏数据小魔方

创意玫瑰图2(Rose Chart)

今天跟大家分享另一种创意玫瑰图的制作方法! ▽ 本例所要讲的玫瑰图,制作方法稍微麻烦一点,主要是在数据组织环节比较繁琐,但是没有涉及到VBA的问题,所以只要动手...

2646
来自专栏前端那些事

理解标准盒模型和怪异模式&box-sizing属性

盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题)

1130
来自专栏HenCoder

HenCoder Android 自定义 View 1-6:属性动画(上手篇)

如果你没听说过 HenCoder,可以先看看这个: HenCoder:给高级 Android 工程师的进阶手册

1222
来自专栏数据小魔方

think-cell chart系列17——图表异常值的切割表达

今天跟大家分享的是think-cell chart系列17——图表异常值的切割表达。 经常做图表的小伙伴儿恐怕都遇到过这种情况——一些数据中可能会存在异常值,导...

4256

扫码关注云+社区