起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識為什么扁平化設(shè)計辣么火？它會過時么？
很多時候，設(shè)計本身最核心的東西一直都沒變，即更好的解決問題，風(fēng)格什么的都是為解決問題而服務(wù)的
5月11日，F(xiàn)acebook?旗下的圖片社交應(yīng)用 Instagram 更換了新的 LOGO，放棄了復(fù)古相機(jī)的樣式，轉(zhuǎn)而變成了一個典型的扁平化風(fēng)格的設(shè)計。
筆者依稀記得這個擬物風(fēng)格的logo一直堅挺的使用了5年，當(dāng)別的應(yīng)用都在隨大流紛紛加入扁平化大軍的時候，這個應(yīng)用卻一直保持著原來的風(fēng)格，以致于我總是很容易就在手機(jī)里找到這個應(yīng)用（從另外一個角度來說，人家并沒有把精力整天花在視覺改版上，而是專心在做產(chǎn)品細(xì)節(jié)，不像某些國內(nèi)公司一發(fā)現(xiàn)數(shù)據(jù)差了就怪設(shè)計，臥槽，尼瑪你不知道你產(chǎn)品有多爛啊~(~￣▽￣)~[] 請原諒筆者又激動了·~）。5年??！~~絕對的持久！\(▔▽▔)/
But，當(dāng)人們習(xí)慣一樣?xùn)|西后，然后這個東西突然的來了個180°的大翻身的時候~~帶來的妥妥就是一片罵聲和各種吶喊啊~~有網(wǎng)友甚至P出了一張Instagram版的吶喊·~如下圖，(─.─|||| 。哈哈哈……高手在民間啊·~
圖片來自網(wǎng)絡(luò)
咱們先不討論這個設(shè)計的好壞，倒是這次事件讓一眾人再次開始討論起扁平化設(shè)計。
圖片來自網(wǎng)絡(luò)
而說到扁平化設(shè)計，其實筆者第一反應(yīng)是喬布斯-喬幫主。因為這位神一般的人物是個鐘愛擬物化設(shè)計的代表。筆者依稀記得那場關(guān)于扁平化和擬物化的口水戰(zhàn)是多么的激烈~，現(xiàn)在想想要是喬布斯發(fā)現(xiàn)現(xiàn)在的Apple已經(jīng)完全的拋棄了擬物設(shè)計，轉(zhuǎn)而投入大熱的扁平化設(shè)計，他會不會從墳?zāi)估锱莱鰜?，對著喬尼·艾維(Jony Ive)和庫克上演植物大戰(zhàn)僵尸的橋段呢~~^O^
當(dāng)然玩笑歸玩笑，不管喬幫主怎么想，Apple還是繼微軟后加入了扁平化的大軍。那么問題來了，扁平化雖然有不少優(yōu)點，但至于這么火么？~它也會像擬物化一樣在不久的將來迅速被別的更牛逼的風(fēng)格代替嗎？就好像一個武林盟主在風(fēng)光很多年后，被個突然冒出來的小子打敗了，只好退居幕后。正所謂三十年河?xùn)|三十年河西嘛~~
so，要弄清這個問題，還是有必要先了解清楚扁平化的由來和它的優(yōu)缺點，看看它是不是符合當(dāng)下產(chǎn)品發(fā)展的要求…….
扁平化的由來
可以肯定的是，現(xiàn)在這些什么app設(shè)計、網(wǎng)站設(shè)計的美學(xué)要求，大多都源自傳統(tǒng)的印刷出版物和傳統(tǒng)美學(xué)。要準(zhǔn)確的說出扁平化來自哪里很難。不過筆者找了不少資料，發(fā)現(xiàn)扁平化貌似多半是被這兩個設(shè)計風(fēng)格所影響。
瑞士風(fēng)格（Swiss Style）
瑞士風(fēng)格其實也叫做國際主義設(shè)計風(fēng)格，是由包豪斯時期現(xiàn)代主義設(shè)計演變而來的。這個風(fēng)格最早其實是德國佬弄出來的，但真正發(fā)揚(yáng)光大的卻是瑞士人，所以索性就叫做瑞士風(fēng)格啦，在20世紀(jì)四五十年代這樣發(fā)展為主流。（話說北歐真是個神奇的設(shè)計帝國~筆者是炒雞向往的，就是天氣不要太冷就好了~）
瑞士設(shè)計風(fēng)格講究沿襲形式和功能的完美結(jié)合的理念。光這一點筆者都佩服得五體投地！而且瑞士風(fēng)格并不單單應(yīng)用在平面海報設(shè)計上，還包括家具、工業(yè)產(chǎn)品、汽車等設(shè)計上。
瑞士風(fēng)格注重網(wǎng)格以及無襯線字體的使用，層次分明。在那個年代，瑞士風(fēng)格通常是一張很大的圖片，配上簡潔、極小的字體（上圖所示）。值得一提的是，最近被玩壞的Helvetica字體也是在那個時候生出來的，并一發(fā)不可收拾的被廣泛使用?？傊页Ｅ就是了。
極簡設(shè)計（Minimalist Design）
圖片來自網(wǎng)絡(luò)
（其實我想說，極簡主義不是一般的省油墨啊·~^_^||| ）
另一個對扁平化設(shè)計有深遠(yuǎn)影響的是極簡設(shè)計。我想這個風(fēng)格很多設(shè)計師并不陌生，因為筆者發(fā)現(xiàn)只要是設(shè)計師都喜歡MUJI。而MUJI正是這個風(fēng)格的代表之一。
圖片來自網(wǎng)絡(luò)
所謂極簡就是移除多余的元素，只留下必要的成分。幾何圖形、少數(shù)的元素、明亮的色彩和干凈的線條主導(dǎo)多數(shù)極簡風(fēng)格設(shè)計。
需要說明的是，極簡主義并不局限于藝術(shù)或設(shè)計，它是極簡主義者奉行的一種哲學(xué)思想，價值觀以及生活方式–“極簡主義”生活方式。（對，你沒有看錯！這是真的已經(jīng)上升到哲學(xué)領(lǐng)域了~(￣ε ￣) ，這B裝得可以~~）
當(dāng)然，其實極簡主義本來就是設(shè)計的一個極端，很多時候極簡主義給人的感覺是性冷淡……太高冷了~格調(diào)有余，但親和力就差了點啊~
Windows Metro
扁平化設(shè)計真正應(yīng)用到界面設(shè)計里，是微軟早期的Zune播放器（下圖）?；蛘吆芏嗳硕寄居新犨^這個播放器~~這也不奇怪。因為這個播放器貌似并沒有在大陸發(fā)售，知道的人自然少之又少。
微軟一直都沒有對蘋果停止過斗爭。2006年末，為了和蘋果的iPod競爭，推出了Zune。并提出了Metro的設(shè)計風(fēng)格。不過，最終這個產(chǎn)品因為營銷問題，掛了┑(￣。。￣)┍ ~
我們姑且不說這個產(chǎn)品成功不成功。筆者當(dāng)時是妥妥的被Zune的界面設(shè)計所震撼，倔強(qiáng)的認(rèn)定這個設(shè)計必將影響其他設(shè)計。
然后iPhone出來后，微軟又坐不住了。2010年這樣，微軟從當(dāng)年Zune設(shè)計中積累了的經(jīng)驗，改良了新版的Windows Phone 7的設(shè)計，大號字體、明亮的色彩、網(wǎng)格、簡潔和扁平的圖標(biāo)主宰了全部風(fēng)格（當(dāng)然還有流暢的動畫~這個后面談）。
當(dāng)metro風(fēng)格出來后，媒體和設(shè)計界在當(dāng)時反響是真的火熱。很是被看好的。扁平化設(shè)計也理所當(dāng)然的被端出了桌面。
Apple 和 iOS 7的轉(zhuǎn)變
圖片來自網(wǎng)絡(luò)
當(dāng)時候媒體討論最多的就是蘋果會不會隨大流放棄擬物化設(shè)計，筆者當(dāng)時自己也是自己YY了蠻久的。不過最終蘋果也沒能抵抗誘惑，加入了扁平化大軍。2013年iOS7發(fā)布后，蘋果徹底放棄擬物化設(shè)計。（我一直在想是不是因為喬大神不在的緣故~~不然我想扁平化也不會辣么輕松的就征服世界..）
圖片來自網(wǎng)絡(luò)
由于蘋果的產(chǎn)品是個標(biāo)桿（各大廠家的“學(xué)習(xí)”對象●▽● ），用戶也都是相對上流一點的（因為真的很貴，當(dāng)時筆者都沒好意思買啊~~(>_<)~~），iOS7的發(fā)布使得扁平化設(shè)計一夜爆紅。擬物化設(shè)計幾乎瞬間過時。所以扁平化雖然是先由微軟弄出來，但卻是由蘋果推向主流的。
然后就看到各種軟件和App的設(shè)計一夜之間都尼瑪變了~~再后來要是設(shè)計個什么東西不和扁平化扯上邊就尼瑪不好意思拿出來?。ó?dāng)時筆者是妥妥的深有體會??！唉…╮(╯▽╰)╭）
那些習(xí)慣了畫擬物風(fēng)格的設(shè)計師，頓時尼瑪就傻了眼。原來畫一個icon需要好幾小時，現(xiàn)在一個新手一上來花個十多分鐘就畫完了（先不要在意畫得好不好）~~那種失落感，我也不知正在看文章的你懂不懂~~╮(╯▽╰)╭ ?那種感覺就如下面這張gif一樣，不好意思。Instagram表示又躺槍了·~
扁平化設(shè)計的優(yōu)點和缺點
想了想，扁平化之所以能夠那么火，也確實是有諸多原因的。至少它的優(yōu)點是絕對的符合當(dāng)下技術(shù)發(fā)展需要的。
優(yōu)點
響應(yīng)式布局
由于現(xiàn)在終端設(shè)備越來越多，并且什么奇葩尺寸都有，為了適應(yīng)這些屏幕尺寸能夠提供使用者優(yōu)質(zhì)的閱讀體驗，響應(yīng)式的布局設(shè)計應(yīng)運(yùn)而生。而扁平化設(shè)計由于設(shè)計簡單等特點，RD甚至可以用代碼實現(xiàn)設(shè)計效果（因為很多時候并沒有漸變或是一大張圖）。這樣的情況下閱讀體驗想不好都難啊。RD看到這些設(shè)計圖心里你不知道有多么的開心和溫暖！~（除非交互設(shè)計得很爛哈·~這里只談扁平化對響應(yīng)式布局的好處~）
讓用戶更加注意內(nèi)容本身，而不是別的不必要的裝飾
因為說實話用扁平化方式設(shè)計出來的作品，并沒有那么多吸引眼球的東西，太簡單（這里主要指界面）。這樣用戶自然而然的更容易去關(guān)注內(nèi)容本身，而忽略了這個是被設(shè)計過的。（但其實真的就是被設(shè)計過的，有句話說得好“最后的設(shè)計就是沒有設(shè)計”）
感官上和實際輕量化，降低設(shè)備硬件要求
用于設(shè)計簡單明了，以及扁平化設(shè)計多以明快而單一的色彩去設(shè)計，去除和減少了那些多余的元素，使得整體界面讓人從感官上覺得特別的輕快。從另外一個層面說，由于設(shè)計簡潔，以至于RD有些地方都可以不切圖，而用代碼直接寫出。甚至一些動畫效果也是可以用代碼寫出。這樣就大大降低對硬件的要求。而且最要緊的是安裝包妥妥的小了好多啊~（其實扁平化風(fēng)格是代碼仔的最愛才對… – ?-）
結(jié)構(gòu)層次扁平化
扁平化設(shè)計的理念也在影響著交互方式?？梢钥吹皆絹碓蕉喈a(chǎn)品的交互不再像過去那樣那么多層級，而是減少歸納整合起來。一目了然的同時，提升了用戶體驗。
缺點：
需要一定的學(xué)習(xí)成本
喬幫主之所以要iPhone走擬物化風(fēng)格，其實很大原因在于他對學(xué)習(xí)成本的極大重視，因而才會在界面中大量的使用隱喻和模仿。他對界面設(shè)計的一個理想是，任何年齡的人，任何經(jīng)歷的人，都可以在拿到設(shè)備后的幾分鐘內(nèi)輕松的掌握它的用法。這也是為什么當(dāng)年那么多用戶拿著iPhone后就愛不釋手了·~說個簡單的栗子：我爸從來沒玩過智能手機(jī)，但當(dāng)他拿著我的ipad時，我都沒怎么教他，他居然一下就會了。在這個層面上，扁平化確實有點弱哦。
可點擊區(qū)域模糊
很多人（特別是沒經(jīng)常接觸電子設(shè)備的人），第一次看到扁平化設(shè)計是有種焦慮感的，因為很多時候不知去按哪里……
表現(xiàn)形式單一，同質(zhì)化嚴(yán)重，缺乏個性
很多時候，扁平化設(shè)計在界面和網(wǎng)頁設(shè)計中的表現(xiàn)形式少得確實有點可憐。如果去掉這個app的logo，有時候還真是不好區(qū)分，尤其是在現(xiàn)在這個你抄我我抄你的時代，你我的產(chǎn)品是辣么辣么的相近~( ˇ?ˇ )….何為個性可言啊~
高冷、缺乏親和力
扁平化設(shè)計大都用的是精簡或抽象后得到元素，而且甚至有些網(wǎng)站的設(shè)計就是同一個顏色一大片，然后敲幾個字在中間。臥槽，確實夠簡潔，高大上，B格大大的有。但這種風(fēng)格看多了，就會覺得無內(nèi)容和空洞，甚至有些性冷淡。
通過上面分析扁平化的優(yōu)缺點，細(xì)心的你其實不難發(fā)現(xiàn)扁平化的很多缺點都是可以通過一些方法去改善的。其最大的好處還是在于，能夠適應(yīng)技術(shù)的發(fā)展。并且最大限度的呈現(xiàn)內(nèi)容本身，而不是展示無用的裝飾。（因為在產(chǎn)品設(shè)計當(dāng)中，設(shè)計只是為了更好的呈現(xiàn)產(chǎn)品本身而存在的，一旦“設(shè)計過了”，就妥妥的變成了一種無用的裝飾了。）
圖標(biāo)來自花瓣
因此可以說扁平化設(shè)計是順應(yīng)時代的產(chǎn)物啊。而事實上發(fā)展到今天的扁平化設(shè)計確實也在不斷的優(yōu)化自己~使得自己更加的適應(yīng)時代的發(fā)展。但其實要想真正的運(yùn)用好扁平化設(shè)計，絕不是一件簡單的事情。練過書法的孩子都應(yīng)該知道一件事：筆畫越少的字越難寫的好，反而是那些筆畫多的字很容易寫好。扁平化設(shè)計也是一個道理，它非常的考驗一個設(shè)計師的基本功。
圖片來自網(wǎng)絡(luò)
運(yùn)用好扁平化設(shè)計需要哪些技能
排版
由于扁平化設(shè)計擯棄了很多無用的元素，讓人全部集中在內(nèi)容上面。這個時候?qū)?nèi)容的合理呈現(xiàn)變得尤為的重要。所以排版我認(rèn)為在扁平化設(shè)計當(dāng)中是核心啊。
配色
了解配色基本原理的都該知道，一個頁面最好不要超過3種以上的顏色。顏色配的好不好，正確與否都是用戶是否愿意停留在界面的關(guān)鍵因素，因為顏色會給人第一個感覺，感覺不好細(xì)節(jié)都懶得看了~
圖片來自花瓣網(wǎng)
字體運(yùn)用
和配色差不多，字體也不能隨意使用，最好都不要超過兩種字體。內(nèi)容絕定用什么字體。舉個栗子：要表現(xiàn)的內(nèi)容是古典的奢侈品，這時候腦子里第一反應(yīng)就該用襯線復(fù)古字體。
圖片來自花瓣網(wǎng)
精致的圖標(biāo)
這里的精致包括兩層含義，1.圖標(biāo)本身的語義 2.設(shè)計形式。就是說無論你用線的形式還是面的形式畫圖標(biāo)，都得讓人明白你這個圖標(biāo)是什么意思。只為好看不求語義的icon，就是耍流氓~
圖片來自花瓣網(wǎng)
有趣的配圖
為了降低扁平化帶給人的距離感，很多時候需要通過有趣而具有親和力的配圖來拉進(jìn)與用戶間的距離。這樣讓界面和產(chǎn)品有了感情在里面，容易讓人接受。
圖片來自花瓣網(wǎng)
適當(dāng)?shù)膭有?/strong>
扁平化加入動效是現(xiàn)在設(shè)計的一個趨勢。為了讓關(guān)鍵操作區(qū)域能夠提供良好的操作反饋，動效的引入簡直就是神助啊~~所以騷年~感覺去學(xué)現(xiàn)在流行的Motion Graphic吧~妥妥的對你有幫助~
圖片來自google
你會發(fā)現(xiàn)這些技能除了最后一項，其余的全是設(shè)計基礎(chǔ)。如果你的基本功不好。筆者敢保證你的設(shè)計絕對是……以下省略幾萬字。(～￣▽￣)～
以上說了半天，想必也該知道為什么扁平化設(shè)計辣么火了吧~~至于它會否被另一個新的風(fēng)格所取代，臣妾也不知道啊??！
但是如果大家對世界現(xiàn)代設(shè)計史有了解的話，或許你會有自己的答案。你會發(fā)現(xiàn)從英國工藝美術(shù)運(yùn)動開始，一直到現(xiàn)在的現(xiàn)代主義設(shè)計。這中間所經(jīng)歷的風(fēng)格都是跟隨著科學(xué)技術(shù)的發(fā)展而發(fā)展的。
圖片來自波普藝術(shù)家Craig&Karl
另外還有一個點就是所謂的 “審美疲勞”。當(dāng)你一直看著簡單的東西，久而久之就會越來越煩，你就會越來越想要看那些豐富多彩的東西。反之亦然。我想設(shè)計也不例外。不管是制作方還是用戶自己，都會審美疲勞。就算不疲勞，有些產(chǎn)品也需要標(biāo)新立異，與眾不同，也必然會走向另外一個極端了。微軟的metro其實就是~就是為了和蘋果的風(fēng)格區(qū)分開來。歷史上還有很多藝術(shù)運(yùn)動也是如此。例如“波普”設(shè)計運(yùn)動~等等……
過度解讀設(shè)計趨勢這個東西筆者認(rèn)為意義不大的。設(shè)計的一切都是為產(chǎn)品服務(wù)的，無論是哪種設(shè)計風(fēng)格，只要設(shè)計師NB，都能做出叼叼的東西~。所以風(fēng)格沒有好壞之說。
很多時候，設(shè)計本身最核心的東西一直都沒變，即更好的解決問題，風(fēng)格什么的都是為解決問題而服務(wù)的~~
作者：折騰先生
來源：公眾號：折騰先生
版權(quán)：人人都是產(chǎn)品經(jīng)理遵循行業(yè)規(guī)范，任何轉(zhuǎn)載的稿件都會明確標(biāo)注作者和來源，若標(biāo)注有誤，請聯(lián)系主編QQ：419297645
寫的很用心，受用
瑞士是中歐吧
體驗不錯
都是跟隨著科學(xué)技術(shù)的發(fā)展而發(fā)展的