iOS11人机交互指南(七)- 栏(Bars)

一、导航栏(Navigation Bars

导航栏出现在app屏幕的顶部,状态栏之下,它能实现在一系列有层级的app页面间的导航。当进入一个新页面时,导航栏的左侧会出现一个返回按钮,并且一般会标有上一个页面的标题。有时,导航栏右侧还有含有类似编辑或完成按钮的控件,用来管理当前视图的内容。在分屏视图内,导航栏可能只会出现在分屏视图的一个单独窗格。导航栏是半透明的,也可能会有一个背景颜色,并且在适当时可以被隐藏,比如当前屏幕有键盘时、施加了某手势时或是某个视图在调整大小时。

iOS11人机交互指南(七)- 栏(Bars)_第1张图片

考虑在显示全屏内容时暂时隐藏导航栏。当你想要关注内容时,导航栏会令人分心。暂时隐藏该栏以提供一个更加沉浸式的体验。全屏浏览图像时会隐藏导航栏和其它界面元素。如果你要隐藏导航栏,允许用户通过简单的手势复原导航栏,比如点击。

开发指导请参阅 UINavigationBar。

提示:

当不需要导航或是你需要多个控件来管理当前内容时,请使用工具栏。请参阅 Toolbars。

导航栏标题

考虑在导航栏显示当前视图的名称。在大多数情况下,名称帮助用户了解他们在看什么。然而,如果给导航栏命名看起来是多余的,你可以让标题空着。比如,备忘录(Notes)不会在当前笔记的导航栏上放名称,因为内容的第一行已经提供了所需的环境线索。

iOS11人机交互指南(七)- 栏(Bars)_第2张图片
左: 标准标题;右:大标题

如果您需要额外强调内容,请使用大标题。 在某些应用中,大标题的大号粗体文本可以帮助用户浏览和搜索。 例如,在标签式布局中,大标题可以帮助阐明活动标签,并在用户滚动到顶部时通知用户。 手机使用这种方法,而音乐使用大标题来区分内容区域,如专辑、艺人、播放列表和广播。 当用户开始滚动内容时,大标题转换为标准标题。 大标题不是在所有应用程序中都有意义,它不应该与内容形成竞争。 尽管时钟app具有选项卡式布局,但大型标题是不必要的,因为每个选项卡都具有明显的可识别布局。 开发指导请参阅 prefersLargeTitles。

导航栏控件

避免用过多控件填充导航栏。一般来说,导航栏最多只能包含当前视图的标题、返回按钮以及一个管理当前视图内容的控件。如果你在导航栏使用了分段控件,那除此之外,该栏就不应再包含标题或其它控件。

使用标准的返回按钮。用户已经知道,标准的返回按钮会让他们在信息层级中按原路径返回。然而,如果你使用了自定义的返回按钮,请确保它们看起来像是返回按钮,有直观的表现,和界面的其它部分保持一致,并且在app内统一使用该自定义按钮。如果你用自定义图片替换了系统提供的返回按钮,请同时提供一个自定义遮罩图片(custom mask image)。iOS使用这个遮罩来实现按钮标题在转场时的过渡动画。

不要包含多段的面包屑路径。返回按钮只能执行一个单独的操作,即返回到上一屏。如果你认为用户可能会因为忘记到达当前屏的完整路径而迷路,请考虑扁平你的app层级。

给文本标题按钮留出足够的空间。如果你的导航栏含有多个文本按钮,文本可能会让多个按钮看起来像是同时运行的,导致按钮间难以区分。在按钮之间插入固定空间项使它们隔开。开发指导请参阅 UIBarButtonItem中的 UIBarButtonSystemItemFixedSpace。

为了扁平您的app信息层次结构,考虑在导航栏使用一个分段控件。如果您在导航栏中使用分段控件,请仅在层次结构的顶层执行此操作,并确保在较低层级为返回按钮选择了正确的标题。更多指导请参阅 Segmented Controls。

二、搜索栏(Search Bars

搜索栏允许用户通过在字段中输入文本来搜索大量值。 搜索栏可以单独显示,也可以在导航栏或内容视图中显示。 当显示在导航栏中时,搜索栏可以固定到导航栏,以便始终易于访问,或者可以折叠搜索栏,直到用户向下滑动以显示它。

iOS11人机交互指南(七)- 栏(Bars)_第3张图片

让用户通过搜索栏而不是文本框去搜索。文本框不具备用户期待的标准搜索栏所拥有的外观特征。

启用清除按钮。 大多数搜索栏都包含一个清除按钮,用于删除该字段的内容。

合适时启用取消按钮。大多数专用搜索栏包含一个立即终止搜索的“取消”按钮。

iOS11人机交互指南(七)- 栏(Bars)_第4张图片
左:清除按钮;右:取消按钮

必要时,在搜索栏提供线索和背景。搜索框可以包含占位文本来提示可搜索的类型,比如“搜索服装、鞋子和饰品”或只是简单的“搜索”二字。也可以在搜索栏正上方展示一行简明扼要的带有适当标点的文字,用来引导用户。比如股票(Stocks),就在搜索框上方展示了一行文本告知用户他们可以输入公司名称或股票代码。

iOS11人机交互指南(七)- 栏(Bars)_第5张图片
左:占位性文本;右:介绍性文本

考虑在搜索栏下方提供有用的快捷键和其它内容。利用搜索栏下方的区域帮助用户更快地获取内容。比如浏览器(Safari),在你点击搜索框的时候会立即显示你的书签,无需输入任何关键词的情况下即可进入选择的对象。股票app在你对搜索栏输入的时候,会一边在下方展示相关的结果列表,你可以在任意时间点击选择列表中的项,而不用输入更多字符。

开发指导请参阅 UISearchController和 UISearchBar。

范围栏(Scope Bars)

范围栏可以附加于搜索栏,让用户定义搜索的范围。

iOS11人机交互指南(七)- 栏(Bars)_第6张图片

优先优化搜索结果,而不是一味添加范围栏。当用户想在定义明确的类别中搜索时,范围栏会有很大的帮助。但是,更好的做法是优化搜索结果,这样用户就无需通过范围栏进行筛选了。

开发指导请参阅 UISearchBar。

三、状态栏(Status Bars)

状态栏在屏幕的顶端出现,显示与设备当前状态相关的有用信息,比如时间、运营商、网络状态以及电池容量。状态栏上真正显示的信息根据不同的设备和系统设置有所变化。

使用系统提供的状态栏。用户希望状态栏在系统范围保持一致,不要用自定义的状态栏代替。

iOS11人机交互指南(七)- 栏(Bars)_第7张图片
亮状态栏
iOS11人机交互指南(七)- 栏(Bars)_第8张图片
暗状态栏

根据你的app设计选择协调的状态栏样式。状态栏的文本和指标的视觉样式非明即暗,在你的app中,可以统一使用一种配色,或是根据不同的屏幕选择单独的配色。暗色系的状态栏在浅色的界面上效果好,浅色系的状态栏在深色系的界面上效果好。

遮盖状态栏下方的内容。状态栏的背景默认是透明的,这样会显示出状态栏下方的内容。既要保证状态栏的可读性,又不能让人误解下方的内容是可交互的,通常通过以下几种技巧来实现:

1)在你的app中使用导航栏,它会自动显示状态栏背景以保证状态栏下方不会出现任何内容。

2)在状态栏下方放置一张自定义图片,比如渐变或纯色背景。

