IT宅男,移动/互联网产品经理,初为人父,想给女儿更精彩的世界,目前正在捣鼓一些东西.......
希望孩子健康快乐的成长!
产品经理爸爸,给孩子做产品!把产品当孩子!

iOS 7人机交互指南-UI Elements-Bars

iOS 7人机交互指南-UI Elements-Bars

 

重要:这是针对于正在开发中的API或技术的预备文档(预发布版本)。虽然该文档在技术精确度上经过了严格的审核,但并非最终版本,仅供苹果开发者计划的注册会员使用。苹果提供这份机要文档的目的,是帮助你按照文中描述的方式对技术的选择及界面的设计开发进行规划。这些信息有可能发生变化,届时,你的设计开发方式需要基于最终版本的操作系统及文档进行相应的调整和测试。该文档或许会随着API或相关技术在未来的发展而进行更新。(其中一些重要变化,我们也会进行更新。译文如有纰漏,敬请指正)

 

状态栏(The Status Bar)

状态栏展示了一些与设备相关的重要信息,以及当前的环境。

你可以设置整个app状态栏的风格,或者你可以让单独的视图控制器酌情设置。你可以分别查看UIApplication Class ReferenceUIViewController Class Reference,来学习更多关于UIStatusBarStyle常量和preferredStatusBarStyle属性相关内容。

 

外观和行为

状态栏是透明的。不管设备处于什么方向,状态栏总是在屏幕的上边缘,并且包含了用户所需信息,比如网络连接、时间和电视电量等。

 

使用指南

虽然你不会像使用其他UI元素那样使用状态栏,但理解它在你app中的功能非常重要。

 

隐藏状态栏之前要三思。由于状态栏是透明的,所以通常并不需要隐藏它。永久性地隐藏状态栏意味着用户必须离开你的app才能查看时间,或者了解网络连接情况。

 

考虑隐藏状态栏—以及其他app UI,当用户正在兴致勃勃地全屏观看视频的时候。如果你有隐藏状态栏的需要,要保证用户点击屏幕就能找回状态栏和适当的UI元素。避免使用自定义手势来重新展示状态栏,因为用户不喜欢探索并记住这些手势,除非你有足够充分的理由。

 

不要创建自定义状态栏。用户依赖于系统提供的一致性的状态栏。虽然你可能在app中隐藏状态栏,但也并不推荐使用自定义UI来代替系统提供的状态栏。

 

为你的app选择适合状态栏内容的颜色。系统默认的状态栏是黑色的,适合浅色的app内容。颜色比较亮的状态栏适合深色的app内容。

 

尽可能不要在状态栏下方放置让用户分心的内容。尤其是,你不想暗示用户应该点击状态栏访问内容,或者激活app中的控件。

 

如果合适,显示网络活动指示器。网络活动指示器可以出现在状态栏上,用来向用户展示网络访问正在发生。想了解如何在代码中实现这个指示器,可以查看“Network Activity Indicator”。

 

 

导航栏(Navigation Bar) 

导航条能够实现不同信息层级间的导航,并能管理屏幕上的内容。

 

 

导航栏包含在导航控制器中。导航控制器是一个用来管理自定义视图的层级展示的编程对象。想了解更多关于在代码中定义导航控制器的内容,可查看“Navigation Controllers”和“Navigation Bars”。

 

外观和行为

导航栏位于app屏幕的上方边缘,导航栏之下。导航栏通常会居中排版展示当前屏幕或者视图的标题。当用户在层级信息间来回浏览时,他们可以点击返回按钮或者轻扫设备边缘返回上一个屏幕。另外,用户可以点击导航栏上的内容特定控件来管理屏幕内容。

 

导航栏是半透明的,栏中所有的控件都是无边界的。

 

在iPhone上,导航栏经常展示了整个屏幕的宽度,改变设备的持有方向可自动改变导航栏的高度。在iPad上,导航栏的高度不会按比例更改。

 

在iPad上,导航栏可以在某个视图中展示,比如split view的某个窗格,而不会贯通整个屏幕。

 

使用指南

导航栏可以用来在不同的视图中导航,或者提供一些控件来管理视图中的项目。

 

将当前视图的标题作为导航栏的标题。当用户浏览到新的信息层级中时,会发生两件事

1.图像标题变为新层级的标题。

2.返回按钮应该出现在标题的左边,并且按钮应该展示上一个信息层级的标题。

 

确保导航栏中的文字易读。系统字体提供了最大的可读性,不过你可以指定不同的字体,如果合适的话。

 

