亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁 > SEO動態(tài) > 網(wǎng)站技術(shù)超實用的產(chǎn)品配色指南三部曲:學會色彩管理

超實用的產(chǎn)品配色指南三部曲:學會色彩管理

超實用的產(chǎn)品配色指南三部曲:學會色彩管理

本系列文章共分為三個篇章:1.《學會色彩管理》2.《了解選色邏輯》3.《我的配色實踐》,筆者將通過三個篇章向大家介紹一些產(chǎn)品配色的基礎(chǔ)知識和方法,希望配色時我們有明確的思路和邏輯,幫助我們輸出更成熟的配色方案。正式聊產(chǎn)品配色之前,筆者深感有必要專門花一章先來說說"色彩管理"。工作中大家時常會發(fā)現(xiàn)設(shè)計稿與實際開發(fā)的界面色彩不一致,設(shè)計稿鮮亮動人,實際界面確色彩暗淡,效果差強人意。導致這個問題的原因便是沒有做好色彩管理,要想解決這個問題我們必須先來了解下色彩管理的基礎(chǔ)知識。

一、色彩空間與色域

色彩空間可以簡單理解為在人眼所能識別的色彩范圍內(nèi)劃定的某一區(qū)域,其目的是為了不同設(shè)備和介質(zhì)可以在統(tǒng)一的色彩區(qū)域內(nèi)顯示顏色。如設(shè)計師耳熟能詳?shù)? SRGB,它是惠普和微軟公司為顯示器和打印機顯示統(tǒng)一色彩而劃定的色彩區(qū)域,我們也稱之為 SRGB 色彩空間。色域更多是指這一色彩區(qū)域的范圍大小,如我們會經(jīng)常描述某一顯示器色域大小為 90%SRGB 或 100%SRGB,意思就是此顯示器可以顯示 SRGB 色彩空間中 90%或 100%的顏色。不同色彩空間覆蓋的色彩區(qū)域也存在著大小差異,如 Adobe SRGB 比 SRGB 覆蓋的區(qū)域大 35%左右,更大的色彩區(qū)域表示可以顯示更豐富的色彩。

當前常見的色彩空間有 NTSC、SRGB、Adobe RGB、DCI-P3 和 DISPlay P3,之所以會出現(xiàn)不同色彩空間是因為技術(shù)發(fā)展和行業(yè)需求變化的原因,以下會對這些色彩空間進行簡單介紹:

1. NTSC

上世紀 50 年代彩色電視技術(shù)在美國趨于成熟,為了制作標準的彩色電視節(jié)目,美國電視委員會制定了彩色電視廣播標準(NTSC),其中建立的色彩空間被稱為 NTCS 色彩空間。當前 NTSC 色彩空間已經(jīng)不再使用,更多出現(xiàn)在描述顯示設(shè)備的參數(shù)上,例如我們購買顯示器時經(jīng)常看到色域支持 72%NTSC 這樣的描述。

超實用的產(chǎn)品配色指南三部曲:學會色彩管理

2. SRGB

SRGB 色彩空間是 1996 年惠普和微軟開發(fā)完成的,其目的是為了建立一種用于顯示器、打印機和互聯(lián)網(wǎng)的通用色彩空間,也是當前主流使用的色彩空間,如 windows 系統(tǒng)默認使用 SRGB,瀏覽器上我們看到的所有圖片和色彩也都是基于 SRGB 渲染的。

超實用的產(chǎn)品配色指南三部曲:學會色彩管理

3. Adobe RGB

SRGB 是顯示器、打印機和互聯(lián)網(wǎng)的通用色彩空間,但是在彩色印刷行業(yè)中,SRGB 覆蓋的色域范圍比較小,部份色彩在顯示設(shè)備中不能很好的顯示。所以 1998 年 Adobe 公司建立了 Adobe RGB 色彩空間,旨在使計算機顯示設(shè)備囊括更多的顏色滿足印刷行業(yè)的需求。

超實用的產(chǎn)品配色指南三部曲:學會色彩管理

