代码改变世界

iOS7适配之设计篇

2013-06-23 19:19  Tracy E  阅读(2146)  评论(0)  编辑  收藏  举报

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

准备工作

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

UIStyleUIStyle

从 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