【Resin译】iOS 11 人机界面指南:控件(Controls)

大部分的iOS应用程序都是使用UIKit中的组件构建的。这让应用程序在整个系统中保持一致的外观,同时具有灵活的自定义。

UIKit提供的界面元素分为三大类:

一、栏(Bars)

告知用户当前所在应用中的位置,提供导航,还有可能包含按钮或其他可以用来触发功能或交流的元素。

二、视图(Views)

包含用户在应用中看到的主要内容,如文本,图形,动画和交互元素。视图支持如滚动、插入、删除和排列等行为。

三、控制(Controls)

用于触发功能及传递信息,像按钮、开关、输入框、进度条等便是极典型的控件。


1. 按钮(Buttons)

按钮执行应用程序中特定的动作,具有可自定义的背景,并可以包括标题或图标。系统为大多数使用情况提供了预定义的按钮样式。你还可以完全设计自定义按钮。

系统按钮(System Buttons)

系统按钮经常出现在导航栏和工具栏中,但可以在任何地方使用。

在按钮标题中使用动词。一个特定动作的标题显示了按钮是可交互的,也提示了用户点击之后会发生什么。

使用标题式大写。除了冠词、并列连词以及少于4个字母的介词外,标题中每个单词的首字母均大写。

保持标题简短。过长的文本会使界面变得拥挤,并且可能在小屏幕中被截断。

考虑在必要时为按钮添加边框或背景。默认情况下,系统按钮没有边框或背景。然而,在某些内容区域中,边框或背景是有必要的,能够提示其交互性。在“电话”应用程序中,数字按键的边框加强了传统的打电话模式,并且呼叫按钮的背景提供了一个容易点击的醒目目标。

详情展开按钮(Detail Disclosure Buttons)

详情展开按钮通常打开一个模态视图,展示与屏幕上特定项目相关的更多信息或功能。虽然你可以在任何类型的视图中使用它们,但详情展开按钮通常用于访问有关特定行的信息。

在表格视图中适当使用详情展开按钮。当详情展开按钮在表格行中出现时,点击按钮显示更多信息。点击其他区域选中该行,或者触发应用中其它自定义的行为。如果你希望用户点击整行查看更多信息,不要使用详情展开按钮。相反,使用详情展开控件,该控件显示为人字形。

信息按钮(Info Buttons)

信息按钮显示有关应用程序的配置详情信息,有时在当前视图的背面,翻转视图后显示。信息按钮有两种样式:亮色和暗色。选择最适合您应用设计的风格。

添加联系人按钮(Add Contact Buttons)

用户可以点击添加联系人按钮来浏览现有联系人列表,并选择一个添加到文本输入框或者其它视图中。例如,在邮件应用中,你可以点击收件人字段中的添加联系人按钮,从联系人列表中选择收件人。

除了添加联系人按钮之外,还允许用户使用键盘输入。添加联系人按钮为输入联系人信息提供了另一种方式,而不是替代。可以将其作为添加现有联系人的快捷方式,但也应允许用户使用键盘输入联系人信息。


2. 编辑菜单(Edit Menus)

用户可以在文本输入框、文本视图、网页视图或图像视图中触摸并按住或双击一个元素,以选择内容并显示编辑选项,如复制和粘贴。

为当前内容显示合适的命令。默认情况下,命令选项包括剪切、复制、粘贴、选择、全选和删除,其中任何一个都可以选择禁用。如果没有选择任何内容,则菜单不应显示需要选择的选项,如“复制”或“剪切”。

如有必要,调整编辑选项的位置。默认情况下,菜单位于插入点或选区的上方或下方,具体取决于可用空间,并包含指向相关内容的指针。虽然无法更改菜单的形状,但它的位置是可配置的,可以防止它覆盖界面上的重要内容。

不要使用与编辑菜单实现相同功能的其他控件。提供多种方式会导致混淆。例如,如果你的应用允许用户使用编辑菜单复制内容,就不要再增加一个复制按钮。

使编辑操作可撤消。编辑菜单在执行操作前不需要确认。由于用户在执行操作后可能会改变主意,因此请务必支持撤消和重做。

在系统提供的命令之后显示自定义命令。

最小化自定义命令的数量。

保持自定义命令名称短。命令名称应该是动词或简短的动词短语。使用标题式大小写。


3. 标签(Labels)

标签用来描述屏幕上的界面元素或提供简短的信息。虽然用户无法编辑标签,但有时可以复制标签的内容。标签可以显示任意数量的静态文本,但最好保持简短。

