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

一、Bottons( 按钮 )

按钮启动应用的特定操作,样式可以自定义,可以包括标题或图标。系统为大多数情形提供了很多预定义的按钮样式。您还可以设计完全自定义的按钮。

开发指南请参阅?UIButton。

系统按钮

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

在标题中使用动词。一个特定的动作标题可以暗示一个按钮是可交互式的,并能让用户在点击前就能预知操作结果。

使用标题样式。除了文章,协调连词和四个字母以内的的介词之外,可以使用大写字母引起用户注意。

尽量保持标题简短。超长的文本可能会挤满您的界面,并可能会在较小的屏幕上截断。

考虑仅在必要时添加描边或背景。默认情况下,系统按钮没有描边或背景。然而,在某些内容情境下,需要边界或背景来暗示交互性。在Phone应用程序中,数字的描边加强了传统的通话模式,“呼叫”按钮的背景成为一个引人注目的目标,使其很容易触发。

有关开发指南,请参阅?UIButton 按钮类型中的?UIButtonTypeSystem?。

详细信息按钮

详细信息按钮触发后会打开一个视图 - 通常是模态视图 - 包含附加信息或本屏内相关选项的特定功能。虽然您可以在任何类型的视图中使用它们,但在表中通常使用详细信息按钮来访问有关特定行的信息。

在表中适当使用详细信息按钮。当表行中存在详细信息按钮时,点击该按钮将显示其他信息。轻击其他地方选择该行或导致应用定义的行为。如果您希望用户点击整个行以查看更多详细信息,请勿使用详细信息按钮。而是使用展示细节的附件控件,其显示为向右的小箭头。请参阅?UITableViewCell 中的?UITableViewCellAccessoryType?。

有关开发指南,请参阅?UIButton 按钮类型中的?UIButtonTypeDetailDisclosure?。

信息按钮

信息按钮点击后会显示有关应用程序的配置详细信息,有时位于当前视图的背面。信息按钮有两种风格 - 深浅两种。选择最适合您应用程序设计的风格,并且不会在屏幕上丢失。

有关开发指南,请参阅?UIButton 按钮类型中的?UIButtonTypeInfoLightUIButtonTypeInfoDark? 。

添加联系人按钮

用户可以点击添加联系人按钮来浏览现有联系人列表,并选择一个用于插入文本字段或其他视图。例如,在邮件中,您可以点击邮件的“收件人”字段中的“添加联系人”按钮,从联系人列表中选择收件人。

除了添加联系人按钮之外,还允许键盘输入。 “添加联系人”按钮为输入联系人信息提供了一种可选择的方法,而不是替换。把它作为添加现有联系人的快捷方式是很好的,但也应该允许用户通过键盘输入联系人信息。

有关开发指南,请参阅?UIButton 按钮类型中的?UIButtonTypeContactAdd

二、编辑菜单(Edit Menus)

用户可以在文本字段、文本视图、网络视图或图像视图中触摸并按住或双击元素,完成选择内容并显示编辑选项,如完成如复制和粘贴等操作。

显示适于当前上下文当命令。默认情况下,选项通常包括剪切、复制、粘贴、选择、全选和删除等命令,其中任何一个可以默认为禁用样式。如果没有被选择的文本,菜单不应显示像复制或剪切这样的选项。类似地,如果已经选择了某个选项,菜单不应该再显示其他选项。

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

不要执行与编辑菜单相同功能的其他控件。提供多种启动操作的方法会导致用户体验不一致,甚至导致混乱。例如,如果您的应用程序允许用户使用菜单来复制内容,就不要再提供复制按钮。

允许选择和复制潜在有用的不可编辑文本。用户通常希望将静态内容(如图像标签或社交媒体状态)添加到电子邮件、笔记或网页搜索中。

不要向按钮添加编辑选项。如果这样做,尝试显示选项的用户将会终止激活按钮。

编辑操作可撤销。在执行操作之前,菜单不需要确认。因为用户在执行操作后可以改变主意,所以提供撤消和重做选项。

通过用户自定义命令扩展编辑选项。您可以通过提供应用程序特定的命令来增加交互效率。像标准命令一样,任何自定义命令都应该对选定的文本或对象进行操作。

在系统提供的命令之后显示自定义命令。不要在使用系统提供的命令中插入自定义命令,系统命令是众所周知的并经常使用的。

最小化自定义命令的数量。不要给用户太多的选择。

保持自定义命令名称简短。命令名称应该是简短描述要执行的动作的动词或动词短语。使用标题的大写风格,除了文章、协调连词和四个以下字母的介词之外的每个单词都大写。

有关开发指南,请参阅?Text Programming Guide for iOS?和?UIMenuController?中的 Copy, Cut, and Paste Operations?。

三、标签 (Labels)

标签描述了屏幕界面元素或提供了一个短消息。虽然用户无法编辑标签,但有时候它们可以复制标签里的内容。标签可以显示任何数量的静态文本,但最好保持简短。

保持标签可读性。标签可以包括纯文本或样式文本。如果您调整标签的样式或使用自定义字体,请确保不会牺牲易读性。最好采用动态类型,这样当用户在设备上更改文本大小时,您的标签仍然看起来不错。请参阅?Dynamic Type。您还应该通过启用辅助功能选项测试您的标签,例如粗体文本。请参阅Accessibility。

了解更多文本信息,请参阅?String Programming Guide。了解如何创建文本样式,请参阅?Attributed String Programming Guide。有关标签开发指南,请参阅?Attributed String Programming Guide

