鍍金池/ 教程/ iOS/ 色彩和排版
內(nèi)容視圖
控件
iCloud
導(dǎo)航
網(wǎng)頁剪藏圖標(biāo)
動畫
鍵盤和輸入頁面
設(shè)計策略
臨時視圖
撤銷與重做
交互與反饋
與 iOS 一體化
從概念到產(chǎn)品
品牌推廣
電子錢包
社交媒體
游戲中心
創(chuàng)建尺寸可調(diào)的圖片
案例學(xué)習(xí):從桌面到 iOS
多任務(wù)處理
蘋果支付
色彩和排版
報刊雜志圖標(biāo)
iOS 應(yīng)用解析
啟動和終止
聲音
快速查看
適應(yīng)性和布局
編輯菜單
健康組件
語音輔助
iAd 富媒體廣告
為 iOS 而設(shè)計
標(biāo)志與圖形
應(yīng)用圖標(biāo)
模態(tài)情景
圖標(biāo)與圖片尺寸
路線選擇
在應(yīng)用中購買
應(yīng)用拓展
啟動畫面
術(shù)語和措辭
通知
欄按鈕圖標(biāo)
訪問用戶數(shù)據(jù)
云打印

色彩和排版

色彩有助于增強通信

在 iOS 系統(tǒng)中,顏色用于表達互動性,傳遞活性,并提供視覺的連續(xù)性。內(nèi)置的應(yīng)用程序會使用那些看起來更有個性,純凈,干凈的顏色,無論單獨還是組合,還是在明或暗的背景下都看起來很不錯。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/color_family_a_2x.png" alt="" />

如果你想要創(chuàng)建多樣自定義顏色,要確保他們可以很好地搭配在一起。例如,如果你的應(yīng)用程序主色調(diào)偏柔和,那么就應(yīng)該建立一個協(xié)調(diào)的柔和色調(diào)的色板用于整個應(yīng)用程序。

注意在不同的環(huán)境下的顏色對比。例如,如果導(dǎo)航欄的背景和按鈕的標(biāo)題沒有足夠的對比度,用戶將很難看到按鈕。根據(jù)經(jīng)驗,若想要判斷應(yīng)用程序的的顏色是否有足夠的對比度,就是在不同的照明條件下用一個設(shè)備觀察應(yīng)用程序的視圖,包括在晴朗的戶外。

雖然在設(shè)備上查看你的應(yīng)用程序可以幫助你找到你需要工作的地區(qū),但是無法取代的一個更客觀的方法獲得的可靠結(jié)果。這種方法涉及確定前景和背景顏色亮度值之間的比率。為了得到這個比率,我們使用在線對比率計算器,或者你可以使用 WCAG 2 標(biāo)準(zhǔn)建立的公式自己計算。最理想的應(yīng)用程序顏色對比度為 4.5:1 或更高。

當(dāng)你使用自定義的欄顏色時,要著重考慮半透明的欄和應(yīng)用內(nèi)容。如果你需要創(chuàng)建一個色彩欄去匹配特的顏色,比如現(xiàn)有品牌的顏色,你可能不得不在得到你想要的結(jié)果前使用各種顏色進行試驗。條欄的外觀會受 iOS 系統(tǒng)提供的半透明和隱藏在欄后面的應(yīng)用程序的內(nèi)容顯示影響。

API 注釋 使用淺色(TintColor)的屬性值給予欄按鈕顏色,使用欄淺色(BarTintColor)的屬性值為欄本身賦色。欲了解更多關(guān)于欄屬性的內(nèi)容,可參見UINavigationBar Class Reference,UITabBar Class Reference,UIToolbar Class ReferenceUISearchBar Class Reference。

要注意顏色的盲區(qū)。大多數(shù)色盲的人很難區(qū)分紅色和綠色。需要測試你的應(yīng)用程序,以確保沒有用紅色和綠色來作為區(qū)分兩種狀態(tài)或值之間的唯一途徑的地方。一些圖像編輯軟件或工具,可以幫助你驗證顏色的盲區(qū)。在一般情況下,使用多種方式來表示原色的交互性是一個好方法(了解更多iOS系統(tǒng)中關(guān)于表征交互性的內(nèi)容,請看互動元素Interactive Elements Invite Touch)。

選擇一個基準(zhǔn)的顏色來表征交互性和狀態(tài)。在內(nèi)置的應(yīng)用程序的基準(zhǔn)色包括備忘錄中的黃色還有日歷中的紅色等。如果你定義了一個表明互動性和狀態(tài)的基準(zhǔn)色,要確保你的應(yīng)用程序中的其他顏色不會與其發(fā)生沖突。