保持标签清晰。标签可以包含纯文本或样式文本。如果要调整标签的样式或使用自定义字体,请不要牺牲易读性。最好采用动态类型,以便在用户更改设备上的文本大小时,标签仍然看起来很好。还应该测试带有无障碍功能选项的标签,如粗体文本。


4. 页面控件(Page Controls)

页面控件显示了当前页面在一个页面序列中所处的位置。它显示为一系列小指示点,实心点表示当前页面。

用户可以点击页面控件的前端或后端来访问下一页或上一页,但是无法通过点击特定的点来访问特定的页面。

不要在分级页面中使用页面控件。页面控件不会显示页面是如何关联的。

不要显示太多页面。超过10个点几乎难以查看,超过20个打开页面非常耗时。如果你的应用需要同时显示20多页,请考虑使用不同的排列方式(如网格)。


5. 选择器(Pickers)

选择器包含一个或多个可滚动的含有不同值的列表,每一列均具有一个选中的值以深色的文字呈现。选择器通常在用户编辑字段或点击菜单时在屏幕底部或弹出窗口中出现。

选择器的高度大致是五行列表值的高度。选择器的宽度取决于设备和上下文,可以是屏幕的宽度或封闭的视图。

使用可预测的和逻辑上有序的值。当可滚动列表静止时,选择器中的许多值可能会被隐藏。最好能够预测这些值是什么,例如一个按字母顺序排列的国家列表。

避免切换屏幕以显示选择器。选择器应在上下文中、或在被编辑的字段的下方或附近。

对于大量数量列表,请使用表而不是选择器。太长的列表可能会使用困难。表可以包含索引,使滚动速度更快。

日期选择器(Date Pickers)

日期选择器是用于选择特定日期、时间或包含两者的交互方式。

日期选择器有四种模式,每种模式都有一组不同的可选值。

日期。显示年、月、日。

时间。显示小时、分钟和AM / PM(可选)。

日期和时间。显示日期、小时、分钟和(可选)AM / PM指定。

倒计时器。显示小时和分钟,最长23小时59分钟。

日期选择器中显示的确切值及其顺序取决于用户设备的区域设置。

考虑在指定分钟时提供较小的粒度。默认情况下,分钟列表包含60个值(0到59)。你可以选择增加分钟间隔。例如,每小时四分之一的时间间隔(0,15,30和45)。


6. 进度指示器(Progress Indicators)

不要让用户盯着静态屏幕等待你的应用程序加载内容或执行冗长的数据处理操作。使用活动指示器和进度条让用户知道你的应用程序没有停滞,并让用户了解他们将等待多久。

活动指示器(Activity Indicators)

活动指示器在执行不可量化的任务(如加载或同步复杂数据)时进行旋转。任务完成时消失。活动指标是非交互的。

进度条要优于活动指示器。如果活动是可量化的,则使用进度条而不是活动指示器,用户可以更好地衡量正在发生的事情以及需要多长时间。

保持活动指示器的运动。用户会很自然地把静止的活动指示器和应用的停滞联系起来。保持旋转,让用户知道发生了什么。

如果有帮助,请用户在等待任务完成时提供有用的信息。在活动指示器上方加上标签以提供额外的上下文信息。避免像“加载”或“验证”这样的模糊术语。

进度条(Progress Bars)

进度条包含一个从左向右填充的轨迹,用以显示已知持续时间的任务进度。进度条是非交互的,但其通常伴随着用于取消相应操作的按钮。

始终保持进度条的准确性。不要显示不准确的进度信息。

对于可量化完成时间的任务使用进度条。进度条非常适合显示任务的状态,尤其是帮助传达任务需要完成的时间。

在导航栏和工具栏中隐藏进度条轨道的未填充部分。默认情况下,进度条的轨道既包含已填充部分,也包含未填充部分。在导航栏或工具栏中使用(如表示页面加载)时,应配置一个进度条以隐藏轨道的未填充部分。

考虑自定义进度条的外观以匹配你的应用。可以指定轨道和填充的自定义颜色或图像。

网络活动指示器(Network Activity Indicators)

在除iPhone X之外的所有设备上,当网络进行加载时,网络活动指示器会在屏幕顶部的状态栏中旋转。网络连接完成后,它会消失。这个指示器看起来就像一个活动指示器,并且是非交互的。

仅当网络加载持续超过几秒钟时才显示此指示器。不要对于加载比较快的网络任务显示指示器,因为它可能会在任何人注意到它的存在之前就消失了。


7. 刷新控件(Refresh Content Controls)

手动启动刷新控件可以立即重新加载内容,无需等待下一次自动内容更新的发生。刷新控件是一种特定类型的活动指示器,默认情况下处于隐藏状态,只在重新加载视图时变为可见。例如,在邮箱应用中,向下拖动收件箱邮件列表以检查新邮件。

执行自动内容更新。虽然用户能够立即触发内容刷新,但他们也期望定期进行自动刷新。不要让用户负责每一次更新,通过定期更新以保持数据的时效性。

仅在有意义时提供一个简短的标题。刷新控件包含可选的标题。在大多数情况下,这是不必要的,因为控件的动画表明内容正在加载。不要用它来解释如何执行刷新。可以提供有关正在刷新的内容的有用信息。例如,播客中的刷新控件使用标题来告诉用户最后一次的更新时间。


8. 分段控件(Segmented Controls)

分段控件是一个由两个或多个片段组成的线性集合,每一个片段均为互斥按钮。在控件中,所有片段的宽度相等。像按钮一样,片段可以包含文本或图像。分段控件通常用于显示不同的视图。例如,在地图中,分段控件让用户在地图、传输和卫星视图之间切换。

限制片段的数量以提高可用性。更宽的片段更容易点击。在iPhone上,分段控件应该有五个或更少的分段。

避免在分段控件中混合文本和图像。尽管单个片段可以包含文本或图像,但将两者混合在一个控件中可能会导致一个混淆的界面。


9. 滑动条(Sliders)

滑动条是一个水平的控件,用户可以用手指在滑动条的最小与最大值之间滑动。当滑块的值发生变化时,最小值和滑块之间的轨迹部分将填充颜色。滑块可以有选择地显示左右图标,以说明最小值和最大值的含义。

在有必要的前提下可以自定义滑动条的外观。可以调整滑动条的外观,包括轨迹颜色、滑块图像和左右图标)。


10. 步进器(Steppers)

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

让步进器影响的值更明显。步进器本身不显示任何值,请确保用户知道使用步进器时更改哪个值。

当可能发生较大的值更改时,不要使用步进器。对于需要几次点击的小改动,步进器可以很好地工作。例如,在打印屏幕上,使用步进器设置打印份数是有意义的,因为人们很少更改此设置。


11. 开关(Switches)

开关用于在两个互斥的状态之间进行开启和关闭的切换。

考虑调整开关的外观以符合应用的风格。

仅在表格行中使用开关。如果需要在工具栏或导航栏中实现类似功能,请改用按钮,并提供两个不同的图标来显示不同的状态。

避免添加标签来描述开关的值。开关的状态要么是开要么是关。描述的标签是多余的,使界面变得混乱。

考虑使用开关来管理互有关联的界面元素。开关通常会影响屏幕上的其他内容。例如,在设置> Wi-Fi中禁用Wi-Fi开关会导致可用的网络和其他选项消失。


12. 文件输入框(Text Fields)

文本输入框通常为单行且固定高度的区域,经常为圆角,当用户点击时会自动弹出键盘。使用文本输入框来请求少量信息,例如电子邮件地址。

在文本输入框中显示必要的提示信息。文本输入框可以包含占位符文本,如“电子邮件”或“密码”。占位符文本足够时,不必再使用单独的标签来描述文本输入框。

适当在文本输入框的右端显示清除按钮。

适当使用安全类型的文本输入框。当应用程序询问敏感数据(如密码)时,请使用安全类型的文本输入框。

使用图像和按钮增加文本输入框的清晰性和功能性。通常,使用文本输入框的左端来表示输入框的用途,右端用于显示附加功能(如书签)。

提示:对于多行或多文本输入,请改为使用文本视图。

键盘(Keyboards)

显示合适的键盘类型。iOS提供了几种不同的键盘类型,每种类型都被设计为便于不同类型的输入。例如,如果应用程序要求输入电子邮件地址,则应显示电子邮件地址键盘。

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

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,969评论 3 119
  • 4.3 控件 4.3.1 活动指示器 活动指示器表明任务或进程正在进行中,如下图所示。 想要了解如何在代码中定义活...
    小虾仔阅读 1,176评论 0 6
  • 原文链接:https://github.com/opendigg/awesome-github-android-u...
    IM魂影阅读 32,910评论 6 472
  • 脉脉丝绦问晓风,云高不欲雨先行。 澄碧一湖镶日月,飞鹊,可闻檐上报春声? 未起惊雷霜尚冷,寻梦,登楼还看为倾城。 ...
    君子包阅读 225评论 7 8
  • 第1章 :“请你告诉我,这个设计图,你 是怎么做出来。” 楚叶第一次把设计图发给上司李荣丽...
    lwj在飞翔阅读 282评论 0 0