UI

iOS 7 UI 过渡指南 - 审视过渡工作的范围

本文翻译自苹果开发者中心文档 iOS 7 UI Transition Guide (Preparing for Transition - Scoping the Project)

了解你的 app 特征及自定义的方式,能让你大致知道应该如何进⾏过渡。使用下面的清单填充上项目的细节,来审视整个过渡工作的范围。

###每个 app 必须做的事情

  • 更新app的icon

    在iOS 7中,app 的图标尺寸在高分辨率的 iPhone 和 iPod touch 上是 120x120 像素,在高分辨率的 iPad 上是 152x152 像素。(了解更多图标大小的详情,请查阅“Icon and Image Sizes”

    注意,iOS 7 不再对 app 的图标进行光照和阴影效果。并且,虽然 iOS 7 依然对 app 的图标加入圆角,但与之前版本的 iOS 采用的圆角相比,弧度发生了一些变化。

  • 更新 app 的加载图像,如果原来的载⼊图像中不包含状态栏部分的话,补充上状态栏部分的图像。

  • 如果你之前没有支持的话,现在应支持 Retina 屏幕和 iPhone 5 的屏幕尺寸。

###每个 app 应该做的事情

  • 确保 app 的内容在透明UI元素(比如透明的 bar 和透明键盘)和透明的系统状态栏下依然可辨识。在 iOS 7 中,视图控制器统一采⽤用了全屏视图(参阅“Using View Controllers”来了解更多)。

  • 重新设计 bar 的自定义图标。在 iOS 7 上,bar 上的按钮图标更加轻巧,且有了不一样的风格。参阅“Bar Button Icons”来了解一些设计指导。

  • 准备采用无边框的按钮,去掉按钮的背景图⽚和边框曲线。

  • 检查 app 中写死的 UI 数值,比如 size 和 position,用系统提供的动态数值替换它们。使用 Auto Layout 帮助你的 app 完成当布局变化时的响应。(如果你还不知道什么是 Auto Layout,请参阅 Auto Layout Guide

  • 检查 app 中使⽤ UIKit 控件的地方,检查尺寸和风格发生变化的控制器和视图是否对布局和外观产生了影响。例如,开关(Switch)变得更宽了,组合式表格(grouped tables)不再是嵌入的样式,进度条变得比以前更细。想要了解更详细的 UI 元素变化,请参阅Bars and Bar ButtonsContent ViewsControlsTemporary Views

  • 使用动态的字体类型。在 iOS 7 中,用户可以自由调整 app 中字体的大小。如果采⽤动态字体,当用户在系统中设定自定义字号的时候,app 的字体也会发⽣生相应的变化。更多信息请参阅Using Fonts

  • 考虑用户从屏幕底部上滑调出控制中心的情况。如果 iOS 检测到一次滑动从屏幕底部开始,那么就会调出控制中心,而不会将这个手势传递给现在运行中的 app。如果 iOS 判断这次触摸不应该调出控制中心,那这次的触摸可能会稍微延迟一会儿才能传递到 app 中。

  • 检查所有用到的阴影、渐变、浮雕效果。由于 iOS 7 的设计重视平面化和层次感,所以应该尽量少的应用会让 UI 元素具有拟物化的视觉效果,你应该重新考虑一下这些效果。

  • 必要的话,将 app 升级到 iOS 6 中的最佳实践⽅法,如 Auto Layout 和 Storyboard,并确保 app 不会用到已不建议使用的 API 。

现在你了解到需要做哪类事情了,了解更多关于视图控制器、着色、字体的变化,请参阅Appearance and Behavior

###如果你必须继续支持 iOS 6

如果你必须同时支持 iOS 6 和 iOS 7 两个系统,你可以在 app 运行的时候检测操作系统的版本,并加载相对应的资源⽂件。更多信息请参阅Supporting iOS 6

iOS 7 UI 过渡指南 - 开始之前

本文翻译自苹果开发者中心文档 iOS 7 UI Transition Guide (Preparing for Transition - Before You Start)

开始之前

iOS 7 引入了许多用户界面的新变化,例如无边框的按钮、半透明的控制条(bars)、全屏布局的视图控制器。使用 Xcode 5,你可以创建一个 iOS 7 的工程并且在 iOS 7 模拟器上运行,来看一眼采用 iOS 7 用户界面的应用程序是什么样子的。

例如,下面的图片展示了一个示例工程 TheElements 在不同版本 iOS 模拟器上的区别。

iOS 7 模拟器上的示例程序 iOS 6 模拟器上的示例程序
iOS7 iOS6

看到这个对比,你肯定急切地想要投入到更新自己的应用以适配 iOS 7 的工作中,不过在你开始之前有些事情需要考虑。

当你与内建程序交互时,iOS 7 变化的既细微又巨大之处就变得更加清晰。熟悉的 UI 元素非常易于辨认,但看起来已经与以往有很大不同。真实的虚拟触摸更加优雅,动作的真实性得到增强。

注意:虽然所有 UI 元素的样子在 iOS 7 中都有了很大变化,而且有很多元素有了新的功能,但 UIKit API 几乎与之前保持一致。

当你继续探索时,你会开始觉察到 iOS 7 的主题。

  • 遵从。用户界面会帮助用户理解并了解其内容,而从不争夺用户的眼球。
  • 清晰。文字在所有尺寸下都能清晰显示,图标清晰易懂,装饰优雅适宜,对实用性更多的关注促进了这样的设计。
  • 深度。虚拟的层次和具真实感的运动给用户带来使用上的乐趣,并更加易于理解。

通过在 iOS 体验上引入这些根本而广泛的变化,iOS 7 提供了一个难得的机会让我们重新审视自己的应用程序核心目的是什么,该为用户提供什么功能。虽然你可能还没准备好抓住这个机会,但当你更新你的程序以适配 iOS 7 时请别忘了这一点。(如果你已经准备好重新审视你的应用程序设计,或者你正打算开启一个新的工程,请阅读《Designing for iOS 7》作为参考。)

应用程序的特性

不论你决定重新设计一个应用程序还是更新当前的设计,你需要了解应用程序的特性如何影响这个设计的过程。首先,回答一下几个问题来帮助你明确下一步应该怎么做:

  • 你采用了 Auto Layout 来设计app吗?

    如果你的 app 采用了 Auto Layout,你的工作就变得容易多了。在 Xcode 5 中,Auto Layout 可以帮助 app 适应新的 UI 元素度量,并能对字号动态调整。Auto Layout 对你从 iOS 6 过渡到 iOS 7,以及同时支持两个版本很有帮助。
    如果你没有采用 Auto Layout,现在是开始采用它的好时候了,尤其是如果你需要同时支持多个 app 版本时。如果你采用手动布局或程序化布局技术,你应该确认当文字大小改变时布局能合适地调整。

  • 应用需要支持 iOS 6 吗?
    记住,iOS 的用户会非常快地更新他们的设备,并且期望他们最喜爱的 app 能够跟随潮流。
    如果由于商业原因要求必须支持 iOS 6,开始更新你当前的 app 来适应 iOS 7 依然是最好的选择。然后如果有可能的话,对 iOS 6 版本的 app 运用一些设计上的变化。详情可以参见“Supporting iOS 6”(原文第11页)。

下一步是确定 app 定制的方式。定制的数量,以及你采用的自定义技术,决定了你所需要做的工作的类型。

按照以下三种类型来将你的 app 分类:

  • 标准型。app 只包含了标准的、未经自定义的、由 UIKit 提供的 UI 元素。
  • 自定义型。app 呈现了一个完全自定义的 UI,不包含任何 UIKit 中的 UI 元素。
  • 混合型。app 同时包含了标准的和自定义的 UI 元素,包括那些你通过调用 UIKit 中的色彩和外观设置 API 来自定义的标准元素。、

对于标准型 app,你需要确定你的设计和用户体验设计在 iOS 7 环境下是否依然有效。如果你决定保持现在的布局和交互模式,大部分的工作只是进行微调,来确保 app 可以正确处理系统全局的手势。

对于自定义型 app,也就是没有采用 UIKit 中的 UI 元素的app,在方法上就有些细微差别了。举例来说,如果你感觉当前的 UI 和体验依然合适,可能需要做的工作就很少。另一方面,如果你感觉 app 的风格和用户体验应该进行一些修改,来满足 iOS 7 用户的要求,你可能需要做比较多的工作。

对于混合型 app,需要做的工作量是不一定的,取决于你所做的自定义更改,以及你将自定义内容与标准元素结合的方法。重新审视一个混合型 app 的整体设计时,你需要确保你的自定义内容与新的标准元素集成在一起依然正常并且显示效果不错。

注意:如果你采用了完全自定义的方法来模拟标准 iOS 6 的 UI,可能会需要大量改动的工作,因为它会看起来非常过时。