避免在交互式和非交互式的元素中使用相同的顏色。顏色是一個 UI 元素顯示其交互性的方式。如果交互式和非交互式的元素具有相同的顏色,用戶會很難知道該點哪里。

色彩可以傳達信息,但不一定會以你期望的方式。每個人眼中的顏色都是不同的,不同的文化差異賦予顏色的意義也是不同的?;〞r間去研究使用何種顏色可以被其他國家或者文化接受。你要盡可能地確保你應(yīng)用程序中的顏色傳達了恰當(dāng)?shù)男畔ⅰ?/p>

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

文本應(yīng)該清晰易讀

首先,文本必須清晰可見。如果用戶不能讀取應(yīng)用程序的話,無論多么漂亮的排版也是沒有意義的。當(dāng)你的應(yīng)用程序采用動態(tài)類型時,你可以實現(xiàn):

  • 能自動調(diào)整文字的粗細、間距大小和行高。
  • 對語義不同的文本模塊指定不同的文本樣式,比如正文,腳注,或標(biāo)題
  • 文本可以根據(jù)用戶在動態(tài)文字和可訪問性設(shè)置中指定字體大小的變化作出適當(dāng)?shù)捻憫?yīng)。(包括輔助文本大?。?/li>

注意:如果你使用了自定義字體,你仍然可以通過系統(tǒng)提供的設(shè)置來調(diào)整大小。并且你的應(yīng)用還應(yīng)該在用戶調(diào)整設(shè)置時做出合適的響應(yīng)。

對你而言,采用動態(tài)類型需要做的一些工作。要學(xué)習(xí)如何使用文本樣式,并確保當(dāng)用戶更改文字大小的設(shè)置時,你的應(yīng)用程序可以獲取通知,可以參考文本樣式Text Styles。

文本尺寸的響應(yīng)式變化要優(yōu)先考慮文本內(nèi)容。對用戶來說,并不是所有的內(nèi)容都是同樣重要的。當(dāng)用戶選擇一個更大的字體大小時,他們是想要自己關(guān)心的內(nèi)容更容易閱讀;并不是想屏幕上的每一個字都變大。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/mail_message_axlarge_2x.png" alt="" />

例如,當(dāng)用戶選擇具備更大易用性的文本尺寸時,郵件通常會把主題和正文用較大的字體顯示出來,而一些不那么重要的文本,比如日期、收件人等則采用較小的字體顯示。

當(dāng)用戶選擇一個不同的文本大小時,要適當(dāng)?shù)卣{(diào)整布局。例如,當(dāng)用戶選擇一個較小的文本大小時,你可能要把正文從單欄式布局改成兩欄式布局。你可以選擇針對尺寸的子集來實現(xiàn)——如包含小,中和大尺寸——而不是對于每個可能的尺寸都進行布局的調(diào)整。

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

  • 即使當(dāng)用戶選擇特小號字號時,文本大小也不應(yīng)小于 11 點(points)。相比之下,正文使用大尺寸的 17 點(points)的字號大小作為默認的字體大小設(shè)置。

  • 一般情況下,字號與行距值在每一檔的文本尺寸設(shè)置中差別為 1 點。唯一例外的是兩種標(biāo)題的樣式,它們被應(yīng)用在極小、小和中尺寸的設(shè)置中,使用了相同的字號、行距和字距。

  • 在最小的三種字號中,字距值相對較大;在最大的三種字號中,字距相對比較緊湊。

  • 標(biāo)題與正文樣式應(yīng)使用相同的字體。為了和正文相區(qū)分,標(biāo)題應(yīng)使用更大的字號。

  • 導(dǎo)航控制欄的文本使用相同的字號,而內(nèi)容文本的樣式則使用大尺寸的設(shè)置(值為 17 點)。

  • 文字應(yīng)使用常規(guī)或中等重量;不應(yīng)使用輕的或加粗字體。

在一般情況下,整個應(yīng)用程序應(yīng)使用一種單一的字體。多種不同的字體混雜使用會使得應(yīng)用程序顯得草率而支離破碎。相反,使用一個字體和幾種樣式和尺寸。根據(jù)語義用法,使用使用界面字體的文本樣式 API 來定義不同區(qū)域的文本樣式,如正文或者標(biāo)題。

推薦版

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/font_choice_rec_2x.png" alt="" />

不推薦版

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/font_choice_not-rec_2x.png" alt="" />

上一篇:編輯菜單下一篇:術(shù)語和措辭