HIG iOS 翻譯 Visual Design｜視覺設計
Visual Design｜視覺設計
Adaptivity and Layout 適應性和排版
Animation 動畫
Branding 品牌
Color 色彩
Dark Mode 深色模式
Launch Screen 啟動畫面
Materials
Terminology 用語
Typography
Video 影音Adaptivity and Layout 適應性和排版
人們通常會希望他們可以在任何裝置上使用喜愛的App。在iOS App，介面元素和排版在不同裝置間自動改變形狀與尺寸；在iPad上多工處理的分割顯示、旋轉螢幕等等。設計適應性的App以提供良好體驗上在任何環境非常重要
裝置螢幕尺寸與方向
iOS裝置有許多的螢幕尺寸，同時支援垂直與水平方向（Portrait、Landscape）
如果你的App運行在特定裝置上，確保它運行在所有該裝置的螢幕上 換句話說，如果是限定iPhone的App，必定運行在所有iPhone裝置上，iPad亦然
注意
所有上述表格的尺寸為UIKit尺寸，與原生尺寸可能有所不同。開發者指南請參閱scale和 nativeScale.螢幕解析度如何影響你的App圖稿請參閱Image Size and Resolution
自動排版
自動排版是建構適應性介面的開發工具。使用自動排版，你可以定義約束條件*¹來規範App中的內容。舉例，你可以約束一個按鈕永遠是水平置中，且位在相片之下8像素，不管螢幕空間是否足夠
自動排版在特定環境偵測到變化（Traits／特質）時根據特定約束條件自動調整版面。你可以設定App以動態調整來適應寬螢幕，包含：
- 不同裝置螢幕尺寸、解析度、色域（RGB/P3）
- 不同裝置方向（垂直／水平）
- Spilt View（分割顯示）
- iPad上的Multitasking（多工處理）
- Dynamic Type（動態字型）字型尺寸改變
- 國際化功能以適用於當地（左至右／右至左、日期／時間／數字格式、字體多樣、文字長度）
- 系統功能可用性（3D Touch）
開發者指南請參閱Auto Layout Guide和UITraitCollection
排版準則與安全範圍
排版準則 定義的方形區域，幫助定位、對齊、內容間距。系統包含預定義的排版準則，使在內容應用標準Margin與限制文本寬度來獲得最佳易讀性。你也可以自定義排版準則
安全範圍 定義了不被Navigation Bar、Toolbar或其他物件所蓋住的範圍
iOS15之後定義了鍵盤排版準則，表示了鍵盤將涵蓋的空間、安全範圍的帳戶。使用此準則將使鍵盤與App為一體，不論人們所使用的鍵盤種類。開發者指南請參閱UIKeyboardLayoutGuide
堅守UIKit定義的安全範圍及排版Margins 這些排版準則確保以裝置為基準適當內嵌排列。而安全範圍也避免內容與Status Bar、Navigation Bar、Toolbar、Tab Bar重疊。標準系統提供之視圖將自動適應安全範圍排版準則
開發者指南請參閱UILayoutGuide、layoutMarginsGuide、readableContentGuide和safeAreaLayoutGuide
尺寸類別（Size Classes）
尺寸類別的特點是基於其尺寸自動分配內容區域。系統定義兩種類別：一般（Regular／表示寬廣空間）和窄（Compact／表示受拘束空間），以視圖寬度及高度描述
一種視圖可能具有尺寸類別的組合：
- 一般寬、一般高
- 一般寬、窄高
- 窄寬、一般高
- 窄寬、窄高
當與其他多種環境，iOS基於內容區域的尺寸類別來動態調整排版。例如，當垂直尺寸從窄高變成一般高——或許因使用者旋轉螢幕從水平變垂直——Tab Bar可能會變高
裝置尺寸類別（Device Size Classes）
不同尺寸類別組合基於螢幕尺寸應用至全螢幕在不同裝置
多工尺寸類別（Multitasking Size Classes）
iPad上，當你的App在多工處理時尺寸類別也可應用
一般排版注意事項
確保首要訊息在預設尺寸中能夠清楚顯示 不應該要求使用者滾動或放大來觀看完整資訊、圖片，除非他們自己變更尺寸
維持整個App的外觀一致 一般來說，有相似功能的元素看起來更相似
以視覺重心與平衡傳達重要性 大物件比起小物件更引人注意、顯得更重要。大物件也更容易點擊，在容易分散注意力的情境時這點更重要。一般來說，放置主要物件在螢幕上半部且由左至右的文字、靠近左方
以對齊來表達組織和階層 對齊使App看齊來整齊且組織化，幫助人們在滾動時注意、使資訊更容易被找到。縮排及對齊都可以引導內容及群組的關聯
盡可能支援垂直及水平兩者方向 人們偏好以不同方向使用App，盡可能滿足使用者對此的期待
為字型大小改變做準備 人們預期當他們在設定中選擇不同字型尺寸時App可以響應變化。為符合文字大小的改變，你應當調整排版。更多App中文字使用的資訊請參閱Typography
提供充足的觸控範圍 維持最小的觸控範圍44pt×44pt
在多種裝置上預覽App 你可以使用模擬器（包含Xcode）以預覽App快速檢查剪裁和排版問題。若App支援水平模式，確保不管裝置轉左或右都有有兩好的排版。iPhone不支援上下顛倒的全螢幕垂直模式。某些功能，如寬色域最好在實體裝置上預覽
注意
預設下，iPad視圖控制支援所有方向，iPhone支援上下顛倒的垂直方向（開發者指南請參閱supportedInterfaceOrientations）。有些裝置不支援上下顛倒垂直方向，像是iPhoneX，不要支援垂直上下顛倒，無論你的App是否支援在大螢幕裝置啟用易讀的Margin 這些Margin確保行寬簡短以維持良好的閱讀體驗
適應語境的變化
在語境改變時使注意力維持在當前內容上 內容是最優先的元素。在環境改變時變更版面將讓使用者在App中迷失方向
避免非必要的改變排版 當裝置旋轉，不需要改變整個版面。例如，你的App在垂直模式顯示有格線的圖片，在水平模式不需要顯示如列表相同的圖片。取而代之，它應只調整格線尺寸。維持可比較的狀態在所有環境
若你的App僅在水平方向運作，支援兩種變化 一個App只運行在水平模式必須旋轉左或右。不需再使用App時告訴人們要旋轉手機。若某人持錯誤方向，App將不會自動旋轉，他們會本能地知道該旋轉它。不需要再告知
根據情況響應訂製旋轉畫面 例如，若遊戲以旋轉螢幕移動角色，則不應該在遊玩時轉換畫面方向。然而，它可基於當前方向顯示選單和進入序列
同時支援iPhone及iPad 人們期待能靈活的使用App在其他iOS裝置上。如果特定功能只運行在iPhone上（像是通話），考慮隱藏此功能並讓人們使用App中的其他功能
在使用現有圖稿時注意長寬比例 不同螢幕有不同的長寬比，造成圖稿被裁切或是留白邊（上下白邊：Letterboxed／左右白邊：PillarBoxing）。確保重要資訊落在所有裝置的可視範圍中
設計全螢幕體驗
延伸視覺元素以填滿畫面 確保背景延伸至畫面邊緣，像表格或Collection可滾動的排版可以滾至底部
避免放置互動操作在畫面底部或角落 人們從底部上滑以連接主畫面或App切換器，在這些位置的功能可能無法使用。而角落區域對使用者難以觸及
置入必要內容以免被裁切 一般來說，為了在任何方向有最好的視覺，內容將置中並對稱、不被圓角剪裁、不被感應器區域*²擋住、不被連接主畫面的指示器遮蔽。為了獲得最佳效果，使用標準的系統提供介面元素及Auto Layout來建構介面並堅持由UIKit定義之Layout Guide and Safe Area。當裝置是水平的，則適用於某些App，如遊戲，將放置控制鍵於下方（延伸下方安全範圍）以允許更多放置內容的空間。在放置控制鍵於頂部及底部時使用對應插入，並保留足夠空間於主畫面指示器周邊，才不會觸發意料之外的結果。因為主畫面指示器落在螢幕下方中央，你介面的位置在此則將更換
插入全寬度（Full-Width）按鈕 一個延伸至螢幕邊緣的按鈕可能會不像個按鈕。遵照UIKit Margin製作全寬度按鈕。一個有圓角、對齊底部安全範圍的全寬度按鈕，確保不會與主畫面指示器衝突
不要隱藏或特別注意主要顯示功能 不要試圖在頂部或底部放置黑色Bar來隱藏螢幕圓角、感應器外殼、連接主畫面的指示器。也不要使用裝飾物如括號、邊框、形狀或教學文字來吸引目光至這些區域
注意Status Bar高度 全螢幕iPhone的Status Bar比舊iPhone來得高。若你的App設定固定高度在Status Bar之下，務必更新動態高度來因應當前裝置。注意，全螢幕裝置在背景工作像錄音或取用位置資訊時Status Bar不會改變高度
若你的App將隱藏Status Bar，考慮全螢幕畫面 全螢幕iPhone比舊型有更多的垂直空間，而Status Bar可能會佔據部分空間。Status Bar也顯示重要資訊。僅在有更大價值發揮時隱藏Status Bar
謹慎的使用自動隱藏主畫面指示器 當自動隱藏啟用時，當螢幕在幾秒鐘不使用後指示器將自動淡出。當點按螢幕時將再度出現。這個特性只會在播放影片或瀏覽照片幻燈片時被動啟用
額外排版注意事項
確保你的網頁在無邊框裝置也能夠良好顯示。參考Xwebkit.org的 Designing Websites for iPhone
Animation 動畫
美麗而巧妙的動畫連接了人們與螢幕穿梭於iOS建構的視覺語言。當動畫使用得宜可以傳達狀態、提供回饋、增進直接操作感、將他們的行動結果視覺化
恰當的使用動畫及動態效果 不要為了展現動畫而展現。過多或沒必要的動畫將會使人失去注意，特別是在非沈浸式的App。iOS使用動態效果如視差（Parallax Effects）來創造主畫面及其他物件的深度感。這些效果可以使人更增進理解與樂趣，然而，過度使用將使人迷失方向且難以操作。如果要採用動態效果記得測試以確保運作順利
追求擬真、信任 人們趨向接受藝術手法，但當動作不合理或違抗物理法則將使人迷失方向。例如如果從螢幕上方滑下視圖，它應當要往上滑來關閉
使用一致的動畫 一個熟悉且流暢的使用經驗將增加人們使用。他們習慣伴隨著巧妙動畫在使用iOS中，例如Smooth Transition、裝置方向的Fluid Changes、物理滾動。沈浸式App例外，如遊戲，動畫應相呼應其他內建動畫
動畫選擇使用 當人們在輔助使用中選擇減少動態，減少或完全不使用動畫及動態效果。相關指南請參閱Motion
Branding 品牌
成功的品牌不只是將Brand Assets加入App。優秀的App用字體、色彩、圖像以傳達獨特的品牌識別系統。在App中提供品牌環境，而不會過多以至於分心
精製、低調的品牌 讓使用者在使用App時感到愉快、獲得資訊、完成事項，而不是觀看廣告。為求最佳的體驗在App之中加入品牌元素。使用App Icon的顏色在App環境中
別讓品牌化成為設計App的阻礙 首先，使你的App像iOS App。確保它直覺使用、易於導覽、使用、專注內容。儘管App也提供在其他平台，避免因為品牌一致性而淡化設計
推遲品牌宣傳 在螢幕上方放置只有品牌的Bar將減少內容的空間。取而代之，考慮以色彩計畫、字體、訂製背景來傳達品牌
不要在整個App中都顯示LOGO 除非有必要，避免在整個App中顯示LOGO。特別是在Navigation Bar，放置頁面標題更易於使用
遵守Apple的商標守則 Apple商標不應該出現在你的App名字或圖像。參考Apple Trademark List和Guidelines for Using Apple Trademarks
提示
App Store提供更多的曝光機會。相關資訊請參閱App Store Marketing GuidelinesColor 色彩
顏色是傳達精神、延續視覺、狀態資訊、給予回饋、數據視覺化的好方法。參考系統色彩計畫，不論是獨立或在組合中；淺色或深色模式
不要只依賴顏色來區別物件或溝通重要資訊 若你的App使用色彩來溝通資訊，確保提供文字標籤或Glyph，讓色盲者或其他視覺障礙者也可以閱讀
選擇適當顏色來溝通 謹慎使用顏色來吸引注意至重要資訊。例如：紅色三角型用以警告危急問題，若在非危及訊息中使用將降低紅色在App中的影響力
使用少數顏色搭配LOGO 巧妙的運用色彩是傳達品牌的好方法
如何使用單一顏色來表示互動 在備忘錄中，互動元素為黃色；在行事曆中互動元素為紅色。如果你淺色定義為互動元素，請確保不會與其他顏色混淆
以兩種版本的色彩確保在淺色、深色模式都有良好的視覺 當你使用系統色彩配色，將自動支援高對比
避免使用相同顏色在互動與非互動元素 若在互動與非互動元素使用相同顏色，使用者會難以辨別該點擊何者
思考圖稿和半透明效果如何影響周邊色彩 多樣的圖稿有時需要改變周邊色彩，以維持視覺一慣性且避免介面元素太過強烈。例如地圖，當轉換地圖模式至衛星圖時切從淺色色彩切換為深色色彩。色彩也可以在放置於半透明元素後方或者應用半透明元素時微調，例如Tool Bar
在多種光線條件下測試App 基於房間中的環境、一天中的時間、天氣變化等，光線在室內室外有顯著的不同。你在電腦上看見的色彩不一定和真實使用情形一致。在多種光線下測試App，看看它在大太陽的戶外下會如何顯色。必要時，調整色彩以便在大多數情況下都能有最佳觀看體驗
真實光線*³如何影響色彩 真實光線使用環境光源感應器來自動調節白點以適應當下的環境。App專注於當前閱讀、照片、影片和遊戲透過白點適應樣式來增強或減弱。開發者指南請參閱UIWhitePointAdaptivityStyle
思考使用的色彩在其他國家和文化中的含義 通常紅色表示危險，但某些情況帶有正向含義。確保這些顏色都能傳達正確含意
避免使用人們難以接收含義的顏色 舉例，色盲者可能無法區分某些顏色，對比不足的情況下導致文字和背景融合難以閱讀。開發者指南請參閱Color and Contrast
系統色彩
iOS提供系統色彩以自動適應光線變化和輔助功能設定的更改，如增加對比和減少透明度。系統顏色在獨立或組合、亮或暗背景、淺色或深色模式都有好的表現
不要寫死*⁴色彩數值 以下色彩數值提供作設計參考。基於各種環境變化，實際顏色可能會隨著版本有所不同，使用API來應用系統色彩。開發者指南請參閱 UIColor (UIKit)和Color (SwiftUI)
iOS13也採用了六階不透明的灰色，可以在少數情況使用，如半透明表現不佳時。例如交叉或重疊元素，像是網格中的線條或Bar不透明色看起來更佳。一般情況，為UI元素使用語意定義的系統色彩
動態系統色彩
除了色彩之外，iOS也提供語義化色彩以自動適應淺色、深色模式。語義化色彩達到其目的而非為其外觀或色彩數值。例如，iOS定義應用在背景的色彩和前景內容，如標籤、分隔線、填色
iOS定義兩種背景色彩 — —系統、群組，兩者均包含首要、次要、第三色彩以幫助傳達階層訊息。一般來說，在你有群組的Table View時使用群組背景色；反之，使用系統背景色。開發者指南請參閱UI Element Colors
透過兩種背景色，你可以使用多種色彩以下方方式傳達階層結構：
- 首要色彩：總覽視圖
- 次要色彩：群組內容或總覽的元素
- 第三色彩：群組內容或次要元素中的元素
別重新定義動態系統色彩的語義 為了給人們一致性體驗並確保你的介面在環境中有良好表現，建議使用動態色彩
勿複製動態色彩 基於不同的環境，動態色彩根據版本不同有不同數值。與其創造自訂色彩，不如使用動態系統色彩
色彩管理
在圖像使用色彩文件*⁵ iOS上的預設色彩是標準RGB（sRGB）。為確保顏色和色彩空間正確相應，確保你的圖像包含色彩文件
使用廣色域增進相容的視覺體驗 廣色域支援P3色彩空間，擁有比sRGB更豐富、更飽和的色彩。使用廣色域的相片和影片更為逼真，而視覺數據和狀態指示器更顯著。適宜的話，在每像素16點使用P3（16 bits per pixel）色彩文件、輸出圖像以PNG格式。注意廣色域顯示需要設計廣色照片並選擇P3
在需要時提供色彩特定空間圖像和色彩變化 通常，P3色彩和圖像應在sRGB裝置上如預期顯色。然而，偶爾在sRGB中難以區分兩種相似色 。P3光譜中的漸層色有時也會出現省略。為避免此問題，你可以在Xcode中提供不同Asset Catalog的圖像及色彩，以確保視覺擬真度在廣色域和sRGB裝置上
在sRGB和廣色域裝置預覽App色彩 根據需求進行調整，以確保兩種顯示器有同等的視覺體驗
提示
在有廣色域的Mac上，你可以使用系統檢色器選擇並預覽P3色彩並和sRGB色彩比較Dark Mode 深色模式
在iOS13或以上，可以選擇深色模式在全系統使用深色外觀。在深色模式中，系統使用較暗配色在所有畫面、視圖、選單、操作，使它們在深色背景下脫穎而出。深色模式支援所有輔助功能
設定中，可以選擇深色模式為預設介面，在兩種模式之間排程以自動轉換。由於人們做此全系統的設定，他們將預期所有App會遵從他的設定
執行他們在設定中選擇的外觀模式 若你提供App特有外觀模式，因為需要再調整設定，可能造成他們的困擾。更糟的情況，他們可能會因為無法響應全系統外觀設定以為你的App壞掉。
在淺色、深色模式中測試外觀設計 看看你的介面在兩種外觀中，調整設計使他們有恰當的表現。在一種模式之下的設計可能在另一模式下無法運作
確保當你在深色模式中調整對比及透明度的內容仍保持清晰 在深色模式中測試內容開啟增加對比及減少透明度，兩者皆開啟和其一開啟。你或許會找到某些文字在深色模式中並不清楚。你可能會發現在深色模式中開啟增加對比會導致深色文字和深色背景的對比降低。雖然人類的視覺足以閱讀低對比的文字，對於視障者這些文字可能仍難以辨識。開發者指南請參閱Color and Contrast
深色模式中的色彩
深色模式中的配色包含更暗的背景和更亮的前景色，這些色彩都經過精心選擇，以確保對比度在兩種模式都有良好的一致性
深色模式中，系統使用兩組背景色稱作 — — Base 和Elevated，以增加深色介面深度感在層次上。Base顏色更暗更深，使背景介面看起來往後，而Elevated顏色更亮，使前景介面更推前
偏好系統背景色 深色模式是即時的，意思是當前景介面如Popover或Modal從Base到Elavated顏色背景顏色自動變化。系統也使用Elevated顏色在App之間提供視覺分離，像是多工處理或多視窗。使用自訂背景色將使人們更難感知系統提供的視覺區別
使用動態顏色以適應當前外觀模式 語義化色彩將自動適應當前外觀，如分隔線。開發者指南請參閱動態系統色彩。當你需要自訂顏色，在你的App Asset Catalog中加入色彩Set Asset並指明淺色和深色色彩以自動適應外觀。避免寫死色彩數值或色彩無法適應
確保在所有外觀中有足夠的對比 使用系統定義的色彩以確保前景、背景內容在正確的對比。自訂色彩對比比率為7:1，特別是較小的文字。相關指南請參閱Dynamic System Colors
白背景中使用柔和顏色 若你一定要在深色模式中使用白色背景，使用較深的的白色以避免背景在其他較深物件下發光。
相關指南請參閱Color
圖像、Icon、Symbol Color
系統使用SF Symbols，在淺色、深色模式中彩色圖像將優化顯色
盡可能使用SF Symbol 當你使用動態色彩或自行增加，Symbol在兩種外觀中都看起來很棒
必要時為淺色、深色模式設計個別的Glyphs Glyph在淺色模式中使用框線看起來比實心更好，在深色模式中實心
確保全彩圖像和Icon顯示 如果在淺色、深色都有良好視覺即使用相同Asset。若一個Asset只在其中一種模式好看，為另一模式修改或創建新的Asset。使用Asset Catalog以合併你的Asset、命名圖像
材質
漸層色彩*⁷可以在深色背景中保持對比
使用系統提供的標籤色彩 首要、次要、第三、第四標籤將自動適應淺色及深色外觀相關指南請參閱Typography
使用系統視圖來規範文字範圍及文字視圖 系統視圖和操作使App中的文字在所有背景中看起來不錯，自動調整有或無的漸層。盡可能使用系統視圖顯示文字，而不是自己設計的文字。開發者指南請參閱UITextField和UITextView
更多關於漸層的相互作用和材質請參閱Materials
啟動畫面 Launch Screen
當你的App啟動，啟動畫面後會是第一個畫面，將給人快速反應的印象。啟動畫面不是藝術表達的機會。它僅僅是為了增加對App的認識，使它能夠快速啟用並使用。每個App都應該支援啟動畫面
為了適應不同尺寸的裝置或環境，像是多工處理，使用Xcode Storyboard提供啟動畫面。它可靈活適應，你可以使用Storyboard管理所有啟動畫面。開發者指南請參閱Responding to the Launch of Your App
要點
不要在啟動畫面使用靜態圖像。若你需要查看個螢幕尺寸以幫助排版，請參閱Device Screen Sizes and Orientations在iOS14之後，啟動畫面的最大容量為25MB
設計和第一畫面接近的啟動畫面 如果在App完成啟動後的第一畫面包含看起來完全不同於啟動畫面的元素，人們將感到不解。同樣的，確保啟動畫面和當前外觀模式相符。相關指南請參閱Dark Mode
避免在啟動畫面放上文字 由於啟動畫面的文字不會改變，文字內容無法本地化
淡化讀取 人們重視App能否快速讀取內容並執行工作。設計啟動畫面類似於App使用介面，以利於使用者開始使用。結合快速啟動，此設計有助於App快速反應。以遊戲來說，啟動畫面應優雅的轉換到遊戲畫面
切勿廣告 啟動畫面不是推廣品牌的時機。不要設計如“登入畫面*⁶”或“關於”視窗的進入體驗。除非Logo和其他品牌元素是固定物件，不要在啟動畫面顯示。你的遊戲或是沈浸式App在啟動畫面可以只顯示純色
Materials
iOS提供Meterials（或模糊效果）以半透明效果營造視覺深度。Meterials效果在不干擾前景而在背景中提示視圖和操作。為了產生這種效果，Meterials允許背景色彩通過前景視圖，同時會模糊背景以保持易讀性
當你使用系統定義Meterials，因為這些效果會自動適應系統淺色、深色模式，你的元素在所有環境下都看起來不錯
提示
Meterials需要視覺效果視圖在階層中。相關開發者指南請參閱IVisualEffectView以系統使用的材質為參考 盡可能比較自訂義和系統提供視圖，啟動相似功能和相同材質
善加利用系統提供之文字、填滿、字符和分隔線的顏色 系統色彩在半透明背景上看起來不錯。相關指南請參閱Dynamic System Colors
盡可能使用SF Symbol 當你使用動態系統色彩或漸層色彩應用在符號，符號在任何環境狀態都看起來不錯。相反的，全彩的圖片在背景上或許對比度不足，並且在半透明背景的視圖中或許不適合。相關指南請參閱SF Symbols
系統定義Materials和Vibrancy
iOS定義Materials可以使用在特定區域前景和背景之間控制視覺分隔。系統提供Material可以良好的運作在淺色、深色模式之間的背景
為使用內容容器，iOS13定義了四種不同不透明度的Materials（每種Materials都包含深色變數）
在選擇Material時考慮對比及視覺分隔 在選擇與Vibrancy搭配的Materials沒有絕對的準則。當你在選擇時可以考慮以下：
- 較不透明的Material在文字或其他功能的元素有較好的對比
- 半透明可以透過在背景可見的內容來提醒人們當前狀態
iOS13也為標籤、填色和分隔特別定義和Materials相容的Vibrancy數值。Vibrancy透過樣本背景色和模組狀態和數值調整UI元素更亮或更暗。Vibrant UI元素與Materials並增強半透明效果有更佳的整合。
標籤和填色均提供多種Vibrancy層次；分隔只有一種。各種層級的名稱對應元素和背景之間的對比度：預設層級有最高的對比度，第四層（有的話）則是最低的對比
除第四層之外，你可以在任何Materials的標籤使用下列Vibrancy Label。因為對比過低，不建議在Thin或Ultra Thin的Material使用第四級
你可以使用在所有Materials的填色使用下列Vibrancy
- fill (default)
- secondaryFill
- tertiaryFill
iOS為分隔器定義預設唯一的數值以搭配所有Materials
根據其語義選擇Vibrancy效果 避免使用混合效果，例如在分隔器使用標籤效果
Terminology 用語
App中的每一個字都是和使用者之間的對話，使用他們感到合適的文字與對話
使用熟悉易懂的文字和語彙 技術性用詞可能會讓使用者錯愕。避免使用人們無法理解的首字母縮寫詞或專業術語。透過你對聽眾的了解來確定特定文字及語彙是否適切。一般來說，目標為所有人的App應避開使用高技術性的用語。此種語言適合在App中更進階的的群眾或技術群眾
保持介面文字清楚、簡潔 人們快速且容易地吸收簡短、直接的訊息，而不是被迫閱讀長串文字。辨識最重要的資訊，簡潔並顯眼的表達，不需讓人們閱讀長串文字去尋找重要資訊來執行下一步
識別適當的介面元素 人們應該要能夠容易的分辨各個元素。在按鈕和其他互動元素加上標籤時，使用動詞來輔助，如：連接、發送、增加
避免使用自傲的用詞 避免使用“我們”、“我”、“我的”，例如：我們的教程、我們的訓練。它們有時被視為侮辱或自傲的
盡可能以非正式、友善的語氣 使用非正式的、平易近人的應答。偶爾收斂些，直接對使用者使用“你”或“你的”
小心使用幽默文字 記得，使用者可能會閱讀文本好幾次，第一次可能會看起來很有趣，數次下來可能會讓人煩躁。同樣記得，某種文化中的幽默不一定能適切地轉換成其他語言文化
使用相關且一致的語言和意象 確保引導適合當前的氛圍。舉例某人正在使用iPad，不要使用iPhone提示或圖像。使用一致的平台語言。你在觸控螢幕上Tap、Flick、Swipe、Pinch、Drag物件。你按壓實體按鈕並響應3D Touch內容。你旋轉並晃動裝置
準確日期 適當的使用辭彙如“今天”、“明天”，但如果你不考慮當前語言環境，這些術語可能會造成混淆或不精確。試想在午夜前開始的活動。在一時區，活動可能從今天開始。在另一時區，同樣的活動可能在昨天開始。一般說，日期透過使用者的時區響應。然而某些情況，像航班追蹤App，可以更明確的顯示航班原始的開始日期和時區
Typography 字體
Apple提供兩種字體可以在iOS中使用
San Francisco（SF）San Francisco是一種無襯線字體，包含SF Pro、SF Pro Rounded、SF Mono、SF Compact、SF Compact Rounded。SF Pro是iOS、macOS、tvOS的系統字體；SF Compact是watchOS的系統字體。為了裝置介面清晰度而設計，系統字體應清晰易讀
New York（NY）New York是一種襯線字體，以獨特風格和SF搭配。NY在圖形顯示（大尺寸）或閱讀環境（文本尺寸）效果一樣
你可以在這裡下載San Francisco和New York
自從iOS14，系統提供多種SF和NY字體。此字體組合不同的字體於一個檔案，且支援在不同字體間Interpolation。字體可以透過Interpolation適應所有尺寸，同時專為每種尺寸設計。
Interpolation也可以實現視覺尺寸，指的是創建不同字體以適應不同的尺寸。在iOS14之後，系統支援 動態視覺字級 ，融合不同的字級而一，像是文字和螢幕的SF Pro、SF Compact、Small、 Medium、 Large和Extra Large，延續性的設計。這個設計令每一個Glyph或Letterform進行Interpolation，已產生精確、合適的字級大小
注意
較早的iOS版本在設計工具上使用多種字體將導致非預期的結果。在這種情況下，請繼續使用Text和Display因為SF Pro和NY相互搭配，有許多方法可以在iOS介面中整合不同字體的對比並維持一致視覺感受。舉例，使用兩種字體可以幫助你創造強烈視覺階層或在不同內容之間強調語義
Apple字體支援廣泛字重、大小、風格和語言，你可以設計舒適、易讀的體驗。當你使用系統字體的樣式，你還能以Dynamic Type和更多輔助字體大小所支援，讓人們選擇他們適合的字體大小。特定數值請參閱Dynamic Type Sizes和Larger Accessibility Type Sizes。適用於iOS的Sketch、Photoshop、Adobe XD，Apple Design Resources 也提供了尺寸訊息，包括追蹤數值
系統定義API可以讓使用的SF和NY更加容易，相關開發者指南請參閱UIFontDescriptor中的withDesign method和SystemDesign structure
SF Pro和SF Compact
彈性的系統字型幫助你在所有字級達到最佳易讀性，精準排版App中的寬度及深度
SF Pro和SF Compact支援：
- 超過百種語言，包括拉丁語、希臘語、西里爾字母
- 九種直式字重，從Ultralight到Black，包含直式與斜體
- 基於文字尺寸自動調整字距
- 小型大寫字母、分數（分子、分母）、居上、居下數字
- 動態視覺字級
開發者指南請參閱SystemDesign structure的default property
SF Pro Rounded和SF Compact Rounded
系統提供多種圓體字體可以幫助你和柔和外觀或圓角UI元素搭配，或是提供不一樣的字體選擇
SF Pro Rounded和SF Compact Rounded支援：
- 超過百種語言，包括拉丁語、希臘語、西里爾字母
- 九種直式字重，從Ultralight到Black，包含直式與斜體
- 基於文字尺寸自動調整字距
- 小型大寫字母、分數（分子、分母）、居上、居下數字
- 動態視覺字級
開發者指南請參閱SystemDesign structure的rounded property
SF Mono
SF Mono是SF字體中的等寬字型，其中所有字符都是相同寬度。你通常使用等寬字型來對齊文字，像是Coding。例如Xcode和Swift Playgrounds都預設使用SF Mono
注意
SF Mono使用OpenType Tabular Lining功能來支援等寬數字及貨幣SF Mono支援：
- 超過百種語言，包括拉丁語、希臘語、西里爾字母
- 六種字重，從Light到Heavy，包含直式與斜體
- 所有等寬字型字重皆等寬，意指改變字重不會造成錯置
- 動態視覺字級
開發者指南請參閱SystemDesign structure的monospaced property
New York
New York是經典襯線字體，你可以在介面或傳統閱讀體驗使用
New York支援：
- 超過百種語言，包括拉丁語、希臘語、西里爾字母
- 六種字重，從Regular到Black，包含直式與斜體
- 基於文字尺寸自動調整字距
- 動態視覺字級
開發者指南請參閱SystemDesign structure的serif property
為你的App選擇字體
盡可能使用內建字體 以內建字體的獨特樣式來表現，同時保有最佳易讀性。樣式包括Headline、Body、Callout和幾種尺寸的標題，都基於系統字體並使用主要功能如動態字體，自動為每種字體尺寸調整Tracking和Leading。開發者指南請參閱UIFontTextStyle
強調重要資訊 使用字重、尺寸和顏色來強調重要資訊
在響應字型大小改變時調整優先內文 並非所有內容都一樣重要。當某人選用更大的字型，他們只需要內文變大，而非將螢幕上的所有文字都變大
在介面中使用最少字體組合 混合太多字體會讓App看起來破碎
調整行距以強化易讀性或節省空間 行距 指的是行與行之間的空間。某些情況下當你增加或減少空間使版面更佳。當你顯示文字在寬欄或長段落，更多空間在行之間（寬鬆的行距）將使人們更容易換行閱讀。相反的，若你需要在高度限制下顯示兩行文字，例如在列表的行中，減少行距（緊縮的行距）可以令文字吻合在其中。若你需要在高度限制下顯示三行以上，避免緊縮的行距。系統定義API讓你透過兩點增加或減少行距；開發者指南請參閱loose、tight (SwiftUI)、traitLooseLeading和traitTightLeading (UIKit)
確保自訂字體的易讀性 iOS可支援自訂字體，但可能難以閱讀，特別在如果他們具有屬性樣式，在小尺寸時難以辨認字母。除非你的App迫切需要自訂字體，像是品牌目的或創造沈浸式遊戲體驗，否則最好使用系統字體。考慮只在展示用途使用自訂字體，若你必須在內文或介面使用，確保它的易讀性，即便是較小的字級
為自訂字體使用無障礙功能 系統字體自動反應無障礙功能，如粗體和較大字級。透過確保無障礙功能啟用以及註冊通知，在使用自訂字體時在App中表現相同的行爲。相關指南請參閱Text Size and Weight
必要時調整介面Mockup的追蹤 在啟用App中，系統字體將在每個字級大小動態調整追蹤。為了生成準確的UI介面Mockup，使用多種系統字體，你需要調整追蹤。相關指南請參閱Tracking Values和Apple Design Resources
注意
iOS系統使用SF包括拉丁語、希臘語、西里爾字母，以及其他字體動態字級
動態字級透過讓閱讀器選擇他們偏好的字級。下列為各個動態字級的Weight、Size、Leading、Style
較大的輔助字級
除了標準動態字級外，系統為某些需要輔助功能的使用者提供了幾種更大的字級。下列為各個輔助字級的Weight、Size、Leading、Style
追蹤值*⁸
為了創建準確的介面Mockup，使用系統定義的追蹤值來使用SF Pro、SF Pro Rounded和New York
追蹤值表格過長不便以截圖形式在以下呈現，前往Apple HIG頁面檢視表格Video 影音
系統提供之播放器提供兩種觀看模式：全螢幕和切齊畫面（Fullscreen、Fit-to-screen）。預設下系統因應影片長寬比選擇觀看模式，使用者可以在播放時選擇模式。開發者指南請參閱AVPlayerViewController
- 全螢幕（Fullscreen） 影片將填滿畫面，某些邊緣可能會切除。寬影片（2:1至2.4:1）以此預設觀看模式。開發者指南請參閱resizeAspectFill
- 切齊畫面（Fit-to-screen） 整個影片都出現在畫面中。上下或左右留空（Letterboxing、Pillarboxing）將出現在畫面中。標準影片（4:3、16:9、至2:1）或極寬影片（2.4:1以上）以此為預設觀看模式。開發者指南請參閱resizeAspect
Play or pause media playback when people press Space on a connected Bluetooth keyboard. Pressing Space to control media playback is an interaction people expect, regardless of the keyboard they’re using.
當人們在連接之藍芽鍵盤按空白鍵時播放或暫停媒體 人們預期在按空白鍵時可以控制媒體的播放，不論他是否正在使用中
確保自訂播放器符合預期 目的是在全螢幕中播放影片時預設填滿畫面。然而，若填滿畫面造成太多修剪，該影片應以切齊畫面呈現。允許使用者切換他們偏好的觀看模式。開發者指南請參閱AVPlayerLayer
以原影片長寬比呈現 當影片已嵌入上下或左右留空以符合特定長寬比，iOS無法根據使用者的選擇正確縮放影片。嵌入在影片中的Padding將造成影片在全螢幕或切齊畫面更小。它也避免影片從邊緣到邊緣的非全螢幕環境中正常顯示，像是iPad中的子母畫面模式。參酌範例Examples of Padding on iPhone Xs
iPhone Xs上的觀看模式範例
iPhone Xs上的Padding範例
*¹ 約束條件：Constraints
*² 感應器區域：Sensor Housing
*³ 真實光線：True Tone
*⁴ 寫死：Hard-Code
*⁵ 色彩文件：Color Profile
*⁶ 登入畫面：Splash Screen
*⁷ 漸層色彩：Vibrancy
*⁸ 追蹤值：Tracking Values下一篇
上一篇