3)在状态栏下方放置一个模糊的视图。开发指导请参阅 UIBlurEffect。

全屏展示媒体文件时考虑暂时地隐藏状态栏。当用户想要集中注意力在媒体上时,状态栏会令他们分心。暂时地隐藏状态栏元素能够提供一个更加沉浸式的体验。比如照片app,在用户全屏浏览照片时会隐藏状态栏和其它界面元素。

避免永久地隐藏状态栏。在没有状态栏时,用户需要退出你的app去查看时间或是检查他们是否连接至Wi-Fi。允许用户可以通过简单、易于发现的手势来重新唤醒被隐藏的状态栏。在照片app中浏览全屏照片时,用户只需在屏幕上轻点即可呼出状态栏。

使用状态栏显示网络活动状态。当你的app在使用网络,尤其是耗时较长的操作时,显示网络活动状态栏指示器,这样用户就知道活动正在进行中。请参阅 Network Activity Indicators。

开发指导请参阅 UIApplication 中的 UIStatusBarStyle 和UIViewController 中的  preferredStatusBarStyle 。

四、 标签栏(Tab Bars)

标签栏在app屏幕底部出现,提供了在app不同部分间快速切换的途径。标签栏是半透明的,也可能会有纯色背景,在横竖屏都保持一致的高度,并且在出现键盘时会被隐藏。一个标签栏可以包含无数个标签,但其所能容纳的可见的标签数量根据设备大小和横竖屏模式有所变化。受水平空间的限制,当某些标签无法被显示时,最后一个可见的标签会变成“更多”, 并通过该入口前往其余标签列表的另一屏。

iOS11人机交互指南(七)- 栏(Bars)_第9张图片

