很多時候，設(shè)計(jì)本身最核心的東西一直都沒變，即更好的解決問題，風(fēng)格什么的都是為解決問題而服務(wù)的

5月11日，F(xiàn)acebook?旗下的圖片社交應(yīng)用 Instagram 更換了新的 LOGO，放棄了復(fù)古相機(jī)的樣式，轉(zhuǎn)而變成了一個典型的扁平化風(fēng)格的設(shè)計(jì)。

筆者依稀記得這個擬物風(fēng)格的logo一直堅(jiān)挺的使用了5年，當(dāng)別的應(yīng)用都在隨大流紛紛加入扁平化大軍的時候，這個應(yīng)用卻一直保持著原來的風(fēng)格，以致于我總是很容易就在手機(jī)里找到這個應(yīng)用（從另外一個角度來說，人家并沒有把精力整天花在視覺改版上，而是專心在做產(chǎn)品細(xì)節(jié)，不像某些國內(nèi)公司一發(fā)現(xiàn)數(shù)據(jù)差了就怪設(shè)計(jì)，臥槽，尼瑪你不知道你產(chǎn)品有多爛啊~(~￣▽￣)~[] 請?jiān)徆P者又激動了·~）。5年??！~~絕對的持久！\(▔▽▔)/

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

圖片來自網(wǎng)絡(luò)

咱們先不討論這個設(shè)計(jì)的好壞，倒是這次事件讓一眾人再次開始討論起扁平化設(shè)計(jì)。

圖片來自網(wǎng)絡(luò)

而說到扁平化設(shè)計(jì)，其實(shí)筆者第一反應(yīng)是喬布斯-喬幫主。因?yàn)檫@位神一般的人物是個鐘愛擬物化設(shè)計(jì)的代表。筆者依稀記得那場關(guān)于扁平化和擬物化的口水戰(zhàn)是多么的激烈~，現(xiàn)在想想要是喬布斯發(fā)現(xiàn)現(xiàn)在的Apple已經(jīng)完全的拋棄了擬物設(shè)計(jì)，轉(zhuǎn)而投入大熱的扁平化設(shè)計(jì)，他會不會從墳?zāi)估锱莱鰜?，對著喬尼·艾維(Jony Ive)和庫克上演植物大戰(zhàn)僵尸的橋段呢~~^O^

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

so，要弄清這個問題，還是有必要先了解清楚扁平化的由來和它的優(yōu)缺點(diǎn)，看看它是不是符合當(dāng)下產(chǎn)品發(fā)展的要求…….

扁平化的由來

可以肯定的是，現(xiàn)在這些什么app設(shè)計(jì)、網(wǎng)站設(shè)計(jì)的美學(xué)要求，大多都源自傳統(tǒng)的印刷出版物和傳統(tǒng)美學(xué)。要準(zhǔn)確的說出扁平化來自哪里很難。不過筆者找了不少資料，發(fā)現(xiàn)扁平化貌似多半是被這兩個設(shè)計(jì)風(fēng)格所影響。

瑞士風(fēng)格（Swiss Style）

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

瑞士設(shè)計(jì)風(fēng)格講究沿襲形式和功能的完美結(jié)合的理念。光這一點(diǎn)筆者都佩服得五體投地！而且瑞士風(fēng)格并不單單應(yīng)用在平面海報(bào)設(shè)計(jì)上，還包括家具、工業(yè)產(chǎn)品、汽車等設(shè)計(jì)上。

瑞士風(fēng)格注重網(wǎng)格以及無襯線字體的使用，層次分明。在那個年代，瑞士風(fēng)格通常是一張很大的圖片，配上簡潔、極小的字體（上圖所示）。值得一提的是，最近被玩壞的Helvetica字體也是在那個時候生出來的，并一發(fā)不可收拾的被廣泛使用?？傊页Ｅ就是了。

極簡設(shè)計(jì)（Minimalist Design）

圖片來自網(wǎng)絡(luò)

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

