爲何扁平化設計辣麼火？它會過期麼？

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

筆者依稀記得這個擬物風格的logo一直堅挺的使用了5年，當別的應用都在隨大流紛紛加入扁平化大軍的時候，這個應用卻一直保持着原來的風格，以至於我老是很容易就在手機裏找到這個應用（從另一個角度來講，人家並無把精力成天花在視覺改版上，而是專心在作產品細節，不像某些國內公司一發現數據差了就怪設計，臥槽，尼瑪你不知道你產品有多爛啊~(~￣▽￣)~[] 請原諒筆者又激動了·~）。5年啊！~~絕對的持久！\(▔▽▔)/

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

圖片來自網絡

我們先不討論這個設計的好壞，卻是此次事件讓一衆人再次開始討論起扁平化設計。

圖片來自網絡

而說到扁平化設計，其實筆者第一反應是喬布斯-喬幫主。由於這位神通常的人物是個鍾愛擬物化設計的表明。筆者依稀記得那場關於扁平化和擬物化的口水戰是多麼的激烈~，如今想一想要是喬布斯發現如今的Apple已經徹底的拋棄了擬物設計，轉而投入大熱的扁平化設計，他會不會從墳墓裏爬出來，對着喬尼·艾維(Jony Ive)和庫克上演植物大戰殭屍的橋段呢~~^O^

固然玩笑歸玩笑，無論喬幫主怎麼想，Apple仍是繼微軟後加入了扁平化的大軍。那麼問題來了，扁平化雖然有很多優勢，但至於這麼火麼？~它也會像擬物化同樣在不久的未來迅速被別的更牛逼的風格代替嗎？就好像一個武林盟主在風光不少年後，被個忽然冒出來的小子戰勝了，只好退居幕後。正所謂三十年河東三十年河西嘛~~

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

扁平化的由來

能夠確定的是，如今這些什麼app設計、網站設計的美學要求，大多都源自傳統的印刷出版物和傳統美學。要準確的說出扁平化來自哪裏很難。不過筆者找了很多信息，發現扁平化貌似多半是被這兩個設計風格所影響。

瑞士風格（Swiss Style）

瑞士風格其實也叫作國際主義設計風格，是由包豪斯時期現代主義設計演變而來的。這個風格最先實際上是德國佬弄出來的，但真正發揚光大的倒是瑞士人，因此索性就叫作瑞士風格啦，在20世紀四五十年代這樣發展爲主流。（話說北歐真是個神奇的設計帝國~筆者是炒雞嚮往的，就是天氣不要太冷就行了~）

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

瑞士風格注重網格以及無襯線字體的使用，井井有條。在那個年代，瑞士風格一般是一張很大的圖片，配上簡潔、極小的字體（上圖所示）。值得一提的是，最近被玩壞的Helvetica字體也是在那個時候生出來的，並一發不可收拾的被普遍使用。總之灰常牛B就是了。

極簡設計（Minimalist Design）

圖片來自網絡

（其實我想說，極簡主義不是通常的省油墨啊·~^_^||| ）

另外一個對扁平化設計有深遠影響的是極簡設計。我想這個風格不少設計師並不陌生，由於筆者發現只要是設計師都喜歡MUJI。而MUJI正是這個風格的表明之一。

圖片來自網絡

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

須要說明的是，極簡主義並不侷限於藝術或設計，它是極簡主義者奉行的一種哲學思想，價值觀以及生活方式--「極簡主義」生活方式。（對，你沒有看錯！這是真的已經上升到哲學領域了~(￣ε ￣) ，這B裝得能夠~~）

固然，其實極簡主義原本就是設計的一個極端，不少時候極簡主義給人的感受是性冷淡......過高冷了~格調有餘，但親和力就差了點啊~

扁平化設計真正應用到界面設計裏，是微軟早期的Zune播放器（下圖）。或者不少人都木有聽過這個播放器~~這也不奇怪。由於這個播放器貌似並無在大陸發售，知道的人天然少之又少。

