扁平化與日漸普遍的極簡主義

這種趨勢並非無端出現。

被譽為建築史「現代主義之父」的美國建築師 Louis Sullivan 創造了現代摩天大樓的原型,他留給後世更大的財富,還在於放之四海而皆準的設計格言:形式追隨功能( Form follows function)。

這句話的意思很簡單,即設計首先得考慮功能性。

從擬物化和現實主義,到極簡的扁平化,再由扁平化升級為更具兼容度的設計風格,都是用戶界面設計風格順應了當下潮流所得的結果。

1994 年,萬維網的出現使得互聯網開始引起公眾注意。大部分美國的上市公司開始視一個公開的網站為必需品。但此時,個人電腦的滲透率極低。只有專業工作人員熟悉電腦桌面軟件,更不用說那些看了令人疑惑的數字接口了。設計師們花了大量時間製作網站按鈕、菜單和跳轉鏈接,使他們看起來略微友好一些。

在網頁設計幾乎無可參照的當時,人們認為網站設計的黃金準則就是去模仿電腦桌面的界面設計。

1995 年發布的 Windows 95 就是 3D 模擬的經典例子。

它的對話框使用了很深的陰影和高光來製造 3D 效果。它們的凸起凹陷都遵循著兩個基本原則:

凸起的元素是可以用鼠標點擊按下的。它經常被用來表示按鈕。
凹陷的元素則是被用來填充的。諸如搜索框等輸入框就常使用內陷的視覺元素。

就如同美國 1840 年代的鐵路、1920 年代的汽車和收音機所帶來的技術繁榮一樣,巨大的互聯網泡沫積聚起來,又因為過熱的投機行為經歷了一場名為「Dot Com」泡沫的破裂。

不過很快地,互聯網經歷泡沫破滅以後再次起飛,一大批新的創業公司出現,讓自己的界面充斥著陰影、氣泡、眩光、巨大投影等時下流行的元素。

微軟在 2003 年發布的 Outlook Web Access,被認為是網頁設計的傑出代表。

這個在如今標準看來頗為簡陋的界面,在當時是 .NET 網站的標準,以及很多 AJAX 庫所渴求的設計。

與此同時,蘋果的擬物化設計和現實主義風格也搭載著產品的出售被更多用戶接受。

擬物化是對物理世界一些特徵的模仿。它用在設計中,能讓用戶在對現實存在物品的了解基礎上,學會使用一種全新的交互界面。

蘋果的用戶界面上,那些反光的圖標其實是現實生活中的物體在電子屏幕上的一種轉移。在大部分人還未被智能手機牢牢擒住時,這種對現實物品的模仿其實能消除人們對電子事物的疏離感。

蘋果的第一套界面就開始擬物了。

蘋果將虛擬鍵盤做成精緻的水晶玻璃質感,正是為了讓人們習慣虛擬鍵盤的存在。可以很肯定地說,假如它沒有做得如此「直覺」,它的體驗就沒有說服力,也無從培育消費者的習慣。

擬物化風格愈演愈盛,並被蘋果對細節的極致描繪推向了高點。

但和過去數百年建築、藝術的發展軌跡類似,扁平化設計所代表的「極簡主義」,也是在堆疊裝飾風潮達到極盛之後,開始一股由繁入簡的風潮。

扁平化設計常被視作網頁和界面設計發展到成熟階段的象徵。

這種成熟首先體現在設計師身上,他們對於設計圖標和界面已經得心應手,開始轉而尋求創新和現代性。

互聯網的滲透意味著遠比過去更多的人熟悉如何與電子設備互動。我們已經習慣於與數字設備的交互方法。即便是某個頁面上只有一個細線條方框,只要上面寫著「Go」,你也清楚地知道那是個可以被點擊的按鈕。

同樣的發展軌跡,你可以在印刷物上的「扁平化」上找到。

這種更「原始」一些的載體,早在 60 年前就已經見證過這種極簡風格的鼎盛時期。當時扁平化設計的名稱還叫做「瑞士設計風格」,也稱為「國際印刷風格」(International Typographical Style)。

