## 1.10 顏色與字體（Color and Typography） [TOC=3,3] ### 1.10.1 色彩有助于增進溝通（Color Enhances Communication） 在iOS系統中，顏色會用于表明交互，傳遞活性以及提供視覺連續性。內置的應用程序選擇使用那些看起來更具個性的、純粹、干凈的顏色，并輔以或亮或暗的背景組合。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151021171938542.jpg) **如果你要創建多樣的自定義顏色，要確保它們能夠和諧共存。**例如，如果你的應用的基本風格是柔和的色調，你就應該創建一個協調的柔和色調的色板用于整個應用。 **注意在不同情境下的顏色對比。**例如，如果在導航欄的背景與欄按鈕標題之間沒有足夠的對比，按鈕就會很難被用戶看到。一個快速但不嚴謹的方法是通過將設備置于不同的光照環境之中（包括晴朗的室外）來測試設備上的顏色是否具有足夠的對比度。 雖然在設備上查看你的應用能夠在一定程度上幫助你找到需要調整的地方，但這仍代替不了能產生可靠結果的更科學客觀的方法。這種方法涉及到判定前景色和背景色的亮度值是否符合一定的比率。這個比率值可以通過在線對比度計算器或者根據WCAG2.0標準中提供的公式自己計算獲得。你應用中理想的顏色對比度應該是4.5:1或更高。 **當你使用自定義的欄顏色時，著重考慮半透明的欄和應用內容。**當你需要創建能匹配特別顏色的欄顏色時（比如一個已有品牌中的顏色），可能在你獲得你想要的結果之前，你需要用各種顏色進行實驗。欄的顯示將會同時受到iOS系統所提供的半透明欄與藏在欄后面的應用內容的呈現所影響。 > **API****注：**使用淺色（tintColor）的屬性值給予欄按鈕顏色，使用欄淺色（barTintColor）的屬性值為欄本身賦色。欲了解更多關于欄屬性的內容，可參見[*UINavigationBar Class Reference*](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationBar_Class/index.html#//apple_ref/doc/uid/TP40006887),，[*UI**TabBar Class Reference*](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITabBar_Class/index.html#//apple_ref/doc/uid/TP40007521)，[*UIToolbar Class Reference*](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIToolbar_Class/index.html#//apple_ref/doc/uid/TP40006927)和?[*UISearchBar Class Reference*](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISearchBar_Class/index.html#//apple_ref/doc/uid/TP40007529)*.* **注意顏色的盲區。**多數色盲的人很難區分紅色與綠色。需要對你的應用進行測試以確保在其中你沒有將紅色與綠色作為區分兩個不同狀態或值的唯一方式，一些圖像編輯軟件或工具能夠有效的幫你驗證顏色的盲區。通常意義來說，使用多種方式來表征原色的交互性是非常好的（需要了解更多關于在iOS系統中表征交互性的信息，請參閱*[Interactive Elements Invite Touch](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/InteractivityInput.html#//apple_ref/doc/uid/TP40006556-CH55-SW4)*）。 **考慮選擇一種基準色顏色來表征交互性與狀態。**內置的應用里的基準色包括比如備忘錄中的黃色，和日歷中的紅色等等。如果你定義一種用于表征交互和狀態的基準色，要確保你的應用中的其他顏色不會與它發生沖突。 **避免給可交互和不可交互的元素使用相同的顏色。**色彩是表明UI元素交互屬性的方式之一。如果可交互和不可交互的元素使用相同的顏色，用戶將會難以判斷哪些區域是可點的。 **色彩可以向用戶傳達信息，但不一定會以你希望的方式。**每個人眼中的色彩是不一樣的，不同的文化為色彩賦予的意義也是不相同的。花時間來研究如何使用色彩才可能會被其他國家或者文化接受。你要盡可能確定應用中運用的色彩向用戶傳達了恰當的信息。 **大多數情況下，不能讓顏色喧賓奪主，讓用戶分心。**除非色彩是應用的目的和本質所在，通常情況下色彩應該用來從細微細節之處提升用戶體驗。 ### 1.10.2 優秀的排版提供清晰的傳達（Great Typography Enables Clear Communication） Apple為全平臺設計了San Francisco字體以提供一種優雅的、一致的排版方式和閱讀體驗。在iOS 9及未來的版本中，San Francisco 是系統字體。 San Francisco搭配Dynamic Type，可以為您提供： * 一系列的字號大小，在任何用戶設置，包括可訪問性設置下，可獲得優質的清晰度和極佳的閱讀體驗。 * 自動調整文字的粗細，字母間距以及行高的能力。 * 為語義上有區別的文本模塊指定不同的文本樣式，比如正文、腳注或者標題。 * 文本可以根據用戶在字號設置和可訪問性設置中指定字體大小的變化作出適當的響應的能力 下載San Francisco可訪問?[https://developer.apple.com/fonts/.](https://developer.apple.com/fonts/)（注意：iOS9中的San Francisco字體取名為SF-UI）。當你在你的app中采用San Francisco時，你可以調整模擬器>設置中的值來測試在不同尺寸下你的app的文本。 注：如果你是用自定義字體，你仍然可以采用Dynamic Type或根據系統的字號設置來規劃字體范圍。當用戶改變設置時，你的應用也必須響應式的配合。如需了解如何使用文字樣式并確保當用戶改變文字型號設置時你的應用能夠獲取通知，可以參考[Text Styles](https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/CustomTextProcessing/CustomTextProcessing.html#//apple_ref/doc/uid/TP40009542-CH4-SW65). San Francisco 有兩類尺寸: 文本模式（Text）和 展示模式（Display）。 文本模式適用于小于20點（points）的尺寸，展示模式適用于大于20點（points）的尺寸。當你在你的app中使用San Francisco時，iOS會自動在適當的時機在文本模式和展示模式中切換。 **注：**如果你使用應用程序如Sketch或Photoshop來生成你的設計，那么當你設置的字體不小于20點的時候，你需要切換到展示模式。iOS會根據字體大小為San Francisco自動調整字間距。（字間距是以用作于修改文字間距）。表格10-1 和 10-2分別是文本模式(Text)和展示模式(Display) 在不同字號下的間距值。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151021130548308.jpg) [](http://isux.tencent.com/wp-content/uploads/2015/10/2015102113055262.jpg) 為了突出某些文字或者為了在內容塊之間建立視覺關聯，你可以依賴由Dynamic Type支持的語義化樣式，如標題、正文，你也可以指定字體權重，如細體或者半粗。使用?Dynamic Type樣式使得你的內容能更好地表達含義，但如果你想要對你的設計有更好的把控能力，你可以對特定的文字設置特定的權重。（想要了解更多關于調整字體權重， 可以參閱*[UIFont Class Reference](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIFont_Class/index.html#//apple_ref/doc/uid/TP40006891)*.） 例如，你可能想要增加某些文字的權重，來幫助用戶可視化你的內容的層次結構，或者把用戶的注意力吸引到特定的詞或短語。另外，你可以通過增加較小文字的權重和減小較大文字的權重，在多個不同字號的、相鄰的標簽中建立視覺凝聚。字體權重在內容的整體風格和表達中有重要影響，因此你可以選擇特定的權重來達到設計目的。 **文本尺寸的響應式變化需要優先考慮內容。**并不是所有的內容對于用戶都是同等重要的。當用戶選擇更大的文本尺寸時，他們是想要使他們關注的內容更容易閱讀；他們并不總是想要屏幕上的每個單詞都更大。 例如，當用戶選擇具備更大易用性的文本尺寸時，郵件將會以更大的尺寸顯示郵件的主題和內容，而對于那些沒那么重要的信息——如時間和收件人——則采用較小的尺寸。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151021144846744.png) **確保一個自定義字體在不同尺寸下的所有類型都具備可讀性。**實現這一效果的方法之一是效仿在不同的文本尺寸下iOS系統呈現字體樣式的一些方法。例如： * 文本永遠都不應該小于11點（points），即使是用戶選擇極小的文本尺寸。相較而言，內容樣式使用17點的字號作為大尺寸，這也是默認的文本字號。 * 通常來說，字號與行距值在每一檔的文本尺寸設置中差別為1點。唯一例外的是兩種標題的樣式，它們在極小、小和中尺寸的設置中均使用相同的字號、行距和字距。 * 在最小的三種文本尺寸中，字間距相對較大；而在最大的三中文本尺寸中，字間距相對緊湊。 * 標題和內容的樣式使用相同的字體尺寸，同時，為了區分標題與內容樣式，標題樣式使用更重的值。 * 導航控制欄的文本使用相同的字號，而內容文本的樣式則使用大尺寸的設置（值為17點）。 * 文本總是使用常規或者中重，一般不適用輕或者加粗。 **通常情況下，應用中整體應該使用單一字體。**多種字體的混雜會使你的應用看上去支離破碎和草率。相反，使用一種字體和少數樣式。根據語義用途，使用[UIFont](https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIFont_Class/Reference/Reference.html#//apple_ref/occ/cl/UIFont)類的API來定義不同文本區域的樣式，比如正文或者標題。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019162110211.png)