四、页面控件(Page Controls)

页面控件显示当前页面在页面列表中的位置。它显示为一系列小的指示点,代表可用页面的打开顺序。一个实心点表示当前页面。在视觉上,这些点总是等距离的。如果屏幕上出现太多,则会被剪切。用户可以点击页面控件的前端或后端来访问下一页或上一页,但是他们无法点击特定的点来转到特定的页面。导航总是顺序发生,通常可以通过将页面滑动到一边。

不要跨层级使用页面控件。页面控件不能显示页面间的联系或指示哪个页面对应于哪个点。这类型的控件设计用于彼此平级的页面。

不要显示太多的页面。超过约10个点时很难乍一看就算清的,顺序访问超过20个开放页面则是耗时的。如果您的应用程序需要显示超过20同级页面,请考虑使用不同的排列方式(例如网格),从而实现非顺序导航。

屏幕底部的页面控件居中。页面控件应始终居中并位于内容底部和屏幕底部之间。这将保持页面控件可见,同时也不会阻挡内容。

开发指南请参阅?UIPageControl。

五、选择器(Pickers)

选择器包含一个或多个不同值的可滚动列表,每个列表都有一个选定的值,显示在视图中心的较暗的文本中。选择器通常位于屏幕的底部或当用户编辑字段或点击一个菜单时弹出。选择器也可能出现在内部,比如编辑日历中的日期时。选择器的高度大致是五行列表的高度。选择器的宽度可以是屏幕的宽度,也可以是封闭视图的宽度,这取决于设备和情境。

使用可预测和逻辑排序的值。当可滚动的列表是固定的时,选择器中的很多值可能是隐藏的。保证用户可以预测这些被隐藏的值是很好的方式,比如用一个列表按字母顺序排序的国家,所以他们可以很快地通过移动的列表选择。

避免切换屏幕时显示选择器。当显示在上下文中、在被编辑的字段的下方或附近时,选择器能够正常工作。

列表值太多时使用表单替代选择器。在选择器导航较长的列表可能会导致交互太过乏味。一个表的高度可调,还可以包含一个索引,使滚动速度更快。

开发指南请参阅?UIPickerView。

日期选择器

日期选择器是选择特定日期、时间或两者的高效控件。它还提供了一个显示倒计时器的界面。

日期选择器有四种模式,每种模式都显示不同的可选值列表。

1)日期:显示月、日、月和年。

2)时间:显示小时、分钟和(可?。┥衔?下午的指定。

3)日期和时间:显示日期、小时、分钟和(可选)上午/下午的指定。

4)倒计时定时器:显示时间和分钟,最高可达23小时59分钟。

日期选择器中显示的精确值和它们的顺序取决于用户的区域设置。

在指定分钟时考虑提供较少的粒度。默认情况下,一分钟列表包含60个值(0到59)。你可以选择增加分钟间隔,只要它平均分成60个。例如,可以设定15分钟为一个间隔(0, 15, 30和45)。

开发指南请参阅?UIDatePicker

六、进度指示器(Progress Indicators)

当应用程序加载内容或执行冗长的数据处理操作时,不要让用户坐在那里盯着静态屏幕。使用活动指示器和进度条,让用户知道应用程序没有停顿,并让他们知道还要等多久。

也可以参阅?Loading。

活动指示器

一个活动指示器随着无法量化的任务旋转,如随着加载或同步复杂的数据进行。任务完成时它就会消失?;疃甘酒鞑痪哂薪换バ灾?。

可量化的进程使用进度条。如果活动是可量化的,请使用进度条而不是活动指示器,以便用户能够更好地衡量发生的情况和需要多长的处理时间。

保持活动指示器旋转。看到停止的活动指示器用户会自动联想到活动停滞。保持旋转,确保用户知道发生的事情。

在等待任务完成时提供有用的信息是极其有用的。包括在活动指示器上方添加标签,以提供辅助信息。避免模??糊的术语,如加载或验证,因为活动指示器不能增加任何值。

开发指南请参阅?UIActivityIndicatorView。

进度条

进度条通过从左到右填充轨迹显示任务已持续时间。进度条是也是非交互式的,尽管可以通过一个按钮来取消相应的操作。

始终准确报告进度。不要显示不准确的进度信息,这只会使你的应用程序更加忙碌。只能对可量化的任务使用进度条。否则,请使用活动指示器。

对具有明确定义持续时间的任务使用进度条。进度条可以非常好的显示任务的状态,特别有助于提示完成任务还需多长时间。

隐藏导航栏和工具栏中轨道的未填充部分。默认情况下,进度条的轨迹包括已填充部分和未填充部分。当在导航栏或工具栏中使用,例如表示页面加载时,应将进度条配置为隐藏轨道的未填充部分。

考虑自定义进度条的外观以匹配您的应用程序。进度条的外观可以根据应用的设计进行调整。例如,您可以指定轨道和填充的自定义色调或图像。

开发指南请参阅?UIProgressView。

网络活动指示器

在除了iPhone X的所有设备上,网络活动指示器会在网络环境发生变化时,在屏幕顶部的状态栏中旋转。当网络稳定时,它就消失。该指示器看起来像一个活动指示器,并且是非交互式的。

仅对持续超过几秒的网络操作显示网络指示器。不要对快速网络操作显示指示器,因为它可能在任何人注意到它的存在或实现其通信意图之前就消失了。

可参阅?Status Bars。开发指南请参阅?UIApplication 中的?networkActivityIndicatorVisible 。

?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容