作者/ 鄒錦翔

不論你從事平面設計、網頁設計、UI/UX 設計、前端設計…只要你是設計師,
你不可不知從 2013 年後火速竄起改變整個資訊產業使用者介面的「扁平化設計(flat design)」,
是如何撼動整個世界,甚至是改變你的工作型態與產業!

你有沒有發現,2013 年後許多網頁、APP、甚至系統介面,都開始改用色彩繽紛、簡約的風格,
就像把所有物件通通壓扁在畫面上,這就是火紅的扁平化設計(flat design),新一代介面設計的趨勢。

不單單只是資訊產業,連許多知名廠商的 LOGO 也開始改頭換面採用扁平化的潮流,像是 Netflix、ebay、Spotify、Twitter、Audi、Citroën…等

然而也有人認為這樣的改變變得沒特色,比如說 Instagram 的 logo 就變得十分不顯眼。

在資訊的推波助瀾下,你有發現許多行業的設計趨勢與消費者習慣的轉變,潛移默化地受到科技化(Informatization)的影響嗎?

什麼是扁平化設計?

那麼,解釋一下到底這個很夯的扁平化設計是什麼呀?
其實從上面一些案例你應該有隱約感覺到一些共通之處,扁平化設計就是,去除陰影(shadow)、漸層(gradients)、裝飾(decoration )、反射光澤(shiny)等 3D 要素,通常使用高亮度的色彩(bright color)搭配無襯線字體呈現出簡約現代風格 。1

噢! 所以你是說扁平化設計是 2013 年後才有的東西嗎?
哦不! 當然不是了,先讓我們把時間拉回 100 年前…

扁平化設計的開端

19 世紀英國女王維多利亞在位統治時期稱為維多利亞時代,那個時期的建築風格就稱為維多利亞風格(Victorian Style),
是個日不落國、英國錢淹腳目的黃金年代,外觀華麗而細緻,就算到了今天你還是能看到許多保存完整的建築物。2

嗯,就是那種你出國絕對會和它拍照的美麗建築。

知名建築像是英國國會大廈

然而好景不常,1920 經過一次世界大戰的洗滌後,人們對維多利亞風格感到厭倦,
與每下愈況的生活簡直形同對比,讓人感到華而不實。

於是德國建築師 Walter Gropius 在 1919 年成立了國立包浩斯學校

不過在 1933 年被納粹壓迫而關閉,因為 Gropius 在學校宣傳共產主義思想。
誰也沒想到,這個短短成立不到 15 年的學校竟然深深影響了往後世界的藝術、工業設計、平面設計、室內設計、現代戲劇、甚至是現代美術等領域上!

仔細看看包浩斯學派(又稱包浩斯主義,The Bauhaus Style)  的主張 :
Form Follows Function: 設計的構成必須反映出功能,效用放第一位。
Truth to Materials: 盡量呈現該素材的特性
The Less is More: 簡約、功能性的美學,去除無謂的裝飾
包浩斯簡約實用的設計理念可以說是和扁平化有異曲同工之妙。

包浩斯傢俱

包浩斯建築

扁平化設計的起源

時間來到 1950 年代,瑞士發展出了國際印刷風格( International Typographic Style or International Style),又稱瑞士風格(Swiss Style),
相較於包浩斯主義,瑞士風格繼承其特性,不過著重在印刷、字體等平面設計上。

可以看看 swissted 這個網站,收集了許多瑞士風格的海報作品。

1957 年,瑞士設計師 Max Miedinger 與 Eduard Hoffmann 設計出「Helvetica」的無襯線字體,Helvetica 在拉丁文中有著「瑞士」之意。

可以說是瑞士風格的代表作品,追隨著現代主義觀點,認為應該讓讀者在閱讀時能專注於文字所表達的內容,而不會關注文字本身所使用的字體,至今為全世界商標設計運用最為廣泛的一款字體。7

有許多知名企業的 logo 字體正是使用了簡單的 Helvetica

額外補充: Arial 為 1982 年 Monotype 公司出品的字體,因搭配微軟作業系統而迅速普及,不過一般人很容易將兩者混淆。8

如果說包浩斯的設計理念影響了扁平化,那瑞士風格可以說是孕育扁平化的搖籃,人們普遍認為瑞士風格對扁平化設計理念的影響是最為深遠的。

俗話說十年風水輪流轉,瑞士風格在普及一段時間後就開始衰退了,沒有什麼潮流是一成不變的,
1970 年代後出現一種反對現代主義的「後現代風格(Postmodernism)」,帶有叛逆風格地對字體和排版進行切割、重構,呈現充滿活力的樣貌。

後現代風格傢俱,是不是和包浩斯風格差很多呢?

後現代風格建築,十分醒目,很難讓人不多看一眼

所以說,扁平化設計的「前輩」被打的嫑嫑的,時至今日,他又是怎麼忽然起死回生呢?

扁平化設計的過渡期

UI 設計界過去幾年持續爭論的一個大議題 – 那就是使用者介面究竟該「擬真化(skeuomorphism)」還是「扁平化(flat design)」?

回顧電腦時代的時候,Windows 介面設計採用擬真化,比如說資源回收桶是模擬真實世界型態的樣貌 3D 立體化,文件與電腦圖示也都有著陰影與細節。

好吧! 你可能覺得很醜不好看,那我們換成軟體美學設計翹楚 Apple 的 Mac OS X

底下有著玻璃式的圖像倒映,所有圖示依然做的栩栩如生,不論是時鐘、指南針、放大鏡或齒輪。
不過如果你有注意的話,會發現 Apple 的產品採用包浩斯設計,有著潔白、簡約、俐落的線條。

下次在星巴克打開 Mac 時,還可以跟別人說這是包浩斯設計,讓你潮度增加 87%

你是不是覺得奇怪,
為什麼 Apple 明明很早以前外型就採用包浩斯設計,可是在軟體介面上卻是用擬真化設計呢?

你還有印象的話,應該記得前六代的 iOS 系統樣貌 10

我看過一派有趣又富有哲理的論點,認為擬真化設計是人類認知學習的過渡期產物,
就像 20 世紀初的量產汽車外觀也十分類似原本人們舊有習慣的馬車。

在人們尚未學習到新知識的時期,考量到原本使用者的習慣,用他們熟悉的事物來接觸新知,降低學習曲線與使用者門檻,

20 世紀末人們學習使用電腦時便是先接觸了擬真化的設計,在 2007 年開始接觸智慧型手機時,
很理所當然的會把過去的習慣帶入,就像以前操作電腦一般,
而事實上,所謂的「智慧型手機」本來就是一部小型掌上型電腦。

而過一段時候後,使用者習慣新事物的習慣後,就可以朝真正合適的方向發展,就像後來的汽車即使不在設計的像馬車外觀,人們也能夠接受。

另一派則認為純粹是該時代發明人對科技的水平與想像就是如此,而且也被過去的思維與習慣所限制住,然後在不斷漸進的過程中慢慢改變原本的設計;在 2007 年的時候根本還沒出現 flat design 這個名詞。

這兩派論點並沒有答案,但是 Apple 同時運用擬真化與包浩斯設計為自己寫下科技業的傳奇一章。

文章出處/ 咖尼馬管家的筆記

延伸閱讀:設計師必懂的趨勢,淺談扁平化設計優缺點與發展(下)

Related Posts