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

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

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

页面视图控制器(Page View Controller)

页面视图控制器用来管理多页的内容,可以使用滚动过场,也可以使用卷页过场动画。

在iOS 7中,使用两个方法来分别指定(pageViewControllerPreferredInterfaceOrientationForPresentation和pageViewControllerSupportedInterfaceOrientations)。

下面可以看到iOS 7模拟器中页面视图控制器的默认外观:

页面视图控制器

滚动视图(Scroll View)

滚动视图帮助用户查看超出视图边界的内容。滚动视图在iOS 6和7上视觉唯一的不同是滚动条的外观。

iOS 7                                                          iOS 6

滚动视图

在iOS 7上,你可以通过UIViewController的automaticallyAdjustsScrollViewInsets属性来管理滚动视图的项目分组之间的间隔。

表格视图(Table View)

表格视图将数据以多行单列的列表呈现。

 

iOS 7为单行和成组的表格视图引入了新的变化。

iOS 7(表格组)                                                iOS 6(表格组)

表格视图

表格7

表格视图中的元素在iOS 7中也有了不同的样式。

表格8

文本视图(Text View)

文本视图接受和显示多行文本。

请使用UIFont类的preferredFontForTextStyle方法获取文本视图中显示的文字内容。

网页视图(Web View)

网页视图是可以显示富HTML内容的区域。

在iOS 7中,UIWebView支持显示分页外观的内容的显示。

控件(Controls)

控件是种特殊的UI元素,用户既可以看(获取信息)也可以与之交互(操作它)。所有的iOS 7控件的外观都得到了升级,它们大多数都有了新的尺度。

因为UIControl是从UIView继承而来,你可以使用控件的tintColor属性来为它们着色。更多内容请参阅第11页的“使用着色”。

系统提供的控件默认支持系统定义的动效,外观也会随着高亮和选中状态的变化而变化。

日期拾取器(Date Picker)

日期拾取器显示了日期和时间的内容,包括:分钟,小时,日期,年份。它的整体尺寸和iOS 6比起来没有变化,但是外观发生了巨大的变化。

日期拾取器

iOS 7的app会将日期拾取器嵌入到内容中,而不是单独呈现在一个弹出的视图上。比如日历应用动态地将表格的一行扩展开,将日期拾取器嵌入,用户指定时间的时候就不需要离开当前这个添加事项视图。

日期拾取器嵌入到内容中

新增联系人按钮(Contact Add Button)

新增联系人按钮是一个UIButtonTypeContactAdd类型的UIButton,它可以将用户的信息添加到其他基于文字视图的文字域中。

新增联系人按钮的大小和外观在iOS 7中有变化。

iOS 7               iOS 6

新增联系人按钮

细节展开按钮(Detail Disclosure Button)

细节展开按钮是一个UIButtonTypeDetailDisclosure类型的UIButton,它表明当前项目还有额外的细节和相关功能,点击后会在另一个表格或视图中呈现。在iOS 7中,细节展开按钮使用和Info按钮一样的符号。

iOS 7               iOS 6

细节展开按钮

当细节展开按钮出现在表格的一行中,点击该行的其它地方不会激活该按钮;相反地,这个操作会选中该行,或者触发app定义的行为。

Info按钮(Info Button)

Info按钮的类型是UIButtonTypeInfoLight或者UIButtonTypeInfoDark。它表明app的配置细节入口,新页面有时候出现在当前视图的背面。在iOS 7中,info按钮使用和细节展开按钮相同的图形。

在iOS 7中,info按钮的大小和外观发生了变化。

iOS 7            iOS 6(天气应用中的)

Info按钮

文本标签(Label)

文本标签用来呈现静态文本。

默认情况下,文本标签会使用系统字体,所以在iOS 6和7上会看起来不一样。

iOS 7                                                                  iOS 6

文本标签

确保使用UIFont的方法preferredFontForTextStyle来获取显示在标签上的文字。

关键词:iOS7设计规范

赞助商链接: