鍍金池/ 教程/ iOS/ 顏色與字體
錢包
iCloud
控件
適應性和布局
編輯菜單(Edit Menu)
從概念到產(chǎn)品
啟動與停止
3D 觸摸
VoiceOver
Live Photos
HomeKit
臨時視圖
游戲中心(Game Center)
快速查看(Quick Look)
交互性與反饋
與 iOS 的整合
鍵盤和輸入頁面(Keyboards and Input Views)
iAd 富媒體廣告(iAd Rich Media Ads)
術語和措辭
HealthKit
案例學習:從桌面到 iOS
導航
撤銷與重做(Undo and Redo)
研究型應用程序
社交媒體
蘋果的移動支付平臺
圖標和圖形
iOS 應用解析
為 iOS 而設計
路線選擇(Routing)
設計原則
應用內(nèi)購買服務(In-App Purchase)
品牌推廣
動畫
聲音(Sound)
多任務處理
內(nèi)容視圖
應用擴展
通知
訪問用戶數(shù)據(jù)(Accessing User Data)
無線打印 (AirPrint)
模態(tài)情境
顏色與字體

顏色與字體

色彩有助于增進溝通

在 iOS 系統(tǒng)中,顏色會用于表明交互,傳遞活性以及提供視覺連續(xù)性。內(nèi)置的應用程序選擇使用那些看起來更具個性的、純粹、干凈的顏色,并輔以或亮或暗的背景組合。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/9.jpg" alt="" />

如果你要創(chuàng)建多樣的自定義顏色,要確保它們能夠和諧共存。例如,如果你的應用的基本風格是柔和的色調(diào),你就應該創(chuàng)建一個協(xié)調(diào)的柔和色調(diào)的色板用于整個應用。

注意在不同情境下的顏色對比。例如,如果在導航欄的背景與欄按鈕標題之間沒有足夠的對比,按鈕就會很難被用戶看到。一個快速但不嚴謹?shù)姆椒ㄊ峭ㄟ^將設備置于不同的光照環(huán)境之中(包括晴朗的室外)來測試設備上的顏色是否具有足夠的對比度。

雖然在設備上查看你的應用能夠在一定程度上幫助你找到需要調(diào)整的地方,但這仍代替不了能產(chǎn)生可靠結(jié)果的更科學客觀的方法。這種方法涉及到判定前景色和背景色的亮度值是否符合一定的比率。這個比率值可以通過在線對比度計算器或者根據(jù) WCAG2.0 標準中提供的公式自己計算獲得。你應用中理想的顏色對比度應該是4.5:1或更高。

當你使用自定義的欄顏色時,著重考慮半透明的欄和應用內(nèi)容。當你需要創(chuàng)建能匹配特別顏色的欄顏色時(比如一個已有品牌中的顏色),可能在你獲得你想要的結(jié)果之前,你需要用各種顏色進行實驗。欄的顯示將會同時受到 iOS 系統(tǒng)所提供的半透明欄與藏在欄后面的應用內(nèi)容的呈現(xiàn)所影響。

API 注:使用淺色(tintColor)的屬性值給予欄按鈕顏色,使用欄淺色(barTintColor)的屬性值為欄本身賦色。欲了解更多關于欄屬性的內(nèi)容,可參見 UINavigationBar Class Reference,,UITabBar Class Reference,UIToolbar Class Reference和 UISearchBar Class Reference.

注意顏色的盲區(qū)。多數(shù)色盲的人很難區(qū)分紅色與綠色。需要對你的應用進行測試以確保在其中你沒有將紅色與綠色作為區(qū)分兩個不同狀態(tài)或值的唯一方式,一些圖像編輯軟件或工具能夠有效的幫你驗證顏色的盲區(qū)。通常意義來說,使用多種方式來表征原色的交互性是非常好的(需要了解更多關于在 iOS 系統(tǒng)中表征交互性的信息,請參閱 Interactive Elements Invite Touch)。

考慮選擇一種基準色顏色來表征交互性與狀態(tài)。內(nèi)置的應用里的基準色包括比如備忘錄中的黃色,和日歷中的紅色等等。如果你定義一種用于表征交互和狀態(tài)的基準色,要確保你的應用中的其他顏色不會與它發(fā)生沖突。

避免給可交互和不可交互的元素使用相同的顏色。色彩是表明 UI 元素交互屬性的方式之一。如果可交互和不可交互的元素使用相同的顏色,用戶將會難以判斷哪些區(qū)域是可點的。

色彩可以向用戶傳達信息,但不一定會以你希望的方式。每個人眼中的色彩是不一樣的,不同的文化為色彩賦予的意義也是不相同的?;〞r間來研究如何使用色彩才可能會被其他國家或者文化接受。你要盡可能確定應用中運用的色彩向用戶傳達了恰當?shù)男畔ⅰ?/p>

大多數(shù)情況下,不能讓顏色喧賓奪主,讓用戶分心。除非色彩是應用的目的和本質(zhì)所在,通常情況下色彩應該用來從細微細節(jié)之處提升用戶體驗。

優(yōu)秀的排版提供清晰的傳達

Apple 為全平臺設計了 San Francisco 字體以提供一種優(yōu)雅的、一致的排版方式和閱讀體驗。在 iOS 9及未來的版本中,San Francisco 是系統(tǒng)字體。