考虑在app的顶层的导航栏中放置一个分段控件。这么做有利于让你的信息层级扁平化,可以让用户更容易发现他们要找的东西。如果你在导航栏中使用了分段控件,要确保选择了正确的返回按钮标题。(更多使用指南,可参看“Segmented Control”)。

 

避免额外的控件让导航栏变得拥挤,即使看起来还有充足的空间。一般来说,一个导航栏最多包括当前视图标题、返回按钮以及一个用来管理视图内容的控件。相反,如果你在导航栏中使用了分段控件,那么导航栏不能展示标题了,也不应该再包含分段控件以外的任何控件。

 

要确保文本标题按钮有足够的空间。导航栏中,如果左边和右边多个按钮项目之间没有足够的空间,那么文本标题就会拥挤到一起,很难让人区分开。如果导航栏中的按钮标题看起来太接近,那可以用UIBarButtonSystemItemFixedSpace在它们中间添加适当的空间。(学习更多关于这个内容的常量,可参看“UIBarButtonItem Class Reference”)

 

根据文档意义来使用系统提供的按钮。更多信息可参看Toolbar and Navigation Bar Buttons。如果决定创建自己的导航栏控件,可参看“Bar Button Icons”。

 

如果合适,定制导航栏的外观以配合app的外观。比如,你可以提供一个自定义背景图片或者给导航栏指定颜色和透明度。某些情况下,使用一个可缩放图片是个不错的选择。关于“创建可缩放图像”相关内容,可查看“Creating Resizable Images”。注意要为iOS 7 app提供一个高度合适的背景图片。了解更多信息,可在“iOS 7 UI Transition Guide(中文版)(英文版)”中查看“Navigation Bar”这一节。

 

确定自定义导航栏的外观和你app的外观、风格一致。比如,不要把一个不透明的导航栏和一个半透明的工具栏组合在一起。当设备处于同一方向(横屏或者竖屏)时,避免改变不同屏幕上导航栏的图片、颜色或透明度。

 

要确保自定义返回按钮看起来像返回按钮。用户知道标准的返回按钮可以让他们回到上一层级信息中。如果你决定用自定义图片取代系统提供的,要确保你也提供了的自定义mask image。iOS 7可用它来让按钮标题在转场过程中显露出来,或者消失。 

 

在iPhone上,将设备持有方向改变时导航栏高度的自动变化考虑进去。特别的,确保自定义导航栏图标和横屏时的稍窄一点的导航栏也很配。不要用编程的方式指定航栏的高度;你应该充分使用UIBarMetrics常量来保证你的内容非常“合身”。

 

 

工具栏(Toolbar)

工具栏中的控件可以执行跟屏幕或视图上对象相关的动作。

 

 

工具栏被包含在一个导航控制器中(管理自定义视图层次展示的对象)。想了解如何在代码中定义工具栏,可以参看“View Controller Catalog for iOS”中“Displaying a Navigation Toolbar”一节和“Toolbar”。

 

外观和行为

在iPhone上,工具栏总是出现在屏幕或视图的底部边缘,但在iPad上,它可以出现在上边缘。  

 

工具栏是半透明的,工具栏上的项目间距均等地有序排列着。工具栏项目的精确设置可以根据不同视图而有所不同,因为这些项目要针对当前视图的下下文来决定。

 

在iPhone上,设备从竖屏改为横屏时,可自动改变工具栏的高度。在iPad上面,工具栏的高度不会因旋转设备持有方向而改变。

 

使用指南

使用工具栏来提供一系列用户可以在当前环境中采取的行动。 

 

使用工具栏给用户提供可以在当前上下文环境中使用的指令。一个替代选择是在工具栏上放置分段控件,从而方便用户从不同视角访问app的数据和应用的不同模式(可查看“Segmented Control”了解使用指南)。

 

如果你需要在工具栏上展示3个以上的项目,可使用图标。由于文本标题按钮比图标占用了更多空间,所以使用图标可以阻止标题拥挤到一处。

 

确保文本标题按钮有足够的空间。如果工具栏中的图标间没有足够的空间,文本标题就会挤到一块儿,用户很难把它们区分开来。如果工具栏中的按钮标题看起来太接近,那可以用UIBarButtonSystemItemFixedSpace在它们中间添加适当的空间。(更多关于这个常量的内容,可参看“UIBarButtonItem Class Reference”)

 

根据文档使用系统提供的工具栏项目。更多信息可参看Toolbar and Navigation Bar Buttons。如果你决定创建自己工具栏项目,可参看“Bar Button Icons”。

 

