張朦朦 （河南牧業(yè)經(jīng)濟學(xué)院 物流與電子商務(wù)學(xué)院 450045）

扁平化設(shè)計是當(dāng)前在界面設(shè)計中使用最多，討論最多的一種設(shè)計形式。在設(shè)計作品中經(jīng)?？梢钥吹皆O(shè)計精美的圖標(biāo)，特別是在網(wǎng)頁以及UI設(shè)計中，圖標(biāo)的應(yīng)用更加廣泛，。從本質(zhì)上看，扁平化設(shè)計不僅僅是一種視覺風(fēng)格的改變，而是一種設(shè)計語言和思維方式的演化，本文將從扁平化設(shè)計的優(yōu)缺點入手，探討類扁平化設(shè)計理念在圖標(biāo)設(shè)計中的應(yīng)用。

一、扁平化設(shè)計概述

1.擬物化設(shè)計

擬物化設(shè)計在很長一段時間內(nèi)都是設(shè)計的主流，它是指在設(shè)計過程中通過添加高光、紋理、材質(zhì)和陰影等效果，力求對實物具象的再現(xiàn)，在設(shè)計過程中也可以適當(dāng)程度地進(jìn)行變性和夸張，界面模擬真實物體。擬物化設(shè)計可以使用戶第一眼就能夠認(rèn)出對象是什么，擬物化設(shè)計的交互方式也模擬現(xiàn)實生活中的交互方式。

擬物化設(shè)計因其完全模擬現(xiàn)實生活中的物體對象，其優(yōu)勢十分明顯。其一是識別度高，即無論是什么年齡、什么文化背景的人都可以認(rèn)識擬物化的設(shè)計；其二是質(zhì)感和交互性強，擬物化設(shè)計的視覺質(zhì)感非常強烈，并且其交互效果能夠給人很好的使用體驗，以至于人們對擬物化設(shè)計已經(jīng)逐漸養(yǎng)成了使用和認(rèn)知習(xí)慣；其三是人性化，擬物化能夠較好地體現(xiàn)人性化，其設(shè)計風(fēng)格與使用方法與現(xiàn)實生活中的對象相統(tǒng)一，在使用上非常方便。

為了實現(xiàn)兌現(xiàn)的視覺表現(xiàn)和質(zhì)感效果，在進(jìn)行擬物化設(shè)計時需要花費大量的時間和精力，進(jìn)而會忽略其功能化的的實現(xiàn)，因此很多擬物化設(shè)計并沒有實現(xiàn)較強的功能化，而只是實現(xiàn)了較好的視覺效果，這是擬物化設(shè)計的主要缺點。

2.扁平化設(shè)計

扁平化設(shè)計從字面意思上理解是指設(shè)計的整體效果趨向于扁平，無立體感。扁平化設(shè)計的核心是在設(shè)計中摒棄高光、陰影、紋理和漸變等裝飾效果，通過符號化或者簡化的圖形設(shè)計元素來表現(xiàn)。在扁平化設(shè)計中去除了冗余的效果和交互，其交互核心在于突出工鞥呢本身的應(yīng)用。

扁平化設(shè)計與擬物化設(shè)計時兩種完全不同的設(shè)計風(fēng)格，扁平化設(shè)計的優(yōu)點主要有三點，其一是時尚簡約，扁平化設(shè)計總常常使用一些流行的色彩搭配和圖形元素，使看多了擬物化設(shè)計的用戶有一種煥然一新的感覺，扁平化設(shè)計可以更好的表現(xiàn)出時尚和簡約的美感；其二是突出主題，扁平化設(shè)計中很少使用漸變、高光和陰影等效果，或者使用的微弱的效果，這樣可以避免各種視覺效果對用戶視線的干擾，使用戶專注于設(shè)計內(nèi)容本身，突出主題，也使得設(shè)計內(nèi)容更加簡單易用；其三是更易設(shè)計，優(yōu)秀的扁平化設(shè)計具有良好的架構(gòu)、排版布局、色彩運用和高度一致性，從而保證其易用性和可識別性。

