ios設計規範（下）

5.視覺設計(Visual Design)

5.1適應性和佈局(Adaptivity and Layout)

⼈們老是但願他們的全部設備，隨時隨地都能使⽤他們喜歡的App。在iOS中，界⾯元素和佈局可以⾃動改變形狀和⼤⼩以匹配不一樣的設備，⽐如在iPad中多任務操做時、分屏模式時以及屏幕旋轉時的顯示。所以，你必須設計⼀個適應性強的界⾯，在任何環境中都能提供良好的(⽤戶)體驗。

設備屏幕尺⼨

iOS設備有各類不一樣的屏幕尺⼨，能夠橫屏或者豎屏使⽤。

⾃動佈局

⾃動佈局是構建⾃適應界⾯的開發⼯具。你能夠定義App的內容規則。例如，您能夠約束⼀個按鈕，使其老是⽔平居中，而且位於圖像下⽅8點，⽽無論可⽤的屏幕空間如何。當檢測到某些場景變化(稱爲特徵)時，⾃動佈局將根據特定約束⾃動調整佈局。 你能夠將 APP 設置爲動態適應特徵，包括:

當檢測到App使⽤環境變化（稱爲特徵）時，⾃適應會根據指定的約束⾃動從新調整佈局。您能夠將應⽤設置爲動態適應各類特徵，包括：

• 不一樣的設備屏幕尺⼨、分辨率和顏⾊(顯示)模式(sRGB/P3)(screen sizes,resolutions, and color gamuts (sRGB/P3))
• 不一樣的設備⽅向(橫屏 / 豎屏)
• 拆分視圖(Split view)在iPad上的多任務處理模式(Multitasking)
• 動態⽂本的⼤⼩變化(Dynamic Type)
• 場景定製的國際化特徵(佈局⽅向的從左到右或者從右到左，⽇期/時 間/數字格式，字體變化，⽂本⻓度)
• 系統特性可⽤性(3D Touch)

佈局引導和安全區域

佈局引導定義了在屏幕上實際上並無顯示的矩形區域，但對內容的定位、對⻬和間距提供了幫助。該系統包含預約義的佈局引導，能夠⽅便地在內容 周圍應⽤標準的邊緣，並限制⽂本的寬度以達到最佳的可讀性。你還能夠⾃定義佈局引導。

遵照 UI Kit 定義的安全區域和佈局邊界: 這些佈局引導能夠根據設備和(顯示)內容進⾏適當的嵌⼊，安全區域還能夠防⽌內容對狀態欄、導航條、⼯具欄和標籤欄的影響。標準系統提供的視圖⾃動採⽤安全區域佈局引導。 尺⼨類型 尺⼨類型是根據它們的⼤⼩⾃動的分配內容區域。該系統定義了兩個尺⼨種類，常規的(表示可拉伸的空間)和固定的(表示固定⻓度的空間)，描述視圖的⾼度和寬度。 視圖能夠擁有任何尺⼨類型的組合:

• 常規的寬度，常規的⾼度
• 緊湊的寬度，緊湊的⾼度
• 常規的寬度，緊湊的⾼度
• 緊湊的寬度，常規的⾼度

與其餘環境變化⼀樣，iOS基於內容區域的尺⼨是動態地進⾏佈局調整的。 例 如，當垂直尺⼨種類從固定⾼度變爲常規⾼度時，多是由於⽤戶將設備從橫 屏旋轉到豎屏，標籤欄可能會更⾼。

設備尺⼨類型 基於屏幕尺⼨，不一樣尺⼨類型的組合應⽤於不一樣設備的全屏體驗。

多任務的尺⼨類型 在iPad上，當你的App在進⾏多任務處理時，尺⼨類型也一樣適⽤。

佈局注意事項 確保重要內容在默認⼤⼩下清晰可讀: 除⾮⽤戶選擇調整⼤⼩，不然不該該讓⽤ 戶橫向滑動才能閱讀重要的⽂字信息，或者放⼤才能看清重要的圖⽚。

在整個App中保持⼀致的視覺外觀: ⼀般來講，具備類似功能的元素應該看起來 相似。

利⽤視覺權重和平衡來表示重要性: ⼤的對象⽐⼩的對象更能抓住⼈的眼球，顯 得更重要。⼤的對象也更容易點擊，這在容易分散注意⼒的使⽤環境中(如廚房 或健身房)使⽤時這點尤其重要。⼀般來講，處於從左往右的閱讀環境時把⾸要 的對象放在屏幕的上半部分而且偏左的位置。

