【译文】iOS 10 人机界面指南(完结)

8. UI 控件(UI Controls)

? ? 8.1 按钮(Buttons)

? ? 8.2 编辑菜单(Edit Menus)

? ? 8.3 标签(Labels)

? ? 8.4 页面控件(Page Controls)

? ? 8.5 选择器(Pickers)

? ? 8.6 进度指示器(Progress Indicators)

? ? 8.7 内容刷新控件(Refresh Content Controls)

? ? 8.8 分段控件(Segmented Controls)

? ? 8.9 滑块(Sliders)

? ? 8.10 步进器(Steppers)

? ? 8.11 开关按钮(Switches)

? ? 8.12 文本框(Text Fields)

8. UI 控件(UI Controls)

8.1 按钮(Buttons)

按钮触发app内特定的操作,拥有自定义背景,并且可以含有一个名称或图标。系统为大多数情况提供了若干已确定的按钮样式。你也可以设计完全自定义的按钮。

了解开发详情,请参阅UIButton


系统按钮

系统按钮

系统按钮一般出现在导航栏和工具栏,但也可能被用于它处。

使用动词当作按钮名称。一个特定行为的名称表明了按钮是可交互的并且说明了点击它会产生的结果。

名称使用单词首字母大小的格式。除了冠词、并列连词和不大于4个单词的介词外,其余单词都要首字母大小写。

保证名称的简短。过长的文本会让你的界面变得拥挤,在小屏上还很可能会被截断。

只在必要时考虑添加边框或背景色。系统图标默认没有边框和背景色。然而,在某些内容区域,边框和背景色会因其指示了可交互性而显得必要。在"电话"中,带有边框的数字键强化了打电话的传统模型,拨打按钮的背景色让其变成一个醒目的目标,易于用户点击。

了解开发详情,请参阅UIButton中的UIButtonTypeSystembutton type。


详情展开按钮

详情展开按钮(Detail Disclosure Buttons)

详情展开按钮用于打开一个视图——通常是一个模态视图,该视图含有更多信息或是与屏幕内某个特定项目相关的功能。尽管你可以在任何一种视图中使用详情展开按钮,但它通常出现在表格中用于获取该行的相关信息。

合理地在表格中使用详情展开按钮。当表格的某行上出现了详情展开按钮时,点击按钮会显示更多的信息。点击该行的其它地方会选中该行或是激活应用特定的行为。如果你想让用户通过点击整行来查看更多详情,就不要使用详情展开按钮。取而代之的,可以使用V形的详情展开附属控件(detail disclosure accessory control)。请参阅UITableViewCell中的UITableViewCellAccessoryType

了解开发详情,请参阅UIButton中的UIButtonTypeDetailDisclosurebutton type。


信息按钮

信息按钮

信息按钮呼出app相关的配置详情,有时会以翻转视图的形式出现在当前视图的背面。信息按钮含有两种样式:浅色和深色。选择最适合你的app设计的样式,不要让它埋没在当前屏幕中。

了解开发详情,请参阅UIButton中的UIButtonTypeInfoLightandUIButtonTypeInfoDarkbutton types。


添加联系人按钮

添加联系人按钮

用户通过点击添加联系人按钮在现有的联系人列表中浏览从而选择一个插入到文本框或是其它视图。比如,在“邮件"中,你可以点击“收件人(To)”栏右侧的“添加联系人”按钮来从你的联系人列表中选择收件人。

除了”添加联系人”按钮外,允许键盘输入。添加联系人按钮只是提供了输入联系人信息的另一种选择,而不是替代品。把其作为一种添加现有联系人的快捷方式是好的,但同时也要允许用户通过键盘输入联系人信息。

了解开发细节,请参阅UIButton中的UIButtonTypeContactAddbutton type。

8.2 编辑菜单(Edit Menus)

用户可以通过在文本栏、文本视图、网页视图或图片视图中长按或双击来选择内容或是呼出编辑菜单,比如“拷贝”和“粘贴”。

