iOS 11 設計規範 | 第一章 預覽 Overview

1.1原則（Themes）

iOS設計主題（iOS Design Themes）

作為一名 App 設計師，你就有機會發布一款能夠登上 App Store 榜首的卓越產品。為此，你的應用在質量和功能上必須精益求精。

iOS 與其他平台不同，主要是下面三大原則：

• 清晰：整個系統中，任何字型大小的文字都必須清晰易讀，圖標表答含意準確易懂，修飾恰到好處，以功能驅動設計。留白、顏色、字體、圖形和其他界面元素能夠巧妙地突出重點內容並傳達交互性。
• 順應：流暢的動效和清晰美觀的界面有助於用戶理解內容並與之交互，且不會干擾用戶。當內容佔據整屏時，半透明和模糊處理通常會暗示其他更多的內容。減少使用邊框、漸變和陰影，使界面儘可能輕量化，從而突顯內容。
• 縱深：清晰的視覺層和生動的動效賦予界面層次感，使其富有活力並有助於理解。使可觸發界面元素更容易被找到能提升體驗的愉悅感，讓用戶在觸發相應功能或者獲取更多內容時不至於茫然無措。當用戶瀏覽內容時，流暢的過渡能夠提供縱深感。

設計原則（Design Principles）

要想擴大影響力和延展性，在你設計 App 時，請牢記以下原則：

整體美感（Aesthetic Integrity）

整體美感體現在一款 App 的視覺外觀、交互行為與其功能結合的優異程度。例如，一款協助用戶完成重要任務的 App 應該使用不易察覺且不會造成干擾的圖形、標準化控制項和可預知的交互行為，從而使用戶聚焦在任務本身。反之，一款沉浸式體驗的 App（如遊戲），需要提供一個有吸引力的界面，在鼓勵用戶探索的同時為用戶帶來無窮的樂趣和激動。

一致性（Consistency）

一款內部統一的 App 應使用相同的標準和規範——使用系統提供的界面元素，風格統一的圖標，標準的字體樣式和一致的措辭。App 所包含的特徵和交互行為應是符合用戶心理預期的。

指示操作（Direct Manipulation）

在屏幕上指示操作內容可以促進用戶參與並有助其理解。指示操作包括用戶旋轉設備或使用手勢控制屏幕上的內容。通過指示操作，用戶可以實時看到自己的操作結果。

反饋（Feedback）

反饋能夠響應交互操作，呈現結果，便於用戶了解情況。系統自帶的 iOS 的 App 對用戶的每個操作都提供了明確的反饋。

• 交互元素在點擊時會被高亮顯示
• 進度指示器顯示了需要長時間運行的操作進度
• 動效和聲音使用戶能夠更清晰地感知交互行為的結果

隱喻（Metaphors）

當一個 App 的虛擬對象和行為與用戶所熟悉的體驗相似時——無論這種體驗來源於現實生活亦或是數字世界，用戶就能夠更快速地學會使用這款 App。隱喻在 iOS 中能夠起作用是因為用戶與屏幕在進行物理上的交互。

• 可以通過移動分層視圖來顯示被遮擋的內容
• 可以拖拽並滑動對象
• 可以切換開關，移動滑塊，滾動數值選擇器
• 可以通過輕掃來翻閱書籍和雜誌

用戶控制（User control）

在 iOS 中，用戶是決策者，而不是 App。App 可以對用戶行為提出建議，對可能造成嚴重後果的行為發出警告，但不應該直接替用戶做決策。優秀的 App 在用戶主導和避免不想要的結果之間找到平衡。為了讓用戶擁有掌控性，App 可以使用用戶熟悉且可預知的交互元素，讓用戶二次確認破壞性的行為，並且保證可以停止正在執行中的操作。

1.2 iPhone X

iPhone X 擁有一個巨大、高解析度、圓角的無邊框屏幕（edge-to-edge display），它在沉浸式和內容豐富性上提供了前所未有的體驗。

屏幕尺寸

在豎屏中，iPhone X 顯示屏的寬度與 4.7 英寸的 iPhone 6、iPhone 7 和 iPhone 8 一致。但是 iPhone X 顯示屏比 4.7 英寸顯示屏高 145 pt，為內容增加了大約 20％ 的垂直空間。

為 App 中的所有設計創作提供高解析度的切圖。 iPhone X 擁有比例係數為 @3x 的高解析度顯示屏。 對於符號、字體和其他平面矢量圖形，最好提供與解析度無關的 PDF 文件。 對於柵格化的點陣圖，提供它的 @ 3x 和 @ 2x 版本。 請參閱圖像大小和解析度以及自定義圖標。

布局（Layout）

在 iPhone X 上設計 App 時，你必須確保布局內容填滿屏幕，並且不會被設備的圓角、感測器外殼或用於訪問主屏幕的指示器所遮擋。

大多數使用系統原生 UI 組件的 App 能自動適應設備的新外形。當背景擴展到顯示屏的邊緣時，這些 UI 組件能被適當地進行配置和重新定位。（譯者註：如下圖中 iPhone 6 的界面在 X 中被自動放大和擴展了）

iPhone X 也能很好的適應具有自定義布局的 App，尤其是在你的 App 使用響應式布局並遵守安全區域和邊緣布局指南。

在iPhone X上預覽你的 App：你可以使用 Simulator（包括 Xcode）來預覽 App，並檢查截斷和其他布局問題。 不過，某些功能（如廣色域圖像）最好能在實際設備上預覽。

提供全屏體驗： 確保背景擴展到顯示屏的邊緣，並且是垂直可滾動的布局，如列表視圖和照片精選頁面，可以一直延伸到底部。

嵌入的重要內容要防止被裁切：一般來說，內容應該是居中對稱的，這樣它從任何方向看起來效果都很好，不會被圓角、設備的感測器外殼截斷或被用於訪問主屏幕的指示器遮擋住。為獲得最佳效果，請使用系統自帶的界面元素和響應式布局來創建你的界面。所有 App 都應遵循 UIKit 定義的安全區域和布局邊距，這些區域可以根據設備和上下文進行適當的填充。安全區域還可以防止狀態欄、導航欄、工具欄和標籤欄被內容覆蓋。

注意狀態欄的高度：在 iPhone X 上，狀態欄比其他 iPhone 要高。如果你在自己的 App 中自定義了一個位於狀態欄下方的固定元素，則必須更新你的 App 才能根據用戶的設備動態地定位該元素（譯者註：例如考慮到本來狀態欄是 20pt，考慮到它的佔用空間你自定義了一個距離頂部 20pt 的 Banner，那麼在因為 iPhone X 的狀態欄更高可能就會導致原本正好的模塊邊緣出現擠占的問題）。

請注意，當後台任務如錄音和定位，處於激活狀態時，iPhone X上的狀態欄高度不變。

如果你的 App 目前隱藏了狀態欄，在 iPhone X 上需要重新考慮這一設定：狀態欄會佔據屏幕的一塊區域從而導致 App 無法充分利用這部分空間，但由於狀態欄可能會顯示對用戶有用的信息，並且相比於 4.7 英寸的 iPhone，iPhone X 的顯示屏在豎向上能顯示更多內容，因此，應當重新考慮是否要隱藏 iPhone X 上的狀態欄。

在 4.7 英寸 iPhone 和 iPhone X 重複使用現有設計創作時，請注意兩種屏幕的長寬比差異。由於 iPhone X 的長寬比不同於 4.7 英寸的 iPhone， 所以在 4.7 英寸 iPhone 上全屏顯示的圖稿，在 iPhone X 上全屏顯示時會被裁剪或產生信箱模式。同樣，在 iPhone X 上全屏顯示的圖稿，在 4.7 英寸 iPhone 上全屏顯示時會被裁剪或信筒模式。請確保重要的內容在兩種尺寸的設備上都能完整顯示。

不要將互動式控制項放置在屏幕底部和角落：如果放置在屏幕底部，由於用戶要使用顯示屏底部的滑動手勢來訪問主屏幕和切換 App 程序，這些手勢可能會使你在此區域中設置的自定義手勢失效。如果放置在屏幕上方的兩個角落，則用戶不能夠輕易觸及，從而給操作帶來不便。

不要隱藏或使關鍵的顯示特性太醒目。不要在屏幕頂部和底部放置黑色區塊（black bars）來隱藏設備的圓角、感測器外殼和用於訪問主屏幕的指示器。不要使用諸如括弧，邊框，形狀或引導文字等視覺裝飾來使這些區域更加醒目。

允許自動隱藏訪問主屏幕的指示器：當啟用自動隱藏時，如果用戶幾秒鐘內沒有觸摸屏幕，指示燈將被隱藏。當用戶再次觸摸屏幕時，指示燈會再次出現。這種行為只適用於被動觀看體驗嗎，如播放視頻或照片幻燈片。

請參閱適應性和布局

顏色（Color）

iPhone X 的顯示器支持 P3 色彩空間，它能夠提供比 sRGB 更豐富、更飽和的顏色。

使用廣色域來增強視覺體驗。廣色域的照片和視頻看起來會更加逼真，廣色域的數據可視化和狀態指示器更有視覺衝擊力。 請參閱 顏色管理。

視頻

系統提供的視頻播放器有兩種查看模式:全屏和適應屏幕。默認情況下，系統根據視頻的長寬比匹配觀看模式，用戶可以在暫停時切換模式。

對於開發人員指導，請參見 AVPlayerViewController。

全屏查看模式。視頻等比拉伸填充顯示屏。可能會出現屏幕被裁切的情況。這是寬比例視頻的默認查看模式(2:1通過2.40:1)。

對於開發人員指導，請參閱 resizeAspectFill。

適應屏幕查看模式。整個視頻在屏幕上可見。將會發生呈寬屏顯示或呈柱狀顯示。這是標準視頻的默認觀看模式(4:3,16:9，任何高達 2:1)和超寬視頻(任何超過 2.40:1)。

對於開發人員的指導，請參見 resizeAspect。

