每次發(fā)文章，評(píng)論里總會(huì)有大堆小白們?cè)趩?wèn)：~求最新iOS設(shè)計(jì)規(guī)范鏈接~~求中文翻譯版~~你看的是哪個(gè)版本，我的怎么沒(méi)有~這次就做下基礎(chǔ)知識(shí)普及，以更簡(jiǎn)單易懂的方式整理下iOS 9 的設(shè)計(jì)規(guī)范給大家。

iOS設(shè)計(jì)規(guī)范，指的是蘋果開(kāi)發(fā)者官網(wǎng)上面的 iOS 人機(jī)交互指南（iOS Human Interface Guideline）。制作這個(gè)規(guī)范的目的是為了讓所有安裝到iOS系統(tǒng)中的App都遵從某些特定的視覺(jué)特性、交互特性，以達(dá)到風(fēng)格一致性的使用體驗(yàn)。另一個(gè)層面，也是便于讓設(shè)計(jì)人員和開(kāi)發(fā)人員能夠更好的理解iOS系統(tǒng)，更合理的運(yùn)用系統(tǒng)提供的功能和接口，更高效的制作出App。

概述

首先上一張整體結(jié)構(gòu)圖：

iOS人機(jī)交互指南主要分為5個(gè)章節(jié)：

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

iOS App設(shè)計(jì)原則

iOS的整體設(shè)計(jì)原則，在規(guī)范的第一章已經(jīng)清楚的說(shuō)明：

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ì)算器給用戶帶來(lái)的確是非常糟糕的使用體驗(yàn)。而相對(duì)來(lái)說(shuō)更簡(jiǎn)潔直觀的設(shè)計(jì)，則是經(jīng)過(guò)無(wú)數(shù)次迭代蘋果的設(shè)計(jì)師們最終選擇的版本。

3.?更加清晰明了的呈現(xiàn)UI

首先，頁(yè)面的設(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)用要突出主題并盡可能干凈、純粹，使用無(wú)邊框按鈕以突出功能。

3.?利用層次感和動(dòng)效為設(shè)計(jì)增添活力

視覺(jué)上的層次感、貼近自然的動(dòng)畫(huà)效果可以讓用戶便于理解并得到愉悅感。

利用層次可以表達(dá)出各UI元素間的層次關(guān)系，以及當(dāng)前活動(dòng)的狀態(tài)。

利用自然的動(dòng)效可以增強(qiáng)用戶對(duì)交互邏輯的感知。

iOS App設(shè)計(jì)要點(diǎn)

樣式

iOS設(shè)計(jì)規(guī)范建議的App設(shè)計(jì)流程是這樣的：

1. 去掉所有的UI修飾，只考慮核心功能以及功能間的關(guān)聯(lián)。
2. 利用iOS的主題樣式來(lái)設(shè)計(jì)功能的UI，完善細(xì)節(jié)設(shè)計(jì)。
3. 確保設(shè)計(jì)出的UI適配各種設(shè)備以及各種操作模式。

其中提到的iOS的主題樣式，指的是利用iOS系統(tǒng)提供的UI元素（控件）的樣式來(lái)設(shè)計(jì)。這樣設(shè)計(jì)的好處是：

• 保證了你的應(yīng)用的交互體驗(yàn)與iOS原生應(yīng)用的體驗(yàn)的一致性，用戶使用起來(lái)沒(méi)有學(xué)習(xí)障礙。
• 利用系統(tǒng)UI元素實(shí)現(xiàn)App，更便于與開(kāi)發(fā)溝通，而且程序開(kāi)發(fā)起來(lái)非常的方便，效率高并且錯(cuò)誤率低。

所以，熟讀“UI元素”這章的內(nèi)容，是每個(gè)設(shè)計(jì)者和開(kāi)發(fā)者的必要工作。

App生命周期

生命周期這個(gè)詞是來(lái)源于Android設(shè)計(jì)規(guī)范，iOS沒(méi)有特別的強(qiáng)調(diào)這個(gè)概念。而理解整個(gè)App的生命周期對(duì)于App的設(shè)計(jì)來(lái)說(shuō)確非常關(guān)鍵。

整個(gè)生命周期可以理解為這個(gè)過(guò)程：

啟動(dòng) -> 前臺(tái)運(yùn)行 -> 退出 -> 后臺(tái)運(yùn)行 -> 后臺(tái)終結(jié)（內(nèi)存釋放）