为当前上下文展示合适的命令。默认地,这些选项包括“剪切”、“拷贝”、“粘贴”、“选择”、“全选”以及“删除”命令,但并不是所有按钮都要出现。如果没有内容被选中,那么该菜单就不应该包含需要先选中再执行的命令,比如“拷贝”或“剪切”。同样的,如果当前已经选中了某项,那么该菜单就不应该含有“选择”选项。

让用户通过标准手势触发编辑菜单。用户期望通过长按或双击文本或图片来呼出菜单。你的app应该同时感应这两种手势。若用户执行了双击操作,你还可以指定会被默认选中的内容。在文本视图中,应该默认选中词语。

必要时调节编辑菜单的位置。默认地,菜单会根据空间的空余情况出现在插入点或备选项的上方或下方,并且包含指向对应内容的箭头。尽管你不能够改变菜单的形状,但它的位置是可设置的——你可以避免它遮挡住重要的界面内容或元素。

不要使用其它控件来执行和编辑菜单同样的功能。为执行同一个操作提供不同的路径会带来不一致的用户体验,让用户感到困惑。如果你的app让用户通过编辑菜单来复制内容,那么就不要再单独设置一个复制按钮。

允许用户选择和复制那些可能对他们有用但却无法编辑的文本。用户常?;嵯胍谒堑挠始?、笔记或是网页搜索框中黏贴一些静态内容(不可编辑的),比如一个图片标签或是一条脸书状态。

不要为呼出编辑菜单提供一个按钮。如果你这么做,那些通过手势来触发菜单的人最终都会变成通过点击按钮来打开菜单。

让编辑操作可以被撤销。在执行操作前,菜单不会向用户发起二次确认。但是用户可能会在点击某个命令之后改变了主意,所以请向用户提供撤销和重做的支持。

在编辑菜单添加有用的自定义命令。你可以通过提供应用特有的命令,来增强编辑菜单的价值。和标准命令一样,任何自定义命令都需要通过选中文本或其它内容才能被触发。

把自定义命令放在系统自带的命令之后。系统自带的命令是用户最常使用的功能,不要在它们之间穿插自定义命令。

尽可能减少自定义命令的数量。不要让用户面对太多的选择。

保持自定义命令名称简短。命令名称应该是精准描述所执行操作的动词或动词短语。使用标题式大写格式:除冠词、并列连词和不大于4个字母的介词外,一律大写首字母。

了解开发详情,请参阅Text Programming Guide for iOSUIMenuController中的Copy, Cut, and Paste Operations。


8.3 标签(Labels)

标签描述了当前屏的界面元素或是提供了简短的信息。虽然用户无法编辑标签,但是他们有时会拷贝标签内容。标签可以展示任意数量的静态文本,但是最好保持简短。

保证标签易读。标签可以包含纯文本或样式文本。如果你调整了标签样式或是使用了自定义字体,请同时确保它们的易读性。最好采用动态字体(Dynamic Type),这样即使用户更改了设备的字体大小,你的标签依旧看起来很棒。请参阅【动态字体】。同时你应该在辅助功能打开的情况下测试你的标签,比如加粗文本。请参阅【辅助功能】。

想学习关于文本(text)的知识,请参阅String Programming Guide。项学习如何创造样式化文本,请参阅Attributed String Programming Guide。了解标签的开发详情,请参阅UILabel。


8.4 页面控件(Page Controls)

页面控件说明了当前页在一组平级页中所处的位置。它由一系列小圆点组成,表示了可用页的数量以及它们被打开的次序。实心的圆点表示当前页。这些圆点是按一定的距离分布的,如果屏幕上有太多圆点它们就会被部分截断。用户可以通过点击页面控件的左边缘和右边缘在相邻的页面中切换,但是他们不能通过点击某个特定的圆点到达其对应的页面。页面控件提供的导航是有序的,用户一般通过轻扫到达相邻页。

