您的位置:华清远见教育科技集团 >> iOS资料 >> iOS界面元素使用指南:状态栏  
 
iOS界面元素使用指南:状态栏
分享到:

在iOS里,UIKit框架提供了很多你可以在程序中调用的界面元素。当你设计程序界面时,时刻谨记用户希望那些眼熟的视图和控件与内置程序中的行为一致。在你的程序里妥当地使用它们,这会对你有好处的。

状态栏、导航栏、tab栏以及工具栏在iOS中有各自的外观和行为。这些栏不是要求每个程序都必须有。但是,如果使用它,就要用对。这是因为用户在iOS设备上对这些栏都很熟悉,包括上面展示的信息以及所具有的功能。

状态栏

状态栏展示于设备和当前环境相关的重要信息。

外观和行为

状态栏总是出现在屏幕顶部,包含网络连接、时间、电量等用户需要的信息。

在iPhone上,状态栏的颜色会变。而在iPad上,状态栏总是黑色的。

指南

如果你的程序不是游戏或者媒体播放器的话,隐藏状态栏前要考虑清楚。

这类应用在运行中会始终隐藏状态栏,你要懂得这种设计的弊端。始终隐藏状态栏意味着用户必须退出你的程序才能看看是否需要给设备充电。

大多数iPad程序不需要为了获得额外空间隐藏状态栏,因为状态栏的尺寸也太小了点。在iPad上,状态栏也表现得很低调,不会和你的程序争抢注意。由于程序界面上边缘的圆角和状态栏的小尺寸,使得状态栏看起来像是设备的边框。

当用户全屏观看媒体时,要把状态栏藏起来。如果你这么做的话,记得在用户轻击屏幕的时候再把状态来呈现出来。除非你有很必要的理由,好别定义一个手势来召唤状态栏。用户发现不了,发现得了也记不住。

合适的话,展示网络连接情况,这可以提醒用户远程网络连接正在工作。详情请参见 “网络活动指示器”。

在iPone上,定义状态栏的颜色。你可以选择灰色(默认色),透明黑或者半透明黑(alpha=0.5)

要选择和程序风格一致的状态栏。例如,如果导航栏是不透明的,就不要用半透明的状态栏。

在iPhone上,设定好状态栏的颜色改变是否用动画来展示。播放动画的话,老状态栏向上滑行直到从屏幕中消失,新的状态栏滑入位。

导航栏

导航栏用于在层级结构的信息中导航,也可以用来管理屏幕信息

欲知更多,详见“Navigation Controllers”和“UINavigationBar Class Reference.”

外观和行为

导航栏位于屏幕的顶部,上面紧邻状态栏。导航栏通常居中显示当前这一屏的标题。当在层级信息间穿梭时,用户可以触摸导航栏左边的返回按钮回到上一层。用户还可以使用导航栏上与当前内容相匹配的控件来管理屏幕内容。

所有在导航栏里的控件都放在凿出的坑里,这在iOS里被称为边框样式(bordered style)。

如果你把一个没边框的控件嵌在导航栏里,它会自动变成边框样式。

在iPhone里,把屏幕从竖屏转成横屏模式会自动改变导航栏的高度(估计是想在横屏模式留出更多的空间给内容)。在iPad上,导航栏的透明度和高度不会随旋转改变。

在iPhone上,导航栏的是整屏通栏显示的。在iPad上,导航栏可能会嵌在分栏中的某一栏里,不会横贯整屏。

指南

你可以使用导航栏在不同视图间切换,或者在上面放置可以操纵内容的控件。

使用当前视图的标题作为导航栏的标题。当用户浏览到新的层级时,应该做这样两件事:

导航栏标题变成新层级的标题。

标题左侧出现返回按钮,写着前一级的标题。

确保导航栏上的文字容易懂。系统字体的可读性强,合适的话你也可以自定义字体。

使用工具栏取代导航栏。如果你需要放置很多控件,或者不需要导航时,就用工具栏吧。

考虑在程序的顶一级的工具栏放置分段控件(segment control)。如果能够帮助你扁平化信息结构,让用户更容易找到想要的东西,这样做就会很有用。如果你在导航栏上使用分段控件,要给子层次的导航栏返回按钮找好标题。详情请查看 “分段控件” 。

避免用过多的控件填满导航栏,即使看起来好像有足够的空间。除了标题外,导航栏上多放一个返回按钮,一个操作内容的控件。如果你要在导航栏上放分段控件,就不要放标题或其他控件了。

根据控件的意义选择系统提供的按钮。详情请查看 “工具栏和导航栏中使用的标准按钮”。

如果你决定定制自己的导航栏控件,请到 “导航栏、工具栏和tab栏上用的图标”查看设计建议。

有必要的时候,定义导航栏的颜色和透明度。

如果你想让导航栏与程序协调起来,可以定制一下导航栏的颜色。如果想让用户更关注栏下的内容,甚至可以把栏弄成半透明的。