利⽤對⻬來⽅便瀏覽，而且表達結構和層級: 對⻬會讓App看起來整⻬有次序， 當⻚⾯滑動時有助⽤戶聚焦，更容易找到信息。縮進和對⻬還能夠代表多組內容之間的關係。

若是可能，同時⽀持豎屏和橫屏模式: ⽤戶更喜歡在兩種模式下都能使⽤ App， 因此最好可以滿⾜他們的指望。

準備好應對⽂本⼤⼩的改變: 當⽤戶在設置⾥選擇了不一樣的⽂本⼤⼩，他們老是 但願⼤部分的 App 都能適配。爲了適應某些⽂本⼤⼩的改變，你可能須要調整 佈局。

爲可交互元素提供⾜夠的空間: 儘可能讓全部控件都有不⼩於 44pt x 44pt 的點擊區域。

在多個設備上預覽您的應⽤。 您可使⽤模擬器（Xcode附帶）來快速預覽您 的應⽤程序並檢查剪切和其餘排版問題。若是您的應⽤⽀持橫向模式，請確保 您的佈局看起來很棒，⽆論設備是向左仍是向右旋轉。全屏iPhone不⽀持倒置 肖像模式。某些功能（如寬彩⾊圖像）最適合在實際設備上預覽。

在較⼤的設備上顯示⽂本時，使⽤可讀性邊距: 這些邊距保持⽂本每⾏都⾜夠 短，能夠確保溫馨的閱讀體驗。

適應語境的變化 環境變化時保持當前內容的焦點不變: 內容是你的最⾼優先級。讓焦點隨着環境 變化⽽發⽣改變是會讓⽤戶困惑的，感受當前的 App 失控了。

避免⽆原因的佈局變更: 即便⽤戶旋轉了設備，也不表明總體的佈局須要變 換: ⽐如，若是你的App 在豎屏模式展現了⼀⽹格的圖⽚，那麼在橫屏模式你沒必 要展現一樣的圖⽚。相反地，你只須要簡單地調整⽹格的尺⼨就⾏了。儘可能在 任何環境下都能維持⼀樣的體驗。

若是你的 App 只⽀持⼀種模式，那麼請提供兩種屏幕模式的變量: 若是你的 App 只能在⼀種模式下運⾏，那麼確保它可以⽀持該模式的兩種⽅向變化是⼗ 分重要的。⽐如，若是你的 App 只在橫屏模式運⾏，那麼⽆論Home 鍵在左邊 仍是右邊，應⽤都該能正常使⽤。若是設備被旋轉180度，那麼你的 App 內容 也該同時旋轉180度。反之，當⽤戶拿錯設備⽅向時，你的 App 沒有⾃動旋轉， 那麼他們就會很⾃然地知道應該旋轉設備。你⽆需告訴他們該如何糾正。

根據當前使⽤內容來規定相應的旋轉⽅向: ⽐如，⼀個須要⽤戶旋轉設備來控制 ⻆⾊移動的遊戲，就不會在遊戲中改變橫豎屏的⽅向。可是，它能夠根據當前 設備的旋轉⽅向來展現菜單和引導步驟。

確保你的應⽤在iPad上也能運⾏: ⽤戶很⾼興可以靈活地在任⼀類型的 iOS 設 備上運⾏你的應⽤。即便你但願⼤多數⼈在iPhone上使⽤你的應⽤，但其界⾯ 元素在iPad上仍需保持可⻅而且實⽤。若是應⽤的某些功能須要特定於iPhone 的硬件(如 3D Touch)，請考慮在iPad上隱藏或禁⽤這些功能，並讓⽤戶使⽤應 ⽤的其餘功能。

在重⽤現有藝術做品時，請注意寬⾼⽐差別。 不一樣的屏幕尺⼨可能具備不一樣的 寬⾼⽐，致使藝術品出現裁剪，信箱或郵筒。確保全部顯示尺⼨都能保留重要 的可視內容。

設計全屏體驗

擴展可視元素以填充屏幕。確保背景延伸到顯示器的邊緣，而且垂直可滾動的 佈局（如表和集合）⼀直延伸到底部。

避免將交互式控件明確放置在屏幕的最底部和⻆落中。 ⼈們使⽤顯示屏底部的 滑動⼿勢來訪問主屏幕和應⽤切換器等功能，這些⼿勢可能會取消您在此區域 中實現的⾃定義⼿勢。屏幕的遠⻆多是⼈們溫馨地到達的困難區域。