不要把页面控件和有层次结构的页面一起使用。页面控件不是为了说明页面之间的关联,也不是为了表明某一页对应某个圆点。这种类型的控件是为了那些同类页而设计的。

不要展示过多的页面。一旦圆点超过10个,用户就难以只看一眼就数清数量;而一旦打开页超过20个,按次序浏览就变得十分耗时。如果你的app需要展示超过20个的同类页,请考虑采用其它的方法,比如常用于无序导航的宫格。

把页面控件居中放在屏幕底部。页面控件应该被居中放置在页面底边缘和屏幕底边缘之间。这样能确保它被用户发现,且不会遮挡内容。

了解开发详情,请参阅UIPageControl


8.5 选择器(Pickers)

选择器包含了一个或多个可滚动的值列表,每个列表都有一个垂直居中且以深色文本显示的选中值。选择器一般在用户编辑字段或点击菜单时出现在屏幕的底端或是浮出层里。选择器也可以在行间出现,比如在“日历”中编辑事件的日期时。选择器的高度大约在五行列表值左右。选择器的宽度可以是屏宽,也可以与其所属视图等宽。

使用符合用户预期且按逻辑排列的值。当滚动列表静止时,会有很多值被隐藏。最好的做法是让用户猜测到被隐藏的值是什么,比如是一系列按首字母排序的国家名,这样用户就能在列表中快速翻动查找。

避免跳转至其它屏来展示选择器。选择器在当前上下文中、在所填字段附近出现最有效。

对于有大量值的列表,应该用表格而不是选择器。在高度有限的选择器里浏览很长的列表是烦人的。但是表格的高度是可调的,还能含有索引,让滚动更快速。

了解开发详情,请参阅UIPickerView。

日期选择器

日期选择器呈现了一个选择指定日期、时间或两者同时的高效界面。它还同时提供了计时器界面。

日期选择器有四种模式,分别展示四套不同的可选值。

日期:展示月份、当月的日期以及年份

