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