iOS系統(tǒng)的內(nèi)存釋放機(jī)制在設(shè)計(jì)規(guī)范里面沒(méi)有體現(xiàn)，因?yàn)檫@個(gè)算法也在不斷的優(yōu)化沒(méi)有必要讓過(guò)多的人了解。但是需要我們熟知的是：在點(diǎn)擊Home鍵返回桌面時(shí)，程序從前臺(tái)切換到后臺(tái)，此時(shí)要記錄當(dāng)前畫(huà)面的流程狀態(tài)和必要的信息以便下次回到應(yīng)用恢復(fù)。這個(gè)過(guò)程在設(shè)計(jì)時(shí)就要考慮清楚。

布局

iPad的自適應(yīng)布局方式主要是利用AutoLayout（一種自適應(yīng)布局的程序?qū)崿F(xiàn)方法）和“常規(guī)”與“緊湊“兩種尺寸類別來(lái)定義的。

利用AutoLayout實(shí)現(xiàn)的屏幕布局，會(huì)在不同設(shè)備的屏幕尺寸下選擇不同的尺寸類別，以達(dá)到在該設(shè)備下的最佳顯示效果。具體的適配方式如下圖：

利用這種自適應(yīng)布局方式，可以讓程序開(kāi)發(fā)（以及UI設(shè)計(jì)）對(duì)應(yīng)多屏幕布局變得更加容易，更加高效。從顯示效果上講，也更加協(xié)調(diào)并保證了一致性。下面以印象筆記為例，看下自適應(yīng)布局的效果。

在對(duì)應(yīng)Pad版布局時(shí)，利用了UI元素中的Split View Controller，將不同層級(jí)的兩個(gè)內(nèi)容視圖同時(shí)顯示出來(lái)，以提高大屏幕的使用效率。

顏色

App設(shè)計(jì)時(shí)應(yīng)選擇使用那些看起來(lái)更具個(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)色顏色來(lái)表征交互性與狀態(tài)
• 避免同時(shí)對(duì)交互控件和非交互控件使用同一顏色
• 色彩可以向用戶傳達(dá)信息，但不一定會(huì)以你希望的方式（種族、文化、生活習(xí)慣對(duì)顏色的看法不同）
• 不能讓顏色喧賓奪主，讓用戶分心

字體

在iOS9之后，San Francisco成為了系統(tǒng)默認(rèn)字體?；赟an Francisco的動(dòng)態(tài)字體（Dynamic Type ）可以實(shí)現(xiàn)：

• 為用戶提供最易辨認(rèn)、體驗(yàn)最好的不同大小的字號(hào)。
• 能自動(dòng)調(diào)整文字的粗細(xì)，字母間距以及行高。
• 為語(yǔ)義上有區(qū)別的文本模塊指定不同的文本樣式，比如正文、腳注或者標(biāo)題。
• 隨著用戶調(diào)整文字屬性，文本可以動(dòng)態(tài)的進(jìn)行調(diào)整響應(yīng)。

設(shè)計(jì)時(shí)還要考慮：

• 根據(jù)內(nèi)容的輕重緩急來(lái)響應(yīng)用戶調(diào)整文本尺寸的變化
• 通常情況下，應(yīng)用中整體應(yīng)該使用單一字體
• 確保自定義字體在所有的樣式和尺寸時(shí)都是清晰的。

動(dòng)畫(huà)

動(dòng)畫(huà)效果不僅能夠給用戶帶來(lái)震撼的視覺(jué)體驗(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ì)是為了突出功能，不要喧賓奪主、不要過(guò)度使用動(dòng)效耗費(fèi)性能、不要在價(jià)值不高的動(dòng)效上花費(fèi)更多的開(kāi)發(fā)工作量。
• 盡量利用系統(tǒng)動(dòng)畫(huà)，系統(tǒng)默認(rèn)的動(dòng)畫(huà)可以為App提供與iOS系統(tǒng)的動(dòng)效一致性的體驗(yàn)，隨意修改往往會(huì)出現(xiàn)違和感。如果自定義動(dòng)效，也盡可能與系統(tǒng)動(dòng)畫(huà)的樣式相匹配。
• 在同一App中動(dòng)效要保持一致。

最后，建議大家收藏iOS 人機(jī)交互指南官網(wǎng)地址，在每次iOS版本更新或新機(jī)型發(fā)售時(shí)，該指南都會(huì)有所更新。

iOS Human Interface Guidline

作者：周博文（微信號(hào)：pmzhoubw） 中云普華產(chǎn)品總監(jiān)。個(gè)人公眾號(hào) “產(chǎn)品范兒”（MobileGuideline）

本文由 @周博文 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。