每次發文章，評論里總會有大堆小白們在問：~求最新iOS設計規范鏈接~~求中文翻譯版~~你看的是哪個版本，我的怎么沒有~這次就做下基礎知識普及，以更簡單易懂的方式整理下iOS 9 的設計規范給大家。

iOS設計規范，指的是蘋果開發者官網上面的 iOS 人機交互指南（iOS Human Interface Guideline）。制作這個規范的目的是為了讓所有安裝到iOS系統中的App都遵從某些特定的視覺特性、交互特性，以達到風格一致性的使用體驗。另一個層面，也是便于讓設計人員和開發人員能夠更好的理解iOS系統，更合理的運用系統提供的功能和接口，更高效的制作出App。

概述

首先上一張整體結構圖：

iOS人機交互指南主要分為5個章節：

1. iOS UI設計基礎知識（UI Design Basics）–主要介紹針對iOS系統的特性，在設計時要考慮到的各種影響因素。比如多尺寸屏幕的自適應；程序的啟動與停止時的注意事項；iOS的布局、配色、字體規范等等。
2. 設計策略（Design Strategies）–介紹了交互設計的一些原則以及設計實現App的建議流程。最后舉了幾個案例進行說明。
3. iOS技術（iOS Technologies）–介紹了集成到iOS系統內的一些軟硬件技術，方便在設計開發功能時加以利用。
4. UI元素簡介（UI Elements）–介紹iOS系統中的每個UI元素（交互控件）的使用方式和注意事項。在了解了這些UI元素后，設計者會更加了解系統提供了哪些設計元素，以便于提高開發效率和統一視覺、交互體驗。也能很好的限制住設計師們野馬一樣的思維。
5. 圖標與圖像設計（Icon and Image Design）–介紹了iOS系統對于圖標和圖像的設計的一些要求和注意事項。

iOS App設計原則

iOS的整體設計原則，在規范的第一章已經清楚的說明：

1.?設計要服從于功能（或內容）

設計是為了更好的讓用戶使用功能、閱讀內容，決不能為了追求設計上的完美而犧牲了功能的使用體驗。

在規范中舉了一個非常恰當的例子，比較兩個計算器的設計：設計更完美、更炫目的計算器給用戶帶來的確是非常糟糕的使用體驗。而相對來說更簡潔直觀的設計，則是經過無數次迭代蘋果的設計師們最終選擇的版本。

3.?更加清晰明了的呈現UI

首先，頁面的設計要突出重點：聚焦核心功能的呈現，巧妙并適當的加入修飾元素。

其次，細節的設計要清晰的展現：文字內容在各個尺寸的屏幕中都清晰的顯示，圖標的設計要精確和明晰的表現出其代表的功能，顏色的運用要突出主題并盡可能干凈、純粹，使用無邊框按鈕以突出功能。

3.?利用層次感和動效為設計增添活力

視覺上的層次感、貼近自然的動畫效果可以讓用戶便于理解并得到愉悅感。

利用層次可以表達出各UI元素間的層次關系，以及當前活動的狀態。

利用自然的動效可以增強用戶對交互邏輯的感知。

iOS App設計要點

樣式

iOS設計規范建議的App設計流程是這樣的：

1. 去掉所有的UI修飾，只考慮核心功能以及功能間的關聯。
2. 利用iOS的主題樣式來設計功能的UI，完善細節設計。
3. 確保設計出的UI適配各種設備以及各種操作模式。

其中提到的iOS的主題樣式，指的是利用iOS系統提供的UI元素（控件）的樣式來設計。這樣設計的好處是：

• 保證了你的應用的交互體驗與iOS原生應用的體驗的一致性，用戶使用起來沒有學習障礙。
• 利用系統UI元素實現App，更便于與開發溝通，而且程序開發起來非常的方便，效率高并且錯誤率低。

所以，熟讀“UI元素”這章的內容，是每個設計者和開發者的必要工作。

App生命周期

