iOS7适配之设计篇

（注：文章简要翻译自 Apple 《iOS 7 UI Transition Guide》，由于该文档为开发者预览版，并非最终文档，所以 iOS7 正式上线可能有部分不同）

准备工作

iOS7 带来了很多界面上的改变，如：没有边框（圆角）的按钮，半透明的工具条（UINavigationBar, UIToolBar 等），视图控制器的全屏布局等。使用 Xcode5，你就可以创建 iOS7 工程，并在 iOS7 模拟器中看看 iOS7 的界面。

UIStyle

从 iOS7 系统应用的改变可以看出，iOS7 这次改变不是小打小闹，是彻彻底底的变化。苹果认为之前的 UI 风格辨识度很高，但是视觉体验太不一致（comment: 你们换个设计师，我们苦逼的程序员就得按照你的审美来修改、适配）。

Note: 尽管 iOS7 所有的界面元素都看起来不一样，可能增加了新的功能，但是之前你所熟悉 UIKit APIs 的大多都是一样的。

随着你对 iOS7 继续的研究，你可能发现 iOS7 界面风格几个特点：

尊重内容 用户界面帮助用户了解内容，并与之交互，而不是为了界面而忽略了内容。（comment: 你们之前做拟物化风格时，怎么没意识到内容的重要性？）
清晰文本在不同的字体大小下都是清晰可读的，图标也是能清晰的表达意思，不需要过多的修饰。功能指导设计，而不是相反（comment: 这一点我还是比较认同的，可悲的是当前公司在这方面有点误入歧途呢）。
深度视觉上的层次分明和逼真的手势操作可以加强用户愉悦和理解。

为了将上面这些基本的原则融入到 iOS 的体验中，iOS7 抓住了这样的机会重新定义了程序要传达给用户的核心目标和功能。虽然你可能还没有完全准备好马上利用这样的修改你的设计，但是只要你准备为 iOS7 升级或开发你的应用时，你就需要按照上面的指导原则来做。

适配讨论

是否使用 Auto Layout 来设计 App

如果你的程序现在使用了 Auto Layout，那么你的适配工作就相对简单一些。因为 iOS7 与之前版本在界面元素上有很多属性设置都不一样，而且 iOS7 所有应用程序内的字体大小都是随着系统字体可调整的，所以如果使用了 Auto Layout 就会比较方便一些。

如果你还没有用 Auto Layot，建议你现在就开始使用，特别是如果你需要同时支持不同的系统版本。如果你完全使用代码布局，你就必须在字体大小改变时做相应的处理。

(comment: 晕，从最开始的 XIB，到 Auto Layout 和 Storyboard，我都没用过，你看看 Github 上有多少代码使用了。相信广大程序员都更喜欢纯代码布局，首先纯代码比较清晰，不用对照这布局文件和源文件看，其次纯代码复用和修改方便，相信我还会将纯代码进行到底的。)
是否需要支持 iOS6

iOS 用户通常都会很快的就会将手中的设备升级到最新的系统，他们希望看到他们喜爱的应用能够很好适配。

如果出于商业原因，你的应用必须支持 iOS6，那你也最好能够同时升级支持 iOS7。

（comment: 公司才在 iPhone5 推出后不得不放弃 4.3 以下的设备，以前都是支持 3.0 的有木有？现在你就讨论 iOS6 要不要支持，有本事你又弄个版本不兼容，要么支持 iOS7，要么支持以下版本啊。我估计只要技术允许，我们都必须支持到最大的范围）

通常你的应用可以分为几类：

标准应用完全只使用 UIKit 提供的控件，没有自己定制。（comment: 这种应该应该只有系统自带的“设置”吧，哈哈）
自定义 应用完全使用自定义的 UI，没有使用 UIKit 中的元素。（comment: 这种应用应该也不多吧，除非哪个牛逼的公司能够完整的开发出一套自己的 UI 组建）
混合应用中使用了 UIKit 中的控件，也依赖 UIKit 自定义了自己的控件。（comment: 我相信几乎所有的应用应属于这一类）