San Francisco 搭配 Dynamic Type,可以為您提供:

  • 一系列的字號大小,在任何用戶設置,包括可訪問性設置下,可獲得優(yōu)質(zhì)的清晰度和極佳的閱讀體驗。

  • 自動調(diào)整文字的粗細,字母間距以及行高的能力。

  • 為語義上有區(qū)別的文本模塊指定不同的文本樣式,比如正文、腳注或者標題。

  • 文本可以根據(jù)用戶在字號設置和可訪問性設置中指定字體大小的變化作出適當?shù)捻憫哪芰?下載 San Francisco 可訪問 https://developer.apple.com/fonts/.(注意:iOS9中的 San Francisco 字體取名為 SF-UI)。當你在你的 app 中采用 San Francisco 時,你可以調(diào)整模擬器>設置中的值來測試在不同尺寸下你的 app 的文本。

注:如果你是用自定義字體,你仍然可以采用 Dynamic Type 或根據(jù)系統(tǒng)的字號設置來規(guī)劃字體范圍。當用戶改變設置時,你的應用也必須響應式的配合。如需了解如何使用文字樣式并確保當用戶改變文字型號設置時你的應用能夠獲取通知,可以參考 Text Styles.

San Francisco 有兩類尺寸: 文本模式(Text)和 展示模式(Display)。 文本模式適用于小于20點(points)的尺寸,展示模式適用于大于20點(points)的尺寸。當你在你的 app 中使用 San Francisco 時,iOS 會自動在適當?shù)臅r機在文本模式和展示模式中切換。

注:如果你使用應用程序如 Sketch 或 Photoshop 來生成你的設計,那么當你設置的字體不小于20點的時候,你需要切換到展示模式。iOS 會根據(jù)字體大小為 San Francisco 自動調(diào)整字間距。(字間距是以用作于修改文字間距)。表格10-1 和 10-2分別是文本模式(Text)和展示模式(Display) 在不同字號下的間距值。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/10.jpg" alt="" />

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/11.jpg" alt="" />

為了突出某些文字或者為了在內(nèi)容塊之間建立視覺關聯(lián),你可以依賴由 Dynamic Type 支持的語義化樣式,如標題、正文,你也可以指定字體權(quán)重,如細體或者半粗。使用 Dynamic Type 樣式使得你的內(nèi)容能更好地表達含義,但如果你想要對你的設計有更好的把控能力,你可以對特定的文字設置特定的權(quán)重。(想要了解更多關于調(diào)整字體權(quán)重, 可以參閱 UIFont Class Reference.)

例如,你可能想要增加某些文字的權(quán)重,來幫助用戶可視化你的內(nèi)容的層次結(jié)構(gòu),或者把用戶的注意力吸引到特定的詞或短語。另外,你可以通過增加較小文字的權(quán)重和減小較大文字的權(quán)重,在多個不同字號的、相鄰的標簽中建立視覺凝聚。字體權(quán)重在內(nèi)容的整體風格和表達中有重要影響,因此你可以選擇特定的權(quán)重來達到設計目的。

文本尺寸的響應式變化需要優(yōu)先考慮內(nèi)容。并不是所有的內(nèi)容對于用戶都是同等重要的。當用戶選擇更大的文本尺寸時,他們是想要使他們關注的內(nèi)容更容易閱讀;他們并不總是想要屏幕上的每個單詞都更大。

例如,當用戶選擇具備更大易用性的文本尺寸時,郵件將會以更大的尺寸顯示郵件的主題和內(nèi)容,而對于那些沒那么重要的信息——如時間和收件人——則采用較小的尺寸。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/37.jpg" alt="" />

確保一個自定義字體在不同尺寸下的所有類型都具備可讀性。實現(xiàn)這一效果的方法之一是效仿在不同的文本尺寸下 iOS 系統(tǒng)呈現(xiàn)字體樣式的一些方法。例如:

  • 文本永遠都不應該小于11點(points),即使是用戶選擇極小的文本尺寸。相較而言,內(nèi)容樣式使用17點的字號作為大尺寸,這也是默認的文本字號。

  • 通常來說,字號與行距值在每一檔的文本尺寸設置中差別為1點。唯一例外的是兩種標題的樣式,它們在極小、小和中尺寸的設置中均使用相同的字號、行距和字距。

  • 在最小的三種文本尺寸中,字間距相對較大;而在最大的三中文本尺寸中,字間距相對緊湊。

  • 標題和內(nèi)容的樣式使用相同的字體尺寸,同時,為了區(qū)分標題與內(nèi)容樣式,標題樣式使用更重的值。

  • 導航控制欄的文本使用相同的字號,而內(nèi)容文本的樣式則使用大尺寸的設置(值為17點)。
  • 文本總是使用常規(guī)或者中重,一般不適用輕或者加粗。 通常情況下,應用中整體應該使用單一字體。多種字體的混雜會使你的應用看上去支離破碎和草率。相反,使用一種字體和少數(shù)樣式。根據(jù)語義用途,使用 UIFont 類的 API 來定義不同文本區(qū)域的樣式,比如正文或者標題。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/38.jpg" alt="" />