火星網(wǎng)校
淺談扁平化設(shè)計的優(yōu)缺點(diǎn)與發(fā)展趨勢(上)
發(fā)布時間：2024-01-25 20:52:00 瀏覽量：306次
不論你從事平面設(shè)計、網(wǎng)頁設(shè)計、UI/UX設(shè)計、前端設(shè)計…只要你是設(shè)計師，你不可不知從2013年后火速竄起改變整個資訊產(chǎn)業(yè)使用者界面的「扁平化設(shè)計 (Flat Design) 」 ，是如何撼動整個世界，甚至是改變你的工作型態(tài)與產(chǎn)業(yè)!
你有沒有發(fā)現(xiàn)，2013年后許多網(wǎng)頁、APP、甚至系統(tǒng)界面，都開始改用色彩繽紛、簡約的風(fēng)格，就像把所有物件通通壓扁在畫面上，這就是紅極一時的扁平化設(shè)計 (flat design)，新一代界面設(shè)計的趨勢。
不單單只是資訊產(chǎn)業(yè)，連許多知名廠商的LOGO 也開始改頭換面采用扁平化的潮流，像是Netflix、ebay、Spotify、Twitter、Audi、Citro?n…等
然而也有人認(rèn)為這樣的改變變得沒特色，比如說Instagram 的logo 就變得十分不顯眼。
在資訊的推波助瀾下，你有發(fā)現(xiàn)許多行業(yè)的設(shè)計趨勢與消費(fèi)者習(xí)慣的轉(zhuǎn)變，潛移默化地受到科技化(Informatization)的影響嗎?
什么是扁平化設(shè)計?
那么，解釋一下到底這個很夯的扁平化設(shè)計是什么呀?
其實(shí)從上面一些案例你應(yīng)該有隱約感覺到一些共通之處，扁平化設(shè)計就是，去除陰影 (shadow)、漸層 (gradients)、裝飾 (decoration )、反射光澤 (shiny)等3D要素，通常使用高亮度的色彩 (bright color) 搭配無襯線字體呈現(xiàn)出簡約現(xiàn)代風(fēng)格。
噢！所以你是說扁平化設(shè)計是2013年后才有的東西嗎?
哦不！當(dāng)然不是了，先讓我們把時間拉回100年前…
扁平化設(shè)計的開端
19世紀(jì)英國女王維多利亞在位統(tǒng)治時期稱為維多利亞時代，那個時期的建筑風(fēng)格就稱為維多利亞風(fēng)格 (Victorian Style)，是個日不落國、英國錢淹腳目的黃金年代，外觀華麗而細(xì)致，就算到了今天你還是能看到許多保存完整的建筑物。
嗯，就是那種你出國絕對會和它拍照的美麗建筑。
知名建筑像是英國國會大廈
然而好景不常，1920經(jīng)過一次世界大戰(zhàn)的洗滌后，人們對維多利亞風(fēng)格感到厭倦，與每下愈況的生活簡直形同對比，讓人感到華而不實(shí)。
于是德國建筑師Walter Gropius 在1919 年成立了國立包豪斯學(xué)校，不過在1933年被納粹壓迫而關(guān)閉，因?yàn)镚ropius在學(xué)校宣傳共產(chǎn)主義思想。
誰也沒想到，這個短短成立不到15年的學(xué)校竟然深深影響了往后世界的藝術(shù)、工業(yè)設(shè)計、平面設(shè)計、室內(nèi)設(shè)計、現(xiàn)代戲劇、甚至是現(xiàn)代美術(shù)等領(lǐng)域上!
仔細(xì)看看包豪斯學(xué)派（又稱包豪斯主義，The Bauhaus Style）的主張:
Form Follows Function: 設(shè)計的構(gòu)成必須反映出功能，效用放第一位；
Truth to Materials: 盡量呈現(xiàn)該素材的特性；
The Less is More: 簡約、功能性的美學(xué)，去除無謂的裝飾；
包豪斯簡約實(shí)用的設(shè)計理念可以說是和扁平化有異曲同工之妙。
包豪斯家具
包豪斯建筑
扁平化設(shè)計的起源
時間來到1950年代，瑞士發(fā)展出了國際印刷風(fēng)格 ( International Typographic Style or International Style)，又稱瑞士風(fēng)格 (Swiss Style)，相較于包豪斯主義，瑞士風(fēng)格繼承其特性，不過著重在印刷、字體等平面設(shè)計上。
可以看看swissted 這個網(wǎng)站，收集了許多瑞士風(fēng)格的海報作品
1957年，瑞士設(shè)計師 Max Miedinger 與 Eduard Hoffmann 設(shè)計出「Helvetica」的無襯線字體，Helvetica 在拉丁文中有著「瑞士」之意。
可以說是瑞士風(fēng)格的代表作品，追隨著現(xiàn)代主義觀點(diǎn)，認(rèn)為應(yīng)該讓讀者在閱讀時能專注于文字所表達(dá)的內(nèi)容，而不會關(guān)注文字本身所使用的字體，至今為全世界商標(biāo)設(shè)計運(yùn)用最為廣泛的一款字體。
有許多知名企業(yè)的logo字體正是使用了Helvetica
額外補(bǔ)充：Arial 為1982 年 Monotype 公司出品的字體，因搭配微軟作業(yè)系統(tǒng)而迅速普及，不過一般人很容易將兩者混淆。
如果說包豪斯的設(shè)計理念影響了扁平化，那瑞士風(fēng)格可以說是孕育扁平化的搖籃，人們普遍認(rèn)為瑞士風(fēng)格對扁平化設(shè)計理念的影響是最為深遠(yuǎn)的。
俗話說十年風(fēng)水輪流轉(zhuǎn)，瑞士風(fēng)格在普及一段時間后就開始衰退了，沒有什么潮流是一成不變的，1970年代后出現(xiàn)一種反對現(xiàn)代主義的「后現(xiàn)代風(fēng)格 (Postmodernism) 」，帶有叛逆風(fēng)格地對字體和排版進(jìn)行切割、重構(gòu)，呈現(xiàn)充滿活力的樣貌。
后現(xiàn)代風(fēng)格家具，是不是和包豪斯風(fēng)格差很多呢?
后現(xiàn)代風(fēng)格建筑，十分醒目，很難讓人不多看一眼
所以說，扁平化設(shè)計的「前輩」被打的嫑嫑的，時至今日，他又是怎么忽然起死回生呢?
扁平化設(shè)計的過渡期
UI 設(shè)計界過去幾年持續(xù)爭論的一個大議題– 那就是使用者界面究竟該「擬物化(skeuomorphism)」還是「扁平化 (flat design)」？
回顧電腦時代的時候，Windows 界面設(shè)計采用擬物化，比如說資源回收桶是模擬真實(shí)世界型態(tài)的樣貌3D立體化，文件與電腦圖示也都有著陰影與細(xì)節(jié)。
好吧！你可能覺得很丑不好看，那我們換成軟體美學(xué)設(shè)計翹楚Apple的Mac OS X
底下有著玻璃式的圖像倒映，所有圖示依然做的栩栩如生，不論是時鐘、指南針、放大鏡或齒輪。
不過如果你有注意的話，會發(fā)現(xiàn)Apple的產(chǎn)品采用包豪斯設(shè)計，有著潔白、簡約、俐落的線條。
你是不是覺得奇怪，為什么Apple明明很早以前外型就采用包豪斯設(shè)計，可是在軟體界面上卻是用擬物化設(shè)計呢?
你還有印象的話，應(yīng)該記得前六代的iOS系統(tǒng)
我看過一派有趣又富有哲理的論點(diǎn)，認(rèn)為擬物化設(shè)計是人類認(rèn)知學(xué)習(xí)的過渡期產(chǎn)物，就像20世紀(jì)初的量產(chǎn)汽車外觀也十分類似原本人們舊有習(xí)慣的馬車。
在人們尚未學(xué)習(xí)到新知識的時期，考量到原本使用者的習(xí)慣，用他們熟悉的事物來接觸新知，降低學(xué)習(xí)曲線與使用者門檻，20世紀(jì)末人們學(xué)習(xí)使用電腦時便是先接觸了擬物化的設(shè)計，在2007年開始接觸智能手機(jī)時，很理所當(dāng)然的會把過去的習(xí)慣帶入，就像以前操作電腦一般，而事實(shí)上，所謂的「智能手機(jī)」本來就是一部小型掌上型電腦。
而過一段時候后，使用者習(xí)慣新事物的習(xí)慣后，就可以朝真正合適的方向發(fā)展，就像后來的汽車即使不在設(shè)計的像馬車外觀，人們也能夠接受。
另一派則認(rèn)為純粹是該時代發(fā)明人對科技的水平與想像就是如此，而且也被過去的思維與習(xí)慣所限制住，然后在不斷漸進(jìn)的過程中慢慢改變原本的設(shè)計；在2007年的時候根本還沒出現(xiàn)扁平化設(shè)計這個名詞。
這兩派論點(diǎn)并沒有答案，但是Apple 同時運(yùn)用擬物化與包豪斯設(shè)計為自己寫下科技業(yè)的傳奇一章。
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費(fèi)學(xué)習(xí)UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點(diǎn)擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
-
10. 武漢UI設(shè)計培訓(xùn)班費(fèi)用怎么樣？想學(xué)UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費(fèi)用是多少嗎？不知道學(xué)UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學(xué)費(fèi)價格以及學(xué)習(xí)內(nèi)容。
最新文章