插⼊必要內容以防⽌剪裁。 一般，內容應該居中且對稱插⼊，所以它在任何⽅ 向上看起來都很好，沒有被圓⻆修剪，沒有被傳感器外殼隱藏，而且不會被⽤ 於訪問主屏幕的指示器遮擋。爲得到最佳效果，請使⽤標準的，系統提供的界 ⾯元素和⾃動佈局來構建界⾯並遵循佈局指南和安全區域由UIKit定義。當設備 處於橫向時，某些相似應⽤的遊戲可能適合在屏幕的下半部分（延伸到安全區 域下⽅）放置可點擊控件，以便爲內容留出更多空間。在屏幕頂部和底部放置 控件時使⽤匹配的插⼊，並在Home指示器周圍留出⾜夠的空間，以便⼈們在 嘗試與控件交互時不會意外地將其做爲⽬標。

插⼊全寬按鈕。 延伸到屏幕邊緣的按鈕可能看起來不像按鈕。尊重全寬按鈕兩 側的標準UIKit邊距。當屏幕底部出現圓⻆並與安全區域的底部對⻬時，屏幕底 部出現的全寬按鈕效果最佳 - 這也確保它不會與Home指示燈衝突。

請勿掩蓋或特別注意按鍵顯示功能。 不要試圖經過在屏幕的頂部和底部放置⿊ 條來隱藏設備的圓⻆，傳感器外殼或⽤於訪問主屏幕的指示器。不要使⽤括號， 邊框，形狀或教學⽂本等視覺裝飾來特別注意這些區域。

請注意狀態欄⾼度。 全屏iPhone上的狀態欄⽐舊款iPhone更⾼。若是您的應⽤ 假設狀態欄⾼度爲狀態欄下⽅的定位內容，則必須更新您的應⽤以根據⽤戶的 設備動態定位內容。請注意，當語⾳錄製和位置跟蹤等後臺任務處於活動狀態 時，全屏iPhone上的狀態欄不會更改⾼度。

若是您的應⽤當前隱藏了狀態欄，請從新考慮全屏iPhone的決定。 與舊款 iPhone相⽐，全屏iPhone的內容垂直空間更⼤，狀態欄佔據了您的應⽤可能⽆ 法充分利⽤的屏幕區域。狀態欄還顯示⼈們認爲有⽤的信息。它只應隱藏以換 取附加值。

容許⾃動隱藏指示器以便謹慎訪問主屏幕。 啓⽤⾃動隱藏後，若是⽤戶未觸摸 屏幕⼏秒鐘，指示燈會淡出。當⽤戶再次觸摸屏幕時，它會從新出現。應僅針 對播放視頻或照⽚幻燈⽚等被動查看體驗啓⽤此⾏爲。

5.2 動效(Animation)

貫穿於 iOS 系統的優美、精細的動畫在⽤戶和屏幕屏幕內容之間建⽴了⼀種視 覺上的聯繫。當動畫被合理利⽤時，它可以表達狀態、提供反饋、增強直接操 縱感，而且視覺化呈現⽤戶的操做結果。

明智且審慎地使⽤動畫和動效: 不要爲了使⽤動畫⽽動畫。過分或是⽆理由的動 畫會讓⽤戶有不連貫和錯亂的感受，尤爲是在那些不能提供沉浸式體驗 的 App 中。iOS 常常使⽤動效，⽐如在主屏和其它地⽅使⽤了視差效果，來建⽴⽤戶 的沉浸感覺。這些效果有助於加強理解和提高愉悅感，可是濫⽤它們就會讓⼀ 個 App 變得難以控制。若是你想使⽤動效，⼀定要提早進⾏ ⽤戶測試以保證 它們真的能不辱使命。

⼒求真實性和可信性: ⽤戶能夠接受藝術創造，可是當動效沒有意義或是違背了 物理定律時，⽤戶就會感到混亂。打個⽐⽅，若是⽤戶經過在屏幕頂部下滑出 ⼀個視圖，那麼他們應該也能經過上滑將該視圖關閉。

使⽤連貫的動畫: ⼀個熟悉並流暢的體驗能⼀直讓⽤戶參與其中。⽤戶已經習慣 了貫穿於 iOS 系統的精細動畫，⽐如平穩的過渡、橫豎屏之間的流暢轉換和基 於物理現實的滾動。 除⾮你在創造⼀個沉浸式體驗，⽐如遊戲，否則⾃定義動 畫都應該和系統動畫相符。