4. DCI-P3 和 Display P3

DCI-P3 是 2005 年美國電影行業(yè)推出的一種色彩空間,是數(shù)字電影播放設(shè)備的色彩標準之一,它的色域面積比 SRGB 大了 25%。2015 年蘋果公司推出了廣色域屏幕的 iMac 產(chǎn)品,使用了全新的色彩空間,并稱之為 Display P3,兩種 P3 色彩空間在色域大小上沒有區(qū)別,只是在一些調(diào)教參數(shù)上存在差異。

超實用的產(chǎn)品配色指南三部曲:學會色彩管理

二、理解色彩管理的邏輯

通過以上了解,我們可以嘗試回答開篇的問題,為什么會出現(xiàn)實際界面與設(shè)計稿色彩不一致的情況?簡單來說就是界面顯示設(shè)備與設(shè)計稿顯示設(shè)備色彩管理不一致導致的。如我們使用蘋果電腦制作設(shè)計稿,其默認使用的色彩空間是 Display P3,而實際界面的顯示設(shè)備支持的色彩空間是 SRGB,因為 Display P3 的色域范圍遠大于 SRGB,這就導致部分顏色無法在 SRGB 的設(shè)備上正常顯示,所以我們看到的界面和設(shè)計稿是存在差異的。以上我們可以發(fā)現(xiàn)正確的色彩管理不關(guān)乎使用哪種色彩空間,而是整個色彩管理鏈路是否統(tǒng)一?上述例子,如果實際顯示設(shè)備支持的是 Display P3 色彩空間,那么你將看到和設(shè)計稿完全一致的色彩。

要做到整個色彩管理鏈路統(tǒng)一,我們需要清楚了解所有環(huán)節(jié),以下將通過圖示進行說明:

超實用的產(chǎn)品配色指南三部曲:學會色彩管理

  1. 輸出屏幕:了解輸出屏幕支持什么樣的色彩空間,如蘋果的顯示屏幕可以覆蓋到 100%Display P3,其他顯示設(shè)備在購買時也會有相關(guān)參數(shù)描述。
  2. 系統(tǒng)設(shè)置:不同系統(tǒng)默認色彩空間可能不同,如 MacOS 默認 Display P3,Windows 默認 SRGB。系統(tǒng)色彩空間也支持不同配置,例如可以將 MacOS 的色彩空間更改為 SRGB。
  3. 制圖軟件:所有制圖軟件均可選擇不同色彩空間進行工作,不同之處在于系統(tǒng)設(shè)置針對整個系統(tǒng),制圖軟件只針對制圖顯示。
  4. 終端屏幕:明確終端屏幕支持什么樣的色彩空間,因為最終的設(shè)計稿是在終端屏幕上呈現(xiàn)的。

色彩管理鏈路是否統(tǒng)一,即以上環(huán)節(jié)是否使用了統(tǒng)一的色彩空間?而選擇什么樣的色彩空間需根據(jù)終端顯示設(shè)備決定。筆者調(diào)研了不同顯示設(shè)備色彩空間的支持情況,顯示器行業(yè)的情況較為復雜,不同廠商不同產(chǎn)品線的支持不盡相同,有 72%NTSC、99%SRGB、90%DCI_P3 等等。安卓陣營情況較好,大部分中高端產(chǎn)品可以支持 100%DCI-P3,部分低端產(chǎn)品支持 72%NTSC 或 100%SRGB。蘋果陣營由于自身產(chǎn)品的優(yōu)勢,自 2016 年全線產(chǎn)品開始支持 100%Display P3。

面對這復雜的情況,我們應(yīng)該選取什么色彩空間呢?筆者根據(jù)實際顯示場景給到以下建議:

超實用的產(chǎn)品配色指南三部曲:學會色彩管理

1. 瀏覽器

如果你的設(shè)計最終在瀏覽器上顯示(如網(wǎng)頁設(shè)計),那么可以選擇 SRGB,上文有提到 SRGB 作為互聯(lián)網(wǎng)通用的色彩空間,瀏覽器上的所有色彩都是基于 SRGB 渲染的。

