VISION

iOS 7 App交互设计指南-UI Elements-Bars

可以说智能手机领域是苹果开创并引领,他们为iPhone制定的交互与设计为其它智能机所沿用。苹果起草的面向App开发者的交互指南同样可以做为整个行业的规范,相信不久后Android App的设计也逐渐会向苹果的扁平化改变——我们一直在按照苹果的风格来做Android不是吗?

状态栏(The Status Bar)

状态栏展示了一些与设备相关的重要信息,以及当前的环境。
iPhone App交互设计指南_状态栏
你可以设置整个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)
导航条能够实现不同信息层级间的导航,并能管理屏幕上的内容。
 
iPhone App交互设计指南_导航栏
 
导航栏包含在导航控制器中。导航控制器是一个用来管理自定义视图的层级展示的编程对象。想了解更多关于在代码中定义导航控制器的内容,可查看“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)
工具栏中的控件可以执行跟屏幕或视图上对象相关的动作。
 
iPhone App交互设计指南_工具栏
 
工具栏被包含在一个导航控制器中(管理自定义视图层次展示的对象)。想了解如何在代码中定义工具栏,可以参看“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底部使用分段控件效