讓動效可選: 當在輔助功能偏好設置中啓⽤減小動做的選項時，App 應儘量減 少或消除應⽤程序動畫。

5.3 品牌化 (Branding)

成功的品牌化不只是單純地在應⽤中添加品牌元素。優秀的 App 經過優雅別緻 的⽂字、顏⾊和圖⽚來營造獨特的品牌辨識度。提供⾜夠多的品牌元素讓⽤戶 感受是處在你的 App 中，但不要由於過分使⽤⽽形成⼲擾。

**融⼊精妙的、不唐突的品牌元素: ** ⽤戶使⽤你的 App 是得到娛樂、獲得信息或 是作某些事情的，⽽不是爲了觀看⼀個⼴告。要想達到最好的體驗，請巧妙地 將品牌融於 App 設計中。讓 App 圖標的顏⾊貫穿整個 App 設計， 不失爲⼀ 種很好的專屬使⽤界⾯。

不要讓品牌化阻礙了優秀的 App 設計: ⾸先，讓你的 App 像是⼀個 iOS App。 保證它是直觀的、易於導航的、易⽤的而且之內容爲中⼼的。當你的 App 在其 它平臺也適⽤，不要爲了保持品牌的⼀致性⽽犧牲了設計的質量。 內容⽐品牌化更重要: 在屏幕頂部放置⼀個除了展現品牌元素之外沒有任何⽤ 途的頭部欄，就意味着犧牲了⽤來瀏覽內容的空間。取⽽代之的，考慮採⽤低 侵⼊性的⽅式來實現品牌化，⽐如使⽤⾃定義的配⾊⽅案和字體，或是巧妙地 ⾃定義背景。

剋制住想要在應⽤中處處展現 logo 的誘惑: 避免在 App 中處處展現 logo， 除 ⾮它是品牌化中必不可少的⼀部分。這點在導航欄中尤爲重要，由於提供⼀個 標題⽐ logo 更加有⽤。

遵循 Apple 的商標準則: Apple 的商標不能在你的 App 名字或是圖像中出現。

5.4 顏⾊ (Color)

顏⾊是增長活⼒，提供視覺連續性，溝通狀態信息，響應⽤戶操做的反饋並幫 助⼈們可視化數據的好⽅法。在挑選 App ⾊調的顏⾊時，請參考系統的⾊彩⽅ 案，以保證這些顏⾊⽆論是單獨仍是組合、在淺⾊背景仍是深⾊背景上都看起來很棒。

明智地使⽤顏⾊進⾏溝通: 謹慎地使⽤顏⾊來強調重要信息。例如，當 App 中 其餘不重要的信息也使⽤了紅⾊時，警告⼈們嚴重問題的紅⾊三⻆形就顯得沒 有那麼明顯。

在App內使⽤互補的顏⾊: 你的 App 內的顏⾊應該協調，不會互相沖突和⼲擾。 若是你的 App ⻛格的基礎⾊調是柔和的，那麼使⽤⼀系列與之協調的柔和⾊ 調。

⼀般來講，選擇與你的 App Logo 相符的顏⾊地⾊板: 巧妙地使⽤顏⾊是⼀個 傳達品牌的好辦法。

在 App 中統⼀使⽤⼀種關鍵⾊來顯示可交互性: 在 Note 中，可交互的元素是 ⻩⾊的。在 Calendar 中，可交互的元素是紅⾊的。若是你定義了⼀種 關鍵⾊ ⽤於傳遞可交互性，那麼你要保證其它顏⾊不會與之衝突。

避免給可交互和不可交互的元素使⽤相同的顏⾊: 若是可交互和不可交互的元素 是同⼀種顏⾊， ⽤戶就很難知道到底哪⾥是可點擊的。

考慮圖像和半透明度如何影響周邊元素的顏⾊: 圖像的變化有時能夠改變附近 顏⾊，以保持視覺連續性，並防⽌界⾯元素變得太強烈或者不能引發⽤戶的注 意。例如，地圖在使⽤地圖模式時顯示淺⾊⽅案，但在激活衛星模式時切換到 深⾊⽅案。當放置在半透明元素後⾯時，或當應⽤於半透明元素(例 如⼯具欄) 時，顏⾊也可能會不一樣。

