[譯]《iOS Human Interface Guidelines》——Color and Typography

顏色和排版

顏色增強溝通

在iOS中蜀铲,顏色幫助指明交互、給予活力铝量、并提供視覺連貫性。內置的app使用了一系列無論從個體上還是整體上看银亲,或者明亮和陰暗的背景下看都很棒的純凈的顏色慢叨。

image

如果你創(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中每個尺寸的跟蹤值

image

表10-2 Display中每個尺寸的跟蹤值

image

為了強調某些文本或者創(chuàng)造不同內容部分之間的視覺關系,你可以依靠動態(tài)排版支持的語義定義樣式叮阅,比如標題和正文刁品,或者指定字體寬度,比如纖細和半粗帘饶。采用動態(tài)排版風格可以簡單地傳達你內容的意義哑诊,但是如果你想要更多對設計的掌控,你也可以對某個特定的文本塊設置特定的寬度及刻。(查看UIFont Class Reference學習更多關于調整文本寬度的內容镀裤。)

比如說,你也許會想要增加某個文本的寬度來幫助用戶了解內容的層級或者吸引他們的注意力到某個特定的單詞或短語缴饭∈钊埃或者你想要增加小字體的寬度并減小大字體的寬度來創(chuàng)造一種多個靠近的文本的凝聚感。字體寬度對整體風格和內容表達也具有顯著的影響颗搂,所以你也許會選擇一個特殊的寬度來達到一種特殊的設計目標担猛。

當響應文本尺寸變化時區(qū)分優(yōu)先次序。不同內容對用戶的重要性是不同的丢氢。當用戶選擇一種更大的文本尺寸時傅联,他們是想要讓他們關心的內容更加易于閱讀;他們并不想讓屏幕上的每一個單詞都變得更大疚察。

比如說蒸走,當用戶選擇一個大的無障礙文本尺寸,郵件會將標題和文本用大的尺寸顯示貌嫡,但不會變化其他重要的文本——比如日期和收件人比驻。

image

確保自定義字體在每一種風格、不同的尺寸下都是清晰的岛抄。一種方法是對iOS在不同尺寸下顯示不同字體風格的方式進行模仿别惦。比如:

  • 文本永遠不應該小于11點,即使用戶選擇了特小號的尺寸夫椭。相應的掸掸,正文風格使用17點作為默認的大尺寸。

  • 一般來說蹭秋,在每種尺寸設置下扰付,字體尺寸和引導值相差一點。只有兩種標題風格例外感凤,它們在特小號悯周、小號和中號下使用相同的字體尺寸、引導值陪竿、跟蹤值禽翼。

  • 在最小的三種文本尺寸下,跟蹤值會相對地大一些族跛;在最大的三種文本尺寸下闰挡,跟蹤值會相對地緊致一些。

  • 標題和正文風格使用相同的字體尺寸礁哄。為了區(qū)分正文風格长酗,標題使用了更寬的寬度。

  • 導航欄中的文本使用17點桐绒,與正文風格在大號下相同夺脾。

  • 文本總是使用常規(guī)或中號寬度之拨;它不使用淺或粗體,因為淺和粗體在小號下看起來不好咧叭。

一般來說蚀乔,在你的app中使用單一的字體。混合多種不同的字體會使你的app看起來零散和稀松菲茬。相反的吉挣,要使用一種字體以及少量的風格和尺寸。

image

本文翻譯自蘋果官方開發(fā)文檔

查看完整合集


查看作者首頁

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末婉弹,一起剝皮案震驚了整個濱河市睬魂,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌镀赌,老刑警劉巖氯哮,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異佩脊,居然都是意外死亡蛙粘,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進店門威彰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來出牧,“玉大人,你說我怎么就攤上這事歇盼√蚝郏” “怎么了?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵豹缀,是天一觀的道長伯复。 經常有香客問我,道長邢笙,這世上最難降的妖魔是什么啸如? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮氮惯,結果婚禮上叮雳,老公的妹妹穿的比我還像新娘。我一直安慰自己妇汗,他們只是感情好帘不,可當我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著杨箭,像睡著了一般寞焙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天捣郊,我揣著相機與錄音辽狈,去河邊找鬼。 笑死模她,一個胖子當著我的面吹牛稻艰,可吹牛的內容都是我干的懂牧。 我是一名探鬼主播侈净,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼僧凤!你這毒婦竟也來了畜侦?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤躯保,失蹤者是張志新(化名)和其女友劉穎旋膳,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體途事,經...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡验懊,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了尸变。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片义图。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖召烂,靈堂內的尸體忽然破棺而出碱工,到底是詐尸還是另有隱情,我是刑警寧澤奏夫,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布怕篷,位于F島的核電站,受9級特大地震影響酗昼,放射性物質發(fā)生泄漏廊谓。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一麻削、第九天 我趴在偏房一處隱蔽的房頂上張望蒸痹。 院中可真熱鬧,春花似錦碟婆、人聲如沸电抚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蝙叛。三九已至,卻和暖如春公给,著一層夾襖步出監(jiān)牢的瞬間借帘,已是汗流浹背蜘渣。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留肺然,地道東北人蔫缸。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像际起,于是被迫代替她去往敵國和親拾碌。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,781評論 2 361

推薦閱讀更多精彩內容