另一個對扁平化設(shè)計(jì)有深遠(yuǎn)影響的是極簡設(shè)計(jì)。我想這個風(fēng)格很多設(shè)計(jì)師并不陌生，因?yàn)楣P者發(fā)現(xiàn)只要是設(shè)計(jì)師都喜歡MUJI。而MUJI正是這個風(fēng)格的代表之一。

圖片來自網(wǎng)絡(luò)

所謂極簡就是移除多余的元素，只留下必要的成分。幾何圖形、少數(shù)的元素、明亮的色彩和干凈的線條主導(dǎo)多數(shù)極簡風(fēng)格設(shè)計(jì)。

需要說明的是，極簡主義并不局限于藝術(shù)或設(shè)計(jì)，它是極簡主義者奉行的一種哲學(xué)思想，價值觀以及生活方式–“極簡主義”生活方式。（對，你沒有看錯！這是真的已經(jīng)上升到哲學(xué)領(lǐng)域了~(￣ε ￣) ，這B裝得可以~~）

當(dāng)然，其實(shí)極簡主義本來就是設(shè)計(jì)的一個極端，很多時候極簡主義給人的感覺是性冷淡……太高冷了~格調(diào)有余，但親和力就差了點(diǎn)啊~

Windows Metro

扁平化設(shè)計(jì)真正應(yīng)用到界面設(shè)計(jì)里，是微軟早期的Zune播放器（下圖）?；蛘吆芏嗳硕寄居新犨^這個播放器~~這也不奇怪。因?yàn)檫@個播放器貌似并沒有在大陸發(fā)售，知道的人自然少之又少。

微軟一直都沒有對蘋果停止過斗爭。2006年末，為了和蘋果的iPod競爭，推出了Zune。并提出了Metro的設(shè)計(jì)風(fēng)格。不過，最終這個產(chǎn)品因?yàn)闋I銷問題，掛了┑(￣。。￣)┍ ~

我們姑且不說這個產(chǎn)品成功不成功。筆者當(dāng)時是妥妥的被Zune的界面設(shè)計(jì)所震撼，倔強(qiáng)的認(rèn)定這個設(shè)計(jì)必將影響其他設(shè)計(jì)。

然后iPhone出來后，微軟又坐不住了。2010年這樣，微軟從當(dāng)年Zune設(shè)計(jì)中積累了的經(jīng)驗(yàn)，改良了新版的Windows Phone 7的設(shè)計(jì)，大號字體、明亮的色彩、網(wǎng)格、簡潔和扁平的圖標(biāo)主宰了全部風(fēng)格（當(dāng)然還有流暢的動畫~這個后面談）。

當(dāng)metro風(fēng)格出來后，媒體和設(shè)計(jì)界在當(dāng)時反響是真的火熱。很是被看好的。扁平化設(shè)計(jì)也理所當(dāng)然的被端出了桌面。

Apple 和 iOS 7的轉(zhuǎn)變

圖片來自網(wǎng)絡(luò)

當(dāng)時候媒體討論最多的就是蘋果會不會隨大流放棄擬物化設(shè)計(jì)，筆者當(dāng)時自己也是自己YY了蠻久的。不過最終蘋果也沒能抵抗誘惑，加入了扁平化大軍。2013年iOS7發(fā)布后，蘋果徹底放棄擬物化設(shè)計(jì)。（我一直在想是不是因?yàn)閱檀笊癫辉诘木壒蕕~不然我想扁平化也不會辣么輕松的就征服世界..）

圖片來自網(wǎng)絡(luò)

由于蘋果的產(chǎn)品是個標(biāo)桿（各大廠家的“學(xué)習(xí)”對象●▽● ），用戶也都是相對上流一點(diǎn)的（因?yàn)檎娴暮苜F，當(dāng)時筆者都沒好意思買啊~~(>_<)~~），iOS7的發(fā)布使得扁平化設(shè)計(jì)一夜爆紅。擬物化設(shè)計(jì)幾乎瞬間過時。所以扁平化雖然是先由微軟弄出來，但卻是由蘋果推向主流的。