时间:展示小时、分以及上午或下午选项(可?。?/p>

日期和时间:展示日期、小时、分、上午或下午选项(可?。?/p>

计时器:展示小时和分,最多23小时和59分。

日期选择上显示的具体值视用户的所在地区而定。

在展示分钟时,考虑尽可能地减少选项。分钟列表默认含有60个值(0至59)。你可以选择性地增大分钟间隔,只要它能将60整除。比如,你可能会想要15分钟的间隔(0,15,30和45)。

了解开发详情,请参阅UIDatePicker。


8.6 进度指示器(Progress Indicators)

当你的app需要加载内容或是执行冗长的数据处理操作时,不要让用户坐在那里,傻傻盯着不动的屏幕等待。使用活动指示器和进度条来告诉用户你的app没有停止运行,并让他们知道还需要等待多久。

请同时参阅Loading。

活动指示器

活动指示器会在执行一些无法量化的任务时旋转,比如加载或是同步复杂数据。当任务完成时,它会消失?;疃甘酒魇遣豢山换サ摹?/p>

更多地使用进度条而非活动指示器。如果当前活动是可量化的,请使用进度条来代替活动指示器,这样用户就能够更好地预估当前发生了什么以及它要进行多久。

确?;疃甘酒饕恢痹谛?。用户会把静止的活动指示器和停滞的进程联系在一起。确保它一直在旋转,这样用户就知道系统在工作。

如果对用户有帮助,可以在等待任务完成的过程中,为他们提供有用的信息。可以通过活动指示器下方的标签显示更多的信息。避免使用语义模糊的术语,比如“加载中”或“认证中”,因为他们并不能给用户带去任何价值。

了解开发详情,请参阅UIActivityIndicatorView。

进度条

进度条包含了一条从左往右填充的轨迹,用于展示一个任务的进度。进度条是不可交互的,但是他们经常伴随着一个取消当前操作的按钮。

总是准确地汇报进度。不要为了让你的app看起来很忙碌而展示不准确的进度信息。只为可量化的任务使用进度条。否则,请使用活动指示器。

用进度条来展示有明确持续时间的任务。进度条能够很好的展示当前任务的状态,尤其是能够让用户知道当前任务还需要多久才能完成。

在导航栏和工具栏中隐藏进度条未被填充的那部分轨迹。进度条默认含有填充和未填充的部分。当在导航栏和工具栏中使用,比如用来表明页面的加载进度时,应该隐藏进度条未被填充的部分。

考虑自定义进度条的外观来与你的app匹配。进度条的外观能够根据你的app设计而调整。比如,你能够为填充和未填充的部分设定自定义的颜色或图片。

了解开发详情,请参阅UIProgressView

网络活动指示器

当前发生连网活动时,网络活动指示器会在屏幕顶部状态栏上旋转。结束连网时,它就会消失。这个指示器和活动指示器长得一样,并且同样不可交互。

只在进行那些持续时间超过几秒的网络活动时才展示这个指示器。无需为快速的网络活动展示指示器,因为它们很可能在用户注意到它的存在或是明白它代表什么之前已经消失了。

请同时参阅Status Bars。了解开发详情,请参阅UIApplication中的networkActivityIndicatorVisible。

8.7 内容刷新控件(Refresh Content Controls)

刷新控件一般用于表格视图中,通过人为触发来立即刷新内容,而无需等至下次自动加载发生。刷新控件是一种特殊类型的活动指示器,默认情况下被隐藏,当用户下拉需要重新加载的视图之后可以被看见。比如,在“邮件”中,你可以通过下拉收件箱列表来检查是否有最新的讯息。

执行内容的自动更新。尽管用户会感谢能够通过下拉快速刷新内容,但他们同样希望能够定时自动地替他们刷新。不要让用户承担激活每一次刷新的工作。通过定时刷新保证数据的及时性。

如果有意义,可以为刷新控件添加一个短标题。刷新控件可以选择性地包含一个标题。但是在大多数情况下,这样做是无意义的,因为刷新控件的动效已经足以表明加载的状态。如果你一定要包含一个标题,不要用它来解释如何执行刷新操作。取而代之地,提供一些与被加载内容有关且有价值的信息。比如,在“播客”中,利用一行文字来告诉用户上次是什么时间更新了播客。

了解开发详情,请参阅UIRefreshControl


8.8 分段控件(Segmented Controls)

分段控件是含有两个或更多分段的一个线状组,每个分段等于一个与其它互斥的按钮??丶锏乃蟹侄味际堑瓤淼?。和按钮一样,分段可以含有文本或图片。分段控件一般用于展示不同的视图。比如,在“地图”中,分段控件让你能在地图、公交和卫星视图间来回切换。

限制分段的数量以确??捎眯浴?/b>更宽的分段更易于点击。在iPhone设备上,一个分段控件最多只能包含五个分段。

尽量维持各分段内容尺寸的一致性。因为所有的分段都等宽,所以如果某个分段被填得很满很满但是其它的又很空,就会显得很难看。

避免在一个分段控件中同时使用文本和图片。尽管分段控件可以容纳文本或图片,但在一个控件中同时使用两者会让界面变得混乱而无条理。

在自定义的分段控件中合理放置内容。如果你更改了分段控件的背景图,请确保其上的内容依旧与之相配并清晰可读,而不会显得不和谐。

了解开发详情,请参阅UISegmentedControl。


8.9 滑块(Sliders)

滑块是一条带有thumb控件的水平轨迹,你可以通过手指拖动它在最小值和最大值之间滑动,比如屏幕亮度或是媒体播放进度。当滑块值改变时,最小值和thumb之间的轨?;岜谎丈畛洹?梢匝≡裥缘卦诨榈淖笥伊讲喾直鹫故就急辏此得髯畲笾岛妥钚≈邓淼暮?。

自定义滑块的外观,如果这么做有意义滑块的外观,包含轨迹颜色、thumb的图片以及左侧和右侧的图标,这些都可以为了符合你的app设计风格以及达到沟通的目的而被调整。比如,用户调整图片大小的滑块,可以在左侧显示一个小的图片图标,并在右侧显示一个大的图片图标。

不要使用滑块来调节音量。如果你需要在你的app中提供音量控件,请使用音量视图。它是可自定义的,含有一个音量滑块和一个更改当前音源输出设备的控件。了解关于如何使用音量视图,请参阅MPVolumeView。

了解开发详情,请参阅UISlider。

8.10 步进器(Steppers)

步进器是一个用于增加或减少递增数值的两段控件。默认状态下,步进器的一个分段显示一个加号而另外一个显示减号。如果有需要,这些符号也可以替换成自定义图片。

确保步进器所调整的数值显眼易见。由于步进器本身不显示任何值,因此要确保用户知道他们用步进器改变的是什么值。

若可能涉及到较大数值的调整,那就不要使用步进器。步进器适用于只需少量点击的小数值调整。比如,在打印页面,使用步进器调整打印份数是合理的,因为用户极少会大幅度调整这个值。反之,用步进器来选择页码范围就是不合理的,因为即使是对于页码不多的文档,用户也必须通过多次点击才能完成选择。

了解开发详情,请参阅UIStepper。

8.11 开关按钮(Switches)

开关按钮提供了在两种互斥状态——开和关之间的视觉切换。

默认外观的开关
自定义外观的开关

考虑调整开关的外观以符合你的app风格。如果对你的app有帮助,可以更改开关的在两种状态下的颜色,或是使用自定义图像来替代开关。

只能在表格栏中使用开关。开关是用于表格中的,比如在一列设置项中,每个设置项都能被打开和关闭。如果你需要在导航栏和工具栏中执行类似的功能,请使用按钮替代,并且提供两个不同的图标来表达不同的状态。

避免用标签来描述开关的值。开关只有两种状态:不是打开就是关闭。用额外的标签来描述这两种状态是多余的,会使界面变得凌乱。

考虑使用开关来控制与之相关的界面元素。开关常?;嵊跋斓狡聊簧系钠渌谌荨1热?,在“设置”中打开飞行模式,会关闭某些设置项,比如“蜂窝移动网络”和“个人热点”。在设置中关闭Wi-Fi会导致其它选项的消失。

了解开发详情,请参阅UISwitch。

8.12 文本框(Text Fields)

文本框是单行、高度固定且带有圆角的输入框,点击它会自动呼出键盘。使用文本框向用户请求少量信息的录入,比如邮箱地址。

在文本框中显示提示文字向用户解释意图。若当前文本框中没有其它文本,文本框内可以包含占位文本,比如“邮箱”或“密码”。若占位文本已经表意明确,就不要再额外用标签对文本框进行描述了。

合适时,使用加密文本框。在你的app请求密码之类的敏感信息时,总是使用加密文本框。

TIP ?对于多行或是多样式的文本输入,请使用文本视图。请参阅Text Views。


邮件键盘


电话键盘

显示合适的键盘类型。iOS提供了几种不同的键盘类型,每种都为了特定的一种输入类型而设计。为了方便数据输入,编辑文本框时显示的键盘应该适用于当前所要输入的文本类型。如果你的app需要用户输入邮箱,那么应该显示对应的邮箱键盘。了解可用键盘类型的完整列表,请参阅UITextInputTraits中的UIKeyboardTypeconstant。

在文本框中添加图片以增进理解、添加按钮以增强功能性。你可以在文本框的左侧或是右侧显示自定义图片,或是添加一个系统按钮,比如一个书签按钮。一般来说,文本框左侧的区域用于说明文本框的含义,右侧的区域用于展示已有的附加功能,比如书签。

合适时,在文本框的右端展示一个清除按钮。若出现了清除按钮,点击它会清楚文本框内的所有输入内容,免去了用户不断点击键盘上删除按钮的麻烦。

了解开发详情,请参阅UITextField。

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

推荐阅读更多精彩内容