生命周期這個詞是來源于Android設計規范，iOS沒有特別的強調這個概念。而理解整個App的生命周期對于App的設計來說確非常關鍵。

整個生命周期可以理解為這個過程：

啟動 -> 前臺運行 -> 退出 -> 后臺運行 -> 后臺終結（內存釋放）

iOS系統的內存釋放機制在設計規范里面沒有體現，因為這個算法也在不斷的優化沒有必要讓過多的人了解。但是需要我們熟知的是：在點擊Home鍵返回桌面時，程序從前臺切換到后臺，此時要記錄當前畫面的流程狀態和必要的信息以便下次回到應用恢復。這個過程在設計時就要考慮清楚。

布局

iPad的自適應布局方式主要是利用AutoLayout（一種自適應布局的程序實現方法）和“常規”與“緊湊“兩種尺寸類別來定義的。

利用AutoLayout實現的屏幕布局，會在不同設備的屏幕尺寸下選擇不同的尺寸類別，以達到在該設備下的最佳顯示效果。具體的適配方式如下圖：

利用這種自適應布局方式，可以讓程序開發（以及UI設計）對應多屏幕布局變得更加容易，更加高效。從顯示效果上講，也更加協調并保證了一致性。下面以印象筆記為例，看下自適應布局的效果。

在對應Pad版布局時，利用了UI元素中的Split View Controller，將不同層級的兩個內容視圖同時顯示出來，以提高大屏幕的使用效率。

顏色

App設計時應選擇使用那些看起來更具個性的、純粹、干凈的顏色，并輔以或亮或暗的背景組合。同一主色應貫穿整個App，根據功能的不同，可以選擇另一種顏色作為強調色。

設計顏色時要考慮：

• 如果你要創建多樣的自定義顏色，要確保它們能夠和諧共存
• 當你使用自定義的欄顏色時，著重考慮半透明的欄和應用內容
• 考慮選擇一種基準色顏色來表征交互性與狀態
• 避免同時對交互控件和非交互控件使用同一顏色
• 色彩可以向用戶傳達信息，但不一定會以你希望的方式（種族、文化、生活習慣對顏色的看法不同）
• 不能讓顏色喧賓奪主，讓用戶分心

字體

在iOS9之后，San Francisco成為了系統默認字體?；赟an Francisco的動態字體（Dynamic Type ）可以實現：

• 為用戶提供最易辨認、體驗最好的不同大小的字號。
• 能自動調整文字的粗細，字母間距以及行高。
• 為語義上有區別的文本模塊指定不同的文本樣式，比如正文、腳注或者標題。
• 隨著用戶調整文字屬性，文本可以動態的進行調整響應。

設計時還要考慮：

• 根據內容的輕重緩急來響應用戶調整文本尺寸的變化
• 通常情況下，應用中整體應該使用單一字體
• 確保自定義字體在所有的樣式和尺寸時都是清晰的。

動畫

動畫效果不僅能夠給用戶帶來震撼的視覺體驗，合適的動效還可以達到以下的目的：

1. 傳達當前的狀態和提供反饋。
2. 增強操作感。
3. 幫助用戶直觀的了解到其動作的結果。

設計動效時還要考慮：

• 動效的設計是為了突出功能，不要喧賓奪主、不要過度使用動效耗費性能、不要在價值不高的動效上花費更多的開發工作量。
• 盡量利用系統動畫，系統默認的動畫可以為App提供與iOS系統的動效一致性的體驗，隨意修改往往會出現違和感。如果自定義動效，也盡可能與系統動畫的樣式相匹配。
• 在同一App中動效要保持一致。

最后，建議大家收藏iOS 人機交互指南官網地址，在每次iOS版本更新或新機型發售時，該指南都會有所更新。

iOS Human Interface Guidline

作者：周博文（微信號：pmzhoubw） 中云普華產品總監。個人公眾號 “產品范兒”（MobileGuideline）

本文由 @周博文 原創發布于人人都是產品經理，未經許可，禁止轉載。