在iPhone上,为因设备方向旋转而产生的工具栏高度变化做好准备。尤其是要确保你的自定义工具栏图标可以很好的适应设备横屏模式下较细的bar。不要以编程方式指定工具栏的高度,相反要充分使用UIBarMetrics常量来确定内容适配得当。

 



工具栏和导航栏按钮(Toolbar and Navigation Bar Buttons)

iOS提供了许多用户在工具栏和导航栏中看到的标准按钮。

 

符号名称和用途描述可以参看Table 33-1。在“UIBarButtonItem Class Reference”中查看“UIBarButtonSystemItem”这一小节。

 

重要:跟所有标准按钮和图标一样,有必要根据其文档意义来使用工具栏图标和导航栏图标。尤其是,注意根据语义意义来使用按钮,而不是根据其外观。即便关联特定意义的按钮改变了外观,app的UI仍然有意义。

 

 

除了Table 33-1中列出的按钮,你也可以使用系统提供的编辑、取消、保存、确定以及恢复等按钮来支持编辑或其他类型的操作。这当中每个按钮的外观都有自己的文本标题。了解这些按钮的符号名称和按钮用法,可参看“UIBarButtonItem Class Reference”中的“UIBarButtonSystemItem”一节。

 

你也可以在工具栏中使用系统提供的Info按钮:

 

标签栏(Tab Bar)

标签栏可以让用户在不容子任务、视图以及模式中进行切换。

标签栏被包含在标签栏控制器中(标签栏控制器是一个用来管理一系列自定义视图展示的对象)。参看“Tab Bar Controllers” 和“Tab Bars”学习如何在代码中定义标签栏。

 

外观和行为

标签栏被置于屏幕的底部边缘,并且应该能在app的任何位置都能访问到。标签栏是半透明的,并在标签上展示文本和按钮,所有标签都是等距的。当用户选中一个标签,图标就会适当的高亮。

 

在iPhone上,标签栏一次最多只能显示5个标签;如果应用有更多标签,那么标签栏会显示其中四个,其余的会以列表形式出现在“更多”标签里面。

 

在iPad上,标签栏可以展示超过5个的标签。

 

一个标签可以展示徽标。徽标是一个红色圆圈,包含白色文本,或者一个数字,或者感叹号。用以传达app特有的信息。

 

标签栏的高度不会因设备方向更改而改变。

 

使用指南

标签栏允许用户从不同视图访问app的数据集或者跟app整个功能相关的子任务。当你使用标签栏时需遵循以下指南

 

不要将标签条用于控制屏幕内的元素。如果需要这么做,请使用工具条。

 

不要使用标签栏为用户提供可作用于当前模式或者屏幕中元素的控件。如果你需要为用户提供控件,可以用工具栏代替(使用指南可参看“Toolbar”)。

 

一般来说,使用标签栏来组织应用层次信息。标签栏适合在应用主界面中使用,可以很好地将你的信息层次扁平化,并且可以让用户在同一时间访问几个同级信息类别或者模式。

 

不要移除功能不可用的标签。如果标签在当前上下文环境中不可用,那么展示一个禁用标签要好过移除标签。在某些情况下,如果你移除了标签,会让用户觉得app的UI不稳定,不可预测。最好的方法是确保所有的标签都是可用的,但要解释为什么有些标签是不可用的。比如,如果用户的iOS设备上没有任何歌曲,那么音乐app中的歌曲标签可用一个屏幕来解释如何下载歌曲。

 

考虑为标签图标添上一个不显眼的小徽标来传达信息。你可以在标签栏的图标上展示一个徽标来指示与视图或者模式相关的新信息。

 

根据文档意义使用系统提供的标签栏图标。更多信息可查看“Tab Bar Icons”。如果你决定创建自己的标签栏图标,可以参看“Bar Button Icons(中文 英文)”。

 