如它名字所指,這種設計風格始於瑞士,在 1940–1950 年代推廣至全球,成為戰後西方的設計基礎。

推動者是現代最著名的平面設計師之一 Armin Hofmann。從蘇黎世藝術學院畢業後,他作為一名版師流轉於 Basel 和 Bern。1947 年,在火車上遇見時任 Basel 藝術學院校長的 Emil Ruder 後,他得知那兒正缺一名教師,於是開始了 40 年的教學生涯,並在後來接替了 Ruder 的校長位子。

Hofmann 一生中大部分時間都在設計扁平設計風格的海報。因為他認為,海報是最好和最有效的溝通形式之一。

ArminHoffman,1959

他的海報永遠高效審慎地使用顏色和字體。他將這種做法稱為「色彩的瑣碎化」。即便以當下的審美標準評判,它們依舊融合了創意與藝術氣質,完全不過時。

事實上,Hofmann 用在海報中的元素和如今的扁平化設計元素並無太大區別:照片蒙太奇,強調排版和實驗性的構圖,以及大量無襯線字體。

他還將自己的設計哲學和實踐寫入了一本名為 Graphic Design Manual 的設計指導手冊,成了無數平面設計師的必讀書目。

瑞士汽車俱樂部海報,Joseph Müller-Brockmann,1955

這種「剝離非必要元素」的風格專注於可讀性,和同樣以清晰可讀為準繩的 Helvetica 字體一起,在二戰後的西方設計史中,佔據了一席之地。

扁平化設計在原本就是平面的海報中,並沒有遭遇太大問題。這也是極簡排版風格在印刷物中長盛不衰的原因之一。

數字屏幕就沒有這麼簡單了。儘管不少設計師全心擁抱扁平化設計,但這種早期只有兩個維度的設計風格,也很快就暴露出局限性。比如拋棄一切三維元素的 Metro,它的誕生就伴隨著反對者對其易用性的質疑。

儘管在 Jaskni 看來,Metro 難以推廣的原因還在於 Windows Phone 可憐的市場份額,以及它對開發者的高要求,「它基於 wayfinding(路牌指示),是非常需要功力的一個領域。」

越來越多設計師厭倦了它的魅力,開始尋求解決方案。

扁平化,真的就是指完全扁平嗎?

這恰恰是 Nielen Normann 這份報告存在的缺陷之一:這份報告對扁平化設計的理解似乎還停留在它們最初的印象,忽視了這種設計語言進入數字屏幕以來的進化。

在它的對照組中,扁平化就是徹底沒有紋理和陰影的存在。

但現實情況是,扁平化設計其實與擬物化設計的概念並行不悖。它擁有物理世界中的規則,甚至開始主動摹仿現實中的「層次」和「維度」,比如不少設計師利用深淺不一的色塊表現出陰影,而不是過去的投影、斜角和漸變,仿造出真實的投影。此時它的對立面已經不是擬物化了,而是「豐富設計」(rich design)。

Jaskni 和 frog 另一名視覺設計師胡玥申都認為這份報告傳達的並非扁平化的缺陷,而是「不好的設計」的缺陷。

報告忽視的另一個問題在於,網站瀏覽效率不僅僅由用戶導航的速度決定,網頁加載也是重要因素。

他們說,設計風格其實是設計師審美與硬件基礎之間的拉扯結果。比如 Jaskni 認為「非常好看」的 Windows Vista 界面,限於硬件,在拖動窗口會出現卡頓現象。即便微軟擁有推廣這種精細設計的熱情,開發者也會因為懼怕消耗系統資源而放棄優化。

而扁平化圖標使用簡潔的圖像傳達信息,少有漸變、紋理和陰影,圖標更小,頁面加載時間也更快。它們既有裝飾性,也能導航到網站的正確位置。

不過,扁平化並非完全摒棄紋理和陰影的存在,進化使得它解決了過去那些缺陷。

2013 年,Google 發布的 Material Design 引發了不少扁平化設計愛好者的狂歡。

在它發布這個設計語言以前,Google 在設計上的戰術頗有些小心翼翼:設計沒有重大變化,只是在每次新產品發佈時實施一些小小改變。