第一种和第二种，如果不是设计风格上与 iOS7 的指导原则不一致，基本代码就能够不用修改在 iOS7 上运行。第三种，呵呵，自己看着办吧（估计广大 iOS 程序员又得熬几个通宵去适配了）。

适配 Checklists

Must Do

更新程序图标 (Icon)，iOS7 中程序 icon 是 120 x 120 像素。（comment: 不明白又没有出新分辨率的设备，只是升级系统，icon 的像素为什么要变？）
更新程序启动画面 (Launch image), 程序启动图片必须包含状态条。（comment: 这个我们一直就带着状态条的，之前高出的 20 像素现在能露脸了，哈）
支持高清屏（Retina display）和 iPhone5。（comment: 怎么现在看到 Retina 屏我会笑而不语呢，在 Android 满大街都是 1920 x 1080 的现在，你那点分辨率也还叫高清屏？）

Should Do

确保程序内容在半透明的 UI 控件下能够很好的显示——如工具条和键盘或半透明的状态条。
重新设计工具条上按钮的图标。
开始使用没有边框和圆角的按钮，移除之前设置的按钮背景图片。
检查程序内硬编码设置的 UI 属性值，如大小和位置。替换成系统提供的可能动态修改的值，推荐使用 Auto Layout 来布局。
检查程序中 UI 控件修改可能引起的布局或显示问题，如 UISwitch 更宽了，grouped UITableView 没有边距了，UIProgressView 更细了。
适配动态属性，在 iOS7 中，用户能够自己调整字体大小，你的程序必须做出调整。
检查一下你的程序内所使用的手势，确保别和 iOS7 中新增的控制中心所用的手势冲突，还有 NavigationController 滑动返回的手势。（comment: 应该很多程序会躺枪）
去掉程序中用到的阴影、渐变、不规则形状吧，iOS7 的设计美学强调扁平化和分层。
确保程序中没有使用被 iOS7 废弃调的 API。

其他

附上官方推荐的用于版本判断的代码供参考

 NSUInteger DeviceSystemMajorVersion();

  NSUInteger DeviceSystemMajorVersion() {

     static NSUInteger _deviceSystemMajorVersion = -1;

         static dispatch_once_t onceToken;

     dispatch_once(&onceToken, ^{

         _deviceSystemMajorVersion = [[[[[UIDevice currentDevice] systemVersion]

  componentsSeparatedByString:@"."] objectAtIndex:0] intValue];

});

     return _deviceSystemMajorVersion;

  }

  #define MY_MACRO_NAME (DeviceSystemMajorVersion() < 7)

UI 变化举例

UIViewController

wantsFullScreenLayout被废弃，新增edgesForExtendedLayout,extendedLayoutIncludesOpaqueBars,automaticallyAdjustsScrollViewInsets等属性来控制视图控制器的布局。

UIView

新增tintColor属性，默认继承自父视图，原来工具条（Bar）的 tintColor 属性改成了barTintColor。

字体

通过 UIFont 中的preferredFontForTextStyle属性回去当前系统的字体，确保内容在不同字体下都能很好显示。

Bars 和 Bar Buttons

status bar 默认是透明的，其他 bar 都是半透明的，一个通用原则：确保内容填充 Bar 下面的区域。

navigationBar 在UIBarPositionTopAttached模式下会与 status bar 融合的，所以如果使用图片需要用 128px（(20 + 44) x 2）。

UITableView

Grouped table 没有边距了，TableView 上的图标（如：Checkmark，Disclosure indicator，Delete button 等）都变了。

（comment: 就举这么多吧，反正这次是侧头侧尾的改变，每一个控件都需要研究，没有完全安装原文翻译，可能会有地方翻译得恰当，请赐教！）

====== 全文完 ======

Posted by XiaoYi_HD - 6月 11 2013
如需转载，请注明：本文来自 Esoft Mobile