文章未經許可,請不要轉載,謝謝。

68da573937a06ac72580edffc1f7.jpg

5月11日,Facebook?旗下的圖片社交應用 Instagram 更換了新的 LOGO,放棄了復古相機的樣式,轉而變成了一個典型的扁平化風格的設計。

筆者依稀記得這個擬物風格的logo一直堅挺的使用了5年,當別的應用都在隨大流紛紛加入扁平化大軍的時候,這個應用卻一直保持著原來的風格,以 致于我總是很容易就在手機里找到這個應用(從另外一個角度來說,人家并沒有把精力整天花在視覺改版上,而是專心在做產品細節,不像某些國內公司一發現數據 差了就怪設計,臥槽,尼瑪你不知道你產品有多爛啊~(~ ̄▽ ̄)~[] 請原諒筆者又激動了·~)。5年啊!~~絕對的持久!

(▔▽▔)/

e8ca573937b86ac72580ed38af1f.jpg

But,當人們習慣一樣東西后,然后這個東西突然的來了個180°的大翻身的時候~~帶來的妥妥就是一片罵聲和各種吶喊啊~~有網友甚至P出了一張Instagram版的吶喊·~如下圖,(─.─|||| 。哈哈哈……高手在民間啊·~

b144573937d16ac72580ed123f3f.jpg

圖片來自網絡

咱們先不討論這個設計的好壞,倒是這次事件讓一眾人再次開始討論起扁平化設計。

b703573937e56ac72580ed3c57c9.jpg

圖片來自網絡

而說到扁平化設計,其實筆者第一反應是喬布斯-喬幫主。因為這位神一般的人物是個鐘愛擬物化設計的代表。筆者依稀記得那場關于扁平化和擬物化的口 水戰是多么的激烈~,現在想想要是喬布斯發現現在的Apple已經完全的拋棄了擬物設計,轉而投入大熱的扁平化設計,他會不會從墳墓里爬出來,對著喬尼· 艾維(Jony Ive)和庫克上演植物大戰僵尸的橋段呢~~^O^

當然玩笑歸玩笑,不管喬幫主怎么想,Apple還是繼微軟后加入了扁平化的大軍。那么問題來了,扁平化雖然有不少優點,但至于這么火么?~它也會 像擬物化一樣在不久的將來迅速被別的更牛逼的風格代替嗎?就好像一個武林盟主在風光很多年后,被個突然冒出來的小子打敗了,只好退居幕后。正所謂三十年河 東三十年河西嘛~~

so,要弄清這個問題,還是有必要先了解清楚扁平化的由來和它的優缺點,看看它是不是符合當下產品發展的要求…….

扁平化的由來

可以肯定的是,現在這些什么app設計、網站設計的美學要求,大多都源自傳統的印刷出版物和傳統美學。要準確的說出扁平化來自哪里很難。不過筆者找了不少資料,發現扁平化貌似多半是被這兩個設計風格所影響。

瑞士風格(Swiss Style)

d4fc573938096ac72580ed0a730d.jpg

瑞士風格其實也叫做國際主義設計風格,是由包豪斯時期現代主義設計演變而來的。這個風格最早其實是德國佬弄出來的,但真正發揚光大的卻是瑞士人, 所以索性就叫做瑞士風格啦,在20世紀四五十年代這樣發展為主流。(話說北歐真是個神奇的設計帝國~筆者是炒雞向往的,就是天氣不要太冷就好了~)

瑞士設計風格講究沿襲形式和功能的完美結合的理念。光這一點筆者都佩服得五體投地!而且瑞士風格并不單單應用在平面海報設計上,還包括家具、工業產品、汽車等設計上。

瑞士風格注重網格以及無襯線字體的使用,層次分明。在那個年代,瑞士風格通常是一張很大的圖片,配上簡潔、極小的字體(上圖所示)。值得一提的是,最近被玩壞的Helvetica字體也是在那個時候生出來的,并一發不可收拾的被廣泛使用。總之灰常牛B就是了。

極簡設計(Minimalist Design)

06645739384b6ac72580ed00b3f8.jpg

圖片來自網絡

(其實我想說,極簡主義不是一般的省油墨啊·~^_^||| )

另一個對扁平化設計有深遠影響的是極簡設計。我想這個風格很多設計師并不陌生,因為筆者發現只要是設計師都喜歡MUJI。而MUJI正是這個風格的代表之一。

2f5a573938716ac72580ed938c8d.jpg圖片來自網絡

所謂極簡就是移除多余的元素,只留下必要的成分。幾何圖形、少數的元素、明亮的色彩和干凈的線條主導多數極簡風格設計。

需要說明的是,極簡主義并不局限于藝術或設計,它是極簡主義者奉行的一種哲學思想,價值觀以及生活方式–“極簡主義”生活方式。(對,你沒有看錯!這是真的已經上升到哲學領域了~( ̄ε  ̄) ,這B裝得可以~~)

當然,其實極簡主義本來就是設計的一個極端,很多時候極簡主義給人的感覺是性冷淡……太高冷了~格調有余,但親和力就差了點啊~

Windows Metro

08255739388a6ac72580ed3a0992.jpg

扁平化設計真正應用到界面設計里,是微軟早期的Zune播放器(下圖)。或者很多人都木有聽過這個播放器~~這也不奇怪。因為這個播放器貌似并沒有在大陸發售,知道的人自然少之又少。

995b573938996ac72580ed4080a2.jpg

圖片來自網絡

微軟一直都沒有對蘋果停止過斗爭。2006年末,為了和蘋果的iPod競爭,推出了Zune。并提出了Metro的設計風格。不過,最終這個產品因為營銷問題,掛了┑( ̄。。 ̄)┍ ~

我們姑且不說這個產品成功不成功。筆者當時是妥妥的被Zune的界面設計所震撼,倔強的認定這個設計必將影響其他設計。

7017573938c96ac72580ed380f2c.jpg

然后iPhone出來后,微軟又坐不住了。2010年這樣,微軟從當年Zune設計中積累了的經驗,改良了新版的Windows Phone 7的設計,大號字體、明亮的色彩、網格、簡潔和扁平的圖標主宰了全部風格(當然還有流暢的動畫~這個后面談)。

當metro風格出來后,媒體和設計界在當時反響是真的火熱。很是被看好的。扁平化設計也理所當然的被端出了桌面。

Apple 和 iOS 7的轉變

e378573938e16ac72580edb2a6d3.jpg圖片來自網絡

當時候媒體討論最多的就是蘋果會不會隨大流放棄擬物化設計,筆者當時自己也是自己YY了蠻久的。不過最終蘋果也沒能抵抗誘惑,加入了扁平化大軍。 2013年iOS7發布后,蘋果徹底放棄擬物化設計。(我一直在想是不是因為喬大神不在的緣故~~不然我想扁平化也不會辣么輕松的就征服世界..)

436f573938fa6ac72580edb34039.jpg圖片來自網絡

由于蘋果的產品是個標桿(各大廠家的“學習”對象●▽● ),用戶也都是相對上流一點的(因為真的很貴,當時筆者都沒好意思買啊~~(>_<)~~),iOS7的發布使得扁平化設計一夜爆紅。擬物化設計幾乎瞬間過時。所以扁平化雖然是先由微軟弄出來,但卻是由蘋果推向主流的。

然后就看到各種軟件和App的設計一夜之間都尼瑪變了~~再后來要是設計個什么東西不和扁平化扯上邊就尼瑪不好意思拿出來!(當時筆者是妥妥的深有體會啊!唉…╮(╯▽╰)╭)

e9e8573939116ac72580ed49c9e5.jpg

那些習慣了畫擬物風格的設計師,頓時尼瑪就傻了眼。原來畫一個icon需要好幾小時,現在一個新手一上來花個十多分鐘就畫完了(先不要在意畫得好 不好)~~那種失落感,我也不知正在看文章的你懂不懂~~╮(╯▽╰)╭ ?那種感覺就如下面這張gif一樣,不好意思。Instagram表示又躺槍了·~

6f3e573939346ac72580ed44811f.jpg

扁平化設計的優點和缺點

想了想,扁平化之所以能夠那么火,也確實是有諸多原因的。至少它的優點是絕對的符合當下技術發展需要的。

優點

  • 響應式布局

    由于現在終端設備越來越多,并且什么奇葩尺寸都有,為了適應這些屏幕尺寸 能夠提供使用者優質的閱讀體驗,響應式的布局設計應運而生。而扁平化設計由于設計簡單等特點,RD甚至可以用代碼實現設計效果(因為很多時候并沒有漸變或 是一大張圖)。這樣的情況下閱讀體驗想不好都難啊。RD看到這些設計圖心里你不知道有多么的開心和溫暖!~(除非交互設計得很爛哈·~這里只談扁平化對響 應式布局的好處~)

  • 讓用戶更加注意內容本身,而不是別的不必要的裝飾

    因為說實話用扁平化方式設計出來的作品,并沒有那么多吸引眼球的東西,太簡單(這里主要指界面)。這樣用戶自然而然的更容易去關注內容本身,而忽略了這個是被設計過的。(但其實真的就是被設計過的,有句話說得好“最后的設計就是沒有設計”)

  • 感官上和實際輕量化,降低設備硬件要求

    用于設計簡單明了,以及扁平化設計多以明快而 單一的色彩去設計,去除和減少了那些多余的元素,使得整體界面讓人從感官上覺得特別的輕快。從另外一個層面說,由于設計簡潔,以至于RD有些地方都可以不 切圖,而用代碼直接寫出。甚至一些動畫效果也是可以用代碼寫出。這樣就大大降低對硬件的要求。而且最要緊的是安裝包妥妥的小了好多啊~(其實扁平化風格是 代碼仔的最愛才對… – ?-)

  • 結構層次扁平化

    扁平化設計的理念也在影響著交互方式。可以看到越來越多產品的交互不再像過去那樣那么多層級,而是減少歸納整合起來。一目了然的同時,提升了用戶體驗。

缺點:

  • 需要一定的學習成本

    喬幫主之所以要iPhone走擬物化風格,其實很大原因在于他對 學習成本的極大重視,因而才會在界面中大量的使用隱喻和模仿。他對界面設計的一個理想是,任何年齡的人,任何經歷的人,都可以在拿到設備后的幾分鐘內輕松 的掌握它的用法。這也是為什么當年那么多用戶拿著iPhone后就愛不釋手了·~說個簡單的栗子:我爸從來沒玩過智能手機,但當他拿著我的ipad時,我 都沒怎么教他,他居然一下就會了。在這個層面上,扁平化確實有點弱哦。

  • 可點擊區域模糊

    很多人(特別是沒經常接觸電子設備的人),第一次看到扁平化設計是有種焦慮感的,因為很多時候不知去按哪里……

  • 表現形式單一,同質化嚴重,缺乏個性

    很多時候,扁平化設計在界面和網頁設計中的表現形式少得確實有點可憐。如果去掉這個app的logo,有時候還真是不好區分,尤其是在現在這個你抄我我抄你的時代,你我的產品是辣么辣么的相近~( ˇ?ˇ )….何為個性可言啊~

  • 高冷、缺乏親和力

    扁平化設計大都用的是精簡或抽象后得到元素,而且甚至有些網站的設計就是同一個顏色一大片,然后敲幾個字在中間。臥槽,確實夠簡潔,高大上,B格大大的有。但這種風格看多了,就會覺得無內容和空洞,甚至有些性冷淡。

通過上面分析扁平化的優缺點,細心的你其實不難發現扁平化的很多缺點都是可以通過一些方法去改善的。其最大的好處還是在于,能夠適應技術的發展。并且最大限度的呈現內容本身,而不是展示無用的裝飾。(因為在產品設計當中,設計只是為了更好的呈現產品本身而存在的,一旦“設計過了”,就妥妥的變成了一種無用的裝飾了。)

0b9d5739395f6ac72580ed96aa62.jpg圖標來自花瓣

因此可以說扁平化設計是順應時代的產物啊。而事實上發展到今天的扁平化設計確實也在不斷的優化自己~使得自己更加的適應時代的發展。但其實要想真 正的運用好扁平化設計,絕不是一件簡單的事情。練過書法的孩子都應該知道一件事:筆畫越少的字越難寫的好,反而是那些筆畫多的字很容易寫好。扁平化設計也 是一個道理,它非常的考驗一個設計師的基本功。

9d2c573939776ac72580ed390101.jpg圖片來自網絡

運用好扁平化設計需要哪些技能

排版

由于扁平化設計擯棄了很多無用的元素,讓人全部集中在內容上面。這個時候對內容的合理呈現變得尤為的重要。所以排版我認為在扁平化設計當中是核心啊。

配色

了解配色基本原理的都該知道,一個頁面最好不要超過3種以上的顏色。顏色配的好不好,正確與否都是用戶是否愿意停留在界面的關鍵因素,因為顏色會給人第一個感覺,感覺不好細節都懶得看了~

39ea573939906ac72580ed4b851a.jpg
圖片來自花瓣網

字體運用

和配色差不多,字體也不能隨意使用,最好都不要超過兩種字體。內容絕定用什么字體。舉個栗子:要表現的內容是古典的奢侈品,這時候腦子里第一反應就該用襯線復古字體。

9188573939c96ac72580ed503477.jpg圖片來自花瓣網

精致的圖標

這里的精致包括兩層含義,1.圖標本身的語義 2.設計形式。就是說無論你用線的形式還是面的形式畫圖標,都得讓人明白你這個圖標是什么意思。只為好看不求語義的icon,就是耍流氓~

e03b573939dc6ac72580edf9db37.jpg圖片來自花瓣網

有趣的配圖

為了降低扁平化帶給人的距離感,很多時候需要通過有趣而具有親和力的配圖來拉進與用戶間的距離。這樣讓界面和產品有了感情在里面,容易讓人接受。

82b9573939f76ac72580ed4dcdd6.jpg圖片來自花瓣網

適當的動效

扁平化加入動效是現在設計的一個趨勢。為了讓關鍵操作區域能夠提供良好的操作反饋,動效的引入簡直就是神助啊~~所以騷年~感覺去學現在流行的Motion Graphic吧~妥妥的對你有幫助~

d22e57393a0c6ac72580ed19b38a.jpg

圖片來自google

你會發現這些技能除了最后一項,其余的全是設計基礎。如果你的基本功不好。筆者敢保證你的設計絕對是……以下省略幾萬字。(~ ̄▽ ̄)~

225257393a2e6ac72580edd1e999.jpg

以上說了半天,想必也該知道為什么扁平化設計辣么火了吧~~至于它會否被另一個新的風格所取代,臣妾也不知道啊!!

但是如果大家對世界現代設計史有了解的話,或許你會有自己的答案。你會發現從英國工藝美術運動開始,一直到現在的現代主義設計。這中間所經歷的風格都是跟隨著科學技術的發展而發展的。

a4dd57393a4d6ac72580ed76f9dd.jpg

圖片來自波普藝術家Craig&Karl

另外還有一個點就是所謂的 “審美疲勞”。當你一直看著簡單的東西,久而久之就會越來越煩,你就會越來越想要 看那些豐富多彩的東西。反之亦然。我想設計也不例外。不管是制作方還是用戶自己,都會審美疲勞。就算不疲勞,有些產品也需要標新立異,與眾不同,也必然會 走向另外一個極端了。微軟的metro其實就是~就是為了和蘋果的風格區分開來。歷史上還有很多藝術運動也是如此。例如“波普”設計運動~等 等……

過度解讀設計趨勢這個東西筆者認為意義不大的。設計的一切都是為產品服務的,無論是哪種設計風格,只要設計師NB,都能做出叼叼的東西~。所以風格沒有好壞之說。

很多時候,設計本身最核心的東西一直都沒變,即更好的解決問題,風格什么的都是為解決問題而服務的~~