iOS11人機交互指南-視覺-04:顏色 Color

顏色

顏色可以提示交互渡嚣,賦予活力肥印,并提供視覺的連續(xù)性绝葡,明確狀態(tài)信息,增強數(shù)據(jù)可視化藏畅。系統(tǒng)的配色方案可以作為應(yīng)用參考,無論在淺色或者深色的背景中绞蹦,這些顏色都很明快并易于組合使用。

Color

巧妙使用顏色

重要信息的用色應(yīng)謹(jǐn)慎選擇幽七,要凸顯其重要性溅呢。例如,當(dāng)紅色被用作表示非關(guān)鍵信息時咐旧,用紅色三角形告知用戶有一個關(guān)鍵問題就不太有效。


用色要協(xié)調(diào)

使用協(xié)調(diào)的顏色來提升使用體驗室埋,而不是讓用戶特別集中注意力或分散注意力。如果使用粉色作為應(yīng)用主色調(diào)踏兜,其它用色應(yīng)與粉色協(xié)調(diào)。


使用與 Logo 協(xié)調(diào)顏色

色彩的微妙使用是強化品牌的好方法碱妆。


確定產(chǎn)品主色,貫穿應(yīng)用始終

在筆記中上忍,交互元素為黃色纳本;在日歷中窍蓝,交互元素是紅色繁成。在確定產(chǎn)品主色后,請確保其他用色與之協(xié)調(diào)巾腕。


避免交互式和非交互式元素用色相同

如果互動和非互動元素用色相同絮蒿,用戶很難得知哪里可以點擊叁鉴。

啟用和禁用元素


插圖和半透明度會影響附近顏色

插圖的改變,有時會讓附近顏色發(fā)生變化幌墓,保持視覺上的連續(xù)性,防止界面元素太過搶眼或無法辨別蜡饵。例如胳施,地圖的道路顏色在使用地圖模式時使用淺色,但在衛(wèi)星模式下會切換到深色方案巾乳。前面有半透明元素(例如工具欄)時鸟召,顏色也可能會發(fā)生變化。

在各種照明條件下測試配色方案

根據(jù)室內(nèi)氛圍欧募、時間、天氣等情況种冬,室內(nèi)外照明都有很大差異。應(yīng)用在現(xiàn)實使用中娱两,設(shè)計時的顏色并不總是看起來一致金吗。在多個照明條件下預(yù)覽應(yīng)用,包括在陽光明媚的室外環(huán)境下摇庙,如有必要了解顏色顯示方式旱物,調(diào)整顏色卫袒,以便在大多數(shù)環(huán)境中提供最佳的觀看體驗。


考慮 True Tone Display 顯示技術(shù)對顏色的調(diào)整

True Tone Display 顯示技術(shù)能根據(jù)周圍環(huán)境色溫夕凝,智能調(diào)整屏幕顯示效果户秤。專注于閱讀讽营、照片、視頻和游戲的應(yīng)用可以通過適應(yīng)風(fēng)格來加強或削弱這種效果橱鹏。


考慮色盲

盲人難以區(qū)分紅色和綠色(含灰度顏色),或者從橙色區(qū)分出藍(lán)色挑围。避免使用這些顏色組合作為區(qū)分兩種狀態(tài)的唯一方法糖荒。可以使用紅色方塊和綠色圓圈捶朵,而不是使用紅色和綠色圓圈來表示離線和在線。一些圖像編輯軟件包含檢測色盲是否試用工具综看。

左圖為色彩正常用戶所見,右圖為紅綠色盲所見

考慮顏色在不同文化中的引申意

在某些文化中舞吭,紅色有危險的含義析珊;而在另一些文化怯怯相反。確保應(yīng)用中的用色傳達(dá)了正確的含義忠寻。


使用足夠的對比度

應(yīng)用中的色彩對比度不足會使內(nèi)容難以閱讀。例如奕剃,圖標(biāo)和文字可能與背景相融。在線色彩對比計算器可以準(zhǔn)確分析應(yīng)用中的顏色對比度情況芜茵,確保符合最佳標(biāo)準(zhǔn):7:1 為最優(yōu)倡蝙,4.5:1 為最低要求。


顏色管理

圖片應(yīng)包含顏色配置文件

iOS 上的默認(rèn)色彩空間是標(biāo)準(zhǔn) sRGB。要確保顏色與此顏色空間正確匹配品山,請確保圖片包含嵌入的顏色配置文件。


使用 P3 色彩空間增強廣色域屏幕體驗

iOS 設(shè)備的廣色域屏幕支持 Display P3 色彩空間肘交,顏色比 sRGB 更豐富扑馁,更飽滿。因此使用 P3 色彩空間的照片和視頻更加逼真腻要,視覺數(shù)據(jù)和狀態(tài)指示更具沖擊力。適當(dāng)時雄家,使用 P3 顏色配置文件(每通道16位),并以 .png 格式導(dǎo)出圖像乱投。請注意顷编,需要支持 P3 顏色配置文件的顯示器才能設(shè)計相匹配的顏色。


為特定圖片提供雙色彩標(biāo)準(zhǔn)

一般來說勾效,P3 顏色空間和圖片傾向于在 sRGB 設(shè)備中使用叛甫,有時很難區(qū)分其中的差異。但 P3 顏色的漸變效果在 sRGB 上會出現(xiàn)色帶其监。為了避免這些問題,可以在 Xcode 的資源目錄中提供不同色彩標(biāo)準(zhǔn)的圖像毁菱,確保色彩還原度。


在 sRGB 和? P3 屏幕上都預(yù)覽顏色

根據(jù)需要進(jìn)行調(diào)整贮庞,以確保在兩種類型的屏幕上同時預(yù)覽視覺效果究西。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市遮斥,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌术吗,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件隧魄,死亡現(xiàn)場離奇詭異吝镣,居然都是意外死亡,警方通過查閱死者的電腦和手機末贾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來辉川,“玉大人拴测,你說我怎么就攤上這事乓旗〖鳎” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵妆距,是天一觀的道長函匕。 經(jīng)常有香客問我,道長盅惜,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任结啼,我火速辦了婚禮屈芜,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘糕珊。我一直安慰自己,他們只是感情好澜公,可當(dāng)我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布坟乾。 她就那樣靜靜地躺著蝶防,像睡著了一般。 火紅的嫁衣襯著肌膚如雪殷费。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天详羡,我揣著相機與錄音嘿悬,去河邊找鬼。 笑死善涨,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的蟹漓。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼姿锭!你這毒婦竟也來了伯铣?” 一聲冷哼從身側(cè)響起呻此,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤焚鲜,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后忿磅,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡葱她,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年吨些,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片豪墅。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖斩萌,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情术裸,我是刑警寧澤亭枷,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站叨粘,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏升敲。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一瘪撇、第九天 我趴在偏房一處隱蔽的房頂上張望港庄。 院中可真熱鬧,春花似錦鹏氧、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽安皱。三九已至,卻和暖如春练俐,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背燕锥。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工悯蝉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人鼻由。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像蔼紧,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子奸例,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容