重读iOS10人机交互指南之《UI Bars》
UI Bars分为Navigation Bars(导航栏)、Search Bars(搜索栏)、Tab Bars(标签栏)、Toolbars(工具栏)
Navigation Bars(导航栏)
(1)导航栏出现在应用程序屏幕的顶部,状态栏的下方,并可以通过一系列分层的应用程序屏幕进行导航。当显示新屏幕时,通常标有前一屏幕标题的后退按钮出现在栏的左侧。有时,导航栏的右侧包含一个控件,例如编辑或完成按钮,用于管理活动视图中的内容。在拆分视图中,导航栏可能会出现在拆分视图的单个窗格中。导航栏是半透明的,可以具有背景色调,并且可以被配置为在适当时隐藏,例如当键盘在屏幕上时,发生手势或视图调整大小。如图
(2)考虑在导航栏中显示当前视图的标题。在大多数情况下,标题通过让人们知道他们在看什么来提供上下文。但是,如果导航栏标题似乎是多余的,则可以将标题留空。例如,Notes不会标记当前的笔记,因为第一行内容就能够提供这些信息。
(3)考虑将分段控件放在应用程序顶层的导航栏中。如果这样做有助于平坦化的信息层次结构,这使得人们更容易找到要查找的内容,这一点尤其有用。如果在导航栏中使用分段控件,请务必选择精确的后退按钮。如图
(4)避免导航栏控制太多而导致拥挤。通常,导航栏最多包括视图的当前标题,后退按钮和管理视图内容的一个控件。如果在导航栏中使用分段控件,则该栏不应包含标题或除分段控件之外的任何控件。
(5)不要包含多段面包屑路径。后退按钮总是执行单个操作 - 返回到上一个屏幕。如果认为在没有当前屏幕的完整路径的情况下,人们可能会迷失方向,考虑对应用程序的层次结构进行展平。
(6)给文本标题按钮足够的空间。 如果导航栏包含多个文本按钮,则这些按钮的文本可能会一起运行,使按钮无法区分。通过在按钮之间插入固定的空格项来添加分隔。
(7)考虑在显示全屏内容时暂时隐藏导航栏。当用户想要关注内容时,导航栏可能会分散注意力。暂时隐藏导航栏,提供更身临其境的体验。例如当查看全屏地图时,Google地图应用会隐藏导航栏和其他界面元素。如果实现这种类型的行为,可以让用户使用简单的手势(例如轻按)来还原导航栏。
(8)使用标准后退按钮。人们知道标准的后退按钮让他们通过层次结构来返回上一部。但是,如果实现自定义后退按钮,请确保它仍然像后退按钮,行为直观,与整个界面的其余部分相匹配,并始终贯穿在整个应用程序。
Search Bars(搜索栏)
(1)人们使用搜索栏来搜索自己需要的内容。有两种样式的搜索栏 - 突出Prominent(默认)和最小。IOS自带的应用中,联系人采用突出的风格,其中包括一个明显的有色背景。照片使用最小的风格。搜索栏默认是半透明的,但可以做为不透明的。适用时,可以将搜索栏配置为自动隐藏导航栏。
(2)如果搜索功能使用频率不高,则使用Minimal极简样式。使用极简样式,激活搜索图标左移,出现占位符,同时出现字段内容的清除按钮和立即停止搜索的取消按钮。
(3)在搜索栏下方提供有用的快捷方式和其他内容。使用搜索栏下的区域来帮助人们更快地获得内容。例如,Safari在点击搜索字段后立即显示书签。选择一个,直到没有输入任何搜索字词。股票在输入搜索字段时显示结果列表。随时点击一个,而不再输入任何字符。
(4)scope bar(范围选择栏)。范围选择栏可以添加到搜索栏中,让人们更完善搜索的范围。当有明确定义的搜索类别时,范围栏可能很有用。但是,最好提高搜索结果,不需要进行范围界定。
Tab Bars(标签栏)
(1)标签栏一般由背景(背景可以是半透明的,也可以具有背景色调)、标签栏图标、标签栏文字组成。标签栏在同一设备上的所有屏幕方向上的高度都一样(例子:iPhone6标签栏的高度为98px,屏幕旋转90度后,高度还是98px)。在手机上标签栏的标签的个数一般在3-5个,在大屏(如ipad)上个数可以更多。
(2)标签栏会显示在屏幕的底部,主要是用于快速的切换应用的不同部分(用于导航,不能用于删除、添加等操作)。标签栏上各个标签在信息层级上属于同一层级。标签栏有在正常情况下有选中和位选中这两种状态。设计时需注意事项:
a:在标签栏功能不可用时,不要删除或者禁用选项卡。如果标签在某些情况下可用,但在其他情况下不可用,就会让应用程序的界面变得不稳定和不可预测。确保始终启用所有标签,并解释标签的内容无法使用的原因。例如,如果iOS设备上没有歌曲,音乐应用程序中的“我的音乐”标签会解释如何下载歌曲。在这里有一个空状态的概念,或者叫零数据状态。例如上文的音乐的例子。就是一个空状态。还有一种状态就是错误状态,比如点开一个标签,由于系统或者是用户产生错误,这时我们就需要清楚的说出错误产生的缘由或者是说明解决问题的步骤来引导用户。
b:严格使用标签栏进行导航。标签栏的作用只是用于导航,不应该用于执行操作(注:这里有必要区分一下标签栏和工具栏:因为两种类型的栏都会显示在应用屏幕的底部。标签栏可让用户在应用程序的不同部分之间快速切换,例如“时钟”应用程序中的“报警”,“秒表”和“计时器”选项卡。工具栏包含用于执行与当前上下文相关的动作的按钮,诸如创建项目,删除项目,添加注释或拍摄照片)
(3)避免使用太多标签。受屏幕大小限制的原因,在手机端一般是显示3-5个标签。标签过多,容易引起误触。
(4)始终在连接的视图中切换上下文。选择一个标签应该始终影响到直接附加到标签栏的视图。
(5)可以使用标记来沟通。使用小红点、数字、或者感叹号来提醒,以指示新信息与该视图相关联。
Toolbars(工具栏)
显示在应用程序屏幕的底部。 工具栏上的按钮数量为三个以上时,宜用图标呈现。 三个按钮或更少时,用文本显现更清晰。 工具栏是半透明的,也许有一个有色背景,当用户不需要用到它们的时候,工具栏通常是隐藏着的。 注意工具栏与标签栏的区别:工具栏包含用于执行与当前内容相关的动作的按钮。 标签栏允许用户在应用程序的不同部分之间快速切换。