Claire's Blog

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

IOS7的設計要點

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

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

另外，關於深度，iOS7最吸引人的設計之一就是系統界面當中由加速計驅動的3D效果。隨著設備在物理空間當中的移動，圖標與背景圖片會展示出視差效應。這是iOS7三大設計主題當中的第三點的典型示例：

深度：視覺外觀的層次以及逼真的動畫效果可以傳達出界面的活力，使界面更容易被理解，並提升用戶的愉悅度。

自然，蘋果也希望應用設計師們採用相同的方式，通過半透明及動畫效果來展示界面和元素之間的層級關係。這是應用設計理念的一次重大飛躍，而且隨著iOS7的發布和普及，這些效果很快就會成為用戶期望當中的一部分。

在iOS7設計規範當中，蘋果建議，在iOS7框架下重新設計應用的最佳方式，就是剝離你已有的界面，將應用的核心功能呈現出來，重新確認它們之間的相關性。

一旦你確認好功能方面的核心要素，就需要通過iOS7的設計主題將界面和交互模式重新構建起來。舉個簡單的例子，蘋果的指南針應用採用了最小化和功能優先的設計方式，通過重新設計過的、更注重細節的形式來展示關鍵信息。

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需求如下表
     
  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分界方式改變。

     

     

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

  6. [重要] IOS7的使用者可以自行設定要顯示的字體大小，應用程式應要可以因應使用者所選的字型大小去調整版型，如下圖：
     
  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
   
4. 然後選擇要預覽的版本