原文引自 Ben Maclaren 的文章《Where does the checkerboard transparency grid come from》，該譯文并非完整譯文，內(nèi)容已做刪減和調(diào)整。

在本篇文章中，我們會(huì)了解到棋盤網(wǎng)格圖案成為繪圖軟件默認(rèn)背景的原因和發(fā)展。

更多設(shè)計(jì)史：

我們經(jīng)常在下載 SVG、PNG 格式圖像，或在打開空白 Photoshop、Figma 編輯器時(shí)看到過(guò)這兩張圖。

大家都知道這是一個(gè)像棋盤的東西。其實(shí)在 Photoshop 和 Figma 中，它有一個(gè)特定的名字，叫做透明網(wǎng)格。

那「透明網(wǎng)格」一詞從何而來(lái)呢？

通過(guò) Google 搜索，可以看到 1960 年 - 2000 年期間出現(xiàn)了這個(gè)名字。

1960 年 - 1980 年之間有大量 NASA 噴氣推進(jìn)實(shí)驗(yàn)室的參考資料中提及到「透明網(wǎng)格」，不過(guò)大多數(shù)是說(shuō)使用透明網(wǎng)格來(lái)提高太陽(yáng)能電池效率的研究。

很酷，但這并不是我們文中要尋找的「透明網(wǎng)格」。文中提到的「透明網(wǎng)格」應(yīng)從早期的繪圖軟件開始溯源。

一、早期繪圖軟件中的默認(rèn)背景

1. 1985 年-1989 年 DeluxePaint 圖形程序

1985 年由 Electronic Arts 開發(fā)了一款圖形程序 DeluxePaint，當(dāng)時(shí)畫布透明度僅顯示為背景色。（這里希望告訴大家 Photoshop 并不是第一款繪圖軟件）

DeluxePaint 的使用手冊(cè)提到：畫筆中與當(dāng)前背景顏色相匹配的任何顏色都可以是透明的。

2. 1988 年-1990 年 Photoshop 1.0 提供默認(rèn)背景

在 Photoshop 1 中，背景和蒙版圖案都不同。

可以看出，當(dāng)時(shí)已經(jīng)有一個(gè)類似棋盤格的圖案作為默認(rèn)背景，但也可以將默認(rèn)背景更改為純色或自定義圖案。

3. 1995 年 Photoshop 3.0 正式出現(xiàn)「棋盤透明網(wǎng)格」背景

在 Bill Harrel 1995 年的《Using Photoshop 3 for Mac》中首次提到了文中所指的透明度網(wǎng)格。他們指出：

“形狀周圍的區(qū)域可能不包含任何信息，并且看起來(lái)是透明的。除非有用于判斷透明的指標(biāo)，否則無(wú)法立即辨別透明視圖和不透明視圖之間的差異 。因此，我們需要透明網(wǎng)格。”

在定義了「透明網(wǎng)格」可判斷圖像是否透明后，在 Photoshop 3.0 中，開始出現(xiàn)圖層的概念。

二、透明背景的作用

1. 數(shù)字化之前

從繪圖軟件中的迭代中，可以證明透明網(wǎng)格的主要作用是區(qū)分「透明」和「不透明」，從而衍生出「圖層」的概念。

對(duì)于數(shù)字化來(lái)說(shuō)，分圖層并不是什么新鮮事。那數(shù)字化之前設(shè)計(jì)師們是怎么做到「分層」呢？

古斯塔夫·勒格雷 (Gustave Le Gray) 因其攝影的層次感而聞名。

拍照時(shí)，他很沮喪，因?yàn)殪o物可能拍得很好，但天空卻曝光過(guò)度。

但如果他同一高度上拍攝了一張?zhí)炜盏恼掌敲雌渌磺卸紩?huì)曝光不足。

為了解決這個(gè)問題，他發(fā)明了分層和組合印刷的工藝。他會(huì)結(jié)合兩張圖像，一張是美麗的天空，另一張是美麗的大海，通過(guò)讓兩張圖重合來(lái)創(chuàng)建一個(gè)平衡完美的照片。

2. 數(shù)字化時(shí)代

隨著圖形軟件的出現(xiàn)和快速的迭代，軟件編輯器中出現(xiàn)了越來(lái)越復(fù)雜的圖層構(gòu)成需求，繪畫設(shè)計(jì)工作也變成需要配合電腦代碼完成。

最初，軟件中畫布背景是一個(gè)默認(rèn)的純色、或自定義圖案。彩色畫筆疊加上去后設(shè)計(jì)師可自行改變顏色的透明度，但這樣的做法，沒有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)值去判斷該顏色的透明度是 10% 還是 80%。

我們需要一個(gè)默認(rèn)「透明」背景的設(shè)計(jì)模式，而且背景是需要在視覺上可識(shí)別的圖層，這樣才能保證大家在一個(gè)公平的畫布上創(chuàng)作。

這也就是在前面提到的 Photoshop 3.0 時(shí)，出現(xiàn)了透明網(wǎng)格背景作為默認(rèn)背景。

后來(lái)有了 Alpha 通道*（注釋 1），在參數(shù)上也實(shí)現(xiàn)了透明度的統(tǒng)一計(jì)算。

注釋 1 Alpha 通道是計(jì)算機(jī)圖形學(xué)中的術(shù)語(yǔ)，指的是特別的通道，意思是“非彩色”通道，主要是用來(lái)保存選區(qū)和編輯選區(qū)。

三、為什么是棋盤格圖案

1. 歷史意義以及多元化的應(yīng)用

方格圖案的來(lái)源已不可考，有猜測(cè)說(shuō)這一圖案是來(lái)源于古波斯地區(qū)。原因是在波斯地區(qū)曾經(jīng)出土過(guò)許多帶有棋盤格圖案的器具，并且也有建筑物墻壁以此圖案為裝飾。

幾個(gè)世紀(jì)前方格圖案作為經(jīng)典的平面圖案，應(yīng)用在了國(guó)際象棋的棋盤。后來(lái)在賽車比賽中，黑白方格旗代表著到達(dá)終點(diǎn)線或者比賽結(jié)束，是賽車運(yùn)動(dòng)中很具代表性的象征標(biāo)志。音樂領(lǐng)域中，棋盤格還代表牙買加的 Ska 音樂，寓意打破黑人和白人之間的種族隔閡。克羅地亞國(guó)徽中的紅白相間棋盤圖是克國(guó)的國(guó)家象征，也被稱為克羅地亞棋盤圖。美國(guó) DC 漫畫在 20 世紀(jì) 60 年代的漫畫書上沿統(tǒng)一采用棋盤圖案，起到醒目作用。

有這么多元又深厚的文化溯源加身，讓看似普通的棋盤格不僅僅只是一種圖案，它承載了更多的內(nèi)涵。規(guī)則與制度、速度與激情、種族和包容。

超現(xiàn)實(shí)主義電影的開創(chuàng)者曼雷曾說(shuō)過(guò)：“棋盤是一切藝術(shù)的基礎(chǔ)，它幫助你去理解結(jié)構(gòu)，去掌握一種秩序感。”

2. 圖案的視覺功能性

棋盤格圖樣式簡(jiǎn)單易擴(kuò)展，從白色到黑色的強(qiáng)對(duì)比度提供了最大的差異感知，具有強(qiáng)烈的邊界感。黑白格矩形平鋪后，有天然的空間劃分作用。作為背景圖案，容易辨認(rèn)。

棋盤圖案也經(jīng)常用于相機(jī)多平面校準(zhǔn)。

四、棋盤格成為默認(rèn)透明背景的幾個(gè)條件

綜上所述，作者 Ben 最后總結(jié)，棋盤格成為現(xiàn)代圖像中默認(rèn)透明背景滿足了這 2 個(gè)條件。

1. 有較高的通用性，包容性。

格子圖案是世界通用的。它不需要色彩點(diǎn)綴并可以無(wú)限擴(kuò)展。圖案經(jīng)典且中立，不傾向任何文化和宗教。

2. 獨(dú)特的圖案易于辨識(shí)，當(dāng)用作默認(rèn)背景時(shí)，可以和畫面內(nèi)容拉開差距。

近幾年，注意到 Figma 和 Photoshop 中的格子圖案使用的是灰色和深灰色。降低格子的對(duì)比度可以減弱視覺沖擊感，使背景更加柔和整體，不會(huì)與畫布中的前景等其他元素產(chǎn)生強(qiáng)烈對(duì)比。

以上便是作者 Ben Maclaren 對(duì)棋盤透明網(wǎng)格的探索過(guò)程。

歡迎關(guān)注作者微信公眾號(hào)：「We-Design」