視覺（Visual Design)??
一、適應(yīng)性布局（Adaptivity and Layout）
用戶通常希望能夠在所有的設(shè)備和任何環(huán)境中使用他們喜愛的的APP。在iOS中，界面元素和布局可以配置為在不同設(shè)備上、在iPad上的多任務(wù)處理期間、在拆分視圖中、屏幕旋轉(zhuǎn)時等會自動更改形狀和大小。你必須設(shè)計一個適應(yīng)性強的界面，保證在任何環(huán)境中都能有出色的體驗。
設(shè)備屏幕大小和方向
iOS設(shè)備有多種屏幕尺寸，可以縱向和橫向展示。
自動布局
自動布局（Auto Layout）是一種構(gòu)建自適應(yīng)接口的開發(fā)工具。使用“自動布局”，你就可以定義控制APP中內(nèi)容的規(guī)則（稱為約束）。
例如：無論可用的屏幕空間多大，你都可以約束一個按鈕，使其始終水平居中并定位在距離圖像下方8pt的位置。
當檢測到某些環(huán)境變化（稱為特征）時，自動布局會根據(jù)指定的約束自動調(diào)整布局。你可以將APP設(shè)置為動態(tài)適應(yīng)各種特征，包括：
1、不同的設(shè)備屏幕尺寸，分辨率和色域（sRGB / P3）
2、不同的設(shè)備方向（縱向/橫向）
3、拆分視圖
4、iPad上的多任務(wù)處理模式
5、動態(tài)類型文本大小更改
6、基于區(qū)域設(shè)置啟用的國際化功能（從左到右/從右到左的布局方向，日期/時間/數(shù)字格式，字體變化，文本長度）
7、系統(tǒng)功能可用性（3D Touch）
布局指南和安全區(qū)域
布局指南中輔助線定義的矩形區(qū)域?qū)嶋H上在屏幕上不可見，但有助于內(nèi)容的定位、對齊和間隔。該系統(tǒng)包括預先定義的布局指南，可以方便地在內(nèi)容周圍應(yīng)用標準邊距，并限制文本寬度以獲得最佳可讀性。
布局指南定義了實際上不會在屏幕上顯示的矩形區(qū)域，但有助于內(nèi)容的定位、對齊和間隔。該系統(tǒng)包括預定義的布局指南，可以輕松地在內(nèi)容周圍應(yīng)用標準邊距并限制文本寬度以獲得最佳可讀性。你還可以定義自定義布局指南。
遵守UIkit定義的安全區(qū)域和布局邊界
可以根據(jù)設(shè)備和上下文內(nèi)容進行適當?shù)牟迦氩季种改?。安全區(qū)域還可以防止內(nèi)容覆蓋狀態(tài)欄、導航欄、工具欄和標簽欄。系統(tǒng)提供的標準視圖均采用了安全區(qū)域布局指南。
大小類
大小類（Size Classes）是根據(jù)大小自動分配給內(nèi)容區(qū)域的特征。系統(tǒng)定義了兩個大小類，常規(guī)/Regular（表示擴展空間）和緊湊/ Compact（表示約束空間），它們用來描述視圖的高度和寬度。
視圖可能包含大小類的任意組合：
1、常規(guī)寬度，常規(guī)高度
2、緊湊寬度，緊湊高度
3、常規(guī)寬度，緊湊高度
4、緊湊寬度，常規(guī)高度
與其他環(huán)境變化一樣，iOS會根據(jù)內(nèi)容區(qū)域的大小類動態(tài)地進行布局調(diào)整。例如：當垂直大小類從緊湊高度變?yōu)槌Ｒ?guī)高度時，可能是因為用戶將設(shè)備從橫向旋轉(zhuǎn)到縱向，標簽欄可能會變得更高。
（1）設(shè)備大小類
根據(jù)屏幕尺寸，不同尺寸類別組合適用于不同設(shè)備上的全屏體驗。
（2）多任務(wù)大小類
在iPad上，當您的應(yīng)用程序以多任務(wù)配置運行時，大小類也適用。
布局注意事項
1、確保主要內(nèi)容在其默認尺寸下是清楚的
用戶沒有必要通過水平滾屏來閱讀重要文本，或者放大才能查看主要圖像，除非用戶自己選擇改變尺寸（翻轉(zhuǎn)屏幕）。
2、在整個APP中保持整體一致的外觀
通常，具有相似功能的元素應(yīng)該看起來是相似或者統(tǒng)一的。
3、使用視覺分量和平衡來傳達重要性
大的元素吸引眼球，而且看起來比較小的元素更重要。較大的元素也更容易點擊，這對于處在極易分散用戶注意力環(huán)境下的APP尤為重要，例如用戶在廚房或健身房。
通常，將主要內(nèi)容或元素放置在屏幕的上半部分中，并且在從左到右的讀取上下文中 - 靠近屏幕左側(cè)。
4、保持對齊讓用戶瀏覽更簡單，并傳達組織和層級關(guān)系
對齊使APP看起來整潔有序，用助于用戶在滾動時集中注意力，并使查找信息變得更加容易?？s進和對齊還可以表明內(nèi)容之間的關(guān)系。
5、如果可以的話，同時支持縱向和橫向
用戶更喜歡在不同的方向使用APP，因此最好是你能能夠滿足用戶這種期望。
6、做好更改文本大小的準備
用戶希望大多數(shù)APP在設(shè)置中選擇不同的文本大小時都能做出響應(yīng)。若要適應(yīng)某些文本大小的更改，你可能需要調(diào)整布局
7、為交互式元素提供充足的點擊熱區(qū)
對于所有控件，盡量保持最小可點擊區(qū)域為44pt x 44pt。
8、在多個設(shè)備上預覽你的APP
你可以使用模擬器（Xcode附帶）預覽你的APP，來檢查裁剪以及其他布局問題。如果你的APP支持橫向模式，不管設(shè)備是左旋轉(zhuǎn)還是右旋轉(zhuǎn)，都要確保你的布局看起來很棒。全屏iPhone不支持顛倒的縱向模式。有些特例（如彩色大圖），最好能在實際設(shè)備上預覽。
9、在較大的設(shè)備上顯示文本時，應(yīng)留有可讀性邊距
這些邊距使文本行足夠短，以確保舒適的閱讀體驗。
適應(yīng)環(huán)境的變化
1、在上下文變化期間確保聚焦在當前內(nèi)容
內(nèi)容是APP中優(yōu)先級最高的。在環(huán)境變化時改變重心（或焦點）可能會令人迷茫和沮喪，并且可能讓用戶覺得他們失去了對APP的控制。
2、避免不必要的布局更改
當有用戶旋轉(zhuǎn)設(shè)備時，整個布局不必更改。例如，如果你的APP以縱向模式顯示圖像網(wǎng)格，則不必在橫向模式下顯示與列表相同的圖像。相反，它可能只需要調(diào)整下網(wǎng)格的尺寸。試著在所有情況下保持可比較的體驗。
3、如果你的APP必須以單一方向運行，請同時支持這兩種變體
a.無論用戶是向左還是向右旋轉(zhuǎn)設(shè)備，都應(yīng)該支持在橫向模式下運行APP。b.僅在縱向模式下運行的APP，應(yīng)在用戶將設(shè)備旋轉(zhuǎn)180度時將其內(nèi)容旋轉(zhuǎn)180度 - 除了iPhone X，不支持倒置縱向模式。
如果當用戶將設(shè)備放在錯誤的方向時，你的APP并沒有跟著自動旋轉(zhuǎn)，他們會本能地知道旋轉(zhuǎn)到正確方向。你不需要另外告訴他們。
4、根據(jù)上下文自定義APP對旋轉(zhuǎn)的響應(yīng)
例如：通過旋轉(zhuǎn)設(shè)備讓用戶移動角色的游戲，可能不應(yīng)該是在游戲過程中切換方向。但是，它可以根據(jù)當前方向顯示菜單和介紹序列。
5、確保你的APP能在iPad上運行，而不僅僅在iPhone上運行
用戶可以靈活地在任何類型的iOS設(shè)備上運行您的應(yīng)用。即使你希望大多數(shù)人在iPhone上使用您的APP，但界面元素仍然應(yīng)該在iPad上是可見且可用的。
如果你的APP的某些功能需要特定的iPhone硬件（如3D Touch），請考慮在iPad上隱藏或禁用這些功能，并讓用戶使用其他功能。
6、在復用現(xiàn)有圖稿時請注意寬高比差異
不同的屏幕尺寸可能有不同的寬高比，導致圖稿出現(xiàn)裁剪模式、信箱模式或郵筒模式。確保重要的視覺內(nèi)容保持在所有顯示尺寸的視圖中。
PS：如果圖像的比例與顯示的屏幕的比例不完全匹配，你可能會在屏幕的空白區(qū)域中看到黑條。黑條位于屏幕底部和頂部為信箱模式，黑條位于屏幕左側(cè)和右側(cè)則稱為郵筒模式。
設(shè)計全屏體驗
1、擴大可視元素以填滿屏幕
確保背景延伸到顯示器的邊緣，并且垂直方向可以滾動的布局（如表和集合），一直延伸到底部。
2、避免在屏幕最底部和角落放置交互式控件
用戶通常在屏幕底部邊緣用滑動手勢來訪問主屏幕和APP切換器等功能，這些手勢可能會取消你在該區(qū)域?qū)崿F(xiàn)的自定義手勢。而且屏幕的邊角可能是用戶難以觸及的舒適區(qū)域。
3、插入必要內(nèi)容時要防止被裁剪
通常，內(nèi)容應(yīng)該居中且對稱插入，因此它應(yīng)該在任何方向上看起來都不錯，沒有被圓角裁剪到，不被傳感器外殼隱藏，并且不會被用于訪問主屏幕的指示器遮擋。為獲得最佳效果，請使用標準的系統(tǒng)提供的界面元素和自動布局，來構(gòu)建界面并遵循布局指南和安全區(qū)域由UIKit定義。
當設(shè)備處于橫向時，某些類似應(yīng)用的游戲可能適合在屏幕的下半部分（延伸到安全區(qū)域下方）放置可點擊控件，以便為內(nèi)容留出更多空間。在屏幕頂部和底部放置控件時使用匹配的插入，并在Home指示器周圍留出足夠的空間，以便用戶在嘗試與控件交互時不會意外地將其作為目標觸發(fā)。由于Home指示器仍然位于屏幕中央，因此其相對于APP界面的位置可能會發(fā)生變化。
4、插入全寬按鈕
延伸到屏幕邊緣的按鈕可能看起來不像按鈕。首先應(yīng)當使全寬按鈕遵循兩側(cè)的標準UIKit邊距。屏幕底部出現(xiàn)的全寬按鈕在其有圓角與安全區(qū)域底部對齊時效果最佳，這也確保了它不會與主指示器沖突。
5、請勿掩蓋或特別注意按鍵顯示特征
不要試圖通過在屏幕頂部和底部放置黑條來隱藏設(shè)備的圓角、傳感器外殼或用于訪問主屏幕的Home指示器。也不要使用括號、邊框、形狀或說明性文字等視覺裝飾來引起用戶對這些區(qū)域的特別注意。
6、請注意狀態(tài)欄的高度
全屏iPhone上的狀態(tài)欄比舊款iPhone上的更高。如果你的APP采用固定的狀態(tài)欄高度將內(nèi)容定位在狀態(tài)欄下方，則必須更新APP以便于根據(jù)用戶的設(shè)備動態(tài)定位內(nèi)容。請注意，當后臺任務(wù)（如錄音和位置跟蹤）處于活動狀態(tài)時，全屏iPhone上的狀態(tài)欄不會更改高度。
7、如果你的APP當前隱藏狀態(tài)欄，請重新考慮全屏iPhone的隱藏與否
與舊款iPhone相比，全屏iPhone的內(nèi)容垂直空間更大，狀態(tài)欄占據(jù)了你APP可能根本無法充分利用的屏幕區(qū)域。狀態(tài)欄還顯示用戶認為有用的信息。它只在可以換取附加價值的時候才隱藏起來。
8、允許自動隱藏指示器以防誤點入主屏幕
啟用自動隱藏后，若用戶未觸摸屏幕幾秒鐘，則指示器會淡出。當用戶再次觸摸屏幕時，它會重新出現(xiàn)。此行為僅適用于被動觀看體驗，如播放視頻或照片幻燈片。
其它注意事項
確保你的網(wǎng)頁在全屏狀態(tài)下也能很好的顯示。
例如：Safari會在新iPhone X 的整個屏幕上完美地顯示網(wǎng)頁。網(wǎng)頁內(nèi)容會自動插入屏幕的安全區(qū)域，從而不會被圓角或設(shè)備的傳感器外殼遮擋。
二、動畫（Animation）
整個iOS中美麗、微妙的動畫建立了人與屏幕內(nèi)容之間的視覺聯(lián)系。如果使用得當，動畫可以傳達狀態(tài)，提供反饋，增強直接操控感，并幫助用戶可視化他們的行為結(jié)果。
1、明智地使用動畫和動作效果
不要為了動畫而使用動畫。過多或無緣無故的動畫會讓用戶感到不連貫或分心，尤其是在那些無法提供沉浸式體驗的APP中。
iOS使用運動效果（如視差效果），在主屏幕和其他區(qū)域創(chuàng)建深度感。這些效果可以增加理解和享受，但過度使用它們會使APP感到迷失方向和難以控制。如果實現(xiàn)運動效果，請保持測試以確保它們正常工作。
2、力求符合現(xiàn)實并且可靠
人們傾向于接受充滿藝術(shù)的東西，但動畫沒有意義或似乎違反物理法則時，他們會感到迷失方向。例如：如果有人通過從屏幕頂部向下滑動來顯示視圖，他們應(yīng)該也能夠通過向上滑動來消除視圖。
3、使用一致的動畫
熟悉、流暢的體驗會讓用戶更投入。他們習慣于iOS中使用的微妙動畫，例如平滑過渡、設(shè)備方向的流暢轉(zhuǎn)換和基于物理的滾動。除非你是創(chuàng)建沉浸式體驗，例如游戲，否則你的自定義動畫應(yīng)與系統(tǒng)的內(nèi)置動畫差不多的。
4、使動畫可選
在輔助功能首選項中啟用減少動畫的選項時，你的APP應(yīng)該最小化或消除動畫。
三、品牌（Branding）
成功的品牌塑造不僅僅是將品牌資產(chǎn)添加到APP中。優(yōu)秀的APP通過智能字體、顏色和圖像決策來表達獨特的品牌標識。在APP的上下文中提供足夠的品牌資產(chǎn)，但不要太多，這會讓人分心。
1、融合精致，不引人注目的品牌
用戶是用你的APP來娛樂、獲取信息或完成任務(wù)，而不是觀看廣告。為了獲得最佳體驗，請將你的品牌巧妙地融入到APP的設(shè)計中。例如：在整個界面上下文中貫穿APP圖標的顏色，就是一個很好的方法。
2、不要讓品牌妨礙優(yōu)秀的設(shè)計
最重要的是，讓你的APP看起來像一個iOS應(yīng)用程序。確保它直觀、易于導航、易于使用，并專注于內(nèi)容。即使你的APP在其他平臺也可以使用，也要避免通過過分關(guān)注一致的品牌卻削弱了你的設(shè)計。
3、遵循內(nèi)容而不是推廣品牌
在屏幕頂部顯示一個持久欄，除了顯示品牌資產(chǎn)之外什么也不做，這意味著用戶查看內(nèi)容的空間變小了。相反，請考慮使用盡量將干擾降到最低來呼應(yīng)你的品牌。例如：使用自定義顏色方案或字體，或巧妙地自定義背景。
4、避免在整個APP中顯示Logo
不要在你的APP中顯示Logo，除非對于上下文是很有必要出現(xiàn)的。尤其是導航欄中要禁止，因為說明性的標題對用戶會更有用。
5、遵守Apple的商標準則
Apple商標不應(yīng)出現(xiàn)在你的APP名稱或頁面中。
四、顏色（Color）
顏色是一種傳遞活力、提供視覺連續(xù)性、傳達狀態(tài)信息、響應(yīng)用戶操作提供反饋以及幫助用戶可視化數(shù)據(jù)的好方法。
當你在為你的APP選擇配色時，可以參考系統(tǒng)的配色方案作為配色指南。因為這些顏色無論是單獨還是組合在一起，在淺色模式和深色模式下都會很好看。
1、明智地使用顏色與用戶交流
當一種顏色被謹慎或很少使用時，它能明顯提高用戶的注意力。例如，如果在不是很關(guān)鍵的其他地方使用紅色時，那么警告用戶關(guān)鍵問題的紅色就會變得不是那么有效。
2、在APP中使用互補色
APP中的顏色需要很好地協(xié)同工作，而不是沖突或分散注意力。例如：如果粉彩對APP的風格至關(guān)重要，請使用一組協(xié)調(diào)的粉彩。
3、通常，選擇與Logo協(xié)調(diào)的顏色
可以在Logo中提取顏色作為你APP的標準色。巧妙地使用顏色是傳達品牌感的好方法。
4、考慮選擇一種色調(diào)來表示APP的交互性
在Notes中，交互元素為黃色。在日歷中，交互式元素為紅色。如果你自定義了表示交互的色調(diào)，請確保其他顏色不會與之競爭。
5、提供兩種版本的色調(diào)，以確保它在淺色和深色模式下都很好看
當你使用系統(tǒng)顏色作為色調(diào)顏色時，將自動支持高對比度。
6、避免對交互元素和非交互元素使用相同的顏色
如果交互元素和非交互元素具有相同的顏色，那么用戶很難知道哪里可以點擊，哪里不能點。
7、考慮插圖和半透明元素對附近顏色的影響
為了保持視覺連續(xù)性，防止界面元素變得過于強大或缺乏吸引力，插圖的變化有時需要改變附近的顏色。
例如：地圖在使用地圖模式時顯示淺色模式，但在衛(wèi)星模式時切換到深色模式。放置在半透明元素后面或應(yīng)用于半透明元素（如工具欄）上時，顏色也會顯得不同。
8、在各種照明條件下測試APP的配色方案
根據(jù)房間的氛圍、一天的時間、天氣等，室內(nèi)和室外的照明差異很大。要知道，現(xiàn)實世界中電腦上的顏色看起來并不總是一樣，APP也是一個道理。所以請在多種光照條件下預覽你的APP，包括在晴天戶外，去查看顏色的顯示方式。如有必要，請調(diào)整顏色以便于在大多數(shù)用例中都能提有很好的觀看體驗。
9、考慮True Tone顯示如何影響顏色
True Tone顯示器使用環(huán)境光傳感器自動調(diào)整顯示器的白點，以適應(yīng)當前環(huán)境的照明條件。主要關(guān)注閱讀、照片、視頻和游戲的APP可以通過指定白點適應(yīng)性樣式來增強或削弱此效果。
10、考慮如何在其他國家和文化中區(qū)別對顏色的使用
例如：在某些國家的文化中，紅色代表危險。而可能在其他國家的人看來，紅色具有積極的內(nèi)涵。確保APP中的顏色可以表達相應(yīng)的信息。
11、避免使用讓用戶難以查看內(nèi)容的顏色
例如：色盲人可能無法區(qū)分某些顏色組合；而對比度不足會導致圖標和文本與背景混合，使內(nèi)容難以閱讀。
系統(tǒng)顏色
iOS提供了一系列的系統(tǒng)顏色，可自動適應(yīng)活動和可訪問性設(shè)置的變化，如增加對比度和降低透明度。系統(tǒng)顏色在淺色和深色背景以及明暗模式下都可以單獨和組合使用。
不要在應(yīng)用中硬編碼系統(tǒng)顏色值。下面提供的顏色值僅供APP設(shè)計過程中參考。根據(jù)各種環(huán)境變量，實際顏色值可能在不同的釋放之間波動。始終使用API應(yīng)用系統(tǒng)顏色。
iOS 13還引入了一系列六種不透明的灰色顏色，你可以在半透明效果不佳的極少數(shù)情況下使用它們。例如：交叉或重疊元素（例如網(wǎng)格中的線條或條形）在不透明基礎(chǔ)上看起來更好。通常，為UI元素使用語義定義的系統(tǒng)顏色。
動態(tài)系統(tǒng)顏色
除了以上一系列的系統(tǒng)顏色外，iOS還提供語義定義的系統(tǒng)顏色，用于背景區(qū)域和前景內(nèi)容，例如標簽、分隔符和填充。這些顏色自動適應(yīng)明暗UI模式。
iOS定義了兩組背景色系統(tǒng)，并對每個系統(tǒng)進行分組，每個系統(tǒng)都包含主要、次要和三級變體，這些變體有助于你傳達信息的層級結(jié)構(gòu)。通常，在有分組表視圖時使用背景色分組集；否則，使用背景色系統(tǒng)集。
使用這兩組背景顏色，通常使用變體以下列方式指示層次結(jié)構(gòu)：
1、主要用于整體視圖
2、在整體視圖中對內(nèi)容或元素進行分組的輔助項
3、用于對次要元素中的內(nèi)容或元素進行分組的第三級
4、對于前景內(nèi)容，iOS定義以下顏色：
1、不要重新定義動態(tài)系統(tǒng)顏色的語義含義
為了給用戶一致的體驗，并確保你的界面在所有上下文中看起來都很協(xié)調(diào)，請按照預期使用動態(tài)系統(tǒng)顏色。
2、不要嘗試復制動態(tài)系統(tǒng)顏色
基于各種環(huán)境變量，動態(tài)系統(tǒng)顏色可能會隨發(fā)布而變化。不要嘗試創(chuàng)建與系統(tǒng)顏色匹配的自定義顏色，而是去使用動態(tài)系統(tǒng)顏色。
色彩管理
1、將顏色配置文件應(yīng)用于圖像
iOS上的默認顏色空間是標準RGB（sRGB）。要確保顏色與此顏色空間正確匹配，請確保圖像包含嵌入的顏色配置文件。
2、使用寬色可增強兼容顯示器的視覺體驗
寬色顯示器支持P3顏色空間，可以產(chǎn)生比sRGB更豐富、更飽和的色彩。因此，使用寬顏色的照片和視頻更逼真，使用寬顏色的視覺數(shù)據(jù)和狀態(tài)指示器更具影響力。
適當時，使用每像素16位（每個通道）的顯示P3顏色配置文件，并以PNG格式導出圖像。請注意，需要使用寬色顯示器來設(shè)計寬色圖像并選擇P3色。
3、當體驗需要時，提供特定于顏色空間的圖像和顏色變化
一般來說，P3的顏色和圖像在sRGB設(shè)備上會像預期的那樣出現(xiàn)。然而，有時，當在sRGB中查看兩種非常相似的P3顏色時，很難區(qū)分它們。使用P3光譜中的顏色的漸變有時也會出現(xiàn)在sRGB設(shè)備上。
為了避免這些問題，你可以在Xcode項目的資產(chǎn)目錄中提供不同的圖像和顏色，以確保寬顏色和sRGB設(shè)備上的視覺逼真度。
4、在實際sRGB和寬色顯示屏預覽APP的顏色
根據(jù)需要進行調(diào)整，以確保在兩種類型的顯示器上都有同樣出色的視覺體驗。
五、深色模式（Dark Mode）
在iOS 13.0及更高版本中，用戶可以選擇使用一個叫做深色模式的黑暗系統(tǒng)外觀。在深色模式下，系統(tǒng)為所有屏幕、視圖、菜單和控件使用較暗的色彩，并使用更具活力的顏色，使前景內(nèi)容在較暗的背景下突出。深色模式也支持所有輔助功能。
用戶可以選擇深色模式作為其默認界面風格，并且可以通過設(shè)置，使其設(shè)備在環(huán)境光線較低時自動切換到深色模式。
1、專注于內(nèi)容
暗模式應(yīng)該把用戶的焦點放在界面的內(nèi)容區(qū)域，保證界面的內(nèi)容與其他APP的界面退回到后臺時，也能突出顯示。
PS：如上圖，地圖APP在退出時內(nèi)容很突出，辨識度很高。但是簡書和QQ的夜間模式就不夠突出。當然這并不是說簡書和QQ做得不好，這里只是舉個例子。事實上，夜間模式和深色模式是不能相提并論的。夜間模式是提供給用戶夜晚使用的，主要是為了護眼。而深色模式就像是一個主題，或者一種皮膚，是需要長期使用的。所以深色模式下，一定要確保用戶無論白天還是晚上（強光還是弱光下），內(nèi)容都能清晰易讀。用了MacOS系統(tǒng)的深色模式就會有所感觸，很多桌面端應(yīng)用的深色模式做得很好，比如Sketch。
2、在明亮和黑暗的外觀下測試你的設(shè)計
了解你的界面在兩種外觀下的狀態(tài)，并根據(jù)需要調(diào)整設(shè)計以適應(yīng)兩種模式。在一個外觀中看起來很好的設(shè)計可能在另一個外觀中效果并不好。
3、調(diào)整對比度和透明度輔助功能設(shè)置時，確保內(nèi)容在深色模式仍然清晰易讀
在深色模式下，你應(yīng)該單獨打開或者同時打開“增加對比度”和“降低透明度”來測試你APP的內(nèi)容。你可能會在深色背景上找到不易辨認深色文本。你可能還會發(fā)現(xiàn)在深色模式下啟用“增加對比度”會導致深色文本和深色背景之間的視覺對比度降低。
盡管視力好的人仍然可以閱讀較低對比度的文本，但對于有視力不好的人來說，這樣的文本可能可能根本看不清或看不懂。
顏色
深色模式中的配色包括較暗的背景顏色和較淺的前景色，經(jīng)過精心挑選以確保對比度，同時也保證了兩種模式之間的統(tǒng)一性。
1、使用適合當前外觀模式的顏色
語義顏色（如分隔符）會自動適應(yīng)當前外觀。當你需要自定義顏色時，將顏色集資源添加到APP的資產(chǎn)目錄中，并指定顏色的淺色和深色變體，以便它可以適應(yīng)當前的外觀模式。避免使用硬編碼的顏色值或不適應(yīng)的顏色。
2、確保顏色在兩種模式下都具有足夠?qū)Ρ榷?/b>
使用系統(tǒng)定義的顏色可確保前景和背景內(nèi)容之間的對比度。對于自定義顏色，目標是對比度為7：1，尤其是對于較小的文本。
3、柔化白色背景的顏色
如果你必須在深色模式下使用白色背景作為內(nèi)容，請選擇稍暗的白色，以防止背景對比周圍的暗色內(nèi)容像發(fā)光一樣。
圖像、圖標和符號的顏色
iOS系統(tǒng)的SF符號，在深色模式下會自動顯示效果，以及針對明暗外觀優(yōu)化的全彩色圖像。
1、盡量使用SF符號。當你使用動態(tài)顏色對其進行著色或添加活力時，符號在兩種外觀模式下看起來都很棒。
2、必要時為明暗外觀設(shè)計單獨的標志符號。在淺色模式下使用線性圖標或符號，在深色模式下可能則需要更實心的填充圖標或符號。
3、確保全彩色圖像和圖標看起來都很好。如果在淺色和深色模式下看起來都不錯，請使用相同的資產(chǎn)。如果資產(chǎn)僅在一種模式下看起來很好，請修改資產(chǎn)或創(chuàng)建單獨的淺色和深色資產(chǎn)。使用資產(chǎn)目錄將你的資產(chǎn)組合成一個單獨命名的圖像。
文字顏色
Vibrancy可以幫助在較暗的背景上保持良好的文本對比度。
注釋：Vibrancy意為 活力。顏色的活力表達著你設(shè)計的情感。亮麗的色彩能使得用戶感覺到能量，稍暗的顏色則使用戶放松，并且注意力集中于其他的內(nèi)容。?
1、使用系統(tǒng)提供的標簽顏色作為標簽。初級、次級、三級和四級標簽顏色會自動適應(yīng)淺色模式和深色模式下的外觀。
2、使用系統(tǒng)視圖繪制文本字段和文本視圖。系統(tǒng)視圖和控件使你的APP文本在所有背景上都看起來很好，并自動調(diào)整以適應(yīng)是否有Vibrancy。當你可以使用系統(tǒng)提供的視圖來顯示該文本時，請不要自己繪制文本。
六、材質(zhì)（Materials）
iOS提供的材質(zhì)（或模糊效果）都可創(chuàng)建半透明效果，可喚起深度感。材質(zhì)的效果是為了讓視圖和控件能夠提示背景內(nèi)容，同時又不會分散前景內(nèi)容。為了產(chǎn)生這種效果，材質(zhì)允許背景顏色信息傳達到前景視圖，同時模糊背景上下文以保持易讀性。
當你使用系統(tǒng)定義的材質(zhì)時，你的元素在每個上下文中都會很好看，因為這些效果會自動適應(yīng)系統(tǒng)的明暗模式。
1、遵循系統(tǒng)使用的材質(zhì)
盡可能將自定義視圖與系統(tǒng)提供的視圖進行比較，以獲得類似功能并使用相同的材質(zhì)。
2、利用系統(tǒng)提供的文本、填充、字形和分隔符的顏色
系統(tǒng)提供的顏色會自動使這些項目在半透明背景上看起來很棒。
3、如果可能的話，請使用SF符號
當你使用動態(tài)系統(tǒng)顏色為符號著色或?qū)ζ鋺?yīng)用活力效果時，符號在任何上下文中都看起來很棒。相比之下，使用全色圖像的話，可能相對于背景不能形成足夠的對比度，并且在具有半透明背景的視圖中使用時可能看起來不合適。
系統(tǒng)定義的材料和活力
iOS定義了你在特定位置可以使用的材質(zhì)，以控制前景內(nèi)容和背景外觀之間的視覺分離。系統(tǒng)提供的材質(zhì)包括適用于大多數(shù)背景的淺色和深色變體。
為了在內(nèi)容容器中使用，iOS 13定義了四種具有不同半透明度的材質(zhì)（每種材質(zhì)還包括一個深色變體）：
· SystemUltraThinMaterial
· SystemThinMaterial
· SystemMaterial（默認）
· SystemThickMaterial
選擇材料時要考慮對比度和視覺分離。選擇與活力效果相結(jié)合的材質(zhì)并不是絕對不可變的。當你做出這個選擇時，請考慮：
1、較厚的材質(zhì)，可以為具有精細特征的文本或其他元素等提供更好的對比度
2、半透明可以通過對后臺內(nèi)容的可見，來幫助用戶記住其上下文
iOS13還定義了標簽、填充和分隔符的活力值，這些標簽、填充和分隔符專門設(shè)計用于處理每種材料。通過對背景色進行采樣并修改飽和度和值，Vibrancy 使UI元素變亮或變暗。充滿活力的用戶界面元素能更好地與材質(zhì)相結(jié)合，并增強半透明效果。
標簽和填充每個都提供幾個級別的活力值；分隔符只有一個級別。級別的名稱表示元素與背景之間的對比度的相對量：默認級別具有最高對比度，而四元組（當它存在時）具有最低對比度。
除了四元組，你可以對任何材料上的標簽使用以下活力值。不建議在薄和超薄材質(zhì)上使用四元組，因為對比度太低。
1、標簽（默認）
2、secondaryLabel
3、tertiaryLabel
4、quaternaryLabel
你可以使用以下活力值填充所有材料。
1、填充（默認）
2、secondaryFill
3、tertiaryFill
iOS為分隔符定義了一個默認的活動值，該值適用于所有材質(zhì)。
根據(jù)其語義含義選擇一種活力效果。不要讓這些效果混合在一起；例如：不要對分隔符使用標簽效果。
七、術(shù)語（Terminology）
你APP中的每個字，都是與用戶對話的一部分。此對話可以幫助他們在你的APP中感到舒適。
1、使用熟悉、易懂的字和詞語
技術(shù)可能令人生畏。避免使用用戶可能不理解的縮略詞和技術(shù)術(shù)語。根據(jù)你對用戶的了解來確定某些字或詞語是否合適。
一般而言，你的APP想要吸引所有人，就應(yīng)該避開高技術(shù)語言。這種語言可能適用于面向更高級或技術(shù)人群的APP。
2、保持界面文本清晰簡潔
用戶可以快速、輕松地吸收簡短而直接的文本，并且不喜歡被迫閱讀長篇文章來完成任務(wù)。
確保將最重要的信息簡潔地表達出來，并突出地呈現(xiàn)出來，這樣用戶就不必讀太多的東西來找到他們要找的東西，也不必去想下一步該做什么。
3、適當?shù)刈R別互動元素
用戶應(yīng)該一眼就能看出元素的作用。在標記按鈕和其他交互元素時，請使用動作謂詞，如連接、發(fā)送和添加。
4、避免使用聽起來有點屈尊的語言
避免我們、我們的、我和我的（例如“我們的教程”和“我的訓練”）。它們有時會被理解為侮辱或屈尊的詞。
5、力求非正式，友好的語氣
以一種非正式、平易近人的風格，就像你在午餐時與人交談的方式一樣。偶爾使用縮略詞、你和你的直接與用戶對話。
6、慎用幽默性語句
請記住，用戶可能會多次閱讀界面中的文本，并且最初看起來很不錯的內(nèi)容，可能會隨著時間的推移而讓用戶覺得煩躁。還要記住，一種文化中的幽默不一定能代表它在其他文化中也很幽默。
7、使用相關(guān)且一致的語言和圖像
始終確保對當前環(huán)境能起到指導作用。例如：當用戶使用iPad時，就不要顯示iPhone 的提示或圖標。保持與平臺一致的語言。你可以點擊、輕擊、滑動、捏和拖動觸摸屏上的內(nèi)容。你可以按物理按鈕和內(nèi)容來響應(yīng)3D Touch。你旋轉(zhuǎn)并搖動裝置。
8、準確地參考日期
使用像今天和明天這樣的友好的術(shù)語是很合適的，但如果不考慮當前的區(qū)域設(shè)置，這些術(shù)語可能會令人困惑或不準確。
考慮一個在午夜之前開始的事件。在一個時區(qū)，活動可能從今天開始。在另一個時區(qū)，同一事件可能已于昨天開始。通常，日期應(yīng)反映觀看活動的人的時區(qū)。但是，在某些情況下，例如在航班跟蹤APP中，可以更清楚地顯示航班開始的日期和時區(qū)。
八、字體排版（Typography）
San Francisco (SF)是iOS中的系統(tǒng)字體。這種字體的設(shè)計進行了優(yōu)化，使文本具有非常好的易讀性、清晰度和一致性。
1、強調(diào)重要信息
使用字體粗細、大小和顏色來突出APP中的重要信息/內(nèi)容。
2、盡量使用一種字體
混合幾種不同的字體可能會使APP看起來支離破碎或者很隨便。盡可能只使用一種字體，以及盡可能少的進行字形變化和字體大小變化。
3、盡量使用內(nèi)置文本樣式
內(nèi)置的文本樣式使你的APP在展示不同內(nèi)容的基礎(chǔ)上，同時保持最佳的易讀性。這些樣式是基于系統(tǒng)本身各種優(yōu)勢特征實現(xiàn)的，例如動態(tài)類型，它可以自動調(diào)整每個字體大小。iOS包括以下文本樣式：
4、確保自定義字體清晰易讀
iOS上支持自定義字體，但通常會很難閱讀。除非你的APP對自定義字體有強烈的需求。例如：用于品牌宣傳或創(chuàng)建沉浸式的游戲體驗，否則最好還是堅持使用系統(tǒng)字體。如果一定要使用自定義字體，請確保它易于閱讀，即使是小字號也是一樣。
5、實現(xiàn)自定義字體的輔助功能
系統(tǒng)字體會自動響應(yīng)粗體文本和較大文本等輔助功能。你使用的自定義字體也應(yīng)實現(xiàn)相同的功能，方法是檢查是否啟用了輔助功能，并在其更改時注冊通知。
動態(tài)字體類型
SF字體的設(shè)計在小尺寸和大尺寸上都非常清晰易讀。動態(tài)類型則提供了額外的靈活性，讀者可以選擇自己喜歡的文本大小。
在響應(yīng)文本大小的更改時確定內(nèi)容的優(yōu)先級。并非所有內(nèi)容都同樣重要。當有人選擇較大的尺寸時，他們希望讓他們關(guān)心的內(nèi)容更容易閱讀；而且，他們并不希望屏幕上的每個字都很大。
更大的可訪問類型大小
除了標準的動態(tài)類型大小外，iOS系統(tǒng)還為具有可訪問性需求的用戶提供了更多類型的尺寸。
字體使用和調(diào)試
在接口模型中使用正確的字體變量。當使用SF作為標準控件（如按鈕和標簽）中的文本時，iOS會根據(jù)磅值和用戶的可訪問性設(shè)置自動應(yīng)用最合適的字體變量。在界面模型中，將SF Pro文本用于19磅或更小的文本，將SF Pro顯示用于20磅或更大的文本，并相應(yīng)地調(diào)整文字之間的間距。
九、視頻（Video）
系統(tǒng)提供的視頻播放器可提供兩種查看模式：全屏（縱橫填充）和適合屏幕（縱橫比）。默認情況下，系統(tǒng)根據(jù)視頻的縱橫比選擇觀看模式，用戶可以在播放期間切換模式。
全屏（縱橫填充）模式。視頻放大以鋪滿設(shè)備屏幕?？赡軙l(fā)生一些邊緣裁剪。這是寬視頻的默認查看模式（2：1到2.40：1）。
適合屏幕（縱橫）模式。整個視頻在屏幕上可見。會出現(xiàn)信箱或郵筒模式。這是標準視頻（4：3,16：9，以及最高2：1）和超寬視頻（任何高于2.40：1）的默認查看模式。
注：全屏，即整個視頻鋪滿設(shè)備屏幕，盡管視頻一定程度上會被裁剪；適合屏幕，即整個視頻完完整整得顯示在設(shè)備屏幕上，絲毫不會被裁剪。
iPhone XS上的查看模式示例
確保自定義視頻播放器的行為符合預期。目標是在全屏設(shè)備上播放視頻內(nèi)容時，默認情況下是全屏模式（縱橫填充）顯示內(nèi)容。但是，如果填充顯示會導致過多的內(nèi)容被裁剪，則應(yīng)縮放視頻以適合屏幕模式顯示內(nèi)容。
你還應(yīng)該允許用戶根據(jù)個人喜好在全屏和適應(yīng)屏幕模式之間自由切換。
iPhone XS上的填充示例
?? ?
始終以原生縱橫比顯示視頻內(nèi)容。當視頻內(nèi)容使用嵌入式信箱或郵筒模式填充以符合特定的縱橫比時，iOS無法根據(jù)用戶選擇的觀看模式正確地縮放視頻。嵌入的視頻會使其在全屏模式和適合屏幕模式下顯示得更小。使用原生縱橫比還可以防止視頻在邊到邊、非全屏的環(huán)境中正確顯示內(nèi)容，比如iPad上的畫中畫模式。
