顏色和排版
顏色增強溝通
在iOS中蜀铲,顏色幫助指明交互、給予活力铝量、并提供視覺連貫性。內置的app使用了一系列無論從個體上還是整體上看银亲,或者明亮和陰暗的背景下看都很棒的純凈的顏色慢叨。
如果你創(chuàng)造了多種自定義顏色,確保他們整體效果良好务蝠。比如說拍谐,如果蠟筆在你的app風格中是必須的,你需要創(chuàng)造一系列協(xié)調的蠟筆色貫穿你的app。
關注顏色在不同環(huán)境中的對比轩拨。比如說践瓷,如果導航欄背景和欄上的按鈕標題沒有對比度,用戶就很難看到這些按鈕亡蓉。一個快速但不科學的檢驗你的顏色是否有足夠的對比度的方法是:在一個不同亮度下的設備上查看你的app晕翠,包括太陽天的戶外環(huán)境。
即使在設備上查看你的app可以幫助你找到一些你需要調整的區(qū)域砍濒,這仍然取代不了更加客觀地得出可靠結果的方式淋肾。這種方法包括測定前景和背景顏色亮度的比值。你可以使用在線對比比值計算器或者自己使用符合WCAG 2.0標準的公式來計算去獲取這個比值爸邢。app中理想的顏色對比值為4.5:1或更高樊卓。
當你使用自定義的欄色調時考慮半透明的欄和app內容。如果你需要創(chuàng)造一個匹配特殊顏色的欄色調杠河,比如一個商標中的顏色碌尔,你也許需要嘗試很多種顏色才能得到想要的結果。一個欄的外觀會被iOS提供的半透明效果和app中在欄后方出現(xiàn)的內容共同影響券敌。
API NOTE
使用tintColor屬性來設置欄上按鈕標題的色調七扰;使用barTintColor屬性來設置欄本身的色調。查看UINavigationBar Class Reference陪白,UITabBar Class Reference颈走,UIToolbar Class Reference,和UISearchBar Class Reference來學習更多關于欄的屬性咱士。
注意色盲立由。大部分色盲患者難以區(qū)分紅色和綠色。測試你的app確保沒有任何地方使用紅色和綠色作為唯一區(qū)分兩種狀態(tài)和值的方式(一些圖片編輯軟件有工具可以幫助你校驗色盲)序厉。一般來說锐膜,使用多種方式來顯示一個元素的交互是好的方法(查看Interactive Elements Invite Touch學習在iOS中顯示交互的內容)。
考慮選擇一個主顏色來顯示交互和狀態(tài)弛房。內置的app中的主顏色有備忘錄中的黃色和日歷中的紅色道盏。如果你確定一個主顏色去顯示交互和狀態(tài),確保app中的其他顏色不與其競爭文捶。
避免對可交互和不可交互的元素使用相同的顏色荷逞。顏色是UI元素表示其是否可交互的一種方式。如果可交互和不可交互的元素有了相同的顏色粹排,用戶很難知道點擊那里种远。
顏色會溝通,但并不總是你想要的方式顽耳。每個人看待顏色都不一樣坠敷,很多文化也對顏色的意義有不同的定義妙同。花時間去研究你使用的顏色在其他的國家和文化中會被怎樣感知膝迎。你會想要盡可能地確保你app中的顏色傳達合適的信息粥帚。
大部分情況下,不要讓顏色使用戶分心限次。除非顏色是你app的必要目的芒涡,否則讓顏色成為一種微妙的優(yōu)化方式。
好的排版使溝通更清晰
蘋果設計了San Francisco系列排版來提供一種貫穿全平臺的漂亮的掂恕、一致的聲音和閱讀體驗拖陆,在iOS 9 之后,San Francisco變成了系統(tǒng)字體懊亡。
San Francisco與動態(tài)排版(Dynamic Type)攜手工作來給你:
在所有用戶設置中一系列的自動字體尺寸依啰,包括無障礙設置中提供了最高的識別率的和很好的的閱讀體驗
每一種字體尺寸都自動調節(jié)字母間距(字距)和行高
能夠為語義不同的文本塊指定不同的文本風格,比如正文店枣、注腳和標題
對用戶做出的文字大小設置進行合適的響應變化(包括無障礙的文字尺寸)
訪問https://developer.apple.com/fonts/下載San Francisco速警。(注意iOS 9 中San Francisco字體叫SF-UI)當你在你的app中采用San Francisco時,你可以在模擬器 > 設置中調整數(shù)值來測試你的app文本在不同尺寸下的表現(xiàn)鸯两。
NOTE
如果你使用自定義的字體闷旧,仍然可以根據(jù)系統(tǒng)設置中的的文本尺寸調整動態(tài)排版和比例類型。你的app要對用戶改變設置時做出適當?shù)捻憫啤2榭碩ext Styles來學習如何使用文本類型在用戶改變文本尺寸設置時確保app得到通知忙灼。
San Francisco包括兩種視覺尺寸:Text和Display。Text用于低于20點的尺寸钝侠,Display用于高于20點的尺寸该园。當你在你的app中使用San Francisco時,iOS會自動地在Text和Display中切換帅韧。
NOTE
如果你使用類似Sketch或Photoshop的應用來創(chuàng)建你的設計里初,你需要在設置20點以上的類型時切換到Display。iOS會自動地為San Francisco調整建立在字體尺寸上的跟蹤值(Tracking value)(跟蹤值用來修改某個點尺寸下的字母間距)忽舟。Text和Display中每個尺寸的跟蹤值分別顯示在表10-1和表10-2中双妨。
表10-1 在SF-UI Text中每個尺寸的跟蹤值
表10-2 Display中每個尺寸的跟蹤值
為了強調某些文本或者創(chuàng)造不同內容部分之間的視覺關系,你可以依靠動態(tài)排版支持的語義定義樣式叮阅,比如標題和正文刁品,或者指定字體寬度,比如纖細和半粗帘饶。采用動態(tài)排版風格可以簡單地傳達你內容的意義哑诊,但是如果你想要更多對設計的掌控,你也可以對某個特定的文本塊設置特定的寬度及刻。(查看UIFont Class Reference學習更多關于調整文本寬度的內容镀裤。)
比如說,你也許會想要增加某個文本的寬度來幫助用戶了解內容的層級或者吸引他們的注意力到某個特定的單詞或短語缴饭∈钊埃或者你想要增加小字體的寬度并減小大字體的寬度來創(chuàng)造一種多個靠近的文本的凝聚感。字體寬度對整體風格和內容表達也具有顯著的影響颗搂,所以你也許會選擇一個特殊的寬度來達到一種特殊的設計目標担猛。
當響應文本尺寸變化時區(qū)分優(yōu)先次序。不同內容對用戶的重要性是不同的丢氢。當用戶選擇一種更大的文本尺寸時傅联,他們是想要讓他們關心的內容更加易于閱讀;他們并不想讓屏幕上的每一個單詞都變得更大疚察。
比如說蒸走,當用戶選擇一個大的無障礙文本尺寸,郵件會將標題和文本用大的尺寸顯示貌嫡,但不會變化其他重要的文本——比如日期和收件人比驻。
確保自定義字體在每一種風格、不同的尺寸下都是清晰的岛抄。一種方法是對iOS在不同尺寸下顯示不同字體風格的方式進行模仿别惦。比如:
文本永遠不應該小于11點,即使用戶選擇了特小號的尺寸夫椭。相應的掸掸,正文風格使用17點作為默認的大尺寸。
一般來說蹭秋,在每種尺寸設置下扰付,字體尺寸和引導值相差一點。只有兩種標題風格例外感凤,它們在特小號悯周、小號和中號下使用相同的字體尺寸、引導值陪竿、跟蹤值禽翼。
在最小的三種文本尺寸下,跟蹤值會相對地大一些族跛;在最大的三種文本尺寸下闰挡,跟蹤值會相對地緊致一些。
標題和正文風格使用相同的字體尺寸礁哄。為了區(qū)分正文風格长酗,標題使用了更寬的寬度。
導航欄中的文本使用17點桐绒,與正文風格在大號下相同夺脾。
文本總是使用常規(guī)或中號寬度之拨;它不使用淺或粗體,因為淺和粗體在小號下看起來不好咧叭。
一般來說蚀乔,在你的app中使用單一的字體。混合多種不同的字體會使你的app看起來零散和稀松菲茬。相反的吉挣,要使用一種字體以及少量的風格和尺寸。
本文翻譯自蘋果官方開發(fā)文檔