如果合适,可以自定义标签栏的外观。比如,你可以为标签栏和标签栏图标提供一个自定义的颜色,只要图标是系统提供的或者是自定义的模板图片。你也可以为标签栏提供一个背景图片(注意最好提供一个可缩放的背景图片。了解更多关于“创建可缩放背景图片”,可以参看“Creating Resizable Images”中文 英文

 

在iPad上,如果在视图中切换内容或者过滤筛选内容,你可以在split view或者popover中使用标签栏。不过,在split view或者popover底部使用分段控件效果更好,因为分段控件的外观与这两者的外观更协调。(了解更多分段控件相关内容,可查看“Segmented Control”)

 

在iPad上,避免添加过多标签让标签栏变得拥挤。放置过多标签很难让用户找到他们想要的标签。同时,你添加的每个额外标签都会增加app的复杂性。一般来说,把主界面或者split view的右窗格上标签数目限制在7个以内。而popover或者split view的左窗格上,五个标签比较合适。

 

在iPad上,避免创建“更多”选项。在iPad app中,一个专门用来罗列“更多”标签列表的屏幕不能充分利用屏幕上的空间。

 

在iPad上,横屏或竖屏模式下展示相同的标签可以提高app的视觉稳定性。竖屏模式下,推荐使用7个标签。横屏模式下,你应该在屏幕上居中展示相同的标签。该指南同样适用于分屏视图窗格或者popover中的标签栏。比如,如果你在竖屏模式下使用标签栏,那么横屏模式下,它也能很好地展现在split view的左窗格中。

 

 

标签栏图标(Tab Bar Icons)

Table 33-2是iOS提供的用在标签栏中的标准图标。

 

了解每个图标的符号名称和用途,可参看“UITabBarItem Class Reference”中“UITabBarSystemItem”一节。

 

重要:像其他标准的按钮和图标一样,很有必要根据文档意义来使用标签栏图标。尤其是,注意基于语义意义来使用图标,而不是它的外观。即便关联特定意义的图标改变了外观,app的UI仍然有意义。

 

 

搜索栏(Search Bar)

搜索栏接受用户输入的文本(可用以搜索的文本输入)。

了解如何在代码中定义搜索栏,可以查看“Search Bars”。

 

 

外观和行为

搜索栏看起来类似文本框。默认情况下,搜索栏在左边展示搜索图标。当用户点击搜索栏时会出现键盘。当用户完成检索项目输入,系统将会以app特有的方式处理输入。

 

此外,搜索栏还能显示一些可选元素,比如:

 

Placeholder text(提示文本)。可用于描述控件的功能。比如搜索,或者提醒用户所处的搜索环境(比如“Google”)。

 

书签按钮。书签按钮可以提供信息的短链接,方便用户表下次轻松找到他们想要的信息。比如地图搜索模式下的书签按钮,可以让用户访问书签地址、最近搜索记录以及联系人。

只有在搜索栏中没有用户提供的文本或者nonplaceholder text时,书签按钮出现。当搜索栏中包含这些文本时,清除按钮就会出现。

 

清除按钮。大部分搜索栏包含可以让用户一键清除搜索栏中文本的清除按钮。当搜索栏中包含任何nonplaceholder text,清除按钮出现。当搜索栏中没有用户提供的文本或者nonplaceholder文本时,清除按钮则不可见。

 

搜索结果列表图标。该图标用以指示展现搜索结果展现。当用户点击结果列表图标,app就会展示他们最近的搜索结果。

 

描述性标题,也叫提示,出现在搜索栏的上方。例如,提示可以是一个短语,用以提供搜索栏的介绍或者app特定的内容。

 

使用指南

在app中使用搜索栏来提供搜索。不要使用文本框提供搜索,因为文本框没有用户期待的标准搜索栏的外观。

 

你可以通过使用不同颜色,指定自定义背景外观,以及提供自定义附属图片来定制搜索栏。在iOS 7中,你可以在导航栏中放置搜索条(了解更多信息,可查看“UISearchDisplayController”)。

 

如果你决定提供背景图片,提供一个可缩放背景图片是个不错的主意。关于如何创建可缩放图片,可查看“Creating Resizable Images”(中文 英文)。

 

 

范围栏(Scope Bar)

范围栏仅和搜索栏一起出现,允许用户定义搜索范围。

 


 

如何在代码中定义搜索栏和范围栏,可查看“Search Bars”。

 

外观和行为

当搜索栏出现时,范围栏会出现在边上。不管设备所处方向,范围栏会出现在搜索栏的下方,除非你在代码中使用搜索展示控件(更多信息可查看“UISearchDisplayController Class Reference”)。

 

当使用搜索展示控件时,在设备处于横屏模式下,范围栏会展现在搜索栏右侧的search field,当设备处于竖屏模式下,范围栏会展示在搜索栏的下方。

 

使用指南

当搜索被明确定义或者用户有想要搜索的典型类别时,展示范围栏会非常有用。比如,用户常常希望在邮件信息中把搜索范围缩小至某个字段。

 

你可以提供一张背景图片来定制范围栏。另外,你可以为可用状态和不可用状态下搜索栏按钮指定不同的外观,以及这两种状态的隔断/分割线。


评论
热度 ( 1 )

© 产品经理爸爸 | Powered by LOFTER