iOS11人机交互指南(九)- 控件(Controls)- 下

七、内容刷新控件(Refresh Content Controls)

手动启动刷新控件就会立即重新加载内容,通常在表视图中,而无需等待就会自动完成下一次内容更新。刷新控件是一种特殊类型的活动指示器,默认情况下是隐藏的,拖动列表页时自动变可见并且重新加载内容。例如,在邮件中,您可以向下拖动收件箱邮件列表以检查新邮件。

执行自动内容更新。虽然用户期待能够控制内容刷新,但也希望刷新会定期自动进行。不要让用户负责触发每次更新。通过定期更新来保持新鲜的数据。

需要附加信息时可以增加标题。可选地,刷新控件可以包括标题。但在大多数情况下,这是不必要的,因为控件的动画指示正在加载内容。如果您包含标题,请不要使用它来解释如何执行刷新,而是提供有关正在刷新内容的信息。例如,Podcast中的刷新控件使用标题来告诉用户最后一个播客更新何时发生。

开发指南请参阅 UIRefreshControl

八、分段控件(Segmented Controls)

分段控件是两个或多个段的线性集合,每个段都是独立的按钮。在控件尺寸范围内,所有段的宽度相等。像按钮一样,分段卡可以包含文本或图像。分段控件通常用于显示不同的视图。例如,在地图中,分段控件可让您在地图、公交和卫星视图之间切换。

限制细分数以提高可用性。分段选项卡越宽越容易点击。在iPhone上,分段控件数量控制在5个以内。

尽量使分段内容大小一致。因为所有分段选项卡都具有相等的宽度,如果有些选项卡被内容填满,有些不能,则看起来不太美观。

避免在分段控件中混合文本和图像。虽然单个段可以包含文本或图像,但是将两者混合在单个控件中可能会导致断开连接和混乱的界面。

在自定义分段控件中适当地定位内容。如果您更改分段控件的背景外观,请确保内容仍然看起来不错,并且不会显示不对齐。

开发指南请参阅 UISegmentedControl

九、滑块(Sliders)

滑块是具有水平轴通过拇指滑动的交互控件,您可以用手指滑动在最小和最大值之间,例如在媒体播放期间的屏幕亮度级别或播放进度。当滑块的值改变时,最小值和拇指之间的轨迹部分用颜色填充。滑块可以选择性地显示左右图标,说明最小值和最大值的含义。

如果增加了变量值,自定义滑块的外观。滑块的外观(包括轨迹颜色、拇指图像和左右图标)可以通过自定义与应用程序的设计融合并传达意图。例如,调整图像大小的滑块可能会在左侧显示一个小图像图标,右侧会显示一个较大的图像图标。

不要使用滑块来调整音量。如果您需要在应用程序中提供音量控制,请使用可自定义的音量视图,并且包含音量级滑块和用于更改活动音频输出设备的控件。了解如何实现音量视图,请参阅 MPVolumeView

开发指南请参阅 UISlider

十、步进器(Steppers)

步进器是用于增加或减少增量值的两段控制。默认情况下,步进器的一端显示加号,另一端显示减号。如果需要,可以用自定义图像替换这些符号。

使通过步进器改变的值显而易见。步进器本身不显示任何值,所以确保用户知道他们在使用步进器时正在改变哪些值。

当值发生变化大时,不要使用步进器。通过几次轻点完成相应的小改变是使用步进器的最佳情形。例如,在打印屏幕上,使用步进器设置份数,因为用户在打印时更改的数量不会特别大。另一方面,使用步进器选择页面范围是没有意义的,因为即使合理的页面范围也需要大量的点击

开发指南请参阅 UIStepper

十一、开关(Switches)

开关是两个相互排斥的状态之间的视觉切换。

左:默认外观;右:自定义外观

考虑调整开关的外观以匹配应用程序的样式。如果它在应用程序中运行良好,请更改其开关状态下的开关颜色,或使用自定义图像来表示开关状态。

仅在列表中使用开关。开关用于表中,例如在可以切换开关状态的设置列表中。如果您在工具栏或导航栏中需要类似的功能,请改用按钮,并提供两个不同的图标来传达状态。

避免添加标签来描述开关状态。开关就是开或关。提供描述这些状态的标签是冗余的,也会造成界面杂乱。

考虑使用开关管理界面内相关元素的可用性。开关通常影响屏幕上的其他内容。例如,在“设置”中启用“飞行模式”开关可禁用某些其他设置,如“蜂窝”和“个人热点”。在“设置”>“Wi-Fi”中禁用Wi-Fi开关可使网络和其他选项消失。

开发指南请参阅 UISwitch

十二、文本框(Text Fields)

文本框是单行固定高度的,通常带有圆角。当用户点击时,它将自动打开键盘。使用文本框来请求少量信息,例如电子邮件地址。

在文本框中显示提示性的文本以达到沟通目的。当该字段中没有其他文本时,文本框可以包含占位符文本,例如“电子邮件”或“密码” 。当空间足够用占位符文本时,不要使用单独的标签来描述文本框。

在适当的时候,在文本框的右端显示一个清除按钮。当该元素存在时,点击它会清除文本框里的内容,从而无需不停的点击Delete键。

适当时使用安全文本框。当您的应用程序需要输入敏感数据(如密码)时,请始终使用安全的文本框。

在文本框中使用图像和按钮保证清晰度和功能性。您可以在文本字段的左侧或右侧显示自定义图像,也可以添加系统提供的按钮,例如“书签”按钮。一般来说,使用文本框的左侧显示提示性文本,右端展示其他功能,如书签。

开发指南请参阅 UITextField

提示

对于多行或多文本输入,请改用文本视图。 请参阅 Text Views

键盘

左: Email键盘;右:Phone键盘

显示适当的类型键盘。 iOS提供了几种不同的键盘类型,每种类型的键盘都是为了方便不同类型的输入。为了简化数据输入,编辑文本框时显示的键盘应适用于字段中的内容类型。例如,如果您的应用程序要求电子邮件地址,则应显示电子邮件地址键盘。有关可用键盘类型的完整列表,请参阅 UITextInputTraits 中的 UIKeyboardType

相关指南请参阅 Custom Keyboards

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,009评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,808评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,891评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,283评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,285评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,409评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,809评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,487评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,680评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,499评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,548评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,268评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,815评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,872评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,102评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,683评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,253评论 2 341

推荐阅读更多精彩内容