每次發(fā)文章，評論里總會(huì)有大堆小白們在問：~求最新iOS設(shè)計(jì)規(guī)范鏈接~~求中文翻譯版~~你看的是哪個(gè)版本，我的怎么沒有~
這次就做下基礎(chǔ)知識普及，以更簡單易懂的方式整理下iOS 9 的設(shè)計(jì)規(guī)范給大家。
iOS設(shè)計(jì)規(guī)范，指的是蘋果開發(fā)者官網(wǎng)上面的 iOS 人機(jī)交互指南（iOS Human Interface Guideline）。制作這個(gè)規(guī)范的目的是為了讓所有安裝到iOS系統(tǒng)中的App都遵從某些特定的視覺特性、交互特性，以達(dá)到風(fēng)格一致性的使用體驗(yàn)。另一個(gè)層面，也是便于讓設(shè)計(jì)人員和開發(fā)人員能夠更好的理解iOS系統(tǒng)，更合理的運(yùn)用系統(tǒng)提供的功能和接口，更高效的制作出App。
概述
首先上一張整體結(jié)構(gòu)圖：
iOS人機(jī)交互指南主要分為5個(gè)章節(jié)：
iOS UI設(shè)計(jì)基礎(chǔ)知識（UI Design Basics）--主要介紹針對iOS系統(tǒng)的特性，在設(shè)計(jì)時(shí)要考慮到的各種影響因素。比如多尺寸屏幕的自適應(yīng)；程序的啟動(dòng)與停止時(shí)的注意事項(xiàng)；iOS的布局、配色、字體規(guī)范等等。
設(shè)計(jì)策略（Design Strategies）--介紹了交互設(shè)計(jì)的一些原則以及設(shè)計(jì)實(shí)現(xiàn)App的建議流程。最后舉了幾個(gè)案例進(jìn)行說明。
iOS技術(shù)（iOS Technologies）--介紹了集成到iOS系統(tǒng)內(nèi)的一些軟硬件技術(shù)，方便在設(shè)計(jì)開發(fā)功能時(shí)加以利用。
關(guān)于iOS技術(shù)，個(gè)人認(rèn)為只需要了解就可以了，在這里不做過多的贅述。
UI元素簡介（UI Elements）--介紹iOS系統(tǒng)中的每個(gè)UI元素（交互控件）的使用方式和注意事項(xiàng)。在了解了這些UI元素后，設(shè)計(jì)者會(huì)更加了解系統(tǒng)提供了哪些設(shè)計(jì)元素，以便于提高開發(fā)效率和統(tǒng)一視覺、交互體驗(yàn)。也能很好的限制住設(shè)計(jì)師們野馬一樣的思維。
圖標(biāo)與圖像設(shè)計(jì)（Icon and Image Design）--介紹了iOS系統(tǒng)對于圖標(biāo)和圖像的設(shè)計(jì)的一些要求和注意事項(xiàng)。
※ 以上思維導(dǎo)圖請到我的個(gè)人公眾號“產(chǎn)品范兒”（MobileGuideline）中下載。
預(yù)告：Android設(shè)計(jì)規(guī)范思維導(dǎo)圖正在整理中，敬請期待。
iOS App設(shè)計(jì)原則
iOS的整體設(shè)計(jì)原則，在規(guī)范的第一章已經(jīng)清楚的說明：
1，設(shè)計(jì)要服從于功能（或內(nèi)容）。
設(shè)計(jì)是為了更好的讓用戶使用功能、閱讀內(nèi)容，決不能為了追求設(shè)計(jì)上的完美而犧牲了功能的使用體驗(yàn)。
在規(guī)范中舉了一個(gè)非常恰當(dāng)?shù)睦樱容^兩個(gè)計(jì)算器的設(shè)計(jì)：設(shè)計(jì)更完美、更炫目的計(jì)算器給用戶帶來的確是非常糟糕的使用體驗(yàn)。而相對來說更簡潔直觀的設(shè)計(jì)，則是經(jīng)過無數(shù)次迭代蘋果的設(shè)計(jì)師們最終選擇的版本。
2，更加清晰明了的呈現(xiàn)UI。
首先，頁面的設(shè)計(jì)要突出重點(diǎn)：聚焦核心功能的呈現(xiàn)，巧妙并適當(dāng)?shù)募尤胄揎椩亍?/p>
其次，細(xì)節(jié)的設(shè)計(jì)要清晰的展現(xiàn)：文字內(nèi)容在各個(gè)尺寸的屏幕中都清晰的顯示，圖標(biāo)的設(shè)計(jì)要精確和明晰的表現(xiàn)出其代表的功能，顏色的運(yùn)用要突出主題并盡可能干凈、純粹，使用無邊框按鈕以突出功能。
3，利用層次感和動(dòng)效為設(shè)計(jì)增添活力。
視覺上的層次感、貼近自然的動(dòng)畫效果可以讓用戶便于理解并得到愉悅感。
利用層次可以表達(dá)出各UI元素間的層次關(guān)系，以及當(dāng)前活動(dòng)的狀態(tài)。
利用自然的動(dòng)效可以增強(qiáng)用戶對交互邏輯的感知。
iOS App設(shè)計(jì)要點(diǎn)
樣式
iOS設(shè)計(jì)規(guī)范建議的App設(shè)計(jì)流程是這樣的：
① 去掉所有的UI修飾，只考慮核心功能以及功能間的關(guān)聯(lián)。
② 利用iOS的主題樣式來設(shè)計(jì)功能的UI，完善細(xì)節(jié)設(shè)計(jì)。
③ 確保設(shè)計(jì)出的UI適配各種設(shè)備以及各種操作模式。
其中提到的iOS的主題樣式，指的是利用iOS系統(tǒng)提供的UI元素（控件）的樣式來設(shè)計(jì)。這樣設(shè)計(jì)的好處是：
· 保證了你的應(yīng)用的交互體驗(yàn)與iOS原生應(yīng)用的體驗(yàn)的一致性，用戶使用起來沒有學(xué)習(xí)障礙。
· 利用系統(tǒng)UI元素實(shí)現(xiàn)App，更便于與開發(fā)溝通，而且程序開發(fā)起來非常的方便，效率高并且錯(cuò)誤率低。
所以，熟讀“UI元素”這章的內(nèi)容，是每個(gè)設(shè)計(jì)者和開發(fā)者的必要工作。
App生命周期
生命周期這個(gè)詞是來源于Android設(shè)計(jì)規(guī)范，iOS沒有特別的強(qiáng)調(diào)這個(gè)概念。而理解整個(gè)App的生命周期對于App的設(shè)計(jì)來說確非常關(guān)鍵。
整個(gè)生命周期可以理解為這個(gè)過程：
啟動(dòng) -> 前臺(tái)運(yùn)行 -> 退出 -> 后臺(tái)運(yùn)行 -> 后臺(tái)終結(jié)（內(nèi)存釋放）?
iOS系統(tǒng)的內(nèi)存釋放機(jī)制在設(shè)計(jì)規(guī)范里面沒有體現(xiàn)，因?yàn)檫@個(gè)算法也在不斷的優(yōu)化沒有必要讓過多的人了解。但是需要我們熟知的是：在點(diǎn)擊Home鍵返回桌面時(shí)，程序從前臺(tái)切換到后臺(tái)，此時(shí)要記錄當(dāng)前畫面的流程狀態(tài)和必要的信息以便下次回到應(yīng)用恢復(fù)。這個(gè)過程在設(shè)計(jì)時(shí)就要考慮清楚。
布局
iPad的自適應(yīng)布局方式主要是利用AutoLayout（一種自適應(yīng)布局的程序?qū)崿F(xiàn)方法）和“常規(guī)”與“緊湊“兩種尺寸類別來定義的。
利用AutoLayout實(shí)現(xiàn)的屏幕布局，會(huì)在不同設(shè)備的屏幕尺寸下選擇不同的尺寸類別，以達(dá)到在該設(shè)備下的最佳顯示效果。具體的適配方式如下圖：
利用這種自適應(yīng)布局方式，可以讓程序開發(fā)（以及UI設(shè)計(jì)）對應(yīng)多屏幕布局變得更加容易，更加高效。從顯示效果上講，也更加協(xié)調(diào)并保證了一致性。下面以印象筆記為例，看下自適應(yīng)布局的效果。
在對應(yīng)Pad版布局時(shí)，利用了UI元素中的Split View Controller，將不同層級的兩個(gè)內(nèi)容視圖同時(shí)顯示出來，以提高大屏幕的使用效率。
顏色
App設(shè)計(jì)時(shí)應(yīng)選擇使用那些看起來更具個(gè)性的、純粹、干凈的顏色，并輔以或亮或暗的背景組合。同一主色應(yīng)貫穿整個(gè)App，根據(jù)功能的不同，可以選擇另一種顏色作為強(qiáng)調(diào)色。
設(shè)計(jì)顏色時(shí)要考慮：
·?如果你要?jiǎng)?chuàng)建多樣的自定義顏色，要確保它們能夠和諧共存
·?當(dāng)你使用自定義的欄顏色時(shí)，著重考慮半透明的欄和應(yīng)用內(nèi)容
·?考慮選擇一種基準(zhǔn)色顏色來表征交互性與狀態(tài)
·避免同時(shí)對交互控件和非交互控件使用同一顏色
·色彩可以向用戶傳達(dá)信息，但不一定會(huì)以你希望的方式（種族、文化、生活習(xí)慣對顏色的看法不同）
· 不能讓顏色喧賓奪主，讓用戶分心
字體
在iOS9之后，San Francisco成為了系統(tǒng)默認(rèn)字體。基于San Francisco的動(dòng)態(tài)字體（Dynamic Type ）可以實(shí)現(xiàn)：
· 為用戶提供最易辨認(rèn)、體驗(yàn)最好的不同大小的字號。
· 能自動(dòng)調(diào)整文字的粗細(xì)，字母間距以及行高。
· 為語義上有區(qū)別的文本模塊指定不同的文本樣式，比如正文、腳注或者標(biāo)題。
· 隨著用戶調(diào)整文字屬性，文本可以動(dòng)態(tài)的進(jìn)行調(diào)整響應(yīng)。
設(shè)計(jì)時(shí)還要考慮：
· 根據(jù)內(nèi)容的輕重緩急來響應(yīng)用戶調(diào)整文本尺寸的變化
·?通常情況下，應(yīng)用中整體應(yīng)該使用單一字體
· 確保自定義字體在所有的樣式和尺寸時(shí)都是清晰的。
動(dòng)畫
動(dòng)畫效果不僅能夠給用戶帶來震撼的視覺體驗(yàn)，合適的動(dòng)效還可以達(dá)到以下的目的：
1，傳達(dá)當(dāng)前的狀態(tài)和提供反饋。
2，增強(qiáng)操作感。
3，幫助用戶直觀的了解到其動(dòng)作的結(jié)果。
設(shè)計(jì)動(dòng)效時(shí)還要考慮：
· 動(dòng)效的設(shè)計(jì)是為了突出功能，不要喧賓奪主、不要過度使用動(dòng)效耗費(fèi)性能、不要在價(jià)值不高的動(dòng)效上花費(fèi)更多的開發(fā)工作量。
· 盡量利用系統(tǒng)動(dòng)畫，系統(tǒng)默認(rèn)的動(dòng)畫可以為App提供與iOS系統(tǒng)的動(dòng)效一致性的體驗(yàn)，隨意修改往往會(huì)出現(xiàn)違和感。如果自定義動(dòng)效，也盡可能與系統(tǒng)動(dòng)畫的樣式相匹配。
· 在同一App中動(dòng)效要保持一致。
最后，建議大家收藏iOS 人機(jī)交互指南官網(wǎng)地址，在每次iOS版本更新或新機(jī)型發(fā)售時(shí)，該指南都會(huì)有所更新。
如果有需要本文中的思維導(dǎo)圖以及中文版設(shè)計(jì)規(guī)范全文，請私信我或關(guān)注我的微信公眾號“產(chǎn)品范兒”（MobileGuideline）下載。
本文由 @周博文 原創(chuàng)發(fā)布于簡書，未經(jīng)許可，禁止轉(zhuǎn)載。
