iOS7适配之设计篇

iOS

（注：文章简要翻译自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。

其他

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

1
2
3
4
5
6
7
8
9
10
11
12
 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: 就举这么多吧，反正这次是侧头侧尾的改变，每一个控件都需要研究， 没有完全安装原文翻译，可能会有地方翻译得恰当，请赐教！）