數字媒體中的扁平化版式＊

陳巖

河南農業大學，鄭州 450002

曾經一度追求形式擬物化風格的版面編排，在2010年微軟視窗界面中被打破。2010年微軟視窗界面，率先推出了沒有任何裝飾、形式極其簡單、摒棄質感和陰影的扁平化風格的設計。這種風格，表現在數字媒體界面中，就是運用了較大的字體、單純的色彩、光滑的表面和極簡的抽象元素，從而取消了以往復雜、冗繁的形式，也曾一度換來了眾人的嘲笑，認為沒有任何設計感，過于單一化，缺乏立體造型的變化。

2011年，當安卓軟件系統（見圖1）運用扁平化風格的設計時，人們又一次將其認為不過是與蘋果ios軟件（見圖2）的競爭而改走的另一條道路。

圖1 安卓界面版式設計①

圖2 蘋果界面版式設計①

但是，此時扁平化風格的設計特點，已經逐漸開始被人們所接受，一些數字媒體軟件廠商，將軟件界面設計的視界，也轉換成了扁平化風格。2013年，蘋果公司開啟了一個扁平化的時代，作為世界消費軟件的巨人，蘋果公司第一次將扁平化風格發展成為了設計的潮流，扁平化的設計真正進入到人們的視野當中，也逐漸被人們所廣泛接受和使用。

一、扁平化風格的理念

隨著我們生活中的數字產品逐漸增多，人們對于界面的要求也在不斷提高，界面的編排設計的好壞，直接影響著用戶的使用心理。扁平化設計作為一種新的風格，與目前存在的擬物化設計形成了鮮明的比對。扁平化設計秉承K.Ⅰ.S.S簡單哲學原則，即設計應該是簡單的（keep it simple）。它為用戶提供了一個全新的體驗模式，用最簡潔的視覺化語言傳遞有效的信息，以求消除各種認知性障礙。

扁平化設計相對于過度設計來說，是人們重新思考后的進步，是對華而不實設計的一次批判。以往網頁上眾多花里胡哨的界面，讓人們看得眼花繚亂。設計者為了吸引更多訪問者的注意，運用各種動畫和插圖，甚至運用仿真陰影，來形成更多的噱頭，這些其實都降低了頁面的可讀性。而扁平化設計雖然簡單，但是觀看起來更加直觀、方便，可以輕松掌握數字媒體界面中的信息內容，因此，也越來越受到用戶的歡迎。

二、扁平化風格與擬物化風格之比較

扁平化風格與擬物化風格，是兩個互相關聯的設計風格。下面以扁平化風格版式設計（見圖3）和擬物化風格版式設計（見圖4）之比較，來具體予以闡述。扁平化風格，是使用二維的設計方法和平面化的設計元素，體現出極簡主義的特征。它不會出現諸如倒角、投影或者漸變等諸多視覺表現效果，看上去更加直白，更加干凈，且具有鮮明的色彩，清晰的邊緣，開放的空間，不存在任何過度設計以外的東西。扁平化的網頁看上去更加單純，在外觀和元素編排上，它具有組織良好的層次感，所以對于用戶來說，扁平化設計更易于交互體驗。

圖3 扁平化風格版式設計②

圖4 擬物化風格版式設計②

而擬物化風格，則是表現物品立體感和質感的一種手法，它與扁平化風格形成鮮明的對比。擬物化風格在數字媒體中強調光影、肌理、材質和層次關系，模擬物體的真實性，力求達到視覺上完美的效果，有時偶爾也會出現夸張、變形的表現形式，使人清晰明了地認識到圖形所傳遞的各種信息，有助于人機交互的正確操作。擬物化的認知成本相對較低，通過不同按鍵控制后臺功能，使用戶形成一種持續的操作習慣，有助于提高人們對其運用的熟練程度，在體驗過程中達到高度辨識，產生持續作業的特點。

扁平化風格是在擬物化風格的基礎上發展起來的，是人們長期對擬物化風格存在的一種反思。扁平化風格的設計，打破了擬物化風格一統天下的時代。扁平化風格以簡潔的設計特點，搭配鮮明的網格、色彩、文字，讓長久使用擬物化風格的用戶眼前一亮，進而使其產生煥然一新的感覺。

扁平化風格更加突出主題，減少了各種繁雜的視覺效果，使用戶更加專注于內容而不是風格形式。其在編排的過程中，只需要預先安排好版式結構框架、網格布局、色彩環境，就可以輕松地設計好整個數字媒體的頁面效果，同時可以產生不同頁面之間的高度統一性[1]。

然而，作為擬物化風格和扁平化風格，也都存在著各自的缺點。擬物化風格在發展的過程中，更多地專注于顯現操作界面的華麗效果，而減弱了數字媒體功能上的真實操作，各種界面的表現華而不實。因此，在擬物化風格發展的過程中，應當加強功能體驗，通過表面介質真正實現信息功能的正確傳達。扁平化風格雖然簡潔、明晰，但是在運用不當之時，也會給人留下冰冷、呆板的印象，傳遞的感情內容也不夠豐富。因此，在設計過程中，扁平化風格需要注意到用戶的使用心理和產品之間的關系，充分體現人性化特點，做到簡約而不簡單，努力滿足使用者的心理訴求，運用清晰的層次結構和布局，來幫助用戶理解數字產品的真正功能，最好地發揮數字產品的作用。

相對于擬物化風格來說，扁平化風格的版式優勢，首先就在于其能夠更加簡單地將所需要傳遞的信息，通過更少的語言表達出來。在當今信息時代，傳遞是需要各種載體作為支撐的。界面版式表達，已經成為數字媒體傳達信息最為有效的視覺化語言，如同人與人之間交流一樣，扁平化風格以省略的、簡短的、清晰的內容形式，將設計作為手段，從復雜過度為簡單，從而達到了更為直接地將信息事物的本質展現出來，使版面能夠以更少的語言、更簡單的形式，表達最為需要的信息內容。其次，相對于擬物化風格來說，扁平化風格的設計成本更為低廉，它無需對造型、色彩、質感進行深入地刻畫，同時能夠以最低的成本，將不同媒體平臺予以整合。

三、扁平化版式在數字媒體中的運用

由于科技的快速發展，電子產品不斷涌現出新的功能，數字媒體成為人們生活中必不可少的物件。例如，網絡、手機、平板電腦、電子書籍，此類種種，把我們都包圍了。這些電子產品中的版式界面，其設計就顯得尤為重要了。因為優秀的版式，可以快速地引導用戶正確獲得所要的信息，減少因辨識錯誤而產生的各種問題。扁平化的版式設計，以簡潔的編排方式，清晰的形態視覺和純粹的色彩感受，給用戶帶來了全新的體驗。

1.編排的價值

扁平化風格的編排方式，來自于瑞士設計風格，其注重網格以及無襯線字體的使用，層次分明。瑞士風格通常運用較大尺寸的圖片和極簡的文字，來傳達精準的功能，成為二戰之后國際流行的設計風格，它消除了事物多余的元素，只保留必要的部分，以幾何化的圖形，明亮的色彩和干凈的線條，作為設計的要點，它是簡約設計的代表。

優秀的界面編排，不但可以突出自身的個性，而且使用戶的操作也會變得更加簡便、舒適。扁平化風格排版的目的，在于幫助用戶理解設計，運用網格的版面布局，減少操作過程中的反復性，提升識別性，并且在網格中將邊框剔除，用二維的色塊大膽的對頁面進行分割，色塊上使用統一的文字來說明內容信息，每一個圖標又可以自己獨立存在，在一個并列的軸向上通過操作連接更深層次的信息，增強穩定感。

在編排中，扁平化風格有時會運用大量空白，這取決于元素的安排，把元素適當予以組合，可以讓版面看起來更為整齊，若元素散布在版面各處，把空白割裂過多，看起來就會顯得凌亂。而圓形在網格系統中最為自由，可以不受格線的限制自由移動、增加，補強視覺效果。這類幾何圖形在扁平化風格版面系統上被大量使用，為人們提供完整的視覺表征，以最直接形象的視覺語言，帶給用戶舒適的體驗[2]。

經濟的視覺效益，則來自于比例和輪廓等基本線條的直接展現，這類美感也是透過理性的網格使用達成的。因此，網格系統可以更方便地呈現版面上各元素之間的關系。2006年，微軟為了打破傳統，率先推出了Metro的扁平化設計風格（見圖5），這種風格突出大號字的圖片及小寫字母菜單。以Zune軟件為主要開發對象的扁平化設計界面風格（見圖6），與傳統的Windows的界面風格有很大的不同。2010年微軟推出Windows 7系統，在 Zune軟件界面設計的基礎上，改良了諸多操作系統界面的編排，大號字體、明亮色彩、規則的網格形狀、簡潔的主題和扁平的圖標，主宰了全部內容，給用戶帶來了全新的視覺感受。由此，扁平化風格開始流行，同時運用到了諸多數字媒體的界面編排之中。蘋果在2013年，也放棄了使用多年的擬物化風格的設計，轉向了扁平化風格的設計。由此，擬物化風格的版式設計，幾乎在瞬間過時，扁平化風格逐漸被人們所熟悉和接受。

圖5 WINDOWS的Metro扁平化設計[3]

圖6 Zune軟件的扁平化設計[4]

2.文字的表達

在扁平化風格的版式中，文字的安排是由網格系統來決定的。字體本身，對視覺印象與使用影響都非常大，字體的選擇，不僅要體現扁平化風格的特點，還要依據版面的整體要素，形成一定的統一。例如，蘋果公司ios系統中，默認的Helvetica字體（見圖7），是大家較為熟知的扁平化風格文字，其沒有任何的裝飾，用單純線條來表達英文字母。微軟公司在軟件中使用的Segoe UⅠ字體（見圖8），也是一款西文無襯線體，和Tahoma字體一樣（見圖9），是一款等寬字體。這些英文字體，都很好地體現出了扁平化美學的簡約風格，雖然缺少變化，但是在視覺上，其給用戶帶來了清晰明了的感受。

圖7 Helvetica字體設計③

圖8 Segoe UI字體設計④

圖9 Tahoma字體設計⑤

而在中文字體中，由于還沒有發展出較好的對應文字，因此在使用的時候具有一定的困難。從理論意義上來講，合理的空間布局與黑白平衡，可以造就美觀的版面效果。但是，中文字體本身就比較平衡，豐富的線條構成了象形的“圖畫”。繁雜的中文筆畫，與英文字母本體也不盡相同，在扁平化風格編排中，通常我們僅在版式上盡可能地使用較少字體，通過對文字大小、粗細的改變，來幫助用戶認識元素的指定功能，從而形成一定的層次關系，同時以文字的顏色與圖形的色彩產生對比，來提升內容的可讀性[5]。

3.色彩的基調

色彩對于扁平化版式來說尤為重要，鮮亮、明快的顏色，以其獨特的視覺顯示，吸引著人們的眼球。以往在一些網頁或數字媒體中，色彩大多控制在3～5種常規色，而在扁平化版式編排上則應用6～8種或更多的色彩作為基礎色（見圖10）。這種色彩更加單純，色塊上沒有任何變化，主次顏色多選擇橙色、綠色和紫色等大眾化色系，同時明暗程度也都較為接近，在一個色階上運用。在版式編排的色彩運用中，三原色（紅、黃、藍）很少出現在媒體界面當中的，扁平色彩常以純色、同類色或對比色最為主要樣式，設計師通過調整色彩之間的飽和度和透明度來控制版式的整體效果，使頁面看起來效果統一而又不單調，提高了信息的辨識程度。

圖10 Flat UI colors扁平化版式配色⑥

扁平化版式中，同類色一般與黑白色搭配使用，形成強烈而鮮明的視覺效果，通常同類色在選用過程中，會利用一個基本色搭配2～3種其他色彩，也有利用相鄰兩色設計出近似的變化。復古色也成為了扁平化風格中特有的色彩，它以紅、粉、桔、黃、藍為常用色，這種顏色搭配飽和度雖然比較低，但是在純色的基礎上增添了白色之后，能使色彩更加柔和，頁面更為甜美，賦有女性化特征（見圖11）。

圖11 Adobe Kuler扁平化版式配色⑥

版式色彩搭配不但要與數字媒體作品內容相匹配，更重要的是在于引導用戶正確、有效地掌握媒體知識，讓用戶通過操作能夠感受到心理上的輕松愉悅，充分發揮信息傳達的作用[6]。

4.符號的意義

在扁平化版式中常使用簡單的元素符號，就算是一條直線，也具有一定的視覺引導作用。例如，常見到的按鈕與圖標，以圓形、矩形和方形等形式出現，這些圖標在保持高度可用的前提下，盡可能地保持極簡化，直觀易用、無需引導。這些簡單的元素，其實際意義并非簡單，相反，這種設計理念的復雜程度，遠遠高于其他風格。

扁平化符號屬于二次元世界當中的個性化符號，通過簡單的形狀，來直觀地展現視覺內容。它的符號表述，無任何陰影出現，也沒有透視的角度，更沒有肌理和漸變的三維效果，每個元素邊界清晰明了。由于受到數字設備屏幕界面顯示的限制，這種風格的版式更為緊湊、整齊，符號更加簡單，使用戶體驗更為輕松[7]。

以往擬物化的符號，雖然能給人們帶來真實的視覺特征，使用戶產生親切的感覺，但是，這種設計在一定程度上，也會讓用戶有一種不符預期之感，逼真的符號按鈕，有時也產生不了真實的觸摸感。而利用扁平化特征所設計的符號形狀，弱化了視覺上的復雜性，將用戶的關注重心從圖形上轉移到內容和信息上來（見圖12）。在設計過程中，扁平化風格要求設計師首先要了解每個元素符號所代表的含義，然后使用不同的圖形對其進行區分，刪除不必要的裝飾和冗繁的形式，用造型最為簡單的符號，來引導用戶查找媒體信息，同時，也能幫助殘疾人士更容易地操作版式界面。在數字媒體中，符號的運用大多集中在GUⅠ當中，以最為簡單的按鈕形成特有符號，靜態的大圖標取代了實時的動效，不加任何粉飾。

圖12 用戶界面扁平化設計[8]

四、結語

在扁平化的數字媒體里，并非所有相關設計都是優秀的。很顯然，當我們點擊用戶界面時，無法確定哪些是已經被操作過的。而扁平化的出現，不但可以以最簡潔的形式、色彩和文字，來引導用戶掌握信息，而且可以大大節省用戶面對版式轉換的思考時間，讓用戶能夠處于清晰、明了的感官世界當中。

在扁平化風格之后，又出現了“似扁平化設計”和“扁平化長投影設計”（見圖13）風格，但無論是哪個風格的版式，我們的重心都不在于追趕何種潮流，而是在于通過用戶界面完美的編排，真正意義上實現產品信息凸顯，真正以人為本，從人的角度思考問題之所在。扁平化的設計方式，也正是印刷出版設計在數字時代所展現出來的另一種美學方式。

圖13 扁平化長投影設計⑦

注釋

① 圖1、圖2來源：作者手機自拍.

② 圖3、圖4來源：http://shijue.me/topic/flat_design.

③ 圖7來源：http://www.zcool.com.cn/show/ZMj UwMDQ%3D/3.html.

④ 圖8來源：http://www.5tu.cn/thread-336738-1-3.html.

⑤ 圖9來源：http://www.5tu.cn/thread-336738-1-4.html.

⑥ 圖10、圖11來源：https://color.adobe.com/zh/flat-colors-art-colors/.

⑦ 圖13來源：http://sc.chinaz.com/info/13071 1452773.htm.

[1]張貝，方衛寧.扁平化風格界面設計的探討[A]//張強，張劍.2013國際工業設計研討會暨第十八屆全國工業設計學術年會論文集.北京：北京理工大學出版社，2013：96-99.

[2]張蕓.扁平化設計在網頁上應用的優勢[J].藝術科技，2013（6）：229.

[3]孫偉.Win8操作界面將采用Metro和常規雙方案[EB/OL].（2011-09-06）[2014-11-01].http://tech.hexun.com/2011-09-06/133137359.html.

[4]佚名.WP7手機同步必備,微軟Zune軟件介紹[EB/OL].（2010-11-11）[2014-11-01].http://e.yzdsb.com.cn/system/2010/11/11/01079337 6.shtml.

[5]趙夢琪.淺談“扁平化設計”在交互設計中的應用[J].設計，2014（3）：177-178.

[6]高凱.扁平化設計初探[J].現代裝飾：理論版，2013（11）：67.

[7]易敏哲.關于手機界面設計趨于扁平化的一些思考[J].大眾文藝：學術版，2014（1）：108.

[8]設計達人. 50個漂亮的扁平化網頁設計欣賞[EB/OL].(2014-10-17)[2014-11-01].http://sc.chi naz.com/info/130515334971.htm.