平面設計

蒙德里安風格的主角其實是白格,從黑線粗細、色塊比例到版面做法

多數人以為蒙德里安風格,就是把畫面用尺切成等寬的方格,再塗上飽和的紅、黃、藍。可是荷蘭畫家蒙德里安(Piet Mondrian)的畫裡,黑線有粗有細,格子大小各不相同,色塊多半只佔畫面的一小部分,大片的白格反而是主角。照「等寬方格加飽和三原色」的想像做出來的東西,看起來常常像報表,不太像他的畫。

這套風格耐看,是因為背後有一組很明確的限制:用什麼形狀、什麼顏色、什麼方向的線,都有範圍。理解這些限制從哪裡來、哪些地方可以變通,海報、網頁與包裝才借得到他的畫面邏輯,而不只是借到一個外型。而這組限制並不是一開始就有的,是他從風景畫一步步刪減出來的。

蒙德里安從荷蘭風景畫一路簡化到抽象

蒙德里安 1872 年出生在荷蘭的 Amersfoort,1892 年起在阿姆斯特丹的學院學畫。早年他畫的是荷蘭傳統路數的風景,跟後來的格線幾乎看不出關聯。這段訓練的意義在於,他後來走向抽象,是會畫具象之後刻意刪減的結果,不是從零開始的幾何遊戲。

1909 年,他加入通神學會(Theosophical Society)的荷蘭分會,之後的抽象作品也常被拿來和這套思想連結解讀。1911 年聖誕節前,39 歲的他搭火車離開荷蘭前往巴黎,留下未婚妻與穩定的畫家生涯,並把姓氏 Mondriaan 去掉一個 a,用改過的姓氏標記這個轉折。根據 Tate 的藝術家介紹,他在巴黎受到立體派影響,並把這套做法推向抽象。立體派把物體拆成幾何的面,他則一路拆到畫面裡不再有物體。

1914 年回到荷蘭後,他一步步發展出稱為新造型主義的簡化風格;1919 年再回巴黎,住到 1938 年,這將近二十年間,他持續修正的是同一套語言。1938 年他轉往倫敦,1940 年移居紐約,作品開始出現彩色線條與輕快的節奏,1944 年在紐約過世。這條時間線上,每一站都在畫面上留下一個明確的轉變,巴黎讓他刪掉物體,荷蘭讓規則成形,紐約則讓格線動了起來。

蒙德里安從荷蘭、巴黎、倫敦到紐約的落腳時間軸,標出刪掉物體、規則成形與格線動起來三個轉折
蒙德里安每換一個城市,畫面就往前刪減一步:巴黎刪掉物體,荷蘭讓規則成形,紐約讓格線動了起來。

想看原作,可以從海牙市立美術館開始。館方表示,館內收藏近 300 件蒙德里安作品,是全球最大的蒙德里安收藏,從早期風景到抽象作品都有;他最後未完成的《Victory Boogie Woogie》,則由荷蘭文化遺產局長期出借、在館內展出。《Broadway Boogie Woogie》收藏於紐約的現代美術館 MoMA,1937 至 1942 年間完成的《Composition with Yellow, Blue and Red》則在 Tate。

蒙德里安風格、新造型主義與風格派的分別

搜尋「蒙德里安風格」的人,腦中多半是黑線加色塊的畫面,但這個詞其實混了三件事:蒙德里安這個人、他自己命名的新造型主義,以及他參與後來又退出的風格派。三者的範圍不同,只有新造型主義是他定下的規則,風格派則是一個團體,分清楚之後,談畫面與設計用法時才不會把名詞混在一起。

新造型主義把畫面限制在直線、矩形與原色

新造型主義(荷文 de nieuwe beelding)大意是「新的造型藝術」,是蒙德里安替自己的抽象畫取的名字,後來也用來稱呼風格派圈子裡的作品。Tate 的詞彙表把它的規則收斂成三條:

  1. 顏色只用原色與非色,非色指的是白、黑、灰。
  2. 形狀只用正方形與長方形。
  3. 線條只用水平與垂直的直線。

蒙德里安在《De Stijl》雜誌連載的長文〈繪畫中的新造型主義〉(Neo-Plasticism in Pictorial Art)裡寫道,新的造型觀念要表現在抽象的形與色之中,也就是「直線與明確界定的原色」。這些規則是逐步刪減出來的。大都會博物館指出,這套幾何語言在 1915 至 1920 年間成形,1920 年他出版宣言《Le Néoplasticisme》,之後約 25 年,他持續用粗細不一的黑色垂直與水平線分割畫布,配上以藍、紅、黃為主的色塊。

至於為什麼偏偏是水平與垂直,巴黎聖羅蘭博物館的說明把這組對立連結到他的通神學觀點,視為神性原則的顯現。這是博物館的詮釋,對設計者來說,真正用得上的是這組規則帶來的結果,規則越窄,畫面越有辨識度。

風格派的成立與蒙德里安因斜線退出

風格派(De Stijl,荷文就是「風格」)原本是一份 1917 年創刊的雜誌,由蒙德里安與杜斯堡(Theo van Doesburg)創辦。雜誌成了蒙德里安發表理念的平台,根據 Tate 的說明,他也可能是在這份刊物上第一次使用「新造型主義」一詞。成員還有 Bart van der Leck、Georges Vantongerloo、Friedrich Vordemberge-Gildewart,以及建築師里特維德(Gerrit Rietveld)與奧德(J.J.P. Oud),所以風格派從一開始就橫跨繪畫、建築與設計。

1925 年前後,蒙德里安退出了這個團體。根據威尼斯的佩姬古根漢美術館與提森-博爾內米薩國家博物館的說明,起因是杜斯堡在作品裡重新採用了斜線。杜斯堡之後繼續把刊物辦到 1931 年。這次決裂對設計者很有參考價值,它說明水平與垂直對蒙德里安來說不只是偏好,而是不肯讓步的底線。也因此「蒙德里安風格」和「風格派」不能畫上等號,後者包含了他自己不同意的做法。

蒙德里安格線畫的 4 個畫面特徵

把蒙德里安的格線畫放大來看,真正讓畫面成立的有四件事:線有粗細、顏色有限、平衡靠面積與位置而不靠對稱,以及後期的紐約作品另走了一條路。每一件事都能直接轉成設計時的判斷。

以自製構圖標出蒙德里安格線畫的四個特徵:粗細不一的黑線、三原色加白黑灰、不對稱平衡與紐約時期的彩色線條
蒙德里安風格靠四件事成立:線有粗細、色彩有限且白格最大、不對稱的平衡,以及紐約時期把線打斷成小色塊。

粗細不一的黑線與不等分的格子

他的格線從來不是等距的網格。大都會博物館描述他的畫布是由粗細不一的黑色垂直與水平線分割而成;Tate 的策展人則指出,他並沒有用尺或公式去量,憑的是數十年累積的判斷。有些作品只有兩三條線,看似幾分鐘就能畫完,但每條線的位置都是反覆斟酌的結果。

畫面表面也沒有平塗的工業感。筆觸看得見,顏色是一層層調出來的混色,從來不是直接從顏料管擠出來。對設計來說,這代表等分的格子看起來會像表格,不像蒙德里安;想做出他的味道,線寬至少分成兩級,格子大小刻意錯開,位置用目測調整,而不是交給軟體的等分工具一刀切。

紅黃藍之外還有白、黑與灰

用色規則常被簡化成「三原色」,完整的說法是三原色加三個非色,也就是白、黑、灰。巴黎聖羅蘭博物館指出,他逐步把用色收斂到紅、藍、黃,再加上黑與灰,並把這些非色當成實色處理,放進以粗黑線圍出的方形或長方形裡。

白色尤其重要。在他的畫裡,白不是留空的背景,而是構成的一部分,大面積的白格撐住畫面,紅黃藍的面積通常小得多。另外,原作的紅黃藍同樣是調出來的混色,所以做設計時不必死守 RGB 的純紅、純藍、純黃,把飽和度略微降低,反而更貼近原作的質感。

以面積與位置換來不對稱的平衡

蒙德里安的畫常被說成「平衡」,但他刻意避開對稱。Tate 的策展人觀察到,他常把較大的色塊放在畫布的一側,畫面中央往往沒有太多東西。

1920 年,他和另一位畫家為一幅畫起了爭執。對方說畫面不平衡,黃色和紅色也不協調;蒙德里安回答,他們追求的是另一種和諧。策展人的解讀是,如果平衡只是一個元素抵消另一個元素,那就太容易了;他的做法是讓所有元素持續互相牽動。

放到設計上,意思是不靠左右對稱來求穩,而是讓大小、冷暖與位置互相牽制。例如大色塊偏向一側,就用遠處的小色塊或一條粗線把它拉住,畫面才會穩而不死。

紐約時期的彩色線條與小方塊

蒙德里安風格並不只有黑色粗格線,還有第二種面貌。Tate 指出,他 1940 年移居紐約後,開始發展更多彩的畫法,改用彩色線條,畫面帶著切分般的節奏。荷蘭藝術史研究所 RKD 引用他 1943 年 6 月的一封信,他在信裡寫道,自己把線打斷,讓它們看起來像小色塊,白色的平面也一併被打斷。

《Broadway Boogie Woogie》與《Victory Boogie Woogie》就是這種做法的成果,線被切成一格格小色塊。後者 1942 年動筆,到他 1944 年過世時仍留在畫室裡,沒有完成。他很愛跳舞,喜歡爵士與查爾斯頓舞,也把紐約晚期作品的活力稱為「boogie woogie」。

想做輕快、帶都會感與節奏的版面,可以參考這一路的做法,用拆成小色塊的線取代黑線加三色,讓視線在畫面裡跳動。

風格派的語言從畫布延伸到建築、家具與時裝

蒙德里安的畫面規則沒有停在畫布上。下面三個案例剛好橫跨三個設計面向,包括平面規則變成立體的建築與家具、變成印刷品的版面,以及變成布料的裁縫。

每個案例都示範了同一套語言被翻譯成不同材質時,哪個環節決定成敗。

里特維德的施洛德住宅與紅藍椅

施洛德住宅位於荷蘭的 Utrecht,由 Truus Schröder-Schräder 委託,里特維德設計,1924 年建成。聯合國教科文組織指出,這棟小型住宅連同室內、靈活的空間配置與視覺形式,是 1920 年代荷蘭風格派藝術家與建築師理念的宣言,2000 年列入世界遺產。縱橫分割加上有限的色彩,在這裡變成了牆面、樓板與空間的關係。

同一個圈子的家具代表,是里特維德的紅藍椅。根據 V&A 的館藏說明,這張椅子 1918 年設計時其實不是紅藍色,最初的版本只是染色的木頭,如今廣為人知的上色版本要到 1923 年才出現。這個細節提醒設計者,色彩是後加的語言層,結構與比例先成立,顏色才有地方可以落腳。

Huszár 的《De Stijl》雜誌封面設計

根據提森-博爾內米薩國家博物館的介紹,匈牙利裔畫家 Vilmos Huszár 也是 1917 年和杜斯堡一起創辦《De Stijl》雜誌的成員,並負責雜誌的封面設計;他在雜誌上發表的許多文章,同樣協助界定了新造型主義。1920 年代中期以後,他持續投入商業與工業的平面設計,一直做到第二次世界大戰爆發。

換句話說,平面與出版品從一開始就在風格派的範圍裡。把這套語言用在海報、網頁與包裝上,在歷史上是有根基的,並不是後人把一幅畫硬套到版面上。

聖羅蘭 1965 年的蒙德里安裙

把蒙德里安變成大眾圖像的關鍵事件,是 1965 年的一場時裝發表。巴黎聖羅蘭博物館指出,聖羅蘭(Yves Saint Laurent)在 1965 年 8 月 6 日發表秋冬高級訂製系列,靈感來自母親送他的聖誕禮物,也就是 Michel Seuphor 在 1956 年出版的蒙德里安專書。這個系列 106 件設計中,有 26 件呼應蒙德里安的作品,成品很快被大量仿製,在美國尤其明顯,也讓蒙德里安的名氣更加響亮。

值得學的是工法。為了讓純色塊的邊緣是乾淨的線,色塊是從衣服內側鑲嵌拼合,接縫從外面看不見。同樣是紅黃藍方塊,用印的和用拼的,邊緣的乾淨程度完全不同。這給設計者的啟示是,風格要成立,材質與工法得配合平面規則。

蒙德里安風格版面從切線開始,最後才填色

把規則轉成版面時,順序很重要:先切線,再決定哪幾格上色,最後才處理文字。顏色先上、線後補,通常會做出一張沒有重心的調色盤。

版面不必定死幾條線、幾個色塊,蒙德里安自己的作品就有些只有兩三條線、有些格子很密。用「少數幾格上色、一大兩小、其餘留白」這種相對的比例來判斷就夠了,「一大兩小」也只是其中一種配法。

蒙德里安風格版面四步驟:定外框比例、切黑線、少數格子上色分主次、文字放進白格並驗證對比
蒙德里安風格版面先定外框與黑線,再挑少數格子上色,最後把文字放進白格並量過對比(資料來源:W3C)。

外框比例與黑線數量先定案

先決定載體是方形、直式海報還是橫幅。蒙德里安的作品多為方形或接近方形,但海牙市立美術館也收藏一幅 1933 年的菱形畫布,白底上只有四條黃線。可見比例可以變,海報用直式、網頁橫幅用橫向,不必硬做成正方形。

