藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

來源：莫貝網(wǎng)

譯者注：本文譯自蘋果官方人機界面指南 iOS Human Interface Guidelines (2015年10 月21日)，由騰訊ISUX設計師翻譯整理，非發(fā)文者一人之作。譯文首發(fā)于ISUX博客，如在閱讀過程中發(fā)現(xiàn)錯誤與疏漏之處，歡迎不吝指出。后續(xù)章節(jié)會陸續(xù)更新，敬請期待。
文章索引

• 1.1 為iOS而設計（Designing for iOS）
• 1.1.1 設計跟隨內(nèi)容 (Defer to Content)
• 1.1.2 保證清晰 （Provide Clarity）
• 1.1.3 用深度層次來進行交流 （Use Depth to Communicate）
• 1.2 iOS應用解析 （iOS App Anatomy）
• 1.3 適應性和布局（Adaptivity and Layout）
• 1.3.1 為自適應而開發(fā)（Build In Adaptivity）
  
• 1.3.2 在不同環(huán)境提供良好體驗（Provide a Great Experience in Each Environment）
• 1.3.3 使用布局來溝通（Use Layout to Communicate）
• 1.4 啟動與停止（Starting and Stopping）
• 1.4.1 即時啟動（Start Instantly）
• 1.4.2 時刻準備好停止（Always Be Prepared to Stop）
• 1.5 導航（Navigation）
• 1.6 模態(tài)情境（Modal Contexts）
• 1.7 交互性與反饋（Interactivity and Feedback）
• 1.7.1 可交互元素吸引用戶點擊（Interactive Elements Invite Touch）
• 1.7.2 用戶所知道的標準手勢（Users Know the Standard Gestures）
• 1.7.3 反饋有助于理解（Feedback Aids Understanding）
• 1.7.4 輸入信息的方式要簡單（Inputting Information Should Be Easy）
• 1.8 動畫（Animation）
• 1.9 品牌推廣（Branding）
• 1.10 顏色與字體（Color and Typography）
• 1.10.1 色彩有助于增進溝通（Color Enhances Communication）
• 1.10.2 優(yōu)秀的排版提供清晰的傳達（Great Typography Enables Clear Communication）
• 1.11 圖標和圖形（Icons and Graphics）
• 1.11.1 應用圖標（The App Icon）
• 1.11.2 小圖標（Small Icons）
• 1.11.3 圖形（Graphics）
• 1.12 術語和措辭（Terminology and Wording）
• 1.13 與iOS的整合（Integrating with iOS）
• 1.13.1 正確使用標準UI元素（Use Standard UI Elements Correctly）
• 1.13.2 弱化文件和文檔處理（Downplay File and Document Handing）
• 1.13.3 必要時提供可配置選項（Be Configurable If Necessary）
• 1.13.4 充分利用iOS技術（Take Advantage of iOS Technologies）

1.1 為iOS而設計（Designing for iOS）

iOS 表現(xiàn)了以下三大設計原則：

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

無論你是重新設計現(xiàn)有的應用，還是重新開發(fā)一個新應用，請基于下列方法進行設計考慮：

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

在整個設計過程中，時刻準備著推翻先例，質(zhì)疑各種假設，并以內(nèi)容和功能視為重點來驅(qū)動每個細節(jié)的設計。

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

盡管清新美觀的UI和流暢的動態(tài)效果都是iOS體驗的亮點，但內(nèi)容始終是iOS的核心。

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

充分利用整個屏幕。系統(tǒng)天氣應用是這個方法的絕佳范例：用漂亮的全屏天氣圖片呈現(xiàn)現(xiàn)在的天氣，直觀地向用戶傳遞了最重要的信息，同時也留出空間呈現(xiàn)了每個時段的天氣數(shù)據(jù)。

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

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

1.1.2 保證清晰 （Provide Clarity）

確保你的應用始終是以內(nèi)容為核心的另一個方法是保證清晰度。這里有幾種方法可以讓最重要的內(nèi)容和功能清晰可見，且易于交互。

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

 

讓顏色簡化UI。使用一個主題色——比如Notes中用了黃色——高亮了重要區(qū)塊的信息并巧妙地用樣式暗示可交互性。同時，也讓應用有了一致的視覺主題。內(nèi)置的應用使用了同系列的系統(tǒng)顏色，這樣一來，無論在深色或淺色背景上看起來都很干凈，純粹。

 

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

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

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

iOS經(jīng)常在不同的視圖層級上展現(xiàn)內(nèi)容，用以表達層次結(jié)構(gòu)和位置，這樣可以幫助用戶了解屏幕上對象之間的關系。

對于支持3D觸控的設備，輕壓（Peek）、重壓（Pop），以及快捷操作（Quick Actions）能讓用戶在不離開當前界面的情景下預覽其他重要內(nèi)容。

通過使用一個在主屏幕上方的半透明背景浮層，這樣文件夾就能清楚地把內(nèi)容和屏幕上其他內(nèi)容區(qū)分開來。

如圖所示，備忘錄（Reminders）以不同的層級展示內(nèi)容條目。用戶在使用備忘錄里的某個條目時，其他條目會被集中收起在屏幕下方。

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

當用戶選擇了某個月份，年份視圖會局部放大該月份，過渡到月份視圖。今天的日期依然處于高亮狀態(tài)，年份會顯示在返回按鈕處，這樣用戶可以清楚地知道他們在哪兒，他們從哪里進來以及如何返回。

類似的過渡動畫也出現(xiàn)在用戶選擇某個日期時：月份視圖從所選位置分開，將所在的周日期推向內(nèi)容區(qū)頂端并顯示以小時為單位的當天時間軸視圖。這些交互動畫增強了年、月、日之間的層級關系以及用戶的感知。

 

1.2 iOS應用解析 （iOS App Anatomy）

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

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

• 欄（Bars）：包含了上下文信息來指引用戶他們所在的位置，以及控件來幫助用戶導航或執(zhí)行操作。
• 內(nèi)容視圖（Content Views）：包含了應用的具體內(nèi)容以及某些操作行為，比如滾動、插入、刪除、排序等等。
• 控件（Controls）：用于執(zhí)行操作或展示信息。
• 臨時視圖（Temporary Views）：短暫出現(xiàn)給予用戶重要信息或提供更多的選擇和功能。

UIKit除了定義UI組件元素，還定義對象如何實現(xiàn)功能，例如手勢識別、繪圖、輔助功能和打印支持。

從編程的角度來看，UI組件元素其實是視圖的子類，因為它們繼承了UIView。視圖能繪制屏幕內(nèi)容并知道用戶何時在其范圍內(nèi)觸屏。視圖的所有類型有：控件（比如按鈕和滑塊）、內(nèi)容視圖（比如集合視圖和表格視圖），以及臨時視圖（如警告提示和動作菜單）。

要在應用中管理一組或者一系列的視圖，通常需要使用視圖控制器。它能協(xié)調(diào)視圖的內(nèi)容顯示，實現(xiàn)與用戶交互的功能并能在不同屏幕內(nèi)容之間切換。比如，“設置”使用了一個導航控制器來展示其視圖層級。

這里有一個關于視圖與視圖控制器如何結(jié)合并呈現(xiàn)iOS應用的UI的例子，如圖。

盡管開發(fā)者認為真正起到作用的是視圖和視圖控制器，但一般用戶感知到的iOS應用是不同屏幕內(nèi)容的集合。從這個角度來看，在應用里，屏幕內(nèi)容一般對應于一個獨特的視覺狀態(tài)或者模式。

注：一個iOS應用程序包含一個窗口。但是，不同于計算機程序中的窗口，iOS窗口沒有可見的部分并且不能在屏幕上被移動到另一個位置。很多iOS應用程序只有一個窗口；可以支持外部顯示設備器的應用程序可以有不止一個窗口。

在iOS Human Interface Guidelines中，屏幕（screen）這個詞和大部分用戶理解的一樣。作為一個開發(fā)者，你也許需要閱讀一下其他與UIscreen相關的章節(jié)，這樣你可以更好的了解如何關聯(lián)外部屏幕。

 

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

1.3.1 為自適應而開發(fā)（Build In Adaptivity）

人們通常希望在他們所有的設備和多種情境中使用自己喜歡的應用程序，比如在不同的設備方向上和iPad的分屏情況下。尺寸類別（ Size classes）和自動布局（Auto Layout）可以通過定義屏幕的布局、視圖控制器和視圖在環(huán)境變化時候應該怎么適應來幫助你實現(xiàn)這個愿望。（顯示環(huán)境[display environment]的概念指的是設備的整個屏幕或者其中一部分，比如彈出框的區(qū)域或者iPad分屏視圖中其中一側(cè)的區(qū)域。）

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

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

iOS能隨著尺寸類別和顯示環(huán)境變化而自動生成不同布局。舉個例子，當垂直尺寸從壓縮變?yōu)槌Ｒ?guī)時，導航欄和工具欄會自動變高。

當你靠尺寸類別來驅(qū)動布局變化時，你的應用在任何顯示環(huán)境時都能顯示得很好。關于如何在Interface Builder中更好的使用尺寸類別，你可以查閱Size Classes Design Help.

注：在一種尺寸類別中，持續(xù)使用Auto Layout進行小的布局調(diào)整，比如拉伸或壓縮內(nèi)容。更多Auto Layout，參看 Auto Layout Guide.

下面的實例可以幫助你形象展現(xiàn)尺寸類型如何適配不同設備的顯示環(huán)境。例如：iPad（包括iPad Pro）在長寬和橫屏豎屏時都使用常規(guī)尺寸類型。換句話說，iPad顯示環(huán)境一直處于垂直和水平的常規(guī)狀態(tài)。

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

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

iPhone的顯示環(huán)境可根據(jù)不同的設備和不同的握持方向而改變。

豎屏時，iPhone6 Plus使用的是壓縮寬度和常規(guī)高度類型。

橫屏時，iPhone6 Plus使用的是常規(guī)寬度和壓縮高度類型。

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

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

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

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

當你使用自適應來開發(fā)UI時，你可以保證UI跟隨顯示環(huán)境變化而適當?shù)仨憫Ｗ裾者@些指南，你可以給用戶良好的設備響應體驗。

在所有環(huán)境下都保持對主體內(nèi)容的專注。這是最高優(yōu)先級。人們使用應用時，瀏覽感興趣的內(nèi)容并與之發(fā)生互動。隨著環(huán)境變化改變專注點會讓用戶感覺到迷失方向，讓他們感覺對應用失去控制。

避免布局上不必要的變化。在所有環(huán)境中保持一致的使用體驗，能讓人們在旋轉(zhuǎn)設備或在不同設備上運行你的應用時維持穩(wěn)定的使用模式。例如，如果你在水平的常規(guī)模式下使用了網(wǎng)格來顯示圖像，那么無需在壓縮模式下使用列表來展示同樣的內(nèi)容，雖然你可能調(diào)整了網(wǎng)格的尺寸。

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

• 避免出現(xiàn)提示人們旋轉(zhuǎn)設備的相關UI元素。讓應用在支持的方向下清晰地運行，如果需要用戶旋轉(zhuǎn)設備，不要給UI添加不必要的混亂。
• 支持同一個方向上的變化。例如，如果一個應用只能橫屏運行，用戶無論用左手或是右手握持時都能觸及到home鍵。如果用戶在使用應用時180度旋轉(zhuǎn)設備，那最好應用內(nèi)容也能及時響應并旋轉(zhuǎn)180度。

如果你的應用將設備方向翻轉(zhuǎn)視為用戶輸入（的一種指令），那么就按照程序設定的方式來響應設備翻轉(zhuǎn)。舉個例子， 一個游戲讓用戶利用設備翻轉(zhuǎn)來移動游戲中的部件，那么這個游戲應用本身（的UI）不能對翻轉(zhuǎn)屏幕產(chǎn)生響應。在這種情況下，你必須關聯(lián)兩個需要變化的方向， 并且允許人們在這兩個方向切換直到他們開始（了解并執(zhí)行）應用的主體任務。一旦人們開始執(zhí)行主要任務，那就開始按程序設定的那樣來響應設備的動作。

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

布局包含的不僅僅是一個應用屏幕上的UI元素外觀。你的布局，應該告訴用戶什么是最重要的，他們的選擇是什么，以及事物是如何關聯(lián)起來的。

強調(diào)重要內(nèi)容或功能，讓用戶容易集中注意在主要任務上。有幾個比較好的辦法是在屏幕上半部分放置主要內(nèi)容——遵循從左到右的習慣——從靠近左側(cè)的屏幕開始：

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

使用對齊來讓閱讀更舒緩，讓分組和層次之間更有秩序。對齊讓應用看起來整潔而有序，也讓用戶在滑動整屏內(nèi)容時更容易定位和專注于重要信息。不同信息組的縮進與對齊讓它們之間的關聯(lián)更清晰，也讓用戶更容易找到某個控件。

確保用戶在內(nèi)容處于默認尺寸時便可清楚明白它的主要內(nèi)容與含義。例如，用戶應當無需水平滾動就能看到重要的文本，或不用放大就可以看到主體圖像。

準備好改變字體大小。用戶期望大多數(shù)應用都可以響應他們在iOS的設置中設定的字體大小。為了適應一些文本大小的變化，你也許需要調(diào)整布局；想要得到更多文本顯示相關的信息，請查閱下文“顏色與字體”中相關的內(nèi)容。

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

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

 

1.4 啟動與停止（Starting and Stopping）

1.4.1 即時啟動（Start Instantly）

我們通常認為用戶不會花超過一兩分鐘去評價一款新應用。當你可以地利用這段極短的時間，即時呈現(xiàn)對用戶有幫助的內(nèi)容時，你就能夠激發(fā)新用戶的興趣并給所有用戶一種極棒的體驗。

重要：不要在安裝過程結(jié)束后告訴用戶需要重啟設備。重啟需要花費時間，同時也會讓人覺得你的應用不可靠且很難使用。
如果你的應用有內(nèi)存使用或其它問題，導致不重啟就無法流暢運行，你必須聲明這些問題。想要了解如何開發(fā)一款性能良好的應用，請參閱Use Memory Efficiently.
盡可能避免使用閃屏或者其他啟動體驗方式。用戶能夠在啟動應用后立即開始使用是最好不過的。

盡可能地，避免讓用戶做過多設置。而應該如此：

• 聚焦在80%目標用戶的需求上。這樣絕大部分用戶就無需設置各種選項，因為你的應用已經(jīng)默認處于他們想要的狀態(tài)。如果有些功能僅有少部分用戶想要，或者是大部分用戶只需要使用一次，那就別管它了。
• 盡可能用其他方式獲取更多的用戶信息。如果你能得到用戶在內(nèi)置應用或硬件設置中提供的信息，直接從系統(tǒng)中獲取，不要讓用戶再次輸入。
• 如果你必須要求用戶設置用戶信息，在你的應用中直接提示用戶輸入。然后盡快保存這些設定（一般來說，保存到你的應用的設置模塊中）。這樣用戶就無需強制跳出應用進入系統(tǒng)設置頁面了。如果用戶需要更改設置，他們可以在任何時候進入應用的設置模塊進行修改。

盡可能讓用戶晚一點再登錄。最理想的狀態(tài)是，用戶在無需登錄的情況下就能盡量多地瀏覽內(nèi)容并使用部分功能。例如，App Store會在用戶確定進行購買商品時，才要求用戶進行登錄。對于那些強制用戶登錄后才能進行一切有用操作的應用，用戶往往會直接放棄。

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

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

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

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

一般建議按照屏幕默認的定向方式啟動你的應用。盡管如此，如果你的應用只有一種屏幕方向，那么就始終以這個方向 啟動，讓用戶在他們自己需要時再改變設備方向。例如，一個游戲或者媒體觀看應用只在橫屏模式下運行，那么就應該以橫屏模式啟動，即使設備當前處于豎屏模 式。這樣的話，如果用戶在豎屏模式下打開應用，他們也知道應該把設備轉(zhuǎn)成橫屏來進行使用。

注：最好讓橫屏應用支持兩種方向的橫屏，即home鍵在左或在右方都支持。如果設備當前已經(jīng)處于橫向狀態(tài)，那么就按照當前狀態(tài)啟動應用，除非你有充 分的理由不這么做。其他情況時，可以考慮按home鍵處于右側(cè)的方式啟動應用。（想要了解更多關于支持不同設備方向的內(nèi)容，請參閱前文中 Adaptivity and Layout相關章節(jié)。）

提供一張與應用首頁看上去一樣的閃屏。iOS會在啟動應用時調(diào)用這張圖，這樣可以讓用戶覺得啟動速度很快，同時，也可以讓你的應用有足夠的時間去加載內(nèi)容。具體如何制作閃屏，請查閱Launch Files。

如果可能，不要讓用戶在初次啟動應用時閱讀免責聲明或者確認用戶協(xié)議。你可以直接在App Store展示這些內(nèi)容，使用戶在下載前就有所了解。如果在某些情況下你必須展示這些內(nèi)容，要確保它們與界面保持統(tǒng)一并在產(chǎn)品功能與用戶體驗之間達成平衡。

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

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

iOS 應用不存在關閉或退出選項。當用戶切換到另一個應用，回到主屏幕或者將設備調(diào)至睡眠模式的時候，其實就是停止了當前應用的使用。
當用戶切換應用時，iOS的多任務系統(tǒng)會將其放置到后臺并將新應用的UI替換上來。在這種情況下，你必須做到以下幾點：

隨時并盡快保存用戶信息。因為在后臺的應用隨時有可能被終止或退出。

當應用停止的時候保存盡可能多的當前狀態(tài)的詳細信息。這樣使用戶可以在回到應用時能從中斷之處繼續(xù)使用。例如，在使用可滾動的數(shù)據(jù)列表時，退出后保存列表所在的位置。了解更多關于保持和恢復應用狀態(tài)的有效方式，請查閱Preserving Your App’s Visual Appearance Across Launches.

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

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

如果應用中所有的功能當前都不可用，那么應該顯示一些內(nèi)容來解釋當前的情形，并建議用戶如何進行后續(xù)操作。這部分內(nèi)容給予了用戶以反饋，使用戶相信你的應用現(xiàn)在沒問題。同時這也可以穩(wěn)定用戶情緒，讓他們決定是否要采取糾正措施，繼續(xù)使用應用，還是切換到另一個應用。

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

 

1.5 導航（Navigation）

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

• 分層
• 扁平
• 內(nèi)容或體驗驅(qū)動

在有層級結(jié)構(gòu)的應用中，用戶在每個層級中都要選擇一項，直到到達目的層級。如果要切換到另一個目的層級，用戶必須回退一些層級，或者直接回到初始層級再次選擇。系統(tǒng)設置和郵箱應用在這方面是很好示范，可以參考他們。

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

在扁平信息架構(gòu)的應用中，用戶可以從首頁目錄直接切換到另一個，因為所有的分類都可以從主屏直接訪問。音樂和App Store是兩個使用扁平結(jié)構(gòu)的好例子。

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

在內(nèi)容或體驗驅(qū)動的信息架構(gòu)應用中，導航也會根據(jù)內(nèi)容或體驗來設計。例如，在閱讀一本電子書時，用戶會一頁接一頁的進行閱讀，或者直接從目錄中選中某一個指定的頁碼；同樣，在游戲中導航也是體驗的重要組成部分。

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

在某些情況下，在一個應用中結(jié)合多種導航類型會有很好的效果。例如，對于扁平信息結(jié)構(gòu)中某一分類下的內(nèi)容，用分層導航的方式來顯示可能會更好。

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

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

使用導航欄（Navigation Bar）幫助用戶輕松訪問分層內(nèi)容。導航欄的標題可以顯示用戶當前所處的層級，而后退按鈕可以回到上一層級。想要了解更多內(nèi)容，請查看Navigation Bar.

使用標簽欄（Tab Bar）顯示同類型的內(nèi)容或功能。標簽欄很適合于扁平信息結(jié)構(gòu)，可以讓用戶在分類之間隨意切換，而不用在意當前所處的位置。想要了解更多內(nèi)容，請查看Tab Bar.

在應用中，如果每屏顯示的都是同類項或同類頁，可以使用頁面控件（Page Control）。頁面控件的優(yōu)點是可以直觀地告訴用戶有多少個項目或頁面，以及當前所處位置。想要了解更多內(nèi)容，請查看Page Control。

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

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

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

（譯者注：上文提到的Navigation Bar, Tab Bar, Page Control, Modal View, Action Sheet, Alert, Segmented Control和Toolbar均處在iOS Human Interface Guidelines的第4章 UI Elements部分，翻譯將在后續(xù)更新中放出，煩請各位耐心等候。若有需要，亦可先參考先前已翻譯的iOS7 UI Elements章節(jié)：上，下。）

 

1.6 模態(tài)情境（Modal Contexts）

模態(tài)是一個承載某些連貫操作或內(nèi)容的優(yōu)缺點并存的模式。它可以給用戶提供一種不脫離主任務的方式去完成一個任務或者獲得信息，但是也會臨時性的阻止用戶對應用的其他部分進行交互操作。

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

• 必須引起用戶關注的時候
• 一個獨立的任務需要完成或者很明確需要被放棄，為了避免在模棱兩可的狀態(tài)下遺漏用戶信息的時候

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

始終提供明顯、安全的退出模態(tài)任務的途徑。確保用戶在退出模態(tài)視圖時可以預期操作的結(jié)果。

一個任務需要多層級的模態(tài)視圖時，確保用戶理解點擊非最高層級下的完成按鈕的結(jié)果。點擊一個低層級視圖上的完成按鈕是完成這個視圖中任務的一部分，還是整個任務。因為有可能存在這種困惑，所以要盡可能避免在下級視圖中添加完成按鈕。

保證提醒對話框的內(nèi)容都是必要且可操作的。提醒對話框會打斷用戶的體驗并且要點擊才會消失，所以要讓用戶感到提醒信息是有用的，打斷是有價值的。想要了解更多請參考Alert.

（譯者注：上文提到的Modal View與Alert均處在iOS Human Interface Guidelines的第4章 UI Elements部分，翻譯將在后續(xù)更新中放出，煩請各位耐心等候。若有需要，亦可先參考先前已翻譯的iOS7 UI Elements章節(jié)：上，下。）

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

 

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

1.7.1 可交互元素吸引用戶點擊（Interactive Elements Invite Touch）

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

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

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

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

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

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

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

時鐘在秒表和計時頁面中給按鈕增加背景來強調(diào)開始和暫停按鈕，并且使按鈕在易分散注意力的內(nèi)容中更容易點擊。

應用商店中使用有邊界的按鈕，將按鈕和整個內(nèi)容條區(qū)分開來，點擊整條內(nèi)容查看詳細信息，點擊按鈕進行下載安裝。

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

用戶使用點擊、拖拽、捏合等手勢與應用和他們的IOS設備進行交互。使用手勢拉近了用戶和設備之間的距離，并且增強了直接操縱感。用戶通常期待手勢在不同應用之間都是通用的。

用戶在使用3D Touch時不需要學習額外的手勢操作。當用戶輕按屏幕并得到反饋時，很容易就能發(fā)現(xiàn)3D Touch提供的額外的交互方式。

