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

轉載于:https://www.cnblogs.com/tracy-e/p/3151461.html