一般来说,利用标签栏组织应用程序层级的信息。标签栏是扁平化信息层级的好办法,并且一次性提供了前往多个平级信息类别或模式的途径。

标签栏只能作为导航。标签栏按钮不应该执行其它操作。如果你需要在当前视图提供作用于元素的控件,你可以使用工具栏代替。请参阅 Toolbars。

避免太多标签。每增加一个标签就减小了选择单个标签的可触区域,并且增加了app的复杂性,让用户更难找到所需的信息。尽管“更多”标签可以展示额外的标签项,但这需要额外的点击步骤,并且对标签栏的有限空间没有很好的利用。只包括至关重要的标签,并且在你的信息层级上使用最少的必要标签。但太少的标签也是个问题,它会让你的界面感觉被分离。一般来说,在iPhone上使用3至5个标签,在iPad上则可稍微多几个。

不要在某个标签的功能不可用时去掉该标签或是使其失效。如果标签时而可用时而不可用,你的app界面会变得不稳定和难以捉摸。确保所有的标签都是有效可点击的,并且向用户解释当前标签内容不可用的原因。比如,当本iOS设备没有歌曲时,音乐app的“我的音乐”标签页就对如何下载歌曲做出了说明。

总是在与标签栏相连接的视图切换内容。为了让你的界面符合用户预期,选择一个标签后应该直接作用于与标签栏相连接的视图,而不是屏幕其它范围的视图。比如,在分屏视图(split view)的左侧选择了一个标签,是不会导致右半部分突然变化的。在弹窗(popover)选择一个标签页不会导致下方的视图发生改变。

确保标签栏图标在视觉上一致和平衡。 系统为常见用例提供了一系列预定义的图标。 请参阅 System Icons > Tab Bar

Icons。 您也可以创建自己的图标,参见 Custom Icons。

使角标(badge)低调地传达信息。你可以在标签上展示角标——一个带有白色数字或感叹号的红色椭圆——来暗示该标签视图或模式含有新信息。

开发指导请参阅 UITabBar。

提示:

理解标签栏和工具栏之间的不同十分重要,因为这两种栏都是出现在app屏幕的底部。标签栏让用户在app的不同部分间快速切换,比如时钟app中的“闹钟”、“秒表”、“计时器”。工具栏包含了执行当前视图相关操作的按钮,比如创建项、删除项、添加注释或是拍照。请参阅 Toolbars。标签栏和工具栏决不会在同一个视图内同时出现。

五、工具栏(Toolbars)

工具栏在app屏幕底部出现,包含了执行当前视图或包含内容相关操作的按钮。工具栏是半透明的,也可能会有纯色背景,并且通常在用户不太需要它们时被隐藏。比如,在浏览器(Safari)中,当你滚动页面表明你在阅读时,工具栏就藏起来了。当你在屏幕底部点击时,工具栏又会再次出现。当前屏幕有键盘时,工具栏也会被隐藏。

iOS11人机交互指南(七)- 栏(Bars)_第10张图片

提供相关的工具栏按钮。工具栏应该包含在当前环境下有意义的常用操作命令。

考虑图标或文字按钮是否适合你的app。当你需要多于三个工具栏按钮时,出现图标会很好。当你只有三个或是更少的按钮时,文字可能有时看起来更加清楚。比如,在日历app中,文本就被当作按钮使用,因为图标可能会令人迷惑。因为使用了文本,“收件箱”按钮还能显示所有的日历和事件邀请数量。

避免在工具栏使用分段控件。分段控件让用户切换内容,而工具栏更针对于当前屏幕。如果你需要提供切换内容的方式,请考虑使用标签栏替代。请参阅 Tab Bars。

给予文本按钮足够的空间。如果你的工具栏含有多个按钮,文本按钮就会挤在一起,导致按钮间难以区分。在按钮之间插入固定间距使其分离。开发指导请参阅 UIBarButtonItem 中的 UIBarButtonSystemItemFixedSpace。

iOS11人机交互指南(七)- 栏(Bars)_第11张图片

开发指导请参阅 UIToolbar。

提示:

理解工具栏和标签栏之间的区别很重要,因为这两种类型的栏都出现在应用程序屏幕的底部。工具栏包含用于执行与当前环境相关的操作的按钮,例如创建项、删除项、添加注释或是拍照。标签栏可让用户在应用程序的不同部分之间快速切换,例如,时钟app中的“闹钟”、“秒表”、“计时器”标签。 请参阅 Tab Bars。 工具栏和标签栏从不出现在同一个视图中。

你可能感兴趣的:(iOS11人机交互指南(七)- 栏(Bars))