接著決定黑線有幾條、哪幾條貫穿全幅、哪幾條停在中途。線寬兩級就夠,不必每一條都不同;位置用目測拉到看起來順的比例,別交給等分工具,因為等分正是前面說過會變成報表的原因。

少數格子上色並分出主次,白格不必填滿

挑少數幾格上色,其餘維持白色或淡灰。上色的格子要有大小差,讓其中一個成為視覺重心,其餘的小色塊負責牽制它;紅、黃、藍也不必三色都出現,只用兩種同樣成立。

白格是設計的一部分,並不是還沒做完的地方。如果覺得畫面太空,該調整的通常是色塊的位置與大小,而不是把白格填滿。

文字放進白格並先驗證對比

蒙德里安風格的版面常常需要放標題與內文。文字優先放進白格或淡色格,最穩的組合是白底深色字;一定要放進色塊時,先檢查對比。W3C 的 WCAG 2.2 規定,一般文字與背景的對比至少要 4.5:1,大字(約 18pt,或 14pt 以上的粗體)至少 3:1;logo 文字則沒有對比要求。

黃色底配白字通常過不了這個門檻,紅色與藍色的大色塊也要看實際色值才知道能不能放字,量過再定案比較安全。放在色塊裡的字最好做大,大字只要 3:1 就達標,比一般文字容易通過。

同一套規則在海報、網頁與包裝上的調整重點

同一套規則放到不同載體,要小心的地方不一樣。海報最怕沒有焦點,網頁最怕窄螢幕下格線散掉,包裝與周邊最怕分割線和物件的邊角對不上。

假設龐果設計要為一場小型展覽做宣傳,同一組格線就會先後出現在海報、網站和周邊上,每個載體都得重新判斷一次。

同一組蒙德里安風格格線放到海報、網頁與包裝上,分別要顧及視覺焦點、窄螢幕重排與分割線對齊邊角
同一組格線換到不同載體要重新判斷:海報留一個焦點色塊,網頁在窄螢幕重排成單欄,包裝讓黑線落在摺線與邊角上。

海報與封面以一個色塊當視覺焦點

海報只留一個最大的色塊當視覺焦點,標題擺進白格,其餘小色塊當輔助。以這場展覽的海報來說,可以在右下角放一大塊紅色,左上的白格放展覽名稱,再用一兩塊小的黃色與藍色把畫面拉住,視線就會先落在紅色,再順到標題。

字體方面,選幾何感強的無襯線體,或帶手寫感的幾何字,避免用襯線體或花俏的字體跟格線搶戲。最常見的問題,是小色塊和焦點色塊一樣大,視線就沒有落點了。

網頁介面用格線分區,用色塊導引視線

網頁是蒙德里安風格最容易落地的載體,卡片或區塊的邊框可以當黑線,少數區塊填上顏色當導引。實際製作時有三件事要注意:

  1. 窄螢幕下,格線要重新排成單欄,不能把整張格線等比縮小。
  2. 色塊上的文字要通過前面提到的對比門檻,不能為了好看犧牲可讀性。
  3. 按鈕與可點擊的區塊,要加上框線或文字提示,不能只靠顏色區分。

近年常見的 Bento Grid 版面同樣是格狀分區,但它強調圓角卡片與資訊密度,蒙德里安風格則是直角與有限的色塊,兩者不要混為一談。

包裝與周邊讓分割順著物件邊緣

包裝、杯子、帆布袋這類物件有自己的邊角與接縫,色塊與黑線要順著這些邊緣走,才不會看起來像貼上去的貼紙。聖羅蘭的洋裝就是最好的對照,接縫跟著色塊走,成品才像一整片布。

摺線與邊角要先確認分割線會落在哪裡;同一組圖案縮到小尺寸時,黑線的寬度也要跟著調整,太細的線在小物件上會直接消失,格線的骨架就散了。

看似蒙德里安卻不像的 3 種常見失誤

看起來像蒙德里安、實際上不像的做法,大多違反了前面解剖出來的某一條規則。最常見的有三種,分別會讓畫面像報表、沒有重心,或是太花。

蒙德里安風格正確做法與三種失誤對照:等分格子、紅黃藍面積一樣大,以及加入斜線、曲線、圓角與漸層
看起來像蒙德里安卻不像,多半是格子等分成了報表、色塊一樣大沒有重心,或加了斜線與漸層而離開新造型主義的規則。

等分的格子會讓畫面變成報表

格子等寬等高、線寬一致,畫面就像一張試算表,違反的是「粗細不一的黑線與不等分的格子」。