微軟一直都沒有對蘋果中止過鬥爭。2006年底，爲了和蘋果的iPod競爭，推出了Zune。並提出了Metro的設計風格。不過，最終這個產品由於營銷問題，掛了┑(￣。。￣)┍ ~

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

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

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

Apple 和 iOS 7的轉變

圖片來自網絡

當時候媒體討論最多的就是蘋果會不會隨大流放棄擬物化設計，筆者當時本身也是本身YY了蠻久的。不過最終蘋果也沒能抵抗誘惑，加入了扁平化大軍。2013年iOS7發佈後，蘋果完全放棄擬物化設計。（我一直在想是否是由於喬大神不在的緣故~~否則我想扁平化也不會辣麼輕鬆的就征服世界..）

圖片來自網絡

因爲蘋果的產品是個標杆（各大廠家的「學習」對象●▽● ），用戶也都是相對上流一點的（由於真的很貴，當時筆者都沒好意思買啊~~(>_<)~~），iOS7的發佈使得扁平化設計一晚上爆紅。擬物化設計幾乎瞬間過期。因此扁平化雖然是先由微軟弄出來，但倒是由蘋果推向主流的。

而後就看到各類軟件和App的設計一晚上之間都尼瑪變了~~再後來要是設計個什麼東西不和扁平化扯上邊就尼瑪很差意思拿出來！（當時筆者是妥妥的深有體會啊！唉...╮(╯▽╰)╭）

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

扁平化設計的優勢和缺點

想了想，扁平化之因此可以那麼火，也確實是有諸多緣由的。至少它的優勢是絕對的符合當下技術發展須要的。

優勢

• 響應式佈局

因爲如今終端設備愈來愈多，而且什麼奇葩尺寸都有，爲了適應這些屏幕尺寸可以提供使用者優質的閱讀體驗，響應式的佈局設計應運而生。而扁平化設計因爲設計簡單等特色，RD甚至能夠用代碼實現設計效果（由於不少時候並無漸變或是一大張圖）。這樣的狀況下閱讀體驗想很差都難啊。RD看到這些設計圖內心你不知道有多麼的開心和溫暖！~（除非交互設計得很爛哈·~這裏只談扁平化對響應式佈局的好處~）

• 讓用戶更加註意內容自己，而不是別的沒必要要的裝飾

由於說實話用扁平化方式設計出來的做品，並無那麼多吸引眼球的東西，太簡單（這裏主要指界面）。這樣用戶天然而然的更容易去關注內容自己，而忽略了這個是被設計過的。（但其實真的就是被設計過的，有句話說得好「最後的設計就是沒有設計」）

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

用於設計簡單明瞭，以及扁平化設計多以明快而單一的色彩去設計，去除和減小了那些多餘的元素，使得總體界面讓人從感官上以爲特別的輕快。從另一個層面說，因爲設計簡潔，以致於RD有些地方均可以不切圖，而用代碼直接寫出。甚至一些動畫效果也是能夠用代碼寫出。這樣就大大下降對硬件的要求。並且最要緊的是安裝包妥妥的小了好多啊~（其實扁平化風格是代碼仔的最愛才對... -  -）

• 結構層次扁平化

扁平化設計的理念也在影響着交互方式。能夠看到愈來愈多產品的交互再也不像過去那樣那麼多層級，而是減小概括整合起來。一目瞭然的同時，提高了用戶體驗。

缺點：

• 須要必定的學習成本

喬幫主之因此要iPhone走擬物化風格，其實很大緣由在於他對學習成本的極大重視，於是纔會在界面中大量的使用隱喻和模仿。他對界面設計的一個理想是，任何年齡的人，任何經歷的人，均可以在拿到設備後的幾分鐘內輕鬆的掌握它的用法。這也是爲何當年那麼多用戶拿着iPhone後就愛不釋手了·~說個簡單的栗子：我爸歷來沒玩過智能手機，但當他拿着個人ipad時，我都沒怎麼教他，他竟然一下就會了。在這個層面上，扁平化確實有點弱哦。