在多種光線條件下測試你的 App 顏⾊: 光線在室內和室外、房間氛圍、不一樣的 時間、⽓候等條件下會發⽣明顯地變化。你的 App 在現實世界中使⽤ 時看到 的顏⾊不會⼀直和你在電腦上看到的顏⾊相同。你應該在不一樣的光線條件下預 覽，來觀察顏⾊的真實表現，⽐如在晴朗的戶外。必要時，應當調整顏⾊以求 在⼤多數的使⽤場景下提供最好的視覺體驗。 考慮 True Tone 顯示屏對顏⾊的影響: True Tone 顯示屏利⽤了環境光傳感器 來⾃動調整顯示屏的⽩點，以適應當前環境下的光線狀況。專一於閱讀、照⽚、 視頻和遊戲的App能夠經過肯定⼀種⽩點糾正模式來強化或弱化 True Tone 的

關注⾊盲⽤戶: 不一樣的⽤戶看⻅的顏⾊是不⼀樣的。⽐如，不少⾊盲⽤戶很難 分辨紅⾊和綠⾊(以及任何灰⾊)，或是藍⾊和橘⾊。避免把這些顏⾊組合做爲 區分兩種狀態或值的惟⼀⽅式。⽐如，⽤紅⾊⽅塊和綠⾊圓形來表示下線和上 線狀態，⽽不是⽤紅⾊和綠⾊的圓形。有些圖形編輯軟件含有可以 幫助你證實 你是不是⾊盲的⼯具。

考慮⼀下在其餘國家和⽂化中如何使⽤顏⾊: 例如，在某些⽂化中，紅⾊表明 着危險。在其餘⽂化中，紅⾊有積極的含義。確保你的App中的顏⾊表達出恰 當的信息。

使⽤⾜夠的顏⾊對⽐度: 在 App 中，太低的對⽐度會讓內容難以閱讀。⽐如圖 標和⽂本可能會和背景融合。⽹上有顏⾊對⽐度計算器可以幫助你精確的分析 App中的顏⾊對⽐度，以確保它符合最佳標準。請確保你的 App 對⽐度⾄少達 到 4:5:1 ，可是 7:1 更好，由於它更符合嚴格的功能標準。

顏⾊管理 在你的圖像中應⽤顏⾊配置⽂件: iOS 的默認顏⾊空間是標準 RGB (sRGB)。 爲了確保顏⾊與這個顏⾊空間的匹配，確保你的圖像包含了嵌⼊的顏⾊配置⽂ 件。

使⽤⼴⾊域來加強在兼容顯示器上的視覺體驗: ⼴⾊域顯示⽀持P3⾊空間，它 能讓 sRGB 更豐富、更飽和。所以，使⽤⼴⾊域的照⽚和視頻更逼真，使⽤⼴ ⾊域的視覺數據和狀態指示器更具影響⼒。在適當的時候，使⽤顯示P3顏⾊配 置⽂件的16位/像素(每一個通道)並導出圖像 png 格式。請注意，須要⼴⾊域顯示 器來設計⼴⾊域圖像並選擇P3顏⾊。

在須要的時候提供空間特定的圖像和顏⾊變化: ⼀般來講，P3的顏⾊和圖像會 在 sRGB 設備上顯示出來。然⽽，有時在 sRGB 設備上出現兩種⾮常類似的P3 顏⾊可能很難區分。在P3光譜中使⽤顏⾊的漸變有時也會出如今 sRGB 設備上。 爲了不這些問題，您能夠在 Xcode 項⽬的資產⽬錄中提供不一樣 的圖像和顏 ⾊，以確保在寬顏⾊和 sRGB 設備上的視覺保真度。

在實際的sRGB和⼤屏幕上預覽你的應⽤的顏⾊: 根據須要進⾏調整，以確保在 這兩種類型的顯示器上都有一樣出⾊的視覺體驗。

注意: 在 mac 設備中的光⾊域顯示器中，你可使⽤系統顏⾊選配置功能來選 擇和預覽P3顏⾊，並將它們與 sRGB 顏⾊進⾏⽐較。

5.5 術語 (Terminology)

App 中的每⼀字都是與你的⽤戶對話的⼀部分。⽤此對話來幫助他們在你的 App 中感到溫馨。

使⽤熟悉的、能夠理解的單詞和短語: 技術性詞語可能會令⼈⽣畏。避免⼈們 可能不理解的縮寫和技術術語。利⽤你對⽤戶的瞭解來肯定某些詞或短語是否 合適。⼀般來講，對每一個⼈都有吸引⼒的 App 應該避開⾼技術性的語⾔。這類 語⾔可能適⽤於⾯向更⾼級的⽤戶或技術⼈羣。

