栏
iOS 应用的栏包含了上下文信息来指引用户他们所在的位置,以及控件来 帮助用户导航或执行操作,在界面视图中通常从上至下有状态栏、导航栏、搜 索栏、工具栏和标签栏。
状态栏( Status bar)
状态栏展示了关于设备及其周围环境的重要信息,如移动运营商、网络信 号、时间、锁屏、电量等。状态栏是透明的,并始终固定在整个屏幕的上边缘。
实例
默认的状态栏内容是黑色的,在浅色应用中效果出色,而相应的浅色状态 栏则更适用于颜色较深的应用。大部分应用的状态栏与界面风格设计融为一体, 将导航栏的颜色延伸至状态栏。也有一些应用根据自身特点特立独行地使用了 与界面风格设计有着强大反差的背景色,例如阅读类应用通常使用白色背景的 界面设计风格,为了带给用户更加沉浸式的阅读体验,将状态栏设计成黑色, 甚至将状态栏隐藏起来。
实例
慎重隐藏状态栏,始终隐藏状态栏意味着用户必须退出应用才能知道现在 的时间、电量,或者了解当前环境下是否有 Wi-Fi 连接。在用户全屏观看媒体 时,可以考虑隐藏状态栏以及所有的控件 , 但要确保用户在轻击屏幕时即可重 新唤起状态栏以及相关的控件。如果没有特殊的理由,最好不要重新定义一个 手势来让用户唤起状态栏,因为用户不会发现,就算发现了也很难记住。
导航栏(Navigation bar)
导航栏能够实现在应用不同信息层级结构间的导航,有时候也可用于管理 当前屏幕内容。导航栏是半透明的,通常位于屏幕上方,在状态栏的正下方。 在横屏视图中,导航栏也可以包含在某一视图中,不需要与整个屏幕等宽。例 如,它可以出现在 iPad 中对分视图控制器的其中一侧。
实例
可以用导航栏在不同视图间提供导航,或在上面放置管理当前视图内容的相关控件。如果导航栏需要承载大量控件,同时又不是非要提供导航不可,则可以考虑在视图底部使用工具栏。例如,系统照片导航栏无法展示太多操作控件,则使用工具栏,执行对当前照片的分享、喜欢、编辑和删除。
实例
当用户到达一个新的层级,导航栏标题应该变成当前层级的标题。当前标题左侧应放置有返回按钮,根据实际需要,返回按钮可以以前一层级的标题内容为命名。
实例
若觉得标题冗余,也可以将标题留空。例如,系统备忘录的导航栏中就没 有当前备忘录的标题,因为备忘录的第一行就已经提供了所有用户需要的内容。 还可以考虑在导航栏位置使用一句简短的提示语,来告诉用户在当前屏幕中他 们可以做什么。例如,系统股票应用的导航栏上有这么一句提示,来确保用户 知道怎么去搜索自己想要的信息。
实例
在应用最高层级的导航栏中放置一个分段控件,能够帮助界面更好地扁平信息层级,也会让用户更容易通过分类筛选找到需要的内容。如果在导航栏中使用了分段控件,请确保返回按钮标题命名的准确。
实例
避免让过多的控件放置在导航栏上,通常导航栏上不多于 3 个元素:当 前视图的标题、返回按钮和一个针对当前视图的操作控件。如果在导航栏中使 用了分段控件,就不要再放标题以及其他多余控件了。确保文字按钮之间拥有 足够的空间,如果导航栏左边或右边的文字按钮之间的间距太小,或是和导航 栏标题连在一起,就会让用户难以区分并容易引起误操作。
在用户需要专注于内容的时候,可以考虑隐藏导航栏。在实际设计时,请确保用户通过一个简单的手势即可重新唤起导航栏。例如,系统 Safari 打开 网页时显示导航栏方便用户输入网址,当用户向下浏览网页时导航栏隐藏收起, 让用户集中专注在页面内容的浏览上。
实例
工具栏(Tool bar)
工具栏上放置着用于操作当前视图中各对象的控件,如编辑、删除、分享 等。工具栏是半透明的,在 iPhone 上,工具栏始终位于屏幕底部,而在 iPad 上则有可能出现在顶部。当键盘被唤起、用户使用了手势、或者当前视图变为 竖屏的情况下,工具栏可以隐藏。
实例
可以在工具栏里提供一系列让用户对当前视图内容进行操作的工具,在工具栏里放置用户在当前情景下最常用的指令,尽量避免在工具栏里提供一些仅会偶尔用到的指令。可以在工具栏里放置分段控件以方便用户快速切换当前内容的不同视图或模式,在工具栏中提供应用全局的任务或者模式分段控件是不恰当的,因为工具栏中的所有操作都应当是针对当前屏幕和视图的。如果需要让用户可以快速唤起应用全局的任务、或改变全局视图和模式,则可以使用标签栏。
如果需要在工具栏上展示 3 个以上的项目,可以使用图标按钮。由于文 字按钮通常会比图标按钮更占空间,所以使用图标按钮可以避免文字按钮挤在 一起。保证工具栏按钮之间有足够的间距,如果按钮之间间距过小,就会让用 户觉得它们难以区分并容易引起误操作。
决定使用图标按钮还是文字按钮除了考虑数量上的排版之外,还要考虑图标按钮是否能够表意准确。例如,系统日历工具栏上的“今天”是很难用图形表达出来,因此使用文字按钮更适合。同时,为了保持统一,“日历”和“收件箱”也使用了文字按钮。
实例
工具栏与导航标准按钮(Bar button icons)
iOS 提供了一系列工具栏与导航栏上的内置标准按钮图标和设计规范,可 以直接使用系统提供的按钮图标,也可以重新设计,以符合自己的界面设计风 格,但务必要遵守 iOS 图标设计规范。
实例
标签栏(Tab bar)
标签栏让用户在不同的子任务、视图中进行切换。标签栏是半透明的,通 常位于屏幕的下边缘,展示图标和文字内容,每一项均保持等宽。当用户选中 某个标签时,该标签呈现适当的高亮状态。在 iOS 中,选中态的标签图标填 充背景色,其他未选中态填充描边色。
实例
标签栏非常适合用于应用的主界面中,因为它可以很好地扁平信息层级, 并且同时提供多个触达同级信息类目的入口。一个标签栏一次最多可承载 5 个标签,多于 5 个标签的时候,可以展示前 4 个标签和一个“更多”,并将 其他的标签以列表形式折叠到“更多”里面。
不要使用标签来让用户执行对于当前应用与屏幕内容的操作,如果需要给用户提供对当前视图的操作控件,请放置在导航栏上。例如,系统通讯录导航栏右边的“添加联系人”按钮。
实例
在横屏与竖屏情况下,高度均保持一致。尽可能地在横屏与竖屏情况下都 展示相同数量的标签,在不同的屏幕方向下提供同样的标签可以让用户对应用 建立很好的视觉稳定感。在横屏中,应该将与竖屏时数量相同的标签居中展示。 不过,大部分使用到标签栏的 iPhone 应用通常都不支持横屏展示,因为横屏 不如竖屏可以展示更多的内容并不易于浏览;而 iPad 应用因为屏幕大,所以 通常支持横屏与竖屏。
即使标签当前不可用,也不要删除它。让某些标签时而出现时而隐藏,会 让用户觉得应用出现 Bug。最好的解决方式是确保每个标签都可用,然后给用 户解释某个标签的内容不可用的原因。例如,当用户没有在设备中保存任何歌 曲,在系统音乐的歌曲标签页里就可以教育用户如何去下载一首歌。
考虑在标签上加入红色的小气泡以轻量地传达信息,通过添加小气泡或小红点来告诉用户该标签中包含新的内容。
实例
标签栏标准按钮(Bar button icons)
iOS 提供了一系列标签栏上的内置标准按钮图标和设计规范,可以直接使 用系统提供的按钮图标,也可以重新设计,以符合自己应用的设计风格,但务 必要遵守 iOS 图标设计规范。
搜索栏(Search bar)
搜索栏获取用户输入的文本,用以作为搜索的关键字,可以全局或在当前页搜索包含关键字的所有内容。搜索栏是透明的,通常位于状态栏正下方,在导航栏上或正下方。
搜索栏可能包含以下这些元素。
占位符文本
占位符文本通常会写明控件的功能,例如,输入框里的“搜索或输入网站 名称”字样,或者提示用户输入的文本将在哪里搜索,例如“Google”。
清除按钮
大多数搜索栏都会提供清除按钮,方便用户一键清空输入内容。一旦用户 在文本框中输入内容,清除按钮就会出现,用户可以用它来一键清空输入内容; 而当搜索框中没有任何文本内容时,清除按钮将被隐藏。
结果列表
结果图标说明此次搜索有搜出结果,当用户点击它时会出现用户最近一次搜索的搜索结果。
联想
用户在输入内容时会出现包含搜索关键词的联想结果列表,方便用户快速查找所需的内容。
提示
描述性标题,我们称之为提示。描述性标题是一个短而完整的句子,为搜索栏提供介绍或指引应用特定信息。
范围栏(Scope bar)
范围栏是 iOS 特有的一种栏,一般是指在一定的范围内搜索,方便用户 选择搜索范围,快速找到想要的信息。它伴随着搜索栏一起时才出现,当用户 想在明确的分类范围内进行搜索时,使用范围栏是非常有效的。然而,最佳的 解决方案是优化你的搜索结果,让用户不需要使用范围栏对搜索结果进行筛选, 就可以找到他们所需要的内容。
评论0