許多人對(duì)現(xiàn)代藝術(shù)的評(píng)價(jià)是這樣的：“這不就是一團(tuán)亂麻嗎！”“一灘爛泥！”“復(fù)制粘貼而已，我也會(huì)。”（請(qǐng)自行腦補(bǔ)該類文字所描述的作品）。每當(dāng)一個(gè)藝術(shù)家的作品在國(guó)際藝術(shù)品拍賣會(huì)上拍得天價(jià)時(shí)，總有幾個(gè)圍觀的吃瓜群眾會(huì)潑下幾滴自信的冷水：“這是什么玩意兒！我也能做好不好！”
 

然而，有一幅圖是這么機(jī)智地反駁的：

圖1，QUOTE BY CRAIG DAMRAUER

作者默默地表示贊同…誰叫你想到的時(shí)候沒有做呢？
 

然而，無論你是否能真的創(chuàng)作出與大師相同的作品，你都需要先對(duì)大師創(chuàng)作的動(dòng)機(jī)有些了解。即使說有許多作品的確很容易復(fù)制（想想那些專業(yè)復(fù)制名畫的油畫村吧），如果不去思考作畫背后的過程和背景的話，所作出來的畫也只能是形似，達(dá)不到神似，更不用提自己創(chuàng)作了。這篇文章就是想討論幾點(diǎn)現(xiàn)代藝術(shù)家在創(chuàng)作過程中的思考，并扯一扯這些思考與用戶界面設(shè)計(jì)的一些微妙的聯(lián)系。
 

雖然從事著UI這個(gè)行業(yè)，作者的大學(xué)專業(yè)卻是藝術(shù)史。經(jīng)過了四年的專業(yè)洗（cui）禮（can），對(duì)從古至今的藝術(shù)的變革歷程有了一個(gè)客觀的、系統(tǒng)的了解。當(dāng)看到吃瓜群眾們從媒體引用有關(guān)藝術(shù)品的觀點(diǎn)時(shí)，作者時(shí)不時(shí)要為他們擦一把冷汗。許多看上去好似極易上手、平庸無奇的作品實(shí)際上是藝術(shù)家做了無數(shù)次加減法的結(jié)果。

圖2

當(dāng)時(shí)作者的期末考試便是背畫名，畫家，及作畫時(shí)間。想象一下，每日盯著幾百幅畫作背誦它們創(chuàng)作的時(shí)間、地點(diǎn)、創(chuàng)作媒介是件多么美（nao）好（can）的事情！所以在經(jīng)歷了這樣的洗禮后，作者每接觸一個(gè)與曾經(jīng)背過的畫有類似元素的圖像時(shí)，腦中就如數(shù)據(jù)庫般調(diào)出那幅畫的圖像記錄。自然到好似自己已變成一個(gè)移動(dòng)的藝術(shù)品數(shù)據(jù)庫（真是感動(dòng)不已）。
 

這種感覺作者稱之為“回光返照”之感，即在有意識(shí)的情況下，你所接收到的信息令你回想到了過去所接觸到的信息，下意識(shí)地與之形成對(duì)比。那么在UI的世界里，我們能否尋覓到現(xiàn)代藝術(shù)的影子呢？

一、格子，格子，格子

先看它：

圖3，大眾點(diǎn)評(píng)APP 主界面

在許多令作者印象深刻的UI風(fēng)格中，最典型的就數(shù)已遍地開花的“方格子風(fēng)格”，或“網(wǎng)格化風(fēng)格”。比如上面大眾點(diǎn)評(píng)的APP主界面，也如Windows Surface Pro的主屏界面：

圖4 ，WINDOWS 移動(dòng)端操作系統(tǒng)主界面

大家一定在想，作者的數(shù)據(jù)庫此時(shí)調(diào)出的是哪位藝術(shù)家的作品？

？

？

？

？

？

？

？

？

？

？

答案是：

圖5，COMPOSITION A, PIET MONDRIAN, 1923 (OIL ON CANVAS)

方格子的設(shè)計(jì)讓作者分分鐘聯(lián)想到了蒙德里安??！
 

