讓人激動到手發抖的蘋果官方人機指南中文版來了！騰訊ISUX整個團隊的心血譯作，整篇近2萬字，10月21號剛釋出，今天就出稿了，而且質量奇高，用詞精確，語句曉暢。看再多零散的設計技巧，都不如直接看官方設計指南有效。作為UI設計師的必讀教科書，這篇千萬要收藏！

騰訊力作系列：

文章索引

1.1 為iOS而設計（Designing for iOS）

iOS 表現了以下三大設計原則：

• 遵從（Deference）：UI應該有助於使用者更好地理解內容並與之互動，並且不會分散使用者對內容本身的注意力。
• 清晰（Clarity）：各種尺寸的文字清晰易讀；圖示應該精確醒目，去除多餘的修飾，突出重點，以功能驅動設計。
• 深度（Depth）：視覺的層次感和生動的互動動畫會賦予UI新的活力，有助於使用者更好地理解並讓使用者在使用過程中感到愉悅。

無論你是重新設計現有的應用，還是重新開發一個新應用，請基於下列方法進行設計考慮：

• 首先，去除掉UI元素讓應用的核心功能突顯出來，並明確之間的相關性。
• 然後，使用iOS的主題來定義UI並進行使用者體驗設計。完善細節設計，以及適當合理的修飾。
• 最後，保證你設計的UI可以適配各種裝置和各種操作模式，使得使用者在不同場景下都可以享受你的應用。

在整個設計過程中，時刻準備著推翻先例，質疑各種假設，並以內容和功能視為重點來驅動每個細節的設計。

1.1.1 設計跟隨內容 (Defer to Content)

儘管清新美觀的UI和流暢的動態效果都是iOS體驗的亮點，但內容始終是iOS的核心。

這裡有一些方法可以確保你的設計既可以提升功能體驗，又可以關注內容本身。

充分利用整個螢幕。系統天氣應用是這個方法的絕佳範例：用漂亮的全屏天氣圖片呈現現在的天氣，直觀地向用戶傳遞了最重要的資訊，同時也留出空間呈現了每個時段的天氣資料。

重新考慮（儘量減少）擬物化設計的使用。遮罩、漸變和陰影有時會讓UI元素顯得很厚重，導致影響到了對內容的關注。相反，應該以內容為核心，讓使用者介面成為內容的支撐。

用半透明UI元素樣式來暗示背後的內容。半透明的控制元件元素（比如控制中心）可以提供了上下文的使用場景，幫助使用者看到更多可用的內容，並可以起到短暫的提示作用。在iOS中，半透明的控制元件元素只讓它遮擋住的地方變得模糊——看上去像蒙著一層米紙——它並沒有遮擋螢幕剩餘的部分。

1.1.2 保證清晰 （Provide Clarity）

確保你的應用始終是以內容為核心的另一個方法是保證清晰度。這裡有幾種方法可以讓最重要的內容和功能清晰可見，且易於互動。

使用大量留白。留白可以使重要的內容和功能更加醒目、更易理解。留白還可以傳達一種平靜和安寧的心理感受，它可以使一個應用看起來更加聚焦和高效。

讓顏色簡化UI。使用一個主題色——比如Notes中用了黃色——高亮了重要區塊的資訊並巧妙地用樣式暗示可互動性。同時，也讓應用有了一致的視覺主題。內建的應用使用了同系列的系統顏色，這樣一來，無論在深色或淺色背景上看起來都很乾淨，純粹。

通過使用系統字型確保易讀性。iOS的系統字型(San Francisco)使用動態型別(Dynamic Type)來自動調整字間距和行間距，使文字在任何尺寸大小下都清晰易讀。無論你是使用系統字型還是自定義字型，一定要採用動態型別，這樣一來當用戶選擇不同字型尺寸時，你的應用才可以及時做出響應。

使用無邊框的按鈕。預設情況下，所有的欄(bar)上的按鈕都是無邊框的。在內容區域，通過文案、顏色以及操作指引標題來表明該無邊框按鈕的可互動性。當它被啟用時，按鈕可以顯示較窄的邊框或淺色背景作為操作響應。

1.1.3 用深度層次來進行交流 （Use Depth to Communicate）

iOS經常在不同的檢視層級上展現內容，用以表達層次結構和位置，這樣可以幫助使用者瞭解螢幕上物件之間的關係。

對於支援3D觸控的裝置，輕壓（Peek）、重壓（Pop），以及快捷操作（Quick Actions）能讓使用者在不離開當前介面的情景下預覽其他重要內容。

通過使用一個在主螢幕上方的半透明背景浮層，這樣資料夾就能清楚地把內容和螢幕上其他內容區分開來。

如圖所示，備忘錄（Reminders）以不同的層級展示內容條目。使用者在使用備忘錄裡的某個條目時，其他條目會被集中收起在螢幕下方。

日曆具有較深的層級，當用戶在翻閱年、月、日時，增強的轉場動畫效果給使用者一種層級縱深感。在滾動年份檢視時，使用者可以即時看到今天的日期以及其他日曆任務。

當用戶選擇了某個月份，年份檢視會區域性放大該月份，過渡到月份檢視。今天的日期依然處於高亮狀態，年份會顯示在返回按鈕處，這樣使用者可以清楚地知道他們在哪兒，他們從哪裡進來以及如何返回。

類似的過渡動畫也出現在使用者選擇某個日期時：月份檢視從所選位置分開，將所在的週日期推向內容區頂端並顯示以小時為單位的當天時間軸檢視。這些互動動畫增強了年、月、日之間的層級關係以及使用者的感知。

1.2 iOS應用解析 （iOS App Anatomy）

幾乎所有的iOS應用都應用了UIKit framework中定義的元件。瞭解這些基本元件的名稱、作用和功能可以幫助你在應用的介面設計過程中做出更好的決策。

UIKit提供的UI元件可以大致分為以下4種類型：

