陳巖

河南農(nóng)業(yè)大學(xué)，鄭州 450002

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

2011年，當(dāng)安卓軟件系統(tǒng)（見圖1）運(yùn)用扁平化風(fēng)格的設(shè)計(jì)時，人們又一次將其認(rèn)為不過是與蘋果ios軟件（見圖2）的競爭而改走的另一條道路。

圖1 安卓界面版式設(shè)計(jì)①

圖2 蘋果界面版式設(shè)計(jì)①

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

一、扁平化風(fēng)格的理念

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

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

二、扁平化風(fēng)格與擬物化風(fēng)格之比較

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

圖3 扁平化風(fēng)格版式設(shè)計(jì)②

圖4 擬物化風(fēng)格版式設(shè)計(jì)②

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

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

扁平化風(fēng)格更加突出主題，減少了各種繁雜的視覺效果，使用戶更加專注于內(nèi)容而不是風(fēng)格形式。其在編排的過程中，只需要預(yù)先安排好版式結(jié)構(gòu)框架、網(wǎng)格布局、色彩環(huán)境，就可以輕松地設(shè)計(jì)好整個數(shù)字媒體的頁面效果，同時可以產(chǎn)生不同頁面之間的高度統(tǒng)一性[1]。

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

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

三、扁平化版式在數(shù)字媒體中的運(yùn)用

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

1.編排的價值

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

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

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

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

圖5 WINDOWS的Metro扁平化設(shè)計(jì)[3]

圖6 Zune軟件的扁平化設(shè)計(jì)[4]

2.文字的表達(dá)

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

圖7 Helvetica字體設(shè)計(jì)③

圖8 Segoe UI字體設(shè)計(jì)④

圖9 Tahoma字體設(shè)計(jì)⑤

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

3.色彩的基調(diào)

色彩對于扁平化版式來說尤為重要，鮮亮、明快的顏色，以其獨(dú)特的視覺顯示，吸引著人們的眼球。以往在一些網(wǎng)頁或數(shù)字媒體中，色彩大多控制在3～5種常規(guī)色，而在扁平化版式編排上則應(yīng)用6～8種或更多的色彩作為基礎(chǔ)色（見圖10）。這種色彩更加單純，色塊上沒有任何變化，主次顏色多選擇橙色、綠色和紫色等大眾化色系，同時明暗程度也都較為接近，在一個色階上運(yùn)用。在版式編排的色彩運(yùn)用中，三原色（紅、黃、藍(lán)）很少出現(xiàn)在媒體界面當(dāng)中的，扁平色彩常以純色、同類色或?qū)Ρ壬顬橹饕獦邮剑O(shè)計(jì)師通過調(diào)整色彩之間的飽和度和透明度來控制版式的整體效果，使頁面看起來效果統(tǒng)一而又不單調(diào)，提高了信息的辨識程度。

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

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

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

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

4.符號的意義

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

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

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

圖12 用戶界面扁平化設(shè)計(jì)[8]

四、結(jié)語

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

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

圖13 扁平化長投影設(shè)計(jì)⑦

注釋

① 圖1、圖2來源：作者手機(jī)自拍.

② 圖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]張貝，方衛(wèi)寧.扁平化風(fēng)格界面設(shè)計(jì)的探討[A]//張強(qiáng)，張劍.2013國際工業(yè)設(shè)計(jì)研討會暨第十八屆全國工業(yè)設(shè)計(jì)學(xué)術(shù)年會論文集.北京：北京理工大學(xué)出版社，2013：96-99.

[2]張蕓.扁平化設(shè)計(jì)在網(wǎng)頁上應(yīng)用的優(yōu)勢[J].藝術(shù)科技，2013（6）：229.

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

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

[5]趙夢琪.淺談“扁平化設(shè)計(jì)”在交互設(shè)計(jì)中的應(yīng)用[J].設(shè)計(jì)，2014（3）：177-178.

[6]高凱.扁平化設(shè)計(jì)初探[J].現(xiàn)代裝飾：理論版，2013（11）：67.

[7]易敏哲.關(guān)于手機(jī)界面設(shè)計(jì)趨于扁平化的一些思考[J].大眾文藝：學(xué)術(shù)版，2014（1）：108.

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