網(wǎng)格化風(fēng)格在近年來已被廣泛地應(yīng)用于許多主界面的設(shè)計(jì)當(dāng)中，如上面截圖的Windows Surface Pro和許多文件管理APP和游戲APP。對(duì)于Windows Surface Pro來說，這樣的設(shè)計(jì)旨在將多樣化的軟件和文件快捷方式均勻且富有變化地排布在桌面上，它相比于傳統(tǒng)的Windows桌面快捷方式更為生動(dòng)，并可以緩解用戶使用時(shí)的乏味感。有人這么總結(jié)過，“網(wǎng)格的最重要的用處是為一個(gè)構(gòu)圖中如何定位元素而建立一套規(guī)則。一個(gè)有效的網(wǎng)格不僅定義著它的度量，也為設(shè)計(jì)增添了韻律，。”（引用1）之所以作者想到了蒙德里安，不僅因?yàn)楸砻嫔峡梢钥吹降?ldquo;網(wǎng)格”風(fēng)，更在于它與網(wǎng)格化設(shè)計(jì)共同想體現(xiàn)的一種富有變化的韻律。下面這幅畫的靈感取自于紐約曼哈頓的百老匯街道。

圖6，PIET MONDRIAN. BROADWAY BOOGIE WOOGIE. 1942-43 (OIL ON CANVAS)

繁榮熱鬧的百老匯街道被蒙德里安用抽象化的方式濃縮進(jìn)橫豎交錯(cuò)的網(wǎng)格，而散布在網(wǎng)格上的較小的方格則代表了川流不息的車流和人群。在表現(xiàn)“歡騰、熱鬧”這一主題時(shí)，除了錯(cuò)落的網(wǎng)格，網(wǎng)格中填充的顏色同時(shí)起到了至關(guān)重要的作用。當(dāng)作者看到Windows Surface Pro的主界面時(shí)，第一個(gè)感受到的也是界面的非靜止性。當(dāng)代表著不同意義的方格被同時(shí)呈現(xiàn)在一個(gè)界面、由直線相互連接著時(shí)，觀者的目光不再是靜定的，而是沿著各色格子的邊框而不斷跳躍。

二、極簡(jiǎn)的標(biāo)志

在藝術(shù)不斷被“現(xiàn)代化”的過程中，有一個(gè)非常關(guān)鍵的詞匯，那就是“簡(jiǎn)化（simplify）”。幾乎所有經(jīng)典的，傳統(tǒng)的畫作中常見的特點(diǎn)，如精致的人像或物件輪廓、一絲不茍的質(zhì)地描繪、對(duì)眼見之物準(zhǔn)確完整的再現(xiàn)，都在藝術(shù)的現(xiàn)代化進(jìn)程中，被一點(diǎn)一點(diǎn)地抹去了。簡(jiǎn)化有一個(gè)關(guān)鍵的目的：讓觀看者更加專注于剩下的部分。通過做減法，藝術(shù)家們逐漸學(xué)會(huì)了有目的性的只留下他們想呈現(xiàn)的部分。古典藝術(shù)很像是復(fù)刻了照片，每一個(gè)細(xì)節(jié)都完美展現(xiàn)，而現(xiàn)代藝術(shù)作品則是往截然相反的方向發(fā)展，盡可能地簡(jiǎn)化現(xiàn)實(shí)中的景象，濃縮成簡(jiǎn)化的形態(tài)。
 

請(qǐng)看Picasso不同時(shí)期的作品對(duì)比：

圖7左，AUTOPORTRAIT, PABLO PICASSO, UNKNOWN DATE (OIL ON CANVAS)

圖7右，AUTOPORTRAIT, PABLO PICASSO, 1907 (OIL ON CANVAS)

人們熟知的畢加索是右邊這張圖代表的風(fēng)格，而孰不知風(fēng)格大膽的畢加索也曾經(jīng)做過循規(guī)蹈矩的好學(xué)生。同樣是自畫像，畢加索把自己化成了完全不同的樣子。事實(shí)上，從寫實(shí)到抽象的描繪方式的不同，是現(xiàn)代藝術(shù)相對(duì)于古典藝術(shù)的一大革新之處。
 

如果上面畢加索作品的對(duì)比不夠深刻，請(qǐng)參考這組：

圖8左，米老鼠, WALT DISNEY

圖8右，DAMIEN HIRST – MICKEY (2014)

米老鼠竟還可以這樣畫？而如此幾何化之后，我們竟然還能認(rèn)得出它是什么。這與UI設(shè)計(jì)中的扁平化好像如出一轍？是的，無需完整的邊描，僅僅使用基本的幾何形狀依然可以呈現(xiàn)物件最基本的結(jié)構(gòu)，UI設(shè)計(jì)也是如此。
 