• 欄（Bars）：包含了上下文資訊來指引使用者他們所在的位置，以及控制元件來幫助使用者導航或執行操作。
• 內容檢視（Content Views）：包含了應用的具體內容以及某些操作行為，比如滾動、插入、刪除、排序等等。
• 控制元件（Controls）：用於執行操作或展示資訊。
• 臨時檢視（Temporary Views）：短暫出現給予使用者重要資訊或提供更多的選擇和功能。

UIKit除了定義UI元件元素，還定義物件如何實現功能，例如手勢識別、繪圖、輔助功能和列印支援。

從程式設計的角度來看，UI元件元素其實是檢視的子類，因為它們繼承了UIView。檢視能繪製螢幕內容並知道使用者何時在其範圍內觸屏。檢視的所有型別有：控制元件（比如按鈕和滑塊）、內容檢視（比如集合檢視和表格檢視），以及臨時檢視（如警告提示和動作選單）。

要在應用中管理一組或者一系列的檢視，通常需要使用檢視控制器。它能協調檢視的內容顯示，實現與使用者互動的功能並能在不同螢幕內容之間切換。比如，“設定”使用了一個導航控制器來展示其檢視層級。

這裡有一個關於檢視與檢視控制器如何結合並呈現iOS應用的UI的例子，如圖。

儘管開發者認為真正起到作用的是檢視和檢視控制器，但一般使用者感知到的iOS應用是不同螢幕內容的集合。從這個角度來看，在應用裡，螢幕內容一般對應於一個獨特的視覺狀態或者模式。

注：一個iOS應用程式包含一個視窗。但是，不同於計算機程式中的視窗，iOS視窗沒有可見的部分並且不能在螢幕上被移動到另一個位置。很多iOS應用程式只有一個視窗；可以支援外部顯示裝置器的應用程式可以有不止一個視窗。

在iOS Human Interface Guidelines中，螢幕（screen）這個詞和大部分使用者理解的一樣。作為一個開發者，你也許需要閱讀一下其他與UIscreen相關的章節，這樣你可以更好的瞭解如何關聯外部螢幕。

1.3 適應性和佈局（Adaptivity and Layout）

1.3.1 為自適應而開發（Build In Adaptivity）

人們通常希望在他們所有的裝置和多種情境中使用自己喜歡的應用程式，比如在不同的裝置方向上和iPad的分屏情況下。尺寸類別（ Size classes）和自動佈局（Auto Layout）可以通過定義螢幕的佈局、檢視控制器和檢視在環境變化時候應該怎麼適應來幫助你實現這個願望。（顯示環境[display environment]的概念指的是裝置的整個螢幕或者其中一部分，比如彈出框的區域或者iPad分屏檢視中其中一側的區域。）

iOS在特徵集合（trait collection）的定義中包含了顯示環境的概念，特徵集合囊括了尺寸類別（size class），顯示比例（display scale）和使用者介面語言（user interface idiom）。你可以使用一個特徵集合讓你的檢視和檢視控制器響應顯示環境的變化。

iOS定義了兩個尺寸類別（size class），常規的（regular）和壓縮的（compact）。常規尺寸與拓展的空間緊密相關，壓縮尺寸與約束的空間相關。想要定義一種顯示環境，你需要定義一種橫屏尺寸類別，與一種豎屏尺寸類別。如你所想，一個iOS裝置在豎屏模式可以使用一套類別，而橫屏模式下可以使用另一套類別。

iOS能隨著尺寸類別和顯示環境變化而自動生成不同佈局。舉個例子，當垂直尺寸從壓縮變為常規時，導航欄和工具欄會自動變高。

當你靠尺寸類別來驅動佈局變化時，你的應用在任何顯示環境時都能顯示得很好。關於如何在Interface Builder中更好的使用尺寸類別，你可以查閱

注：在一種尺寸類別中，持續使用Auto Layout進行小的佈局調整，比如拉伸或壓縮內容。更多Auto Layout，參看

下面的例項可以幫助你形象展現尺寸型別如何適配不同裝置的顯示環境。例如：iPad（包括iPad Pro）在長寬和橫屏豎屏時都使用常規尺寸型別。換句話說，iPad顯示環境一直處於垂直和水平的常規狀態。

注：合格的iPad型號支援多工，你的應用可能需要與其他應用共享同一個螢幕。確保使用Auto Layout，這樣你可以在使用者使用多工功能時響應他，比如 分屏模式（Split View）和多工分屏模式（Slide Over）。

除了使用Auto Layout，當你在iPad Pro上展示可讀性的內容時，依靠UIView的 readableContentGuide屬性是非常重要的，這樣可以擁有讓讀者舒服的邊距。

iPhone的顯示環境可根據不同的裝置和不同的握持方向而改變。

豎屏時，iPhone6 Plus使用的是壓縮寬度和常規高度型別。

橫屏時，iPhone6 Plus使用的是常規寬度和壓縮高度型別。

其他iPhone型號，包括iPhone6使用相同的尺寸型別設定。

豎屏時，iPhone 6，iPhone 5 和iPhone 4S使用的是壓縮寬度和常規高度。

橫屏時，這些裝置在寬高上使用的都是壓縮類。

1.3.2 在不同環境提供良好體驗（Provide a Great Experience in Each Environment）

當你使用自適應來開發UI時，你可以保證UI跟隨顯示環境變化而適當地響應。遵照這些指南，你可以給使用者良好的裝置響應體驗。

在所有環境下都保持對主體內容的專注。這是最高優先順序。人們使用應用時，瀏覽感興趣的內容並與之發生互動。隨著環境變化改變專注點會讓使用者感覺到迷失方向，讓他們感覺對應用失去控制。