扁平化設(shè)計主要是純色和簡單的圖形符號來構(gòu)成基本設(shè)計，所以在表達(dá)情感上不如擬物化設(shè)計豐富，這是扁平化設(shè)計的主要問題。

二、扁平化設(shè)計所帶來的問題

好的設(shè)計無論是否扁平，都應(yīng)該通過整潔的視覺交互、有效的設(shè)計和易用的體驗為用戶解決問題，扁平化設(shè)計的發(fā)展時間只有短短的幾年時間，隨著ios7界面拋棄了之前一直沿用的擬物化設(shè)計走向扁平化設(shè)計，扁平化設(shè)計才逐漸被廣大用戶逐漸接觸，然而ios7扁平化設(shè)計也有一些缺陷，比如圖標(biāo)符號化過于簡單，使用戶不容易理解，或者圖標(biāo)符號化特征過于復(fù)雜，與其他圖標(biāo)風(fēng)格不統(tǒng)一等，這是設(shè)計師在進(jìn)行扁平化設(shè)計需要注意的方面。

與優(yōu)秀的的UI設(shè)計一樣，好的扁平化設(shè)計應(yīng)該把可用性放在首位，扁平化設(shè)計的美感需要和可用性息息相關(guān)，并且如果必須要在“美感”和“用戶友好”兩者之間二選一，應(yīng)該是“用戶友好”優(yōu)于“美感”。比如Windows8的界面設(shè)計采用了扁平化設(shè)計，大膽的配色和平鋪的設(shè)計風(fēng)格與傳統(tǒng)的Windows系統(tǒng)界面有著很明顯的區(qū)別，雖然Windows8界面中的額圖標(biāo)既美觀又整潔，但是可操作性并不強，拋棄了漸變、高光和陰影等效果，很難讓用戶知道哪些圖標(biāo)是可以點擊的，哪些是不可以點擊的。有些時候，扁平化實際會變得太“平”了，以至于影響了設(shè)計的可用性。如果界面太過于扁平，可操作的元素就會淹沒在看起來一樣的扁平化元素中，沒有任何良好的視覺提示的話，人們并不能知道能和哪個對象進(jìn)行交互。

類扁平化設(shè)計既可以解決扁平化設(shè)計所帶來的問題，又向扁平化靠攏。所謂類扁平化設(shè)計就是不需要武斷地拋棄漸變和投影燈效果，相反，可以使用細(xì)微得漸變、投影燈顏色效果來營造空間快感、距離感、視覺層次和邊緣效果。在類扁平化設(shè)計中，通過一些微妙的美學(xué)效果給用戶一種視覺上的暗示，告訴用戶哪些對象很重要，并且可以操作，這樣就大大提高了設(shè)計的可操作性和易用性，并且保持了扁平化的風(fēng)格。

三、圖標(biāo)設(shè)計的基本概念

1.什么是圖標(biāo)

圖標(biāo)是具有明確指代含義的計算機圖形。其中操作系統(tǒng)桌面圖標(biāo)是軟件或操作快捷方式的標(biāo)識，界面中的圖標(biāo)是功能標(biāo)識。圖標(biāo)廣義上是指具有指代意義的圖形符號，具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性；狹義的是指應(yīng)用于應(yīng)用于計算機軟件方面，包括：程序標(biāo)識、數(shù)據(jù)標(biāo)識、命令選擇、模式信號或切換開關(guān)、狀態(tài)指示等。

隨著計算機的出現(xiàn)，圖標(biāo)被賦予了新的含義，又有了新的用武之地。在這里圖標(biāo)成了具有明確指代含義的計算機圖形。桌面圖標(biāo)是軟件標(biāo)識，界面中的圖標(biāo)是功能標(biāo)識，在計算機軟件中，它是程序標(biāo)識、數(shù)據(jù)標(biāo)識、命令選擇、模式信號或切換開關(guān)、狀態(tài)指示。圖標(biāo)在計算機可視操作系統(tǒng)中扮演著極為重要的角色，它不僅可以代表一個文檔，一段程序，一張網(wǎng)頁，或是一段命令。圖標(biāo)在界面設(shè)計中無處不在，是界面設(shè)計中非常關(guān)鍵的部分，隨著社會和科技的發(fā)展，圖標(biāo)呈現(xiàn)出百花齊放的狀態(tài)，圖標(biāo)設(shè)計不僅需要精美質(zhì)感，更重要的是具有良好的可用性。隨著人們對美的認(rèn)識發(fā)生改變，越來越多的設(shè)計向簡約、精致的方向發(fā)展，通過簡單的圖形和合理的色彩搭配構(gòu)成簡單的圖標(biāo)，給人簡約、清晰、實用、一目了然，這就是扁平化圖標(biāo)。

2.圖標(biāo)設(shè)計的作用和意義

在界面設(shè)計中，圖標(biāo)設(shè)計占有很大的比例。圖標(biāo)在設(shè)計中一般是提供單擊功能的，了解其功能后，要在其易辨認(rèn)性上下功夫，不要將圖標(biāo)設(shè)計得太花哨，否則劉拉起不容易看出它得功能，這也是扁平化圖標(biāo)設(shè)計的精髓所在。

優(yōu)秀的圖標(biāo)設(shè)計可以為設(shè)計界面增添動感。現(xiàn)在，界面設(shè)計趨向于精美和細(xì)致，設(shè)計精良的圖標(biāo)可以讓所設(shè)計的界面在眾多設(shè)計作品中脫穎而出，這樣的界面設(shè)計更加連貫，富于整體感，交互性更強。

四、基于類扁平化的圖標(biāo)設(shè)計

1.類扁平化圖標(biāo)的設(shè)計原則

界面設(shè)計的未來方向是簡潔、易用和高效。精美的扁平化圖標(biāo)設(shè)計往往能夠起到畫龍點睛的作用，從而提升設(shè)計的視覺效果?，F(xiàn)在，圖標(biāo)的設(shè)計越來越新穎，有獨創(chuàng)性，扁平化的圖標(biāo)設(shè)計的核心思想是要盡可能地發(fā)揮圖標(biāo)的優(yōu)點：比文字直觀漂亮，在該基礎(chǔ)上盡可能使用簡潔、清晰、美觀的圖形表達(dá)出圖標(biāo)的意義。

（1）可識別性

可識別性是圖標(biāo)設(shè)計的首要原則，是指圖標(biāo)的設(shè)計要鞥能夠準(zhǔn)確地表達(dá)相應(yīng)的操作，讓瀏覽者一眼就能明白圖標(biāo)要表達(dá)的意思。例如，道路上的圖標(biāo)，可識別性強、直觀、簡單。

（2）差異性

差異性也是圖標(biāo)設(shè)計的重要原則之一，同時是容易被設(shè)計者忽略的設(shè)計原則。只有圖標(biāo)之間有差異性，才能被瀏覽者所關(guān)注和記憶，從而對設(shè)計內(nèi)容留有印象，否則圖標(biāo)設(shè)計就是是失敗的。

（3）與環(huán)境的協(xié)調(diào)性

任何圖標(biāo)或者設(shè)計都不可能脫離環(huán)境而獨立存在，圖標(biāo)最終要放在界面中才會起作用，因此，圖標(biāo)的設(shè)計要考慮圖標(biāo)所處的環(huán)境，這樣的圖標(biāo)才能更好地為設(shè)計服務(wù)。

（4）視覺效果