若要談UI設(shè)計(jì)，就不得不談icon這個(gè)不可或缺的基本元素，以及近年來被極度推崇的扁平化設(shè)計(jì)。而從擬物化到扁平化的設(shè)計(jì)發(fā)展，就如古典藝術(shù)至現(xiàn)代藝術(shù)的進(jìn)程。過度的設(shè)計(jì)容易使人產(chǎn)生視覺審美疲勞。在電腦普及的短短幾十年內(nèi)，icon的風(fēng)格已從最早的精致刻畫逐漸發(fā)展到今日扁平化、極簡(jiǎn)化、幾何化的風(fēng)格。
 

iOS 6 和 iOS 7 的對(duì)比：

圖9

陰影被弱化，紋路被舍去，字體纖細(xì)了，也不再有攝影精度的圖片出現(xiàn)在icon內(nèi)，取代而之的是平鋪的色塊和精簡(jiǎn)的幾何形狀。生活中的物件被不斷抽象化，提取至幾條簡(jiǎn)單的線條。icon的設(shè)計(jì)進(jìn)化似乎借鑒了藝術(shù)的現(xiàn)代化，不再具象、立體。因而不得不說，不管是在藝術(shù)作品還是UI設(shè)計(jì)中，精簡(jiǎn)化都是一個(gè)必要的走勢(shì)。

三、模糊的意義

最后要比較的一個(gè)UI效果是它：

圖10，WINDOWS VISTA

沒錯(cuò)，就是毛玻璃效果。對(duì)此類設(shè)計(jì)最早的接觸來自于Windows vista的窗口欄。那時(shí)作者對(duì)印象派的了解并不深。而后正式學(xué)習(xí)了印象派的定義時(shí)，才意識(shí)到，如今在OS 8.0中隨處可見的毛玻璃效果原來與印象派有著異曲同工之妙。請(qǐng)看莫奈的霧蓮系列作品：

圖11，CLAUDE MONET, WATER LILIES, CA. 1915-1926

被譽(yù)為最喜愛霧霾的藝術(shù)家，莫奈的創(chuàng)作特點(diǎn)是舍去對(duì)具象物體的描繪，而反過來通過描繪光影對(duì)物體的效果來呈現(xiàn)物體本身。他的目的是營(yíng)造一種光影的氛圍，而不是具體體現(xiàn)任何一個(gè)具體的物件。
 

莫奈這樣描述他的“Water-Lilies”，’創(chuàng)造一種沒有盡頭的整體感，一種沒有水平線或邊岸的水平面’（引用2）。距離和角度已被摒棄，水好似無限地延伸到了我們整個(gè)的視覺中。
 

而作者轉(zhuǎn)念一想，在UI中對(duì)毛玻璃的運(yùn)用不亦如此嗎？通過模糊背景、卻保留背景的光影，使得原背景中較為銳化的顆粒得以模糊化，為浮于上層的功能性控件提供了極好的背景效果。它使窗口內(nèi)的文字清晰呈現(xiàn)，卻又維持了大環(huán)境的色澤、光影的流向，得以讓我們的視覺沉浸在無限廣闊的背景當(dāng)中。試著把莫奈的作品置于常用的天氣APP的背景，即是如下的效果：

圖12，IOS UI

毛玻璃的作用效果與莫奈的光影處理如此相似，著實(shí)耐人尋味，讓人不禁感嘆到藝術(shù)的博大精深。

最后，寫給吃瓜群眾這些話：

籠統(tǒng)得說，設(shè)計(jì)和藝術(shù)的區(qū)別在于，設(shè)計(jì)更有目的性，它為特定的用戶、需求而存在，而藝術(shù)更加自由、主觀。盡管如此，在現(xiàn)代藝術(shù)的極簡(jiǎn)化道路中也不乏與UI設(shè)計(jì)思路相謀的地方。上面列舉的只是作者發(fā)現(xiàn)的UI設(shè)計(jì)中與現(xiàn)代藝術(shù)的幾處微妙的聯(lián)系。拋開商業(yè)化、功能化、用戶需求這些詞語，設(shè)計(jì)和藝術(shù)的區(qū)別也許并沒有那么明顯。我們只是需要用一雙開闊的眼睛去感受這些視覺的變化，這些不同時(shí)空里的匠心獨(dú)運(yùn)。
 

怎么樣，是不是對(duì)藝術(shù)和設(shè)計(jì)的關(guān)系有了全新的認(rèn)識(shí)？想不想嘗試一下回光返照的美好感受？快去豐富下自己的數(shù)據(jù)庫，開始背畫吧?？梢韵葟摹督棠憧?00幅世界名作》開始。來，作者悄悄告訴你一個(gè)快速背畫的秘訣……：

…

…

…

…

…

…

…

…

那就是，

沒有秘訣。

原文鏈接: dianrong