確保自定義視頻播放器是用戶所期待的。我們的目標是在 iPhone X 上播放視頻時默認全屏，然而，如果在全屏的情況下被裁切過多的畫面，視頻應該縮小以適應屏幕。你還應該允許用戶在全屏和基於個人喜好的屏幕模式上切換。

對於開發人員指導，請參見 AVPlayerLayer。

總是顯示視頻內容的原始長寬比。如果你的視頻內容嵌入到指定的呈寬屏顯示或呈柱狀顯示比例中，iOS 將無法根據用戶選擇的觀看模式來正確地縮放視頻。視頻嵌入邊框中會使它在全屏模式和適應屏幕模式中顯得更小。它還會讓視頻在全面屏、非全屏環境中不能正確顯示，比如在 iPad 上的圖片模式。

手勢（Gestures）

iPhone X 上的顯示屏可以通過屏幕邊緣的手勢操作來訪問主屏幕、App 切換、通知中心和控制中心。

不要干擾系統自帶的屏幕邊緣手勢：用戶依靠這些手勢在每個 App 中進行操作。在極少數情況下，沉浸式 App（如遊戲）自定義的屏幕邊緣手勢能優先於系統自帶的手勢——第一次滑動會調用 App 自定義的手勢，而第二次滑動則會調用系統手勢。應當謹慎採取這種交互方式（稱為邊緣保護），因為它會讓用戶難以使用系統手勢。

請參閱手勢。

額外的設計注意事項（Additional Design Considerations）

使用正確的身份認證方式： iPhone X 支持人臉身份識別。如果你的 App 集成了 Apple Pay 或其他系統身份認證功能，請不要在 iPhone X 上使用 Touch ID。同樣，請確保你的 App 不會在支持 Touch ID 的設備上使用 Face ID 。

請參閱驗證。

不要提供與系統鍵盤相重複的功能：在 iPhone X 上，即使使用自定義鍵盤，Emoji / Globe按鈕和 Dictation 按鈕也會自動出現在鍵盤上。你的 App 不能影響這些按鈕，因此不要重複使用它們，造成混亂。

請參閱自定義鍵盤。

資源（Resources）

在資源中下載 Photoshop 和 Sketch 格式的 iPhone X UI 設計模板。

1.3 iOS更新內容（Whats New in iOS 11）

在 iOS 11 中，你可以開發比以前更強大、更友好的 App。

增強現實：通過增強現實，App 可以提供完美融合虛擬場景與現實世界的沉浸式體驗。

更醒目的導航欄：為了提高瀏覽和搜索時的清晰度和語義，App 能夠提供包含大字型大小、粗體標題的導航欄。

更清晰的圖標：填充圖形和較粗的描邊筆畫可以使圖標保持較小的形體，並且更能得到凸顯。

請參閱 自定義圖標 和 系統圖標。

拖拽。拖拽功能允許用戶使用一根手指將選定的照片、文本和其他內容從一個位置移動到另一個位置——甚至能夠在 iPad 上的 App 之間移動。

Face ID 和 Touch ID：你的 App 可以集成系統的生物識別安全系統，為用戶提供安全可靠且值得信任的身份驗證方式。

近距離無線通訊（NFC）：在支持 NFC 功能的設備上運行的 App，可以無線讀取連接到真實世界的電子標籤數據。

安全區域布局指南：遵照系統的安全區域，確保內容被恰當地插入到布局中，並防止狀態欄、導航欄、工具欄和標籤欄被內容覆蓋。

字體變化：增加文字的大小和字重能提高整個系統的可讀性。除了標準的動態字型大小之外，系統還提供了一些更大字型大小的字體，以滿足用戶的需求。

1.4 界面元素（Interface Essentials）

大多數的 iOS App 使用了來自 UIKit 的組件進行搭建，這是一個定義了基本界面元素的編程框架。這個框架讓各種 App 在視覺上達到一致的同時還提供了高度的個性化。UIKit 元素是靈活且常見的。且它們是可適配的，讓你能夠設計一個在任何 iOS 設備上看起來都很棒的 App，而且能夠在系統發布新版本的時候自動更新。由 UIKit 提供的界面元素可以分為以下三種：

欄（Bars）：告知用戶現在在 App 中所處的位置，提供導航，而且還可能包含按鈕或者其它用來觸發功能和交流信息的元素。

視圖（Views）：包含用戶在 App 內最關注的信息，例如文本、圖形、動畫和交互元素的容器。視圖允許使用諸如滾動、插入、刪除和排列之類等交互行為。

控制項（Controls）：觸發功能和傳遞信息。控制項包括按鈕、開關、輸入框和進度指示器。

除了定義 iOS 界面，UIKit 還定義了你的 App 能夠採用的功能。通過這個框架，你的 App 可以對觸摸屏上的手勢做出回應，還可以實現一些例如繪畫、輔助和列印的功能。

iOS 也和其他編程框架和技術緊密結合，例如 Apple Pay、HealthKit 和 ResearcKit，幫助你設計出一個強大且使人驚嘆的 App。

iOS 11 設計規範完整版：

完整版已在微信公眾號：超人的電話亭 中更新完畢，後台回復「iOS規範」即可。