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

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

更多設(shè)計史：

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

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

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

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

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

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

一、早期繪圖軟件中的默認背景

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

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

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

2. 1988 年-1990 年 Photoshop 1.0 提供默認背景

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

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

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

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

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

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

二、透明背景的作用

1. 數(shù)字化之前

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

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

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

拍照時，他很沮喪，因為靜物可能拍得很好，但天空卻曝光過度。

但如果他同一高度上拍攝了一張?zhí)炜盏恼掌敲雌渌磺卸紩毓獠蛔恪?/p>

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

2. 數(shù)字化時代

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

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

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

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

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

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

三、為什么是棋盤格圖案

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

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

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

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

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

2. 圖案的視覺功能性

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

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

四、棋盤格成為默認透明背景的幾個條件

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

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

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

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

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

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

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