2.Windows

如果你的設(shè)計最終在 Windows 上顯示,也可以選擇 SRGB 作為工作色彩空間,因為 Windows 默認的色彩空間是 SRGB。

3.安卓設(shè)備

安卓設(shè)備的色域支持情況略顯復雜,為了覆蓋到不同設(shè)備,建議使用 SRGB 作為工作色彩空間。

4.蘋果設(shè)備

蘋果設(shè)備均支持 100%Display P3,如果你是在為 IOS 和 MacOS 做設(shè)計,那么直接選擇 Display P3 即可。

需要注意的是設(shè)計項目經(jīng)常會覆蓋多端,為了各端顯示統(tǒng)一的色彩,色彩空間的選擇可向下兼容。

三. 如何進行軟件設(shè)置

1. Sketch

Sketch 為我們提供了兩種色彩管理方式:

①全局預設(shè):

可在 Sketch 的 Preferences 中找到 Canvas 選項,然后在 Color Profile 中選擇要使用的色彩空間,設(shè)置后我們新建的所有文件都將采用新的色彩空間。

超實用的產(chǎn)品配色指南三部曲:學會色彩管理

②文件設(shè)置:

可在 Sketch 的 File 菜單中找到 Document Setting 選項,點擊后在 Color Profile 中選擇要使用的色彩空間,該設(shè)置只影響當前文件。

超實用的產(chǎn)品配色指南三部曲:學會色彩管理

需要注意的是當我們打開 Color Profile 下拉框后,除 SRGB 和 Display P3 選項外,還有一個叫做 Unmanaged 的選項,翻譯過來的意思是無托管,選擇該選項即為使用系統(tǒng)色彩管理方案。如需要將工作色彩空間調(diào)整為 SRGB,我們可以直接在 Color Profile 下拉框中選擇 SRGB,也可以選擇 Unmanaged,然后將系統(tǒng)色彩管理方案設(shè)置為 SRGB 即可。

2. Figma

Figma 的 Color Profile 提供了 Unmanaged 和 SRGB 兩種選項,即只能使用系統(tǒng)色彩管理方案和 SRGB 色彩空間,且僅支持在客戶端版本中進行選擇。瀏覽器版本不支持色彩管理,默認使用 SRGB 色彩空間,原因上文已提及到瀏覽器上的色彩是基于 SRGB 進行渲染的。

超實用的產(chǎn)品配色指南三部曲:學會色彩管理

3. Photoshop

當我們在 Photoshop 中新建文件時可看到"高級選項"下的"色彩配置文件",點擊此處可選擇想要使用的色彩空間。除此之外還可以在"編輯"菜單中的"色彩設(shè)置"選項中找到"工作空間"模塊,在"RGB"選項中選擇需要使用的色彩空間,該設(shè)置作為一種常用的工作空間存在。完成設(shè)置后我們便可以在新建文件時,選擇"工作中的色彩空間"進行使用。

超實用的產(chǎn)品配色指南三部曲:學會色彩管理

超實用的產(chǎn)品配色指南三部曲:學會色彩管理

4. After Effects

在 AE 中我們可以在"文件"菜單下找到"項目設(shè)置",點擊后在"顏色"菜單下找到"工作空間"選項,此處可設(shè)置想要使用的顏色空間。

超實用的產(chǎn)品配色指南三部曲:學會色彩管理

最后色彩管理屬于比較復雜的知識模塊,本篇文章介紹的并不全面,只是將和我們工作相關(guān)的部份進行了梳理。希望這篇文章可以幫助大家明白色彩管理背后的邏輯,學會正確的色彩管理。

作者:穌穌穌穌

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)

本文來源:http://www.sonygallery.com.cn/seodongtai/19519.html

免責聲明:部分文章信息來源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負責對文章進行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點或證實其內(nèi)容的真實性,不承擔任何法律責任。