改法有三點:線寬分成兩級,格子的大小錯開,再讓一兩條線貫穿全幅。這樣畫面就有了節奏,不再是均勻的方格。

紅黃藍面積一樣大,畫面就沒有重心

三種顏色面積一樣大,視線無處停留;色塊太多,畫面又像一塊調色盤。這兩種情況違反的是「以面積與位置換來不對稱的平衡」。

改法是留一個大色塊,搭配兩個以下的小色塊,其餘交給白格。

斜線、曲線與漸層已超出新造型主義的規則

新造型主義只准許水平與垂直的直線、正方形與長方形、不帶漸層的原色與非色;加上斜線、圓角、陰影或漸層,就離開了這套規則。歷史上,蒙德里安正是因為杜斯堡在作品裡引入斜線而退出風格派。

這些元素不是不能用,重點是用了之後,成品屬於「受蒙德里安啟發的風格」,不再適合稱為新造型主義或風格派。蒙德里安自己也刻意避免重複同一種結構,持續尋找新的解法,他的規則比較像起點,並不是終點。

蒙德里安把風景一步步刪到只剩直線、矩形和幾種顏色,每一條線、每一塊色因此都必須有存在的理由。借用他的版面時,也可以用同樣的標準檢查,像是這條線為什麼落在這裡、這塊色為什麼這麼大、白格有沒有好好留下來。

動手前先決定哪些規則要守、哪些要打破。想嚴格照新造型主義做,就守住直線、矩形和原色;想加入斜線或漸層,就把它當成自己的變奏。不論守或破,借的都是蒙德里安刪減與取捨的思考方式,而不只是一個外型。

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

蒙德里安是哪個國家的畫家?

蒙德里安(Piet Mondrian)是荷蘭畫家,1872 年出生於荷蘭 Amersfoort,早年畫的是荷蘭傳統風景。蒙德里安 1911 年前往巴黎、受立體派影響後一步步走向抽象,1940 年移居紐約,1944 年在紐約過世。

蒙德里安的新造型主義有哪些規則?

新造型主義是蒙德里安替自己的抽象畫取的名字,規則可以收斂成三條:顏色只用紅、黃、藍三原色與白、黑、灰這些非色,形狀只用正方形與長方形,線條只用水平與垂直的直線。

蒙德里安為什麼退出風格派?

蒙德里安在 1925 年前後退出風格派,起因是共同創辦人杜斯堡在作品裡重新採用了斜線。水平與垂直對蒙德里安來說是不肯讓步的底線,所以「蒙德里安風格」和「風格派」不能畫上等號。

蒙德里安風格的格子要做成等分嗎?

蒙德里安風格的格子不要等分,等寬等高、線寬一致的格子會讓畫面像一張試算表。蒙德里安的黑線粗細不一、格子大小各不相同,做設計時把線寬分成兩級、格子大小刻意錯開,位置用目測調整,畫面才有節奏。

蒙德里安風格的色塊上可以放文字嗎?

蒙德里安風格的色塊可以放文字,但要先檢查對比,文字優先放進白格或淡色格。依 WCAG 2.2,一般文字對比至少 4.5:1、大字至少 3:1,黃色底配白字通常過不了門檻,放進色塊的字最好做大。

資料來源
  1. Piet Mondrian 1872–1944 藝術家介紹 — Tate
  2. Art Term: Neo-plasticism — Tate
  3. Art Term: De Stijl — Tate
  4. The Mondrian Guide to Life — Tate
  5. Mondriaan 館藏介紹 — 海牙市立美術館
  6. Victory Boogie Woogie 館藏說明 — 海牙市立美術館
  7. Piet Mondrian. Broadway Boogie Woogie. 1942–43 — MoMA
  8. Geometric Abstraction(Heilbrunn Timeline of Art History) — 大都會博物館
  9. The Mondrian Revolution — 巴黎聖羅蘭博物館
  10. Unknown letters Piet Mondrian — 荷蘭藝術史研究所 RKD
  11. Rietveld Schröderhuis (Rietveld Schröder House) — 聯合國教科文組織
  12. The Red Blue Chair 館藏說明 — V&A
  13. Vilmos Huszár 藝術家介紹 — 提森-博爾內米薩國家博物館
  14. Piet Mondrian 藝術家介紹 — 提森-博爾內米薩國家博物館
  15. Piet Mondrian 藝術家介紹 — 佩姬古根漢美術館
  16. Web Content Accessibility Guidelines (WCAG) 2.2:1.4.3 Contrast (Minimum) — W3C