但作為在設計上具有高要求和高用戶期望的大公司,Google 在發布 Material 時做了超前的一步:它不僅為自己的設計語言取了名字,還專門設定了相對完整而明晰的設計規則。

這為設計師們提供了便利。因為對設計師來說,當憑空設計出一套新的風格時,需要付出巨大的研究成本與溝通成本。而 Material Design 相當於一個框架,在其中生髮出來的設計,是已經被驗證過的。

要解釋 Material Design 的概念也很簡單,它試圖在最簡化的設計中引入一些擬物化設計的特徵:

它將所有設計元素都想像成在固定光源下的紙片,因為光源遠近表現出深淺不同的色彩和陰影。雖然它看起來依舊扁平,但就連運動模式都模擬了物理世界的規則。

儘管一些設計師認為 Material Design 在顏色、陰影方向等都做了過於死板的限制,令他們創意受限,但 Material Design 的發布算是扁平化設計「進化」成功的嘗試。

與 Material Design 發布同年,設計師 Jeff Escalante 也在 Dribbble 等設計網站上發起了一次關於扁平化設計趨勢的討論,並提出了一種頗為簡單粗暴的解決方案:長陰影(Long Shadow)。

它的效果如同將圖標上的物體置於冬日陽光下:它們都拖著 45° 斜角的長陰影,是物體的2.5 倍。

長陰影保留了扁平化設計的基本審美,但也為圖像增加了深度。這使得它的確火了一陣,設計網站 Dribbble 和 Pinterest 上都出現不少類似作品。教程也在教大家如何以更高效率製作長陰影。

不過這種戲劇化的對角線陰影讓人聯想起早期的蘇聯海報或是像俄羅斯構成主義、幾何抽象派畫家馬列維奇的拼貼畫作品。它們都呈現出一種積極的、理想主義的風格,具有強烈的視覺衝擊力,非常適合用作圖標和品牌商標。

但除此以外,長陰影的使用廣度欠奉。和理論更成系統的 Material Design 相比,它並沒有辦法走得更長遠。

2013 年,人們關於扁平化設計的討論,還在於「它是一個趨勢,還是一次革命」。

但從現在它們的發展看來,扁平化設計已經成了一個容納度極高的存在。它還在依照變體不斷延續自己的影響力。

蘋果實際上也沒有將自己限定在最初那個扁平化設計的框架裡。在走扁平路線的 iOS 7 中,Game Center 圖標在一眾被拍扁的圖標中顯得不同,依舊擁有閃亮的光澤感。

Dribbble 中不乏好事者將它拍扁,但「這就不是原來的球體了」,Jaskni 說,「蘋果可能不是在一味追求扁平化,而是在尋求好的設計。」

顯然,扁平化設計只是電子屏幕設計的其中一個階段。到目前為止,2D 界面的通用性已經基本得到解決。一旦出現像 AR/VR 這樣更沉浸的視覺需要時,它可能會失去現有的地位。

在過去兩年多,包括微軟在內的不少科技公司都在進行「包容性設計」,意即他們開始思考一些相對前沿的事物,並為之做出設計方案。

比如微軟發布的全息設備 HoloLens。儘管用戶能夠與全息照相機進行互動,但 HoloLens 的操作系統與微軟其它設備所用的界面並不相同。

微軟希望能發布一套像 Metro 那樣,貫穿所有產品線的設計語言。

他們也「做到了」。今年 5 月的開發大會上,微軟發布了一套叫做「Fluent」的設計語言,它看起來像是扁平化設計的延伸,但被賦予了無縫對接 2D 和 3D 操作系統的願景。

儘管它目前還只是一個概念,但如同每個階段的演進一樣,這個依舊很年輕的系統需要時間。

文章出處/ 好奇心日報

誠摯邀請你成為好朋友-->
        

About The Author

之所以叫「好奇心日報」,是因為我們認為好奇心是人類最美好的品質之一,我們篩選最有價值的信息,你能在這裡看到全球最有想法、最值得關注的各界動態,以及它們背後的故事

Related Posts

留下你的看法: