iOS7用户界面过渡指南(pdf版)

2013-07-05 09:48:55来源:搜狐mued作者:

iOS 7引入了许多用户界面上的改变,比如无边框的按钮,透明操作栏,全屏视图控制器布局。使用Xcode 5可以创建iOS 7项目,并使用模拟器一窥iOS 7用户界面的变化。

操作栏和栏上按钮(Bars & Bar Buttons)

iOS 7中,状态栏是透明的,其他的操作栏(导航栏、tab栏、工具栏、搜索栏、搜索栏下面的范围选择栏)是半透明的。通常情况下,你希望能看到操作栏背后是你的内容。

大多数操作栏会将遮蔽住的内容进行模糊处理,除非你提供一张自定义背景图。

为了标识操作栏的位置,iOS 7引入了barPosition属性,它可以帮助你指定什么时候自定义背景图片需要平铺在状态栏上。值UIBarPositionTopAttached表明操作栏贴近屏幕顶部,背景向上延伸入系统状态栏区域。相对的,值UIBarPositionTop表示操作栏位于当前局部内容的顶部(比如,在弹出式气泡的顶部)它不为状态栏提供背景。

默认情况下,所有的栏上按钮都是无边框的。详情请看第18页的“栏上按钮”。

系统状态栏(Status Bar)

因为系统状态栏是透明的,所以可以透过它看到后面的视图。状态栏的风格依照它内容的外观呈现,包括时间、电量、Wi-Fi信号等。使用常量UIStatusBarStyle来指定使用黑色风格还是白色风格:

UIStatusBarStyleDefault 显示黑色的文字内容。当状态栏后面的内容是淡色的时候适合使用。
UIStatusBarStyleDefault
UIStatusBarStyleLightContent 显示白色的文字内容。当状态栏后面的内容是深色时使用比较合适。
UIStatusBarStyleLightContent
有些情况下,导航栏和搜索栏的背景图片可以向上延伸到状态栏背后(详情见22页的“导航栏”章节和23页的“搜索栏和范围选择栏”章节)。如果状态栏下面没有其他栏,内容视图需要使用全屏高度。要了解视图控制器是怎样恰当地布局的,请看11页的“使用视图控制器”。在iOS 7中,通过独立的视图控制器,可以在app运行的时候改变状态栏的风格。实现方法是在Info.plist中加入键UIViewControllerBasedStatusBarAppearance,并设置值为YES。

  • 导航栏(Navigation Bar)
  • 导航栏帮助用户在不同信息层次结构中穿梭,并选择性地管理屏幕内容。

iOS 7                                                          iOS 6

标题栏

  • 表格1
    iOS 7 让在导航栏上增加搜索栏的变得非常简单。详情参考第16页的“搜索栏和范围选择栏”。*  如果想用自定义的图像来替换返回的箭头“<”的话,还需自己创建一个相应的遮罩。在导航过场动画的时候,iOS 7使用遮罩来让上个层级的标题渐隐渐出。了解更多返回按钮和遮罩图像的控制属性,请参阅 “UINavigationBar类参考” 。

如果你使用UIBarPositionTopAttached样式创建了一个导航栏背景,确保图像包含了系统状态栏的区域。具体来说,你需要一个高分辨率下128像素的图像。

下面这个表格描述了iOS 7如何对待不同高度的可变导航栏背景。(更多请看“UIImage类参考”) 

表格 5-1 可变大小的背景图片处理策略

表格2
搜索栏和范围选择栏(Search Bar & Scope Bar)避免使用超高的背景图片来制作导航栏下面的自定义投影,这种技术在iOS 7中不起作用,因为超高的图片会向上(系统状态栏方向)扩展,而不是向下(导航栏下面)扩展。如果你想给导航栏增加投影,可以创建一个自定义图片,然后使用shadowImage属性来自定义投影图片。

搜索栏接收用户输入的文字,下方可以附带一个范围选择栏。

iOS 7                                                          iOS 6

搜索栏和范围选择栏

表格3
在iOS 7中,UISearchDisplayController包含了displaySearchBarInNavigationBar属性,这样你就可以将搜索栏放进导航栏,就像日历app里面这样:如果你使用UIBarPositionTopAttached的位置为搜索栏创建了一个背景图片,请确保图片的高度包含了状态栏的高度。如果你创建了一个可变大小的背景图片,参阅15页的表格5-1获取更多iOS 7调整背景图片大小的策略。 

日历app

范围选择栏则允许用户选择搜索结果的范围。

注意:范围选择栏不能单独出现;必须依附在搜索栏下面出现。

iOS 7                                                          iOS 6

范围选择栏

表格4

Tab栏(Tab Bar)

Tab栏让用户可以在不同子任务、视图、模式之间切换。

iOS 7                                                          iOS 6

Tab栏

表格5

如果使用了自定义icon的话,可以使用UITabBarItem中的selectedImage属性来设置按下状态的图像。如果不提供按下状态的icon,则两个状态会使用相同icon。

工具栏(Toolbar)

工具栏上放置当前屏幕或者视图下相关的对象的操作按钮。

iOS 7                                                          iOS 6

工具栏

表格6

如果你创建了可变大小的背景图片,请参考15页的表格5-1获取iOS 7处理不同尺寸图片的细节。

栏上按钮(Bar Buttons)

在iOS 6中,栏上按钮可以是有边框的,也可以是无边框的。在iOS 7中只能是无边框的。

iOS 7中的导航栏按钮                                iOS 6中的导航栏按钮

栏上按钮

为了更加明确,在iOS 7中,app的栏上按钮经常使用文字而不是图形。例如,iOS 7中的日历应用使用了Inbox(收件箱)代替了收件箱图形:

iOS 7                                                          iOS 6

日历应用

在早期版本的iOS中,自定义栏上按钮图片会自动被当做“template image”。(template image被用作最终图像的一个遮罩。)而iOS 7中,你可以使用以下UIImage属性来指定是否需要把自定义的图片当做template image来处理:

  1. UIImageRenderingModeAlwaysTemplate。图片被用作Template Image。
  2. UIImageRenderingModeAlwaysOriginal。图片按照原样渲染。

如果你没有指定对图片的处理方法的话,图片会使用包含它的视图的默认处理方式。比如,tab栏默认会使用template处理方式,而进度滑块则会使用原样完整渲染的处理方式。

注意:template image会依照其父结构的着色进行着色(更多请看18页的“使用着色”)。如果不想让栏上的元素被着色,为图片设置UIImageRendering-ModeAlwaysOriginal属性。

内容视图(Content View)

内容视图用来显示自定义的app内容。因为大多数内容视图的外观系统都没有提供,所以iOS 7视觉上的变化对他们几乎没有影响。有个比较大的例外是分组聚合表格视图,它在iOS 7上外观有巨大的变化。

活动菜单(Activity)

活动菜单代表了一个可以响应当前选择内容的功能,它可以是系统提供的或者自定义的。用户可以通过系统提供的活动视图控制器来使用这些功能,当用户点击分享按钮的时候,活动视图控制器就会从屏幕底部向上升起。

 

系统提供的活动菜单中可以提供两种风格的按钮:

  1. 原样渲染的app图标——比如下面这个邮件的icon
  2. 和tab栏上的按钮一样的风格——比如下面复制、打印这样的icon

第三方功能总是使用第二种风格的icon。

活动菜单

如果要在你的app中提供某个服务,创建一个简洁、线框状的template image。创建template image的时候请遵守下述指导原则:

  1. 使用黑色或者白色,配合适当的alpha透明度
  2. 不要使用投影
  3. 使用抗锯齿效果

活动菜单上的template image应该在区域中居中,分辨率大约在70 x 70像素左右。

集合视图(Collection View)

集合视图用来管理和有序排列项目,将它们以可定制的布局进行呈现。

在iOS 7中,集合视图支持自定义过场动画。了解更多请参考“UICollectionViewTransition-Layout类参考”。

照片应用使用了集合视图来展示图片集,并支持他们之间的过场动画。

集合视图

图片视图(Image View)

图片视图显示一张图片或者一系列动态的图片。

在iOS 7中,UIImageView包含了着色属性tintColor。当图片视图包含template image的时候,tintColor会被应用到图片上。

地图视图(Map View)

地图视图展示地理数据,支持自带地图应用的大多数功能。

照片应用中的地图视图帮助用户查看照片的地理位置信息。

地图视图

在iOS 7,只能够使用一个新的类MKOverlayRenderer来在地图视图上面创建覆盖层。

如果要给地图视图增加3D外观的话,只需给它的camera属性分配一个相机对象即可(MKMapCamera的一个实例)。要了解更多,参考“MKMapView类参考”。

关键词:iOS7设计规范

赞助商链接: