扁平化： 移動互聯網時代的設計新趨勢

毛悅溢

簡介

扁平化設計（Flat Design），簡單來說是平面設計的一種風格——這種風格在當下經常被運用在移動設備應用程序以及網頁當中，除此之外，在更廣范圍的平面設計領域也都可以見到扁平化設計的影子。自2007年1月第一代IPhone發布以來，智能手機、平板電腦等各種移動設備已經融入了人們的日常當中，成為工作、生活和娛樂不可或缺的部分。正是在這種移動設備大規模占據人們生活的環境下，扁平化設計應運而生。

2008年，扁平化設計的概念首先由谷歌公司提出，它意味著最大限度地減少使設計立體的風格元素的運用，包括陰影、漸變和紋理等等，扁平化在設計上更加注重簡單的元素、字體和顏色，其中又特別強調對色彩的運用。與扁平化相對的通常有兩個概念，豐富設計（Rich Design）和擬物化（Skeuomorphism） 。陰影、高光和斜角等在豐富設計中被大量使用，而在擬物化風格中，設計力求展現物體的真實形態。值得注意的是，扁平化和擬物化在原則上并不互相排斥，我們時?？梢栽诒馄交脑O計中看到擬物化的痕跡，只是在如何展現物體的真實形態上他們采取了不同的方法。

扁平化風格在設計領域的風頭日漸興起，這背后的原因可以歸結為兩個。首先，扁平化設計誕生與移動設備的溫床之中，而移動設備受制于電池，有續航焦慮的問題。諸如3D渲染、動畫效果等高性能要求的技術，在移動設備上被限制使用。因此，在技術層面上，移動設備需要一種能極大地降低功耗、延長續航和提高響應速度的設計，而扁平化設計正是能滿足這一需求的風格。此外，隨著互聯網飛速發展，我們進入了一個信息爆炸，信息碎片化的時代。在這樣一個信息過剩的時代中，我們每時每刻接收到信息已經遠超負荷。此外，我們剛在桌面電腦上經歷過一個由復雜而精美的軟件界面和豐富和華麗的網頁組成的時代，各種絢麗特效充斥著視覺，有時候我們注重交互界面的觀感勝過了交互的目的本身。因此，從審美層面來說，我們需要一種簡潔、干凈、舒服的視覺效果來取代過去的過剩的復雜。扁平化設計也是在這種趨勢中成長起來的。它化繁為簡、去偽存真，用最簡單的觀感去突出需要傳遞的內容和信息。設計中使用的簡單元素、字體和色彩也是服務于信息和交互本身，幫助用戶更快地理解使用方法或交互過程，去除認知障礙。

和極簡主義的關系

從對扁平化設計的描述來可以看出，它和極簡主義（Minimalism）存在很強的內在聯系。極簡主義是一種藝術流派，興起于二戰后恢復時期百廢待興的美國。極簡主義以簡潔、實用的氣質出現在人們的視野中，指導重建工作，服務于實業。 我們可以在很多現代流派的建筑、室內設計、物件、裝置等作品中看到符合極簡主義的風格。它們摒棄了復雜的線條、形狀、紋理和圖案，用二維化的表現手法去展現創作者的意圖，用簡單的幾何來傳遞美感。時至今日，極簡主義有了越來越多擁躉，甚至它已經超越了一種藝術流派的范疇，成為一種思想或者生活態度。顯而易見，極簡主義也早已經蔓延到了平面設計的領域。扁平化設計，除了受到上文所提及的技術層面和審美層面兩個需求影響，很大程度上也可以說是源自于極簡主義。扁平化設計的特征，絕大多數都符合極簡主義的描述。

在作者看來，扁平化設計和極簡主義可以說是互為表里的關系。在藝術上，極簡主義希望用最簡潔、直觀的方式去表達，可以讓削弱觀眾理解主旨的障礙、減輕審美疲勞。而在界面上，扁平化同樣以簡單、直接的視覺和交互呈現在用戶眼前，以保證信息的有效傳遞、降低學習成本。簡單來說，極簡主義是指導思想，而扁平化是展現極簡的具體方法論。

主要特征

扁平化設計所要簡化的主要體現在兩個方面。首先自然是視覺上的簡化，通過去除三維效果和過度的細節，減少動畫和特效，并用簡單的幾何形狀和顏色組合來呈現簡單、整潔的畫面。扁平化在追求視覺上的簡化以外，也對交互提出了要求。交互上的簡化，包括減少傳統的瀑布式的列表的使用、放棄復雜的菜單和選項，并且充分利用簡化的視覺元素本身和觸控這一種新的交互形式，給使用者帶來直觀、純粹的體驗。在交互的設計上，同樣需要經過深思熟慮，以符合使用場景以及人的行為習慣和思維模式，從而降低用戶的學習成本，使用起來自然而流暢。

在了解扁平化設計的基本特征之后，我們可以通過分析一些推崇扁平化風格的設計師從他們的工作中總結出來的經驗和原則，來更加深入的進行剖析。

設計師Carrie Cousin提出了一些能讓設計展現扁平化風格的明顯特征。首先是沒有添加額外的效果，尤其是傳統的三維化元素，諸如陰影、浮雕、漸變等等。從圖層的角度來說，扁平化的設計和三維的設計可能是一樣的，但是各個圖層平面在扁平化設計中是不相交也不連接的。如何將各個平面聯系起來，展現成一個統一體依賴于對設計的層次感的體悟，和對元素的排布。第二個特征是使用簡單的元素。我們可以看到現在很多吸引人的并且充滿現代感的網頁，經過觀察，它們僅僅是由幾何圖形以及文字構成，過去常見的諸如精美的背景、復雜的圖案和裝飾性的紋理都在被逐漸淘汰。 其次，由于扁平化僅僅使用簡單的視覺元素，因此它又尤為重視對字體的使用。大部分優雅的手寫體和復古字體，通常都和扁平化的風格相違和。通常會選擇一個簡潔的主要字體，搭配一個次要字體使用。同樣的，顏色對于扁平化設計也是至關重要。扁平化風格中使用的顏色更加的鮮艷，明亮。往常的設計以2-3種顏色做為主色調，但在扁平化設計中，可能6-8種顏色被平均的使用。盡管色調增多，但我們在扁平化設計中一般使用的是大的色塊，因此在局部，或者在一個視覺元素中，往往使用的是一種顏色，或者是同類色。相比于以往的設計，扁平化在顏色的使用上更為豐富，但在顏色的變化和排布上顯得沒有那么復雜。最后一個特征，Carrie稱之為極簡主義設計方式，在設計過程中始終以極簡作為指導思想，盡量使用簡單的元素，降低視覺復雜程度

必須強調的是，簡單的元素、簡化的視覺效果并不意味著簡單的設計。例如大膽的在局部使用幾何和顏色，從而形成視覺上的焦點，引導用戶關注和使用，同時在非重點的部分進行視覺效果的弱化，造成對比和沖擊，讓設計成為一個有機的整體，如何做到這些對設計提出比傳統風格更大的挑戰。

設計師錢嘉文提出了對扁平化設計在特定場景使用的理解，除了和上文中提到的一些重合的地方之外，他也提出了很多獨到的見解。例如扁平化設計在文字的排版上要注重四個原則——親密、對齊、對比和重復。簡單來說就是意思相近內容的親密，同一頁面元素之間的對齊，不同等級元素之間的對比以及相同級別元素的重復。在字體方面，他推薦使用無襯線的字體， 而在形狀/色塊方面，則強調了色塊和內容文字的大小比例的協調關系。作者同樣指出了圖標對于扁平化設計的重要性，好的圖標不僅能提升整體的設計感，也能更加輕松的將信息傳達給觀眾。提煉圖標至關重要，而這也是一項需要付出很多的時間和精力的任務。

發展歷程

在對扁平化的簡介中提到，扁平化設計的出現和風靡依托于越來越普及的智能移動設備，因此我們可以通過觀察和分析移動設備的用戶界面的歷史來獲悉扁平化風格的發展和演變。

微軟公司在2010年的下半部分發布了Windows Phone 7， 它是該公司第一款專門針對手機的操作系統。這個系統的用戶界面率先使用了簡約的、充滿現代感的二維化設計，也正是在這一代系統的發布中，微軟向顧客介紹了Metro這一標志性的設計語言。Metro意味著都市，是現代化的象征，可以看作是復古（Retro）風格的對立面。

微軟在這款界面的設計中，采用了方形作為的基本視覺元素和交互的單位。方形的色塊不帶有任何陰影、漸變、高光之類的三維效果，在顏色上也選擇了單色作為主色調。此外，方形色塊也可以被同樣尺寸的圖片所取代。這套設計可以說是扁平化的入門之作，色塊的交互形式在當時為手機用戶帶來了新鮮感和便利，但是它也有很多不足之處。例如在圖標的設計上雖符合簡約的標準，但是卻顯得有些單調。在圖標以及文字/數字的排版布局上也缺乏深思熟慮，雖然直觀但是比較粗糙。此外，界面中用了一些圖片代替色塊，很容易在更換圖片后顯得畫面雜亂。

到了2012年第四季度，微軟發布了個人電腦的新一代操作系統Windows8，同時將Metro更名為Modern UI。這個系統的用戶界面基本上采用了和Windows Phone 7一樣的以大面積色塊做為主體的設計，這體現了觸控屏幕的發展和平板電腦的興起。Windows 8在界面上有了更多的變化，例如不再采用單一的色彩作為基調，而是讓色塊和色塊之間有豐富的顏色。此外圖標的設計更為精細，很多都能體現出微軟自身的特色。在字體的選用和文字的布局上有了長足的進步，不再和它的前身一樣呆板。

隨著微軟在界面上不斷推動扁平化設計往前發展，它的競爭對手也開始在同樣的設計風格上發力。在2013年9月，蘋果公司發布了第七代移動設備操作系統iOS 7。在蘋果的著名設計高級副總裁Jonathan Ive的主導下，本代的iOS進行了徹底的改頭換面。

在這一代iOS中，擬物化的元素，例如立體的雜志架，日歷上的羽毛和游戲中心的毛氈基本上都被拋棄，取而代之的是一套重新設計的基于扁平化的按鈕和界面。大部分的按鈕都是以清爽的白色線條或者最簡單的色塊來表現出自己的特征，我們可以看到蘋果在圖標的設計上，就有比微軟深的多的功底。值得注意的是，在圖標的底色上蘋果仍舊采用了一定的漸變色，嚴格來說屬于偽扁平化，同時圖標和背景之間的層次感比較強烈，讓用戶覺得每一個按鈕都非常的有機。在文字上，蘋果可以說和微軟有異曲同工之妙。

到2014年底，谷歌公司發布了第五代安卓操作系統（Android 5.0 Lollipop）。在過去的一段時間里，谷歌圍繞著Google Now的界面和交互設計拓展出一套極具特色和說服力的設計語言——Material Design，而Android5.0是第一款帶有其血統的操作系統。

這一代的安卓同樣重新設計了完整的一系列圖標，而與iOS不同，它并沒有采用固定形狀的圖標，而是讓所有圖標保留自身的特色，因此顯得更加生動和直觀，再經過精心的搭配和排布，整體觀感也十分和諧。仔細觀察可以看出，圖標保留了一定的陰影和少量的高光，因此也同樣屬于偽扁平范疇。相比于iOS7那種清澈剔透的毛玻璃質感，Android5.0更加著重用配色來展現一種簡約和現代的氣質。這款系統的另外一個核心特色是它的響應式的動畫和轉換效果。

到現在，時間過去接近兩年，這幾家公司的系統也經歷了一到兩個大版本的變遷，在用戶界面上也發生了諸多革新換代。

隨著生產力的進步，我們在物質上漸漸地豐富，而隨著互聯網的高速發展，我們也進入了一個信息爆炸的時代。與內容上的過剩相對的，是人們在形式上和設計上，開始追求由繁入簡。正如越來越多的人在生活上崇尚極簡主義，扁平化設計也在平面設計領域得到了很大的發展。扁平化的設計風格拋棄多余的細節，通過二維化、幾何化、色塊化等手段對事物的進行視覺和交互上的提煉。通過扁平化設計，我們可以更快速的表現設計師的意圖，也能更精準的傳達內容。

（作者單位：浙江理工大學）