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 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

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

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

904
来自专栏Python

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

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

1.8K7
来自专栏HenCoder

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

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

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

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

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

471
来自专栏数据小魔方

柱形趋势图

今天跟大家分享的是柱形趋势图! ▽▼▽ 这种图表在功能上很类似之前有几期分享的各种组图,不过柱形趋势图在表达周期性数据趋势方面,给读者的冲击力会更加明显一点儿。...

3506
来自专栏天天P图攻城狮

例说 Constraint Layout(三)—— 性能测评

在各种页面设计下,提升有多有少,但 CL 的性能确实是最佳的!

2583
来自专栏前端那些事

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

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

2066
来自专栏程序你好

.Net 基于GDI+的图件绘制平台的设计与实现(一)

772
来自专栏Windows Community

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

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

2707
来自专栏企鹅号快讯

为什么CSS Grid在创建布局上比Bootstrap更好

CSS Grid是一种在网络上创建布局的新方法。在我们第一次使用浏览器原生的CSS网格布局后,发现这种方式给我们带来太多好处了。 特别是如果将CSS Grid与...

2546

扫码关注云+社区