Posted on

iOS 7 轉換指南

參考資料:   iOS 7 UI Transition Guide關於iOS7,設計師需要瞭解的十件事
PDF檔下載:  TransitionGuide

IOS7的設計要點

  1. 依從:UI應要能很幫助使用者了解如何去操作、與內容互動,但不能搶走內容的鋒頭。它著重強調了怎樣使設計更好地支持內容,而不是反過來壓制內容。
  2. 清楚:字體在各種大小下都應清晰易讀,並應巧妙的利用圖示及裝飾,去突顯重點。
  3. 深度:巧妙運用手勢及視覺階層以利使用者了解、快速操作。

可以看看蘋果是怎樣在iOS7內置的日曆應用當中貫徹這一點的。新的日曆應用在界面上極大的簡化了,去除了一切不必要的設計元素,並使用了乾乾淨淨的白色背景,完全以內容為中心。
4196_130812093347_1

根據「依從」原則,apple建議開發者不要使用擬真。介面的設計應該是圍繞著內容而存在,不應奪走內容的光芒。因此,官方建議盡量避免使用3D質感的按鈕、漸變、光暈、陰影等擬物化的設計,因為他們認為這樣的設計會奪去使用者對內容的焦點。但雖然圖示要輕量化,最小點擊區域44px的規則依然不變,因為用戶不能點擊小於44px的界面元素。
關於移除擬物化風格的設計方式,可以參考iOS7內置的Game Center、日曆和Podcast應用。
4196_130812093503_1
另外,關於深度,iOS7最吸引人的設計之一就是系統界面當中由加速計驅動的3D效果。隨著設備在物理空間當中的移動,圖標與背景圖片會展示出視差效應。這是iOS7三大設計主題當中的第三點的典型示例:

深度:視覺外觀的層次以及逼真的動畫效果可以傳達出界面的活力,使界面更容易被理解,並提升用戶的愉悅度。
自然,蘋果也希望應用設計師們採用相同的方式,通過半透明及動畫效果來展示界面和元素之間的層級關係。這是應用設計理念的一次重大飛躍,而且隨著iOS7的發布和普及,這些效果很快就會成為用戶期望當中的一部分。
4196_130812093514_1
在iOS7設計規範當中,蘋果建議,在iOS7框架下重新設計應用的最佳方式,就是剝離你已有的界面,將應用的核心功能呈現出來,重新確認它們之間的相關性。
一旦你確認好功能方面的核心要素,就需要通過iOS7的設計主題將界面和交互模式重新構建起來。舉個簡單的例子,蘋果的指南針應用採用了最小化和功能優先的設計方式,通過重新設計過的、更注重細節的形式來展示關鍵信息。
4196_130812093524_1
iOS7的應用界面通過大量的呼吸空間來確保可讀性和易用性。在官方的設計規範中,蘋果明確指出,他們希望設計師們通過留白傳達出平靜和穩定的感覺,使應用看上去更加專注和高效。

檢視現在的APP

在升級APP至iOS7之前,先檢查幾個項目:

  1. 是否有開啟AutoLayout功能
    因為IOS7裡的文字大小可讓使用者任意調整,所以IOS7是一個好時機去開啟使用AutoLayout,因為這可以幫助開發者自動去調整物件的相對位置。也可以更容易的讓APP同時可支援IOS6及IOS7
  2. 是否也要支援IOS6?
    使用者往往喜歡很快的更新到最新版本。若是因為其他商業因素需要同時支援IOS6及IOS7,則需要做更多的調校
  3. 分辨自己的API是屬於那一種類型
    (1) 完全使用內建的UI介面:確認新的視覺效果是否是自己想要呈現給使用者的,並確定一些手勢等操作可正確運作
    (2) 完全使用自己的UI介面:檢查原有的設計是否可以滿足ios7的使用者要求,如果可以,那便可只改很少的東西。如果不行,則需要整個重新去思考、調整,來適應現有的架構。
    (3) 混合使用:是否需要做大改變取決於過去自定義元素是如何與原有元素結合,應確保功能及外表皆良好,並可與新的內建介面完美整合。

確定項目範圍

  • 必做

    1. 更新ICON:在IOS7裡iphone和ipod需要120*120的圖示、ipad則需要152*152的。在IOS7的ICON在設計上不應使用光圈及陰影。Icon的size需求如下表
      20130916210212734
    2. 讓APP的背景包含狀態列的地方
    3. 支援Retina以及調整APP設計讓他符合iphone5的設計及規範
  • 應做

    1. IOS7建議的畫面要是全螢幕的,因此要確認像狀態欄、導覽列等元素應要是半透明的。
    2. 對於ICON設計的規範有改變,希望是更簡單、並且風格與舊有的有顯著差異,應檢查bar button的圖示是否有符合新的規範
    3. 重新評估所有的按鈕是否真的需要邊框,盡可能的以佈局來讓使用者了解它是按鈕,而不是靠按鈕框
    4. 調整APP的佈局方式,要可以被動態相對位置調整。IOS7建議使用autoLayout,而不要直接用程式去設定物件的位置。某些佈局是應重新衡量及設定。
    5. 因很多物件的預設ui改變,檢查因預設ui改變而影響到的整體外觀。例如switches變窄、Progress Viewe更細、grouped tables分界方式改變。
      2013-10-07_181420
      grouped tables表現方式改變
      2013-10-07_181912
      switches變窄、選日期的元件樣式改變

      這邊有其他相關元件改變的一覽表:http://blogs.innovationm.com/ios6-to-ios7-user-interface-changes/

    6. [重要] IOS7的使用者可以自行設定要顯示的字體大小,應用程式應要可以因應使用者所選的字型大小去調整版型,如下圖:
      2013-10-07_183052
    7. 要預期使用者會開啟IOS7的從底部往上以及從上往下的中央控制功能,因此在APP裡要盡量避免這兩種操作模式(swipe up及top down)
    8. 重新考量一些陰影、漸層的使用:IOS7重視乾淨的介面(smooth)及以深度去強調內容(layered),更勝於一些擬真的設計,因此在設計上應重新考量這部份。
    9. 如果需要,將程式更新至IOS6版本以上,以確保可以使用autoLayout及storyboard。

讓程式支援IOS6

  1. 開啟assistant editor.
  2. 打開assistant editor的上面的選單列
  3. 上面的選單選擇要檢視的XIB或是storyboard
    2013-10-07_184024
  4. 然後選擇要預覽的版本
    2013-10-07_184443