除了用戶熟悉的標準手勢，iOS還定義了一些系統(tǒng)范圍內(nèi)的操作，例如呼出控制中心（Control Center）或消息中心（Notification Center）。用戶可以在任意應用下都使用這些手勢。

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

不要創(chuàng)建和標準手勢功能相似的手勢操作。用戶已經(jīng)習慣了標準手勢的行為，沒有必要讓用戶額外學習不同的操作手勢來達到同樣的操作結(jié)果。

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

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

在特定的環(huán)境中，可以考慮使用多指操作。雖然復雜的操作并不一定適用于所有應用，但對用戶會花大量時間使用的應用來說可以豐富體驗，例如游戲或創(chuàng)建內(nèi)容環(huán)境。但因為非標準手勢可發(fā)現(xiàn)性差，要盡量少用，并且不要讓這類手勢成為完成任務的唯一方式。

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

反饋幫助用戶了解應用當前在做什么，發(fā)現(xiàn)接下來可以做什么以及理解他們動作產(chǎn)生的結(jié)果。UIKit的操作和視圖提供了很多反饋類型。

盡可能將狀態(tài)或其他的反饋信息整合到UI中。用戶不進行操作或不跳出當前內(nèi)容就能獲得需要的信息是最好的。例如，郵箱將當前的狀態(tài)顯示在不影響當前內(nèi)容的工具欄上。

避免顯示不必要的提醒對話框。對話框是很強的反饋機制，只有在傳遞非常重要，且可操作的信息時才需要使用它。如果用戶?？吹胶芏鄾]有重要信息的對話框，他們很快就會忽略所有對話框提醒。想要了解更多信息，請參考Alert.（譯者注：Alert處在iOS Human Interface Guidelines的第4章 UI Elements部分，翻譯將在后續(xù)更新中放出，煩請各位耐心等候。若有需要，亦可先參考先前已翻譯的iOS7 UI Elements章節(jié)：下。）

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

不管用戶是點擊控件還是使用鍵盤，輸入信息都會花費時間和精力。如果在發(fā)揮有用的效用前就讓用戶輸入大量信息會減弱用戶繼續(xù)使用的欲望。

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

適時地從iOS中獲取信息。設備上存儲了大量的用戶信息。可以的話，不要讓用戶提供你可以輕易找到的信息，例如聯(lián)系人或日歷信息。

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

 

1.8 動畫（Animation）

細微、精美的動畫遍布iOS的用戶界面，他們使應用的體驗更具吸引力，更具動態(tài)性。適當?shù)膭赢嬁梢裕?/span>

• 傳達狀態(tài)和提供反饋
• 增強直接的操縱感
• 將用戶的操作可視化

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

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

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

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

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

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

 

1.9 品牌推廣（Branding）

成功的品牌推廣不僅僅包括在應用中添加品牌元素。優(yōu)秀的應用應該通過創(chuàng)建獨特的外觀和感覺來為用戶提供愉悅、難忘的體驗。

在iOS系統(tǒng)之下可以很容易地使用自定義的圖標、顏色和字體來創(chuàng)建區(qū)別于其他應用的UI。當你進行這些元素的設計時，牢記以下兩點：

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

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

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

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

抵抗住誘惑，不要把你的logo貫穿整個應用。移 動設備的屏幕多數(shù)相當小，logo的每一次出現(xiàn)都會占據(jù)空間，從而將用戶與他們想看的內(nèi)容隔離開。而且，在應用中顯示logo并不能像在網(wǎng)頁中顯示 logo那樣達到相同的目的：對于用戶來說通常會很容易在不知道網(wǎng)頁所屬的情況下訪問一個網(wǎng)頁，但卻極少有用戶會在完全不看一個iOS系統(tǒng)中的應用圖標的 情況下就打開它。

 

1.10 顏色與字體（Color and Typography）

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

在iOS系統(tǒng)中，顏色會用于表明交互，傳遞活性以及提供視覺連續(xù)性。內(nèi)置的應用程序選擇使用那些看起來更具個性的、純粹、干凈的顏色，并輔以或亮或暗的背景組合。

如果你要創(chuàng)建多樣的自定義顏色，要確保它們能夠和諧共存。例如，如果你的應用的基本風格是柔和的色調(diào)，你就應該創(chuàng)建一個協(xié)調(diào)的柔和色調(diào)的色板用于整個應用。

注意在不同情境下的顏色對比。例如，如果在導航欄的背景與欄按鈕標題之間沒有足夠的對比，按鈕就會很難被用戶看到。一個快速但不嚴謹?shù)姆椒ㄊ峭ㄟ^將設備置于不同的光照環(huán)境之中（包括晴朗的室外）來測試設備上的顏色是否具有足夠的對比度。

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

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

API注：使用淺色（tintColor）的屬性值給予欄按鈕顏色，使用欄淺色（barTintColor）的屬性值為欄本身賦色。欲了解更多關于欄屬性的內(nèi)容，可參見UINavigationBar Class Reference,，UITabBar Class Reference，UIToolbar Class Reference和 UISearchBar Class Reference.

注意顏色的盲區(qū)。多數(shù)色盲的人很難區(qū)分紅色與綠色。需要對你的應用進行測試以確保在其中你沒有將紅色與綠色作為 區(qū)分兩個不同狀態(tài)或值的唯一方式，一些圖像編輯軟件或工具能夠有效的幫你驗證顏色的盲區(qū)。通常意義來說，使用多種方式來表征原色的交互性是非常好的（需要 了解更多關于在iOS系統(tǒng)中表征交互性的信息，請參閱Interactive Elements Invite Touch）。

考慮選擇一種基準色顏色來表征交互性與狀態(tài)。內(nèi)置的應用里的基準色包括比如備忘錄中的黃色，和日歷中的紅色等等。如果你定義一種用于表征交互和狀態(tài)的基準色，要確保你的應用中的其他顏色不會與它發(fā)生沖突。

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