避免佈局上不必要的變化。在所有環境中保持一致的使用體驗，能讓人們在旋轉裝置或在不同裝置上執行你的應用時維持穩定的使用模式。例如，如果你在水平的常規模式下使用了網格來顯示影象，那麼無需在壓縮模式下使用列表來展示同樣的內容 ，雖然你可能調整了網格的尺寸。

如果你的應用只在一個方向上執行，那麼請直接一點。人們希望在各種握持方式下都可以使用你的應用，能滿足這個期待是最好的。但是，如果你的應用只在一個方向下執行，那麼你應當注意：

• 避免出現提示人們旋轉裝置的相關UI元素。讓應用在支援的方向下清晰地執行，如果需要使用者旋轉裝置，不要給UI新增不必要的混亂。
• 支援同一個方向上的變化。例如，如果一個應用只能橫屏執行，使用者無論用左手或是右手握持時都能觸及到home鍵。如果使用者在使用應用時180度旋轉裝置，那最好應用內容也能及時響應並旋轉180度。

如果你的應用將裝置方向翻轉視為使用者輸入（的一種指令），那麼就按照程式設定的方式來響應裝置翻轉。舉個例子，一個遊戲讓使用者利用裝置翻轉來移動遊戲中的部件，那麼這個遊戲應用本身（的UI）不能對翻轉螢幕產生響應。在這種情況下，你必須關聯兩個需要變化的方向，並且允許人們在這兩個方向切換直到他們開始（瞭解並執行）應用的主體任務。一旦人們開始執行主要任務，那就開始按程式設定的那樣來響應裝置的動作。

1.3.3 使用佈局來溝通（Use Layout to Communicate）

佈局包含的不僅僅是一個應用螢幕上的UI元素外觀。你的佈局，應該告訴使用者什麼是最重要的，他們的選擇是什麼，以及事物是如何關聯起來的。

強調重要內容或功能，讓使用者容易集中注意在主要任務上。有幾個比較好的辦法是在螢幕上半部分放置主要內容——遵循從左到右的習慣——從靠近左側的螢幕開始：

使用不同的視覺化重量和平衡來告訴使用者當前屏顯元素的主次關係。大型控制元件吸引眼球，比小的控制元件更容易在出現時被注意到。而且大型控制元件也更容易被使用者點選，這讓它們在應用中尤其有用——就像電話和時鐘（上面的按鈕）那樣——能讓使用者經常在容易分心的環境下仍然保持正常使用。

使用對齊來讓閱讀更舒緩，讓分組和層次之間更有秩序。對齊讓應用看起來整潔而有序，也讓使用者在滑動整屏內容時更容易定位和專注於重要資訊。不同資訊組的縮排與對齊讓它們之間的關聯更清晰，也讓使用者更容易找到某個控制元件。

確保使用者在內容處於預設尺寸時便可清楚明白它的主要內容與含義。例如，使用者應當無需水平滾動就能看到重要的文字，或不用放大就可以看到主體影象。

準備好改變字型大小。使用者期望大多數應用都可以響應他們在iOS的設定中設定的字型大小。為了適應一些文字大小的變化，你也許需要調整佈局；想要得到更多文字顯示相關的資訊，請查閱下文“顏色與字型”中相關的內容。

儘量避免UI上不一致的表現。在一般情況下，有著相似功能的控制元件看起來也應該類似。使用者常常認為他們看到的不同總有原因，而且他們傾向於花時間去嘗試（譯者按：因此為了避免使用者做無用的嘗試，建議類似的功能外觀都保持一樣。）

給每個互動的元素充足的空間，從而讓使用者容易操作這些內容和控制元件。常用的點按類控制元件的大小是44 x 44點（points）。

1.4 啟動與停止（Starting and Stopping）

1.4.1 即時啟動（Start Instantly）

我們通常認為使用者不會花超過一兩分鐘去評價一款新應用。當你可以最大程度地利用這段極短的時間，即時呈現對使用者有幫助的內容時，你就能夠激發新使用者的興趣並給所有使用者一種極棒的體驗。

重要：不要在安裝過程結束後告訴使用者需要重啟裝置。重啟需要花費時間，同時也會讓人覺得你的應用不可靠且很難使用。

如果你的應用有記憶體使用或其它問題，導致不重啟就無法流暢執行，你必須宣告這些問題。想要了解如何開發一款效能良好的應用，請參閱Use Memory Efficiently。

儘可能避免使用閃屏或者其他啟動體驗方式。使用者能夠在啟動應用後立即開始使用是最好不過的。

儘可能地，避免讓使用者做過多設定。而應該如此：

• 聚焦在80%目標使用者的需求上。這樣絕大部分使用者就無需設定各種選項，因為你的應用已經預設處於他們想要的狀態。如果有些功能僅有少部分使用者想要，或者是大部分使用者只需要使用一次，那就別管它了。
• 儘可能用其他方式獲取更多的使用者資訊。如果你能得到使用者在內建應用或硬體設定中提供的資訊，直接從系統中獲取，不要讓使用者再次輸入。
• 如果你必須要求使用者設定使用者資訊，在你的應用中直接提示使用者輸入。然後儘快儲存這些設定（一般來說，儲存到你的應用的設定模組中）。這樣使用者就無需強制跳出應用進入系統設定頁面了。如果使用者需要更改設定，他們可以在任何時候進入應用的設定模組進行修改。

儘可能讓使用者晚一點再登入。最理想的狀態是，使用者在無需登入的情況下就能儘量多地瀏覽內容並使用部分功能。例如，App Store會在使用者確定進行購買商品時，才要求使用者進行登入。對於那些強制使用者登入後才能進行一切有用操作的應用，使用者往往會直接放棄。

如果你的應用必須先登入後使用，那麼你應該在登入頁面有一些簡短的文字，來描述為什麼必須先登入，以及這樣做會給使用者帶來什麼好處。

謹慎使用新手引導（介紹應用的功能和如何進行操作）。在考慮新手引導之前，你應該努力地完善你的應用，儘可能使應用的功能直觀和易於尋找。其實，好的應用不需要新手引導。如果你確實覺得需要新手引導，那麼請參考如下的建議，設計一個簡潔、有針對性並且不妨礙使用者的新手引導。

• 只提供開始使用應用所必需的資訊。好的新手引導應該告訴使用者第一步應該做什麼，或者簡短地演示大部分使用者感興趣的一些功能。如果在能夠探索你的應用之前，給使用者展示太多資訊，讓使用者記住這些不是當前所必須的內容，會讓使用者覺得你的應用很難用。如果在某些特定場景下確實需要額外幫助，那麼也應該只在使用者處於這個場景之後再提供。
• 使用動畫和可互動的方式來吸引使用者，並讓使用者通過實際操作來學習如何使用。對於文字內容的增加應該謹慎，且僅當增加文字對於提升體驗有益時才這麼做。不要指望使用者會閱讀大段的文字。例如，可以使用動畫而不是文字來描述如何執行一個簡單的任務。在引導使用者瞭解較為複雜的任務時，可以通過一些引導浮層來簡要說明每一個步驟使用者需要做什麼。儘可能避免展示應用截圖，因為截圖不可互動的，使用者可能會混淆截圖和應用的實際介面。
• 能夠讓使用者很容易地取消或者跳過新手引導。有些使用者看完新手引導之後就不想再看，有些甚至根本就不想看新手引導。請記住使用者的選擇，不要強迫使用者每次開啟你的應用都要再選擇一次。

不要太早要求使用者去給你的應用評分。過早要求使用者進行評分可能會適得其反。如果你想獲得有價值的反饋和評論，在邀請使用者評論之前，請給他們一點時間來使用你的應用，並對你的應用形成印象。例如，你可以等使用者訪問了一定數量的頁面或完成了一定數量的任務之後，再邀請他們進行評價。

一般建議按照螢幕預設的定向方式啟動你的應用。儘管如此，如果你的應用只有一種螢幕方向，那麼就始終以這個方向啟動，讓使用者在他們自己需要時再改變裝置方向。例如，一個遊戲或者媒體觀看應用只在橫屏模式下執行，那麼就應該以橫屏模式啟動，即使裝置當前處於豎屏模式。這樣的話，如果使用者在豎屏模式下開啟應用，他們也知道應該把裝置轉成橫屏來進行使用。

注：最好讓橫屏應用支援兩種方向的橫屏，即home鍵在左或在右方都支援。如果裝置當前已經處於橫向狀態，那麼就按照當前狀態啟動應用，除非你有充分的理由不這麼做。其他情況時，可以考慮按home鍵處於右側的方式啟動應用。（想要了解更多關於支援不同裝置方向的內容，請參閱前文中Adaptivity and Layout相關章節。）

提供一張與應用首頁看上去一樣的閃屏。iOS會在啟動應用時呼叫這張圖，這樣可以讓使用者覺得啟動速度很快，同時，也可以讓你的應用有足夠的時間去載入內容。具體如何製作閃屏，請查閱Launch Files。

如果可能，不要讓使用者在初次啟動應用時閱讀免責宣告或者確認使用者協議。你可以直接在App Store展示這些內容，使使用者在下載前就有所瞭解。如果在某些情況下你必須展示這些內容，要確保它們與介面保持統一併在產品功能與使用者體驗之間達成平衡。

在應用重啟後，需要恢復到使用者退出使用時的狀態，讓他們可以從中斷之處繼續使用。無需讓使用者記住是如何回到此狀態的。瞭解更多關於保持和恢復應用狀態的有效方式，請查閱Preserving Your App’s Visual Appearance Across Launches。

1.4.2 時刻準備好停止（Always Be Prepared to Stop）

iOS 應用 不存在關閉或退出選項。當用戶切換到另一個應用，回到主螢幕或者將裝置調至睡眠模式的時候，其實就是停止了當前應用的使用。
當用戶切換應用時，iOS的多工系統會將其放置到後臺並將新應用的UI替換上來。在這種情況下，你必須做到以下幾點：

隨時並儘快儲存使用者資訊。因為在後臺的應用隨時有可能被終止或退出。

當應用停止的時候儲存 儘可能多的當前狀態的詳細資訊。這樣使使用者可以在回到應用時能從中斷之處繼續使用。例如，在使用可滾動的資料列表時，退出後儲存列表所在的位置。瞭解更多關於保持和恢復應用狀態的有效方式，請查閱Preserving Your App’s Visual Appearance Across Launches.

有些應用可能需要一直在後臺執行。例如，使用者可能希望能在使用一個應用的同時還能一直聽歌，接著又想用另外一個應用來檢查代辦項或者玩遊戲。關於如何正確處理多工，請查閱Multitasking.

不要強制讓應用退出。因為這樣會讓使用者誤以為是系統崩潰。如果有問題產生，需要告訴使用者具體狀況以及如何解決。以下有兩個建議，取決於出現的問題有多嚴重，可以酌情使用：

如果應用中所有的功能當前都不可用，那麼應該顯示一些內容來解釋當前的情形，並建議使用者如何進行後續操作。這部分內容給予了使用者以反饋，使使用者相信你的應用現在沒問題。同時這也可以穩定使用者情緒，讓他們決定是否要採取糾正措施，繼續使用應用，還是切換到另一個應用。

如果只有部分功能不可用，那麼只要當用戶使用這些功能時顯示提示即可。其他情況下，使用者就應該能正常使用應用的其他功能。如果你決定使用警告框來進行提示，請確保只在使用者嘗試使用不可用的功能時再顯示。

1.5 導航（Navigation）

除非導航設計不合理，不然使用者應該明顯察覺不到應用中的導航體驗。導航設計應該能夠支撐你應用結構和目的卻又不分散使用者注意力。
廣義來說，導航主要有以下幾種型別，每個導航都有其適應的應用結構：

• 分層
• 扁平
• 內容或體驗驅動

在有層級結構的應用中，使用者在每個層級中都要選擇一項，直到到達目的層級。如果要切換到另一個目的層級，使用者必須回退一些層級，或者直接回到初始層級再次選擇。系統設定和郵箱應用在這方面是很好示範，可以參考他們。

譯者注：以上為視訊截圖，完整視訊可點選觀看。

在扁平資訊架構的應用中，使用者可以從首頁目錄直接切換到另一個，因為所有的分類都可以從主屏直接訪問。音樂和App Store是兩個使用扁平結構的好例子。

譯者注：以上為視訊截圖，完整視訊可點選觀看。

在內容或體驗驅動的資訊架構應用中，導航也會根據內容或體驗來設計。例如，在閱讀一本電子書時，使用者會一頁接一頁的進行閱讀，或者直接從目錄中選中某一個指定的頁碼；同樣，在遊戲中導航也是體驗的重要組成部分。

譯者注：以上為視訊截圖，完整視訊可點選觀看。

在某些情況下，在一個應用中結合多種導航型別會有很好的效果。例如，對於扁平資訊結構中某一分類下的內容，用分層導航的方式來顯示可能會更好。

應該讓使用者時刻清楚自己當前在應用中所處的位置，及如何前往目的頁面。無論使用哪種適合你的應用結構的導航，最重要的是使用者訪問內容的路徑要有邏輯、可預期和易於追溯。

UIKit定義了一些標準的UI元素，以方便地構建分層或扁平導航，還有一些元素可以構建以內容為中心的導航，例如電子書或者媒體觀看類應用。遊戲或者其他體驗驅動的應用通常需要一些自定義的元素和行為。

使用導航欄（Navigation Bar）幫助使用者輕鬆訪問分層內容。導航欄的標題可以顯示使用者當前所處的層級，而後退按鈕可以回到上一層級。想要了解更多內容，請檢視Navigation Bar.

使用標籤欄（Tab Bar）顯示同類型的內容或功能。標籤欄很適合於扁平資訊結構，可以讓使用者在分類之間隨意切換，而不用在意當前所處的位置。想要了解更多內容，請檢視

在應用中，如果每屏顯示的都是同類項或同類頁，可以使用頁面控制元件（Page Control）。頁面控制元件的優點是可以直觀地告訴使用者有多少個專案或頁面，以及當前所處位置。想要了解更多內容，請檢視Page Control。

一般來說，最好能給使用者提供到達每一屏的唯一路徑。如果某屏內容使用者需要在不同場景下檢視，可以考慮使用臨時檢視，例如模態檢視、動作選單或警告框。想要了解更多，請檢視Modal View、Action Sheet和Alert。

UIKit同時還提供了以下相關控制元件：

• 分段控制元件（Segmented Control）。分段控制元件讓使用者在一屏內就可以查到不同分類的內容，而不需要切換到其他螢幕。
• 工具欄（Toolbar）。儘管工具欄和導航欄或標籤欄相似，但是工具欄不具導航作用。相反，工具欄為使用者提供了可以控制當前螢幕內容的控制元件。

（譯者注：上文提到的Navigation Bar, Tab Bar, Page Control, Modal View, Action Sheet, Alert, Segmented Control和Toolbar均處在iOS Human Interface Guidelines的第4章 UI Elements部分，翻譯將在後續更新中放出，煩請各位耐心等候。）

1.6 模態情境（Modal Contexts）

模態是一個承載某些連貫操作或內容的優缺點並存的模式。它可以給使用者提供一種不脫離主任務的方式去完成一個任務或者獲得資訊，但是也會臨時性的阻止使用者對應用的其他部分進行互動操作。

理想情況下，使用者可以與iOS 應用進行一種非線性的互動，所以，儘可能的減少你應用中的模態體驗是最好的。通常情況，僅在以下情境可以考慮使用模態：

• 必須引起使用者關注的時候
• 一個獨立的任務需要完成或者很明確需要被放棄，為了避免在模稜兩可的狀態下遺漏使用者資訊的時候

保證模態任務簡單、簡短和高度聚焦。你肯定不希望使用者使用模態檢視時像使用應用中的一個mini應用一樣。如果子任務過於複雜，使用者會在進入模態情境時忽略了主要任務。在設計一個涉及視覺層次的模態任務時特別要考慮這一點，因為使用者有可能迷失並且忘記如何回到之前的操作中去。如果一個模態任務必須包含不同檢視的子任務，確保給使用者一個獨立、清晰的導航路徑，並避免迂迴。更多關於模態試圖的資訊請參考Modal View.

始終提供明顯、安全的退出模態任務的途徑。確保使用者在退出模態檢視時可以預期操作的結果。

一個任務需要多層級的模態檢視時，確保使用者理解點選非最高層級下的完成按鈕的結果。點選一個低層級檢視上的完成按鈕是完成這個檢視中任務的一部分，還是整個任務。因為有可能存在這種困惑，所以要儘可能避免在下級檢視中新增完成按鈕。

保證提醒對話方塊的內容都是必要且可操作的。提醒對話方塊會打斷使用者的體驗並且要點選才會消失，所以要讓使用者感到提醒資訊是有用的，打斷是有價值的。想要了解更多請參考Alert.

（譯者注：上文提到的Modal View與Alert均處在iOS Human Interface Guidelines的第4章 UI Elements部分，翻譯將在後續更新中放出，煩請各位耐心等候。）

尊重使用者關於接收通知的偏好設定。使用者會設定接收應用通知的形式，確保遵重使用者的喜好設定，否則可能會觸怒使用者，導致其關閉應用中所有的推送通知。

1.7 互動性與反饋（Interactivity and Feedback）

1.7.1 可互動元素吸引使用者點選（Interactive Elements Invite Touch）

為了暗示互動性，設計時會使用很多線索，包括點選的反饋、顏色、位置、上下文、表意明確的圖示和標籤等。並不需要過於修飾元素來向用戶展示可互動性。

在支援3D Touch的裝置上，當用戶按壓主屏上的圖示時，背景會虛化以此來暗示可以進行更多功能的選擇。

一個關鍵的顏色可以給使用者提供很強的視覺指引，尤其是沒有冗餘的其它顏色時。為了對比，使用藍色來標記可互動的元素，同時能提供統一的、易識別的視覺風格。

返回按鈕使用多個線索指明其可互動並傳達其功能:它出現在導航中，顯示了一個指向後方的圖示，使用了關鍵色，並且顯示了上一級頁面的標題。

一個圖示或者標題提供了清晰的名稱指引使用者點選它。例如，地圖中的標題“Flyover Tour”，“Directions to Here”，清晰的說明了使用者可做的操作。結合關鍵色，就可以省去按鈕邊界或其他多餘的修飾。

在內容區域，必要時可以給按鈕新增邊界或背景。位於欄（Bar）、動作列表（Action Sheet）和 警告框（Alert）中的按鈕可以不需要邊界，因為使用者知道在這種區域中大多數選項是可互動的。但是在內容區域，有必要使用邊界或背景將按鈕從其他內容中區分出來。例如，音樂，時鐘，照片，App Store在一些特別的場景中使用這種按鈕。

照片管理中給分享按鈕增加了邊框，從其他解釋性文字中區分出來。

時鐘在秒錶和計時頁面中給按鈕增加背景來強調開始和暫停按鈕，並且使按鈕在易分散注意力的內容中更容易點選。

應用商店中使用有邊界的按鈕，將按鈕和整個內容條區分開來，點選整條內容檢視詳細資訊，點選按鈕進行下載安裝。

1.7.2 使用者所知道的標準手勢（Users Know the Standard Gestures）

使用者使用點選、拖拽、捏合等手勢與應用和他們的IOS裝置進行互動。使用手勢拉近了使用者和裝置之間的距離，並且增強了直接操縱感。使用者通常期待手勢在不同應用之間都是通用的。

使用者在使用3D Touch時不需要學習額外的手勢操作。當用戶輕按螢幕並得到反饋時，很容易就能發現3D Touch提供的額外的互動方式。

除了使用者熟悉的標準手勢，iOS還定義了一些系統範圍內的操作，例如撥出控制中心（Control Center）或訊息中心（Notification Center）。使用者可以在任意應用下都使用這些手勢。

不要給標準手勢賦予不同的行為。除非你的應用是遊戲，否則重新定義標準手勢會使使用者迷惑，且增加使用難度。

不要建立和標準手勢功能相似的手勢操作。使用者已經習慣了標準手勢的行為，沒有必要讓使用者額外學習不同的操作手勢來達到同樣的操作結果。

可以用複雜手勢作為完成某任務的快捷方式，但不能是唯一觸達方式。最好給使用者提供一些簡單，直接的方式完成某操作，即使這種方法需要他們額外地多點選一到兩次。簡單的手勢能讓使用者集中於當前的體驗和內容，而不是互動操作本身。

除非是遊戲，否則避免定義新的手勢。在遊戲或其他沉浸式的應用中，操作手勢也是有趣體驗的一部分。但是在普通應用中，幫助使用者達成目標要比操作本身重要的多，所以最好使用標準手勢，儘量避免讓使用者去發覺和記憶新的操作。

在特定的環境中，可以考慮使用多指操作。雖然複雜的操作並不一定適用於所有應用，但對使用者會花大量時間使用的應用來說可以豐富體驗，例如遊戲或建立內容環境。但因為非標準手勢可發現性差，要儘量少用，並且不要讓這類手勢成為完成任務的唯一方式。

1.7.3 反饋有助於理解（Feedback Aids Understanding）

反饋幫助使用者瞭解應用當前在做什麼，發現接下來可以做什麼以及理解他們動作產生的結果。UIKit的操作和檢視提供了很多反饋型別。

儘可能將狀態或其他的反饋資訊整合到UI中。使用者不進行操作或不跳出當前內容就能獲得需要的資訊是最好的。例如，郵箱將當前的狀態顯示在不影響當前內容的 工具欄上。

避免顯示不必要的提醒對話方塊。對話方塊是很強的反饋機制，只有在傳遞非常重要，且可操作的資訊時才需要使用它。如果使用者常看到很多沒有重要資訊的對話方塊，他們很快就會忽略所有對話方塊提醒。想要了解更多資訊，請參考Alert.（譯者注：Alert處在iOS Human Interface Guidelines的第4章 UI Elements部分，翻譯將在後續更新中放出，煩請各位耐心等候。）

1.7.4 輸入資訊的方式要簡單（Inputting Information Should Be Easy）

不管使用者是點選控制元件還是使用鍵盤，輸入資訊都會花費時間和精力。如果在發揮有用的效用前就讓使用者輸入大量資訊會減弱使用者繼續使用的慾望。

讓使用者更容易的進行選擇。例如，使用選擇器或者表格代替純文字，因為大部分使用者覺得從列表中進行選擇要比打字容易的多。

適時地從iOS中獲取資訊。裝置上儲存了大量的使用者資訊。可以的話，不要讓使用者提供你可以輕易找到的資訊，例如聯絡人或日曆資訊。

提供有用的反饋來平衡使用者的輸入。在使用應用的過程中，付出和回報的概念可以幫助使用者感到程序在被推進。

1.8 動畫（Animation）

細微、精美的動畫遍佈iOS的使用者介面，他們使應用的體驗更具吸引力，更具動態性。適當的動畫可以：

• 傳達狀態和提供反饋
• 增強直接的操縱感
• 將使用者的操作視覺化

（譯者注：以上為視訊截圖，完整視訊請點選觀看）

謹慎地增加動畫，特別是在那些無法提供沉浸式體驗的應用中。過多和無理由的動畫會阻礙應用的流暢性，降低效能，還會分散使用者在操作中的注意力。

尤其是要有目的 地，合理地應用動效和UIKit中的動態控制元件，並確保對結果進行測試。合理地使用動效可以提升使用者的理解程度和愉悅感；應用過度使用動效會給使用者帶來迷惑和難以掌控的感覺。

如果可以，保持自定義動畫和內建動畫的一致性。使用者習慣於內建iOS應用使用的精細動畫。事實上，使用者傾向於把檢視之間的平滑切換，對裝置方向改變的流暢相應和基於物理的滾動效果看做是iOS體驗的一部分。除非，你的應用要給使用者提供類似遊戲應用的沉浸式體驗，這種情況下自定義的動畫可以區別於內建動畫。

使用風格型別一致的動畫。自定義動畫之間也需要保持一致性，這樣可以讓使用者在使用應用以之前建立的經驗為基礎。

一般來說，自定義的動畫要考慮動畫的現實性和可信性。人們樂意接受自由的藝術創作，但是當動效不合理或者違反物理學時，使用者會感到困惑。例如，當你從螢幕頂部下滑拖出一個檢視的時候，你也要上滑將它收起，因為這麼做可以幫助使用者記住這個檢視從何而來。如果你下滑到螢幕底部關閉這個檢視，使用者關於從螢幕上方呼起的心理模型就會被打破。

1.9 品牌推廣（Branding）

成功的品牌推廣不僅僅包括在應用中新增品牌元素。優秀的應用應該通過建立獨特的外觀和感覺來為使用者提供愉悅、難忘的體驗。

在iOS系統之下可以很容易地使用自定義的圖示、顏色和字型來建立區別於其他應用的UI。當你進行這些元素的設計時，牢記以下兩點：

• 每個自定義的元素本身都需要具備良好的觀感和功能性，但它也應該與應用中其他元素保持一致，無論應用中其他元素是自定義的還是標準的。
• 為了在iOS中感覺舒適，你的應用雖然不必看起來跟內建的一樣，但是需要對它的遵從、清晰度和深度（如欲瞭解更多，參見1 為iOS而設計（Design for iOS））進行整合。花些時間弄清楚在你的應用中遵從、清晰和深度所代表的意味，並把它們在你的自定義元素中表達出來。

當你需要讓使用者意識到你的品牌時，你應該遵循以下幾點：

以精緻優雅不唐突的方式植入品牌元素。使用者使用你的應用來完成事務或者進行娛樂，他們不希望被強迫著去觀看廣告。為了獲得最好的使用者體驗，你可以通過字型、顏色和影象的設計來潛移默化地地提醒使用者你的品牌身份。

避免遠離使用者關心的內容。不要像 上圖中的反例那樣將僅有品牌意義的內容放在螢幕頂部二級欄上持續展示，使正文內容空間被壓縮，而是考慮以其他低侵入性的方法無處不在地展示品牌，如使用自定義顏色、字型，或巧妙地定製螢幕的背景。

抵抗住誘惑，不要把你的logo貫穿整個應用。移動裝置的螢幕多數相當小，logo的每一次出現都會佔據空間，從而將使用者與他們想看的內容隔離開。而且，在應用中顯示logo並不能像在網頁中顯示logo那樣達到相同的目的：對於使用者來說通常會很容易在不知道網頁所屬的情況下訪問一個網頁，但卻極少有使用者會在完全不看一個iOS系統中的應用圖示的情況下就開啟它。

1.10 顏色與字型（Color and Typography）

1.10.1 色彩有助於增進溝通（Color Enhances Communication）

在iOS系統中，顏色會用於表明互動，傳遞活性以及提供視覺連續性。內建的應用程式選擇使用那些看起來更具個性的、純粹、乾淨的顏色，並輔以或亮或暗的背景組合。

如果你要建立多樣的自定義顏色，要確保它們能夠和諧共存。例如，如果你的應用的基本風格是柔和的色調，你就應該建立一個協調的柔和色調的色板用於整個應用。

注意在不同情境下的顏色對比。例如，如果在導航欄的背景與欄按鈕標題之間沒有足夠的對比，按鈕就會很難被使用者看到。一個快速但不嚴謹的方法是通過將裝置置於不同的光照環境之中（包括晴朗的室外）來測試裝置上的顏色是否具有足夠的對比度。

雖然在裝置上檢視你的應用能夠在一定程度上幫助你找到需要調整的地方，但這仍代替不了能產生可靠結果的更科學客觀的方法。這種方法涉及到判定前景色和背景色的亮度值是否符合一定的比率。這個比率值可以通過線上對比度計算器或者根據WCAG2.0標準中提供的公式自己計算獲得。你應用中理想的顏色對比度應該是4.5:1或更高。

當你使用自定義的欄顏色時，著重考慮半透明的欄和應用內容。當你需要建立能匹配特別顏色的欄顏色時（比如一個已有品牌中的顏色），可能在你獲得你想要的結果之前，你需要用各種顏色進行實驗。欄的顯示將會同時受到iOS系統所提供的半透明欄與藏在欄後面的應用內容的呈現所影響。

注意顏色的盲區。多數色盲的人很難區分紅色與綠色。需要對你的應用進行測試以確保在其中你沒有將紅色與綠色作為區分兩個不同狀態或值的唯一方式，一些影象編輯軟體或工具能夠有效的幫你驗證顏色的盲區。通常意義來說，使用多種方式來表徵原色的互動性是非常好的（需要了解更多關於在iOS系統中表徵互動性的資訊，請參閱）。

考慮選擇一種基準色顏色來表徵互動性與狀態。內建的應用裡的基準色包括比如備忘錄中的黃色，和日曆中的紅色等等。如果你定義一種用於表徵互動和狀態的基準色，要確保你的應用中的其他顏色不會與它發生衝突。