然后就看到各種軟件和App的設(shè)計(jì)一夜之間都尼瑪變了~~再后來要是設(shè)計(jì)個什么東西不和扁平化扯上邊就尼瑪不好意思拿出來?。ó?dāng)時筆者是妥妥的深有體會?。“?#8230;╮(╯▽╰)╭）

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

扁平化設(shè)計(jì)的優(yōu)點(diǎn)和缺點(diǎn)

想了想，扁平化之所以能夠那么火，也確實(shí)是有諸多原因的。至少它的優(yōu)點(diǎn)是絕對的符合當(dāng)下技術(shù)發(fā)展需要的。

優(yōu)點(diǎn)

響應(yīng)式布局

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

讓用戶更加注意內(nèi)容本身，而不是別的不必要的裝飾

因?yàn)檎f實(shí)話用扁平化方式設(shè)計(jì)出來的作品，并沒有那么多吸引眼球的東西，太簡單（這里主要指界面）。這樣用戶自然而然的更容易去關(guān)注內(nèi)容本身，而忽略了這個是被設(shè)計(jì)過的。（但其實(shí)真的就是被設(shè)計(jì)過的，有句話說得好“最后的設(shè)計(jì)就是沒有設(shè)計(jì)”）

感官上和實(shí)際輕量化，降低設(shè)備硬件要求

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

結(jié)構(gòu)層次扁平化

扁平化設(shè)計(jì)的理念也在影響著交互方式?？梢钥吹皆絹碓蕉喈a(chǎn)品的交互不再像過去那樣那么多層級，而是減少歸納整合起來。一目了然的同時，提升了用戶體驗(yàn)。

缺點(diǎn)：

需要一定的學(xué)習(xí)成本

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

可點(diǎn)擊區(qū)域模糊

很多人（特別是沒經(jīng)常接觸電子設(shè)備的人），第一次看到扁平化設(shè)計(jì)是有種焦慮感的，因?yàn)楹芏鄷r候不知去按哪里……

表現(xiàn)形式單一，同質(zhì)化嚴(yán)重，缺乏個性

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

高冷、缺乏親和力

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

通過上面分析扁平化的優(yōu)缺點(diǎn)，細(xì)心的你其實(shí)不難發(fā)現(xiàn)扁平化的很多缺點(diǎn)都是可以通過一些方法去改善的。其最大的好處還是在于，能夠適應(yīng)技術(shù)的發(fā)展。并且最大限度的呈現(xiàn)內(nèi)容本身，而不是展示無用的裝飾。（因?yàn)樵诋a(chǎn)品設(shè)計(jì)當(dāng)中，設(shè)計(jì)只是為了更好的呈現(xiàn)產(chǎn)品本身而存在的，一旦“設(shè)計(jì)過了”，就妥妥的變成了一種無用的裝飾了。）

圖標(biāo)來自花瓣

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

圖片來自網(wǎng)絡(luò)

運(yùn)用好扁平化設(shè)計(jì)需要哪些技能

排版

由于扁平化設(shè)計(jì)擯棄了很多無用的元素，讓人全部集中在內(nèi)容上面。這個時候?qū)?nèi)容的合理呈現(xiàn)變得尤為的重要。所以排版我認(rèn)為在扁平化設(shè)計(jì)當(dāng)中是核心啊。

配色

了解配色基本原理的都該知道，一個頁面最好不要超過3種以上的顏色。顏色配的好不好，正確與否都是用戶是否愿意停留在界面的關(guān)鍵因素，因?yàn)轭伾珪o人第一個感覺，感覺不好細(xì)節(jié)都懶得看了~

圖片來自花瓣網(wǎng)

字體運(yùn)用

和配色差不多，字體也不能隨意使用，最好都不要超過兩種字體。內(nèi)容絕定用什么字體。舉個栗子：要表現(xiàn)的內(nèi)容是古典的奢侈品，這時候腦子里第一反應(yīng)就該用襯線復(fù)古字體。

圖片來自花瓣網(wǎng)

精致的圖標(biāo)

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

圖片來自花瓣網(wǎng)

有趣的配圖

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

圖片來自花瓣網(wǎng)

適當(dāng)?shù)膭有?/strong>