色彩可以向用戶傳達信息，但不一定會以你希望的方式。每個人眼中的色彩是不一樣的，不同的文化為色彩賦予的意義也是不相同的?；〞r間來研究如何使用色彩才可能會被其他國家或者文化接受。你要盡可能確定應用中運用的色彩向用戶傳達了恰當?shù)男畔ⅰ?/span>

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

1.10.2 優(yōu)秀的排版提供清晰的傳達（Great Typography Enables Clear Communication）

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

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

• 一系列的字號大小，在任何用戶設置，包括可訪問性設置下，可獲得優(yōu)質(zhì)的清晰度和極佳的閱讀體驗。
• 自動調(diào)整文字的粗細，字母間距以及行高的能力。
• 為語義上有區(qū)別的文本模塊指定不同的文本樣式，比如正文、腳注或者標題。
• 文本可以根據(jù)用戶在字號設置和可訪問性設置中指定字體大小的變化作出適當?shù)捻憫哪芰?/span>

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

注：如果你是用自定義字體，你仍然可以采用Dynamic Type或根據(jù)系統(tǒng)的字號設置來規(guī)劃字體范圍。當用戶改變設置時，你的應用也必須響應式的配合。如需了解如何使用文字樣式并確保當用戶改變文字型號設置時你的應用能夠獲取通知，可以參考Text Styles.

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

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

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

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

文本尺寸的響應式變化需要優(yōu)先考慮內(nèi)容。并不是所有的內(nèi)容對于用戶都是同等重要的。當用戶選擇更大的文本尺寸時，他們是想要使他們關注的內(nèi)容更容易閱讀；他們并不總是想要屏幕上的每個單詞都更大。

例如，當用戶選擇具備更大易用性的文本尺寸時，郵件將會以更大的尺寸顯示郵件的主題和內(nèi)容，而對于那些沒那么重要的信息——如時間和收件人——則采用較小的尺寸。

確保一個自定義字體在不同尺寸下的所有類型都具備可讀性。實現(xiàn)這一效果的方法之一是效仿在不同的文本尺寸下iOS系統(tǒng)呈現(xiàn)字體樣式的一些方法。例如：

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

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

 

1.11 圖標和圖形（Icons and Graphics）

1.11.1 應用圖標（The App Icon）

每個應用都需要一個漂亮的圖標。用戶常常會在看到應用圖標的時候便建立起對應用的第一印象，并以此評判應用的品質(zhì)、作用以及可靠性。

以下幾點是你在設計應用圖標時應當記住的。當你確定要開始設計時，請參考App Icon來獲取更詳細的設計規(guī)格與指導。（譯者注：App Icon處在iOS Human Interface Guidelines的Icon and Image Design部分，翻譯將在后續(xù)更新中放出，煩請各位耐心等候。）

• 應用圖標是整個應用品牌的重要組成部分。將圖標設計當成一個講述應用背后的故事，以及與用戶建立情感連接的機會。
• 最好的應用圖標是獨特的，整潔的，打動人心的，讓人印象深刻的。
• 一個好的應用圖標應該在不同的背景以及不同的規(guī)格下都同樣美觀。為了豐富大尺寸圖標的質(zhì)感而添加的細節(jié)有可能讓圖標在小尺寸時變得不清晰。

1.11.2 小圖標（Small Icons）

iOS提供了一系列小的icon，用以代表各種常見任務與操作，它們常用在標簽欄（Tab Bar）、工具欄（Toolbars）與導航欄（Navigation Bar）中。用戶通常都已經(jīng)了解這些內(nèi)置圖標的含義了，因此可以盡可能的多使用它們。

如果需要自定義動作或者內(nèi)容，你也可以設計自定義圖標。設計這些小的線性圖標與設計應用圖標有很大的區(qū)別，請參考Bar Button Icons來了解更多內(nèi)容。（譯者注：Bar Button Icons章節(jié)處在iOS Human Interface Guidelines的Icon and Image Design部分，翻譯將在后續(xù)更新中放出，煩請各位耐心等候）

請注意，你有時候也可以用文字來代替工具欄和導航欄的圖標。 就像iOS的日歷里面，工具欄上便是使用”今天”,”日歷”和”收件箱”來代替圖標進行表意的。

想要決定在工具欄和導航欄中到底是用圖標還是文字，可以優(yōu)先考慮一屏中最多會同時出現(xiàn)多少個圖標。同一屏幕中圖標的數(shù)量過多可能會讓整個應用看起來難以理解。使用圖標還是文字還取決于屏幕方向是橫向還是縱向，因為水平視圖下通常會擁有更多的空間，可以承載更多的文字。

1.11.3 圖形（Graphics）

iOS應用大多數(shù)圖形豐富。無論是你需要展示用戶的照片，還是需要創(chuàng)建自定義圖片，以下這些需求都應該遵守：

• 支持Retina顯示屏。確保你應用中的所有圖片資源都提供了高分辨率規(guī)格。尤其需要注意的是，iPhone 6 Plus需要提供@3x規(guī)格的圖片，而所有其他的高分辨率iOS設備都需要提供@2x規(guī)格的圖片。
• 顯示照片或圖片時請使用原始尺寸，并不要將它拉伸到大于100%。你不會希望在你的應用中看到拉伸和變形的圖片?？梢宰層脩糇约簛磉x擇他們是否想要縮放圖片。

不要使用從蘋果系列產(chǎn)品中復制的圖形。這些圖形均受版權保護，而且產(chǎn)品的設計可能會頻繁改變。

不要將蘋果的應用圖標，圖像或者截圖用于你的設計中。所有蘋果的設計均受版權保護并且不允許出現(xiàn)在你的UI中，除非它們是由系統(tǒng)直接提供的。

 

1.12 術語和措辭（Terminology and Wording）

你在應用中呈現(xiàn)的每一個字都是與用戶進行對話的一部分。把握這樣的對話機會，為你的用戶提供清晰的表意與愉悅的體驗。