避免給可互動和不可互動的元素使用相同的顏色。色彩是表明UI元素互動屬性的方式之一。如果可互動和不可互動的元素使用相同的顏色，使用者將會難以判斷哪些區域是可點的。

色彩可以向用戶傳達資訊，但不一定會以你希望的方式。每個人眼中的色彩是不一樣的，不同的文化為色彩賦予的意義也是不相同的。花時間來研究如何使用色彩才可能會被其他國家或者文化接受。你要儘可能確定應用中運用的色彩向用戶傳達了恰當的資訊。

大多數情況下，不能讓顏色喧賓奪主，讓使用者分心。除非色彩是應用的目的和本質所在，通常情況下色彩應該用來從細微細節之處提升使用者體驗。

1.10.2 優秀的排版提供清晰的傳達（Great Typography Enables Clear Communication）

Apple為全平臺設計了San Francisco字型以提供一種優雅的、一致的排版方式和閱讀體驗。在iOS 9及未來的版本中，San Francisco 是系統字型。

San Francisco搭配Dynamic Type，可以為您提供：

• 一系列的字號大小，在任何使用者設定，包括可訪問性設定下，可獲得優質的清晰度和極佳的閱讀體驗。
• 自動調整文字的粗細，字母間距以及行高的能力。
• 為語義上有區別的文字模組指定不同的文字樣式，比如正文、腳註或者標題。
• 文字可以根據使用者在字號設定和可訪問性設定中指定字型大小的變化作出適當的響應的能力

下載San Francisco可訪問 https://developer.apple.com/fonts/.（注意：iOS9中的San Francisco字型取名為SF-UI）。當你在你的app中採用San Francisco時，你可以調整模擬器>設定中的值來測試在不同尺寸下你的app的文字。

注：如果你是用自定義字型，你仍然可以採用Dynamic Type或根據系統的字號設定來規劃字體範圍。當用戶改變設定時，你的應用也必須響應式的配合。如需瞭解如何使用文字樣式並確保當用戶改變文字型號設定時你的應用能夠獲取通知，可以參考Text Styles.

San Francisco 有兩類尺寸: 文字模式（Text）和 展示模式（Display）。 文字模式適用於小於20點（points）的尺寸，展示模式適用於大於20點（points）的尺寸。當你在你的app中使用San Francisco時，iOS會自動在適當的時機在文字模式和展示模式中切換。

注：如果你使用應用程式如Sketch或Photoshop來生成你的設計，那麼當你設定的字型不小於20點的時候，你需要切換到展示模式。iOS會根據字型大小為San Francisco自動調整字間距。（字間距是以用作於修改文字間距）。表格10-1 和 10-2分別是文字模式(Text)和展示模式(Display) 在不同字號下的間距值。

為了突出某些文字或者為了在內容塊之間建立視覺關聯，你可以依賴由Dynamic Type支援的語義化樣式，如標題、正文，你也可以指定字型權重，如 細體或者半粗。使用 Dynamic Type樣式使得你的內容能更好地表達含義，但如果你想要對你的設計有更好的把控能力，你可以對特定的文字設定特定的權重。（想要了解更多關於調整字型權重， 可以參閱.）

例如，你可能想要增加某些文字的權重，來幫助使用者視覺化你的內容的層次結構，或者把使用者的注意力吸引到特定的詞或短語。另外，你可以通過增加較小文字的權重和減小較大文字的權重，在多個不同字號的、相鄰的標籤中建立視覺凝聚。字型權重在內容的整體風格和表達中有重要影響，因此你可以選擇特定的權重來達到設計目的。

文字尺寸的響應式變化需要優先考慮內容。並不是所有的內容對於使用者都是同等重要的。當用戶選擇更大的文字尺寸時，他們是想要使他們關注的內容更容易閱讀；他們並不總是想要螢幕上的每個單詞都更大。

例如，當用戶選擇具備更大易用性的文字尺寸時，郵件將會以更大的尺寸顯示郵件的主題和內容，而對於那些沒那麼重要的資訊——如時間和收件人——則採用較小的尺寸。

確保一個自定義字型在不同尺寸下的所有型別都具備可讀性。實現這一效果的方法之一是效仿在不同的文字尺寸下iOS系統呈現字型樣式的一些方法。例如：

• 文字永遠都不應該小於11點（points），即使是使用者選擇極小的文字尺寸。相較而言，內容樣式使用17點的字號作為大尺寸，這也是預設的文字字號。
• 通常來說，字號與行距值在每一檔的文字尺寸設定中差別為1點。唯一例外的是兩種標題的樣式，它們在極小、小和中尺寸的設定中均使用相同的字號、行距和字距。
• 在最小的三種文字尺寸中，字間距相對較大；而在最大的三中文字尺寸中，字間距相對緊湊。
• 標題和內容的樣式使用相同的字型尺寸，同時，為了區分標題與內容樣式，標題樣式使用更重的值。
• 導航控制欄的文字使用相同的字號，而內容文字的樣式則使用大尺寸的設定（值為17點）。
• 文字總是使用常規或者中重，一般不適用輕或者加粗。

通常情況下，應用中整體應該使用單一字型。多種字型的混雜會使你的應用看上去支離破碎和草率。相反，使用一種字型和少數樣式。根據語義用途，使用UIFont類的API來定義不同文字區域的樣式，比如正文或者標題。

1.11 圖示和圖形（Icons and Graphics）

1.11.1 應用圖示（The App Icon）

每個應用都需要一個漂亮的圖示。使用者常常會在看到應用圖示的時候便建立起對應用的第一印象，並以此評判應用的品質、作用以及可靠性。

以下幾點是你在設計應用圖示時應當記住的。當你確定要開始設計時，請參考App Icon來獲取更詳細的設計規格與指導。（譯者注：App Icon