• 可點擊區域模糊

不少人（特別是沒常常接觸電子設備的人），第一次看到扁平化設計是有種焦慮感的，由於不少時候不知去按哪裏......

• 表現形式單一，同質化嚴重，缺少個性

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

• 高冷、缺少親和力

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

經過上面分析扁平化的優缺點，細心的你其實不難發現扁平化的不少缺點都是能夠經過一些方法去改善的。其最大的好處仍是在於，可以適應技術的發展。而且最大限度的呈現內容自己，而不是展現無用的裝飾。（由於在產品設計當中，設計只是爲了更好的呈現產品自己而存在的，一旦「設計過了」，就妥妥的變成了一種無用的裝飾了。）

所以能夠說扁平化設計是順應時代的產物啊。而事實上發展到今天的扁平化設計確實也在不斷的優化本身~使得本身更加的適應時代的發展。但其實要想真正的運用好扁平化設計，毫不是一件簡單的事情。練過書法的孩子都應該知道一件事：筆畫越少的字越難寫的好，反而是那些筆畫多的字很容易寫好。扁平化設計也是一個道理，它很是能看出來 一個設計師的基本功。

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

1. 排版

因爲扁平化設計擯棄了不少無用的元素，讓人所有集中在內容上面。這個時候對內容的合理呈現變得尤其的重要。因此排版我認爲在扁平化設計當中是核心啊。

2. 配色

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

3. 字體運用

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

4. 精緻的圖標

這裏的精緻包括兩層含義，1.圖標自己的語義 2.設計形式。就是說不管你用線的形式仍是面的形式畫圖標，都得讓人明白你這個圖標是什麼意思。只爲好看不求語義的icon，就是耍流氓~

5. 有趣的配圖

爲了下降扁平化帶給人的距離感，不少時候須要經過有趣而具備親和力的配圖來拉進與用戶間的距離。這樣讓界面和產品有了感情在裏面，容易讓人接受。

6. 適當的動效

扁平化加入動效是如今設計的一個趨勢。爲了讓關鍵操做區域可以提供良好的操做反饋，動效的引入簡直就是神助啊~~因此騷年~感受去學如今流行的Motion Graphic吧~妥妥的對你有幫助~

你會發現這些技能除了最後一項，其他的全是設計基礎。若是你的基本功很差。筆者敢保證你的設計絕對是......如下省略幾萬字。(～￣▽￣)～

以上說了半天，想必也該知道爲何扁平化設計辣麼火了吧~~至於它會否被另外一個新的風格所取代，臣妾也不知道啊！！

可是若是你們對世界現代設計史有了解的話，或許你會有本身的想法。你會發現從英國工藝美術運動開始，一直到如今的現代主義設計。這中間所經歷的風格都是跟隨着科學技術的發展而發展的。

另外還有一個點就是所謂的 「審美疲勞」。當你一直看着簡單的東西，長此以往就會愈來愈煩，你就會愈來愈想要看那些豐富多彩的東西。反之亦然。我想設計也不例外。無論是製做方仍是用戶本身，都會審美疲勞。就算不疲勞，有些產品也須要標新立異，不同凡響，也必然會走向另一個極端了。微軟的metro其實就是~就是爲了和蘋果的風格區分開來。歷史上還有不少藝術運動也是如此。例如「波普」設計運動~等等......

過分解讀設計趨勢這個東西筆者認爲意義不大的。設計的一切都是爲產品服務的，不管是哪一種設計風格，只要設計師NB，都能作出叼叼的東西~。因此風格沒有好壞之說。

不少時候，設計自己最核心的東西一直都沒變，即更好的解決問題，風格什麼的都是爲解決問題而服務的~~