如果你要这样定制导航栏,确保它和程序的其外部分外观协调起来。要是使用半透明的工具栏,就不要使用不透明的工具栏。而且,当设备在同一方向上时,不要让不同屏上的导航栏颜色和透明度变来变去的。

避免改变返回按钮的外观和行为。用户依赖标准的返回按钮帮助他们在层级信息中找到回家的路。

不要创建分段的返回按钮(类似于面包屑)

使用分段返回按钮会导致很多问题:

分段控件太长,都没空放标题了

没法展示某一段的选中态

段越多,每一段的可点击区域越小,用户想按某一个不好按

当层级很深时,选择层级的哪一部分来展示是个问题

也许你觉得没有分段返回按钮展示的面包屑,用户就会迷路,那说明在你的程序里用户必须进入很深的层级才能获得信息。那么,还是把你的层级扁平化吧。

在iPhone上,要考虑到由于设备方向变化导致的导航栏自动改变。确保你定制的导航栏图标适应横屏条件下的窄栏。不要把导航栏的高度写死。

工具栏

工具栏上放着用于操作当前屏幕上物体的控件。

外观和行为

在iPhone上,工具栏总在屏幕的底部。但是在iPad上它也可能出现在顶部。

工具栏上的控件等宽放置。控件会随着屏上内容的切换而改变,因为内容与用来操纵它的控件是匹配起来的。

在iPhone上,横屏切换到竖屏时工具栏高度会自动变小。在iPad上,工具栏的高度和透明度是恒定的。

指南

在工具栏上要放那些用户能对当前内容所做的操作,不要那它来切换程序模式(Don’t use a toolbar to switch among different modes in an application)。如果你要实现切换的效果,可以用去看“tab 栏”。

在工具栏上放那些当前情景下用户常用的功能。你也可以通过在工具栏上放置分段控件,来切换浏览数据的方式,或者程序模式(- -! 为何与上一段自相矛盾呢?原文:You can also put a segmented control in a toolbar to give people access to different perspectives on your application’s data or to different application modes)。欲知更多,详见“分段控件”。

每个工具栏上的控件至少要保持44×44像素的面积。如果控件太密集,用户点击就很困难。

调用系统提供的控件要遵循使用规范。详情请查看 “工具栏和导航栏中使用的标准按钮”。

如果你决定定制自己的导航栏控件,请到 “导航栏、工具栏和tab栏上用的图标”查看设计建议。

尽量避免在同一个工具栏上混合使用有边框和无边框的控件。使用任何一种都可以,但是不要混着用。

适当的时候,可以定制工具栏的颜色和透明度。如果你想让工具栏和整个程序的外观一致起来,可以去定制颜色。如果要鼓励用户浏览内容,可以把工具栏做成半透明的。如果你用了半透明的工具栏,就不要用不透明的导航栏。设备方向不变时,不要改变在不同屏上使用不同颜色或透明度的工具栏。

在iPhone上,要考虑到由设备方向改变引起的工具栏高度变化。确保你定制的工具栏图标与横屏模式下的窄工具条相适应。不要把工具条的高度写死。

Tab 栏

Tab栏用于切换子任务、视图和模式。

外观和行为

Tab栏位于屏幕的底部,并且始终可见。Tab栏上展示图标和文字,同宽,黑底。当用户选中某个tab时,这个tab的背景色亮起,图片处于高光态。

在iPhone上,tab栏一次只能显示5个以内的页签。如果程序有更多的tab,tab栏可以展示前四个,第五个放一个“更多”,用列表的方式呈现其余的项目。在iPad上,tab栏可以显示多于5个tab。

Tab上可以打上小创可贴(红底白字),用以展示与程序相关的信息。

Tab的透明度和高度不随设备方向改变。

指南

使用tab栏来切换对同一组数据的不同浏览方式,或者同一功能的不同子任务。

不要使用tab来执行对当前屏幕上元素的操作。如果你要达到这样的目的,可以选用工具栏“工具栏”。

一般而言,tab栏是用来管理程序层面信息的。Tab适合用于主程序界面,因为它可以很好地扁平信息层次,在同一时刻提供进入多个平级信息类的入口。

在iPad上,你可能会在分栏或浮出层里下使用tab栏,用于切换或过滤内容。但是,在浮出层或分栏底部放置分段控件会更好,因为在视觉上分段控件长的更协调。更多信息请详见“分段控件”

考虑在tab上打红色小创可贴,柔和地沟通信息。你可以在tab上打上小创可贴,用以显示那个tab下的视图或模式有新信息。

调用系统提供的tab图标要遵循使用规范。详情请查看 “工具栏和导航栏中使用的标准按钮”。

如果你决定定制自己的导航栏控件,请到 “导航栏、工具栏和tab栏上用的图标”查看设计建议。

 更多相关文章

·iOS_UI开发之人机界面设计原则
·iOS开发用户界面设计原则
·iOS 应用程序开发教程:四、添加用户界面元素
·iOS技术使用指南(四)
·iOS技术使用指南(三)