保持界⾯⽂本清晰簡潔: ⼈們快速⽽容易地吸取簡短的、直接的⽂本，不喜歡 被強迫閱讀冗⻓的⽂章來完成⼀項任務。找出最重要的信息，簡明扼要地表達 出來，並把它呈如今顯眼的位置，這樣⼈們就沒必要爲了找到他們想要的東⻄⽽ 閱讀太多，或者不知道下⼀步該作什麼。 適當的代表交互元素: ⼈們應該可以⼀眼看出元素的做⽤。當標記按鈕和其餘 交互元素時，使⽤動做動詞(action verbs)，例如鏈接、發送和添加。

避免那些聽起來可能會顯得屈尊俯就的語⾔: 避免使⽤「咱們」，「咱們的」， 「我」和「個人」(例如「咱們的教程」和「個人訓練」)。他們有時會被理解爲侮辱或 傲慢。

儘可能⽤⼀種⾮正式的、友好的語⽓: ⼀種⾮正式的、平易近⼈的⻛格，與你在 午飯時與⼈交談的⽅式類似。偶爾使⽤縮寫，直接⽤「你」和「你的」來對⽤戶說 話。

要⼩⼼的使⽤幽默感: 記住，⼈們極可能屢次在你的界⾯中閱讀⽂本，⽽⼀開 始看起來很聰明的東⻄可能會隨着時間的推移⽽變得令⼈厭煩。同時要記住， ⼀種⽂化中的幽默不⼀定能很好地轉化爲其餘⽂化的幽默。

使⽤相關的、⼀致的語⾔和圖像: ⼀定要確保樣式對當前的上下⽂⽽⾔是合適 的。例如，若是有⼈使⽤ iPad，就不要顯示 iPhone 的提示或圖形。使⽤與平 臺⼀致的語⾔。你能夠在觸摸屏上點擊、快速滑動、滑動、縮放和拖拽。 你按 下物理按鍵和對 3D Touch 作出反應的按鈕。你還能夠旋轉並搖動設備。

要準確表達⽇期: 使⽤像 「今天」 和 「明天」 這樣的友好術語是合適的，可是， 若是您不考慮當前的語⾔環境，這些術語可能會令⼈困惑或不許確。考慮⼀個 在午夜前開始的活動。在⼀個時區，活動可能會在今天開始。在另⼀個時區， 一樣的事件可能在昨天開始。⼀般來講，⽇期應該反映出觀看事件的⼈的時區。 然⽽，在某些狀況下，例如在⻜⾏跟蹤 App 中，能夠更清楚地顯示航班的起始 ⽇期和時區。

5.6 排版 (Typography)

San Francisco (SF) 是 iOS 系統的默認英⽂字體:這種字型的字體通過了優化， 使你的⽂本具備⽆與倫⽐的可讀性、清晰性和⼀致性。

iOS使⽤ San Francisco 字體做爲拉丁、希臘和⻄⾥爾字⺟的系統字體，以及 其餘的各類字體。

強調重要信息: 使⽤字重、字體⼤⼩和顏⾊來突出 App 中最重要的信息。 若是 能夠的話，只使⽤⼀種字體，混合⼏種不一樣的字體可能會讓你的 App 顯得⽀離 破碎和草率。考慮使⽤⼀種字體，只使⽤少許的字體的變體和⼤⼩。

儘量使⽤內置的⽂本樣式: 內置的⽂本樣式容許您以視覺上不一樣的⽅式來表 達內容，同時保持最優的易讀性。這些樣式是基於系統字體的，容許你利⽤關 鍵的排版特性，⽐如動態類型，它⾃動調整跟蹤，併爲每種字體⼤⼩提供引 導。

確保字體是清晰的: 在 iOS 上⽀持⾃定義字體，但一般不利於閱讀。除⾮你的 應⽤對定製字體有迫切需求，⽐如爲品牌設計或創造⼀種沉浸式遊戲體驗，否 則最好仍是堅持使⽤系統字體。若是你使⽤⾃定義字體，請確保它易於閱讀， 即便是很⼩的字體。

實現⾃定義字體的輔助功能: 系統字體會⾃動對輔助功能作出反應，⽐如加粗字 體和放⼤⽂本。 使⽤⾃定義字體的App應檢查是否啓⽤輔助功能並實現 相同的 ⾏爲。