圖標(biāo)設(shè)計追求視覺效果，一定要在保證差異性、可識別性和協(xié)調(diào)性原則的基礎(chǔ)性，現(xiàn)滿足基本得功能需求，然后考慮更高層次的要求——視覺要求。

（5）創(chuàng)造性

在保證圖標(biāo)實用性的基礎(chǔ)上，還要提高圖標(biāo)的創(chuàng)造性，只有這樣才能和其他圖標(biāo)相區(qū)別，給瀏覽者留下深刻的印象。隨著網(wǎng)絡(luò)的不斷發(fā)展，圖標(biāo)的設(shè)計更是層出不窮，要讓瀏覽者注意到設(shè)計的內(nèi)容，對圖標(biāo)設(shè)計者提出了更高的要求。創(chuàng)造性在設(shè)計中非常重要，在圖標(biāo)的設(shè)計過程中同樣需要具有創(chuàng)意性。

2.類扁平化圖標(biāo)的設(shè)計風(fēng)格

扁平化圖標(biāo)在在界面設(shè)計中應(yīng)用的越來越多，因其簡介、大方、直觀和易用等特點，使用的越來越廣泛。為了避免扁平化圖標(biāo)在設(shè)計中可能出現(xiàn)的圖標(biāo)符號化過于簡單、識別度不夠的問題，需要在基礎(chǔ)風(fēng)格上增加一定的陰影、長陰陽和梯度風(fēng)格。

（1）基礎(chǔ)風(fēng)格的扁平化圖標(biāo)設(shè)計

基礎(chǔ)風(fēng)格的扁平化圖標(biāo)，不添加任何的漸變、陰影、高光等體現(xiàn)圖標(biāo)透視感的圖形元素，而是通過機器簡約的基本形狀圖形、符號等表現(xiàn)出圖標(biāo)的主題。如圖1所示。

（2）陰影風(fēng)格的類扁平化圖標(biāo)設(shè)計

陰影風(fēng)格的扁平化圖標(biāo)主要是為圖標(biāo)中主體圖形元素添加常規(guī)的陰影效果，如圖2所示。

（3）長陰影效果的類扁平化圖標(biāo)設(shè)計

長陰影風(fēng)格的扁平化圖標(biāo)是目前最流行的、也是應(yīng)用范圍最廣的類扁平化圖標(biāo)設(shè)計分割。長陰影設(shè)計主要用于較小的對象和元素，在扁平化圖標(biāo)設(shè)計中應(yīng)用最為廣泛，具體效果如圖3所示。

（4）微漸變風(fēng)格的扁平化圖標(biāo)設(shè)計

微漸變風(fēng)格就是將簡單的圖形元素與傳統(tǒng)的擬物化圖標(biāo)的高光表現(xiàn)方式相結(jié)合，通過微漸變的方式體現(xiàn)出圖標(biāo)的層次感和立體感，具體效果如圖4所示。

總結(jié)

擬物化設(shè)計具有識別度高、質(zhì)感和交互性強、人性化的有點，扁平化具有時尚簡約、主題突出和更易設(shè)計的有點，兩種設(shè)計理念可以在一定程度上進(jìn)行結(jié)合形成類扁平化設(shè)計思路，本文在提出類扁平化設(shè)計思路的基礎(chǔ)上，分析了圖標(biāo)設(shè)計的基本概念，從從陰影風(fēng)格、長陰影風(fēng)格、微漸變風(fēng)格三個方面對類扁平化設(shè)計在圖標(biāo)設(shè)計中的應(yīng)用進(jìn)行了探討。

參考資料：

[1]李海玲.互聯(lián)網(wǎng)產(chǎn)品設(shè)計[M].高等教育出版社，2012.

[2]羅仕鑒，朱上上.用戶體驗與產(chǎn)品創(chuàng)新設(shè)計[M].機械工業(yè)出版社，2010.

[3]金景文化.扁平化用戶界面設(shè)計教程[M].人民郵電出版社，2015.