設置是面向全體用戶的一個基礎應用，因此它使用了簡明扼要的語言來描述用戶可以進行的操作。舉個例子，設置→勿擾模式（Do Not Disturb）就沒有使用難以理解的復雜技術術語，而是用了簡單的語言，給用戶描述了里頭的一系列操作。

保證你使用的術語是用戶能理解的。根據(jù)你對用戶群的理解來決定在應用中使用什么樣的詞匯。舉個例子，在一款針對小白用戶的應用中使用技術術語是不合適的，但對于針對高端用戶的應用來說，使用技術術語是很自然的事情。

使用非正式的友好語氣，但不需要太過卑微。避免太正式太僵化，或者太過嘻嘻哈哈，傲慢無禮。請記住，用戶可能會反復閱讀這些文本，因此有些起初看上去很俏皮的語句，多看幾次之后可能會顯得煩人。

像新聞編輯一般遣詞造句，避免不必要的冗余語句。當你的文案足夠簡明扼要，用戶就可以很輕松地閱讀和理解它。確定最重要的信息，精煉它并且突出它，讓用戶不需要讀一大段文字才能了解他們在找什么，以及下一步要做什么。

給控件加上短標簽或者容易理解的圖標。讓用戶只掃一眼就能知道這個控件是干什么的。

描述時間時要注意準確性。今天和明天這些詞匯確實顯得比較友好，但有時候會讓用戶費解，因為你可能沒有辦法確定 用戶當前的時區(qū)和時間。舉個例子，假如有一項活動會在半夜12點前開始，對于在同一個時區(qū)的用戶而言，這個活動是在今天開始的，但對于那些在早一點的時區(qū) 里的用戶而言，這個活動在昨天就已經(jīng)開始了。

為你的應用寫一則漂亮的App Store描述，地把握住這個與潛在用戶溝通的絕佳機會。除了準確描述你的應用、強調(diào)應用的品質(zhì)與亮點以外，你還需要：

• 修正所有的拼寫、語法與標點符號錯誤。這些小錯誤也許不會影響用戶正常使用，但是可能會讓他們對應用的整體品質(zhì)產(chǎn)生負面印象。
• 盡量少用全大寫的詞匯。雖然大寫單詞有時候可以吸引注意力，但是全大寫的段落不適合閱讀，而且會產(chǎn)生一種朝用戶扯著嗓子吼的感覺。
• 可以描述bug修復情況。如果您的應用新版包含用戶一直期待的bug修復，那在你的軟件描述中提到這一點就是個很好的做法。

 

1.13 與iOS的整合（Integrating with iOS）

與iOS整合，指的是在當前平臺上給用戶提供一種舒適的、賓至如歸般的體驗，當然這并不意味著我們要把每一個應用做的和內(nèi)置應用一模一樣。

最好的與iOS整合的方式便是深刻地了解iOS的主題與核心——這一部分在上文為iOS而設計（Designing for iOS）部分中已有詳細描述，并尋求出如何在你的應用中融合與表達這種主題。當你這么做的時候，遵循本章中的指引可以幫助你為你的用戶提供他們想要的體 驗。

1.13.1 正確使用標準UI元素（Use Standard UI Elements Correctly）

盡可能使用UIkit提供的標準UI元素是一個好主意。多使用標準元素而非自定義元素，你與你的用戶都將受益：

• 標準UI元素會根據(jù)iOS官方的更新而自動更新——而自定義元素不會。
• 標準UI元素對于你自定義外觀和行為來說擁有優(yōu)秀的擴展性。舉個例子，iOS中所有的視圖（Views，從UIView中繼承的對象）都是可以使用TintColor屬性來定義顏色的，它讓應用配色變得很簡單。
• 用戶更熟悉和習慣標準的元素，因為他們可以立刻明白你的應用中這些元素的用途。

想要充分地利用標準UI元素的優(yōu)點，有一些關鍵點需要特別注意：

嚴格遵循每個UI元素的設計規(guī)范。當你應用中的UI元素的外觀與功能都是用戶所熟悉的，他們可以很容易地根據(jù)先前的經(jīng)驗來使用他們，進而更好地使用你的應用。你可以從這些章節(jié)中找到各種UI元素的設計規(guī)范：Bars, Content Views, Controls, Temporary Views.

（譯者注：上文提到的章節(jié)均處在iOS Human Interface Guidelines的第4章，翻譯將在后續(xù)更新中放出，煩請各位耐心等候。若有需要，亦可先參考先前已翻譯的iOS7 UI Elements章節(jié)：上，下。）

不要混用不同版本的iOS里的UI元素。你一定不希望讓用戶覺得你的UI元素來自于與當前用戶的設備版本不同的iOS系統(tǒng)。

大體來說，請避免創(chuàng)造自定義UI元素來表現(xiàn)標準交互行為。先 問問你自己為什么一定要創(chuàng)建一個與標準UI元素行為完全相同的自定義元素。如果你只是想改變標準UI元素的外觀，可以考慮使用UIKit外觀定制 API(UIKit appearance customization APIs)，或者給元素填充別的顏色。如果你需要定義一個與標準控件稍有不同的行為，請確保你在改變了這個UI元素的屬性和行為之后，這個元素仍然能完成 你所希望的操作。如果你需要完全自定義一個行為，最好是設計一個與標準元素完全不相像的自定義元素。

提示：Interface Builder讓獲取標準UI元素，使用外觀定制API（the appearance customization APIs），獲取屬性，以及在你的應用里使用自定義和系統(tǒng)自帶圖標變得很簡單。想要了解更多Interface Builder的內(nèi)容，請參閱Xcode Overview.

不要用系統(tǒng)自帶的按鈕和圖標表達其他含義。iOS提供了多種可用的按鈕和圖標。請確認你了解它們的準確表意；不要單純憑借你看到這些圖標樣式的猜測和理解來解讀和使用它們。（你可以在Toolbar and Navigation Bar Buttons和Tab Bar Icons中了解到這些按鈕和圖標的準確含義。）

如果你所需要的功能無法用系統(tǒng)提供的按鈕和圖標來表現(xiàn)，你也可以設計自定義按鈕。自定義按鈕的設計可以參考 Bar Button Icons.

（譯者注：上文提到的章節(jié)均處在iOS Human Interface Guidelines的第4章，翻譯將在后續(xù)更新中放出，煩請各位耐心等候。若有需要，亦可先參考先前已翻譯的iOS7 UI Elements章節(jié)：上，下。）

如果你的app是沉浸式體驗，那么創(chuàng)造全新的自定義UI是合理的。因為你在創(chuàng)造一個統(tǒng)一的體驗環(huán)境，讓用戶在其中能夠有所期待并探索如何控制應用。

1.13.2 弱化文件和文檔處理（Downplay File and Document Handing）

iOS應用可以幫助用戶創(chuàng)建和處理文件，但這并不意味著用戶需要過分考慮iOS設備的文件系統(tǒng)如何運作。

如果你的應用中支持用戶創(chuàng)建和編輯文檔，那么提供一個清晰的圖形庫視圖(document library view)讓用戶能夠方便地打開或者新建文檔是一個好的做法。理想狀況下，這樣的圖形庫視圖擁有以下特征：

• 高度圖形化。用戶通過屏幕上的縮略圖就可以一目了然，快速找出自己想要的文件。
• 讓用戶用最少的動作完成自己的任務。比如說，用戶可以快速地水平滾動文件列表，然后輕點一下自己想要的文件來打開它。
• 包含新建文檔功能。一個圖形庫視圖應該支持讓用戶點擊一個新建文檔的占位圖便完成新建文檔操作，而不是讓用戶通過訪問別的地方來新建文檔。

舉個例子，Pages的圖形庫視圖里面，既展示了用戶已存在的文檔，也加入了便捷的新建文檔操作。

提示：你可以使用Quick Look Preview功能來讓用戶預覽你的應用中的文件，哪怕你的應用不能打開這些文件。想要了解如何在你的應用中提供這個功能，請參閱Quick Look.

如果你的應用允許用戶使用在其他應用中創(chuàng)建的文檔，你可以通過模態(tài)文檔選擇視圖控制器（modal document picker view controller）來幫助用戶觸達它們。這個控制器可以提取用戶在iCloud中的文檔，還可以通過文檔提供者擴展（Document Provider extensions）來提取在其它應用中創(chuàng)建和儲存的文件。想要了解更多文檔提供者擴展的內(nèi)容，可以參考Document Provider Extensions; 想要了解更多文檔提取視圖控制器，請參考Document Picker Programming Guide.

給用戶足夠的信心，讓他們相信除非主動取消或者刪除，他們的成果會被隨時妥善保存。如果你的應用幫助用戶創(chuàng)建于管理文檔，不能要求用戶每次都能及時保存。無論是打開另一個文檔或切換應用的時候，iOS應用都應當承擔起幫助用戶保存輸入內(nèi)容的責任。

如果你的應用的主要功能不是創(chuàng)造內(nèi)容，但又允許用戶查看或編輯信息，這種情況下你需要詢問用戶是否要保存修改。在這種場景下，比較好的做法是提供 “編輯”按鈕，點擊后進入編輯狀態(tài)，同時編輯按鈕變成“保存”和“取消”按鈕，這種變化可以提示用戶當前處于編輯模式。“保存”可以保留修改內(nèi)容，“取 消”則退出編輯模式。

1.13.3 必要時提供可配置選項（Be Configurable If Necessary）

某些應用需要用戶手動安裝或設置選項，但是大部分應用不需要如此。一個好的應用可以讓大部分用戶快速上手，并通過主界面給用戶提供便捷的調(diào)整體驗的方式。

當你的應用在默認狀態(tài)下就能滿足大部分用戶的期望，用戶對設置的需求就減少了。如果你需要儲存用戶的基本資料，可以優(yōu)先向系統(tǒng)請求和拉取相關信息，而不是上來就讓用戶自己填寫它。如果你一定要提供用戶鮮少用到的設置項，請參考App Programming Guide for iOS中的The Setting Bundle部分來了解如何在代碼中定義它們。

盡可能在主UI中提供設置選項。如果這個設置項代表著用戶一個基本任務，又或者用戶在進行主線任務時有可能頻繁改變設置，那么將設置項放在主UI中會很方便。如果用戶只是偶爾才會用到設置項，那么可以將其放在獨立的視圖中。

如果應用內(nèi)相關設置需要在系統(tǒng)設置中改變，幫助用戶直接訪問系統(tǒng)設置。尤其是，如果你要用一段文字來描述如何改變這個設置，比如“設置>隱私>定位服務”，倒不如直接放置一個按鈕，點擊后即可到達設置中的定位服務。想要了解如何實現(xiàn)，請參考 Settings Launch URL.

1.13.4 充分利用iOS技術（Take Advantage of iOS Technologies）

iOS提供了豐富的技術方式來支持用戶完成他們所期望的各種任務和場景。這意味著在絕大多數(shù)情況下，將系統(tǒng)提供的技術整合到你的應用中，往往比自定義一種新的技術更為可靠。

某些iOS技術，比如多任務并行（Multitasking）與語音向?qū)В?/span>VoiceOver）等等，是所有應用都應該包含的系統(tǒng)級特性。而另外一些技術是否整合到應用中，則取決于應用本身的功能性。比如處理門票和禮品卡的應用（Wallet）支持用戶在應用內(nèi)內(nèi)購（In-App Purchase），展示應用內(nèi)置廣告（iAd Rich Media Ads）則可以整合 Game Center，同時支持iCloud.

 

本章英文原文訪問地址：iOS Human Interface Guidelines
本章中文翻譯PDF下載：點此下載

出處：騰訊ISUX