動態類型⼤⼩ San Francisco 字體的設計的⼤號字體和⼩號字體都很清晰。動態類型經過讓 讀者選擇他們喜歡的⽂本⼤⼩來提供額外的靈活性。

在響應⽂本⼤⼩的變化時，優先考慮內容: 並非全部的內容都一樣重要。當 ⽤戶選擇更⼤的尺⼨時，他們想要讓他們所關⼼的內容更容易閱讀;他們並不總 是但願屏幕上的每⼀個字都變⼤。

字體用法和字距 在界面原型中使用正確的字體和字形變體: 使用 SF Pro 文原本顯示文本19 磅 或更小的文本，以及在文本20磅或更大的文本中顯示文本。當你在標準控 件中 使用 San Francisco 的文本，好比按鈕和標註，iOS 會自動根據磅值和用戶的 可訪問性設置應用最合適的變體，並適當地調整字距。 在 iOS 10 中 San Francisco 字體的變體是 SF UI Tex 和 SF UI Display。

6.圖標和圖像(Icons and Images)

6.1圖像尺⼨和分辨率(Image Size and Resoulution)

iOS ⽤於在屏幕上放置內容的座標系統是以點(pt)爲基礎的。該座標系以點爲 基本測量單位，這些點映射到顯示器中則以像素顯示。在標準分辨率屏幕上， ⼀個點等於⼀個像素(1pt = 1px)。由於⾼分辨率屏幕的像素密度更⾼，因此在 真實世界⾥同等⾯積的屏幕中就包含更多的像素，即⼀點中包含更多像素(1pt = 2px、1pt=3px)。所以，⾼分辨率屏幕須要具有更⾼像素的圖像。

爲了⽀持全部的 iOS 設備，你須要爲設計的內容提供⾼分辨率的圖像: 基於不 同的設備，將每一個圖像中的像素數量乘以特定⽐例係數來進⾏適配。標準分辨 率圖像的⽐例係數爲1.0，這種圖像被稱爲 @1x 圖像。⾼分辨率圖像的⽐例系 數爲2.0或3.0，被稱爲 @2x 或 @3x 圖像。假設你有⼀個標準的分辨率 @1x 圖像，例如 100px x 100px，那麼，該圖像的@ 2x版本將是 200px × 200px， @3x 版本將是 300px × 300px。

設計⾼分辨率設計圖 使⽤8px × 8px的⽹格系統: ⽹格系統可讓線條和圖像內容在全部尺⼨上保持 清晰，⽆需太多的修飾和銳化。將圖形邊界對⻬到⽹格上，以減小按⽐例縮⼩ 圖像時出現的半像素和內容模糊的狀況。

以適當的格式進⾏創做: 一般，位圖/光柵的切圖使⽤去交錯的 PNG 格式⽂件 (PNG 導出的設置)。選擇 PNG 格式，是由於它⽀持透明度，而且由於是⽆損 格式，不會在壓縮過程當中丟失圖形的細節和⾊彩。對於須要陰影、紋理和⾼光 效果的複雜切圖來講，PNG格式是⼀個很好的選擇。⽽照⽚內容(如⼴告圖、照 ⽚)請使⽤JPEG格式，由於它的壓縮算法能夠⽐⽆損格式節省更多的存儲空間， 且較難識別到壓縮的痕跡。因此，寫實的 App 圖標最適合使⽤ PNG 格式。其 它須要進⾏⾼分辨率縮放的扁平、⽮量切圖則使⽤ PDF 格式。

對於不須要使⽤ PNG-24 的切圖，只須要使⽤ PNG-8 格式便可: 由於 8 位⾊ 彩能夠減小⽂件⼤⼩，而且不會下降圖像質量。注意:PNG-8 不適⽤於照⽚類 型。

優化 JPEG ⽂件，以找到存儲容量和質量之間的平衡: ⼤多數 JPEG ⽂件能夠 被壓縮，⽽不會形成明顯的圖像失真，即便是少許的壓縮也能夠爲磁盤節省⼤ 量空間。在每一個 JEPG 圖像上進⾏壓縮設置，找出可接受失真範圍內的最佳參 數。

提供圖像和圖標的替代⽂本標籤: 替代⽂本標籤在屏幕上看不到，可是它們幫 助 「VoiceOver」(APPLE 公司推出的⼀種語⾳輔助程序)描述屏幕上的內容，便 於視覺障礙的⼈「看到」屏幕上的內容。

