来源:https://developer.apple.com
iOS界面元素主要分为三类:栏 Bars、视图 Views、控件 Controls。
栏
视图
控件
下面分别记录各个控件的使用要点。
系统按钮
系统按钮执行app 中定义的行为。
1、标题使用动词;
2、标题不要太长;
3、默认状态下不含边界,也不含背景图;
4、需要的话,为按钮描边或者加入背景。
详情展开按钮
详情展开按钮展示了与该项相关的更多详细信息与功能描述。
1、以一个单独的视图展示特定项目的更多详情信息与功能;
2、在表格行中出现时,点击表格行的其它区域不会激活此按钮,只会选中该行,或者触发app 中其它自定义的行为;
3、注:ios中的表格视图,指的是列表。
信息按钮
信息按钮展示了 app 的配置信息,有时候它会出现在当前视图的背面。
系统按钮
添加联系人按钮让用户将现有联系人添加到文本框或者其它文字视图中。
1、点击按钮可以展示联系人列表;
2、帮助用户将一个联系人添加到当前联系人按钮所在的视图中;
3、除了添加联系人按钮,还要支持键盘输入。
编辑菜单
通过长按或双击视图中的元素,可以选中内容并唤出菜单选项。
1、根据上下文情景,展示合适的命令;
2、如果有需要的话,可以调整编辑菜单的位置,避免遮挡住界面重要信息;
3、不要在界面上提供和编辑菜单具有相同功能的其他控件;
4、允许选择和复制可能有用的不可编辑文本;
5、允许撤销编辑菜单中的操作;
6、可以在编辑菜单中增加有用的自定义命令;
7、把自定义命令放在系统提供的命令后面;
8、最小化自定义命令的个数;
9、保证自定义命令简洁。
标签
标签用于放置静态文本。
1、可以展示任意数量的静态文本;
2、禁止除了复制文本外的任何用户交互行为;
3、保证标签清晰易读。
页面指示器
页面指示器告诉用户当前共打开了多少个视图,以及他们正处在其中哪一个。用户可以点击页面指示器的前边或后缘来访问下一页或上一页,但不能点击特定的点来访问特定的页面。页面选择器是为所有视图平等的场景而设计的。当告知用户有多少打开的视图比帮助用户选择特定的视图更重要时使用 。
1、不要使用页面控件来显示视图中的层次结构;
2、避免显示太多点。超过 10 个点很难让用户一目了然;
3、在屏幕的底部垂直居中页面控件。
活动指示器
表明任务或进程正在进行中。在工具栏或主视图中使用活动指示器,告知用户任务或加载正在进行中,但并不提示该过程何时会结束。
o 当任务进行和加载时旋转,任务完成后自动消失;
o 不支持用户交互行为;
1、不要使用静止的活动指示器。
进度视图
展示了任务或进程的进度。
o 它是一条轨迹,随着进程的进行从左向右进行填充;
o 不支持用户交互行为;
1、只对可量化的任务使用进度条。否则,使用活动指示器;
2、始终准确地显示进度,而不要为了让应用程序看起来很忙而显示不准确的进度信息;
3、默认情况下,进度条包括已填充部分和未填充部分;
4、当在导航栏或工具栏中使用时,隐藏未填充部分,例如表示页面加载时。
网络活动指示器
在状态栏中出现,表示网络活动正在进行。
o 当网络活动正在进行时它会旋转,在活动停止时它则消失;
o 不支持用户交互行为;
1、当网络连接过程持续好几秒的时候使用;
2、如果所需时间很短则不需要使用, 因为很可能在用户注意到它之前就消失了。
刷新控件
刷新控件执行用户触发的内容刷新。一个典型的例子,它常在表格中出现,例如iOS 默认邮件 app 的 mailbox 列表页。
o 看起来类似活动指示器;
o 可以出现在标题中;
o 默认状态下不可见,当用户在表格上缘往下拖拽以刷新内容时才出现;
1、就算使用了刷新控件,也不要因此就不支持内容自动刷新;
2、只有在必要的时候才加短标题。特别需要注意的是,不要使用短标题来描述刷新控件怎么使用。
分段控件
分段控件是一组分段的线性集合,每一个分段的作用类似按钮,点击之后将切换 到相应的视图。
o 由两个或以上的分段组成,每一个分段的宽度相同,与分段的数量成比例 (分段数量越多,则宽度越小)
o 可以包含文字或者图片;
分段控件用来提供密切相关而又互斥的选项。
1、保证每个分段都容易点击。每个分段的大小有至少 44×44 像素。控制分段的数量,1个分段控件最多包含5个分段;
2、尽可能地保持每个分段中的文字长度一致。因为每个分段都是等宽的,当文本长度差异很大时看上去会很不协调;
3、不要在同一个分段控件中混用文字和图片。每一个分段都仅可支持纯文字或纯图 片;
4、请在必要时调整分段控件中文本的对齐方式。
滑块
滑块允许用户在一个限定范围内调整某个数值或进程。
o 由一条水平的轨迹和一个 Thumb(滑块中支持用户水平拖拽的圆形控件) 组成;
o 左边和右边支持使用自定义图片来表述相对的最小值与最大值的含义;
o 填充轨道左边缘最小值之间到 Thumb 之间的部分。
使用滑块来让用户精准地选择自己想要的值,或者控制当前的进程。
1、如果合适的话,自定义滑块的外观;
2、不要使用滑块来显示音量控制。
步进器
步进器是一个两段控件,其中一段默认显示减号,另一端默认显示加号。
o 支持自定义图片;
o 不展示用户更改的值。
1、当用户想要对数值进行小幅度调整时,可以使用步进器。例如修改打印机中的打印份数;
2、当用户需要大幅度调整数值的时候,不要使用步进器。例如选择打印页码范围;
3、确保步进器所调整的值明显可见。因为步进器自身不展示任何数值,所以要保证让用户知道他们正在调整哪一个数值。
开关按钮
开关按钮展示了两个互斥的选项或状态。
1、可以调整外观来匹配应用程序的风格;
2、仅在表格视图中使用;
3、避免添加标签来描述开关的值。开关要么是开的,要么是关的。提供描述这些状态的标签是多余的,而且会使接口混乱;
4、可以使用开关按钮来控制视图中的其它 UI 元素的可用/见性。例如,在设置中启用飞机模式切换会禁用某些其他设置,比如蜂窝和个人热点。在设置> Wi-Fi中禁用Wi-Fi开关会导致可用网络和其他选项消失。
文本框
文本字段是一个单行、固定高度的字段,通常带有圆角的控件。
o 当用户点击它时,它会自动弹出键盘;
o 使用文本字段请求少量信息,例如电子邮件地址。
1、在文本字段中显示提示文字,以帮助用户理解。当占位符文本足够时,不要使用单独的标签来描述文本框;
2、合适的话,在文本框右侧加入清除按钮。轻击清除按钮变可清空当前框内输入的全部内容;
3、当应用程序请求敏感数据时,使用安全文本字段,例如密码;
4、可以文本框中使用图像和按钮,帮助用户理解。 一般放在文本框的左侧用于表述文本框的含义,而右侧用于展示附加的功能,如书签;
5、根据输入内容的类型来指定不同的键盘类型。
选择器
选择器展示了一组值,用户可以从中选择一个。
o 是日期时间选择器的通用模式;
o 包括一个或多个滑轮,每个滑轮含有一组值;
o 当前选中的值在中间,以深色标识;
o 不可以自定义大小(选择器的大小与 iPhone 的键盘相同)。
1、在用户对所有数值均有预期的情况下时使用;
2、避免通过进入其它的视图使用选择器;
3、如果选项数量很多,使用表格视图而不是选择器。
日期时间选择器
展示关于日期和时间的组件,比如小时,分钟,天,以及年。
o 最多可以展示 4 个独立的滑轮,包括四种模式,每一种模式代表了一组不同的值;
o 日期和时间。日期和时间模式(默认模式)包含日期、小时、分钟、一个可选的 AM/PM 值;
o 时间。时间模式包括小时、分钟、可选的 AM/PM 值;
o 日期。日期模式包括月份、天以及年三个值;
o 倒计时器。倒计时器模式展示了小时和分钟值,倒计时的最大值为 23 小时 59 分钟。
1、有必要的时候,改变分钟滑轮的单位刻度。例如每15 分钟为一个刻度,此时分钟滑轮就有4个值:0、15、30、45。