6.2應⽤圖標(App Icon)

每一個 App 都須要⼀個美觀的，令⼈印象深入的圖標，能在蘋果商店和主屏 幕 奪⼈眼球。⽤戶輕撇圖標的瞬間，是你的第⼀個機會，⽤來傳達你的 App 的⽤ 途。圖標也貫穿於整個系統中，例如在設置和搜索結果中。

擁抱簡約: 尋找個單⼀的元素可以表現你的 App 的精髓，而後經過⼀個簡單並 且獨特的形狀表達該元素。謹慎地添加細節部分。若是圖標的內容或形狀過於 複雜，則細節難以辨別，特別是在較⼩的尺⼨中。

設計⼀個可識別的圖標: ⽤戶不該該只有經過分析圖標才能弄清楚它表明什麼。 例如，郵件 App 的圖標使⽤了⼀個信封，由於它廣泛與郵件聯繫在⼀ 起。花 時間來設計⼀個美觀迷⼈且精煉的抽象圖標，從⽽藝術化地傳達你的 App 的⽬ 的。

保持背景簡單，避免透明度: 確保你的圖標是不透明的，不要雜亂的背景。 使 ⽤⼀個簡單的背景，這樣它就不會過分影響周圍的其它圖標。你沒有必要將整 個圖標填滿內容。

只有當 logo 所有或部分由⽂字組成時，纔在圖標使⽤⽂字: 在主屏幕時，⼀個 App 的名稱會在圖標之下顯示。不要包含沒有意義的⽂字重複說明名稱或是告 訴⽤戶該如何使⽤你的 App，⽐如「Watch」或「Play」。若是你的設計包含了⼀ 些⽂字，那麼請強調⽂字與你的 App 提供的實際內容相關。

圖標中不要包括照⽚，屏幕截圖或界⾯元素: 攝影細節在⼩尺⼨上很難看出。 屏幕截圖對於 App 圖標來講太複雜了，一般不利於傳達 App 的⽬的。圖標中 的界⾯元素會令⼈誤解和困惑。

不要使⽤蘋果硬件產品的副本: 蘋果產品受版權保護，⽆法在你的圖標或圖像 中被⼆次創做。⼀般來講，避免復⽤設備的圖形，由於硬件設計每每會頻繁更 新迭代，⽽且會使你的圖標看起來過期。

不要在界⾯處處放置 App 圖標: 在 App ⾥發現⼀個圖標被⽤於多種⽬的會讓 ⼈困惑。反之，考慮使⽤圖標的⾊彩⽅案。

在不一樣的壁紙環境下測試你的圖標: 你不能預期⽤戶會爲他們的主屏幕選擇什 麼樣的壁紙，因此不要只是在⼀種深⾊和⼀種淺⾊的背景上測試你的圖標。⽽ 是觀察它在不一樣的背景上如何表現。在有動態背景的真實設備上試⽤它， 由於 背景會隨着設備移動⽽改變視⻆。

保持圖標的四⻆是⽅形的: 系統會⾃動覆蓋⼀個遮罩層讓圖標變成圓⻆。

App 圖標屬性 全部App圖標應符合如下規格標準：

App 圖標⼤⼩

每一個 App 必須提供⼀⼤⼀⼩兩個圖標，⼩圖標會出如今主屏幕，而且當你 的 App 被安裝後會被系統使⽤，⼤圖標會被⽤在蘋果商店中。

爲不一樣的設備提供不一樣⼤⼩的圖標: 確保你的 App 圖標在你⽀持的全部設備上， 看起來都很棒。

使⽤ App Store 圖標模擬您的⼩圖標: 雖然 App Store 圖標的使⽤⽅式與⼩型 圖標不一樣，但它仍然是你的 App 圖標。⼤圖標⼀般都和⼩圖標外觀相匹配，但 是能夠稍微豐富⼀些，更有細節，由於不會有任何視覺效果疊加在它上⾯。

Spotlight、設置和通知圖標 每一個 App 都應提供⼀個⼩圖標，在 Spotlight(快速索引的功能)搜索，若是關 鍵詞與 App 名稱相符，iOS 會展現該圖標。同時，須要設置的 App 一樣應該 提供⼀個⼩圖標⽤於在系統內置的設置 App 中展現。兩個圖標都應該清晰標識 你的 App——理想狀況下，它們應該與 App 圖標相符。若是你不能提供這些 圖標，iOS 可能會縮⼩你的主圖標，以便在這些場景中顯示。