張朦朦 (河南牧業(yè)經(jīng)濟學院 物流與電子商務學院 450045)
扁平化設計是當前在界面設計中使用最多,討論最多的一種設計形式。在設計作品中經(jīng)常可以看到設計精美的圖標,特別是在網(wǎng)頁以及UI設計中,圖標的應用更加廣泛,。從本質上看,扁平化設計不僅僅是一種視覺風格的改變,而是一種設計語言和思維方式的演化,本文將從扁平化設計的優(yōu)缺點入手,探討類扁平化設計理念在圖標設計中的應用。
擬物化設計在很長一段時間內都是設計的主流,它是指在設計過程中通過添加高光、紋理、材質和陰影等效果,力求對實物具象的再現(xiàn),在設計過程中也可以適當程度地進行變性和夸張,界面模擬真實物體。擬物化設計可以使用戶第一眼就能夠認出對象是什么,擬物化設計的交互方式也模擬現(xiàn)實生活中的交互方式。
擬物化設計因其完全模擬現(xiàn)實生活中的物體對象,其優(yōu)勢十分明顯。其一是識別度高,即無論是什么年齡、什么文化背景的人都可以認識擬物化的設計;其二是質感和交互性強,擬物化設計的視覺質感非常強烈,并且其交互效果能夠給人很好的使用體驗,以至于人們對擬物化設計已經(jīng)逐漸養(yǎng)成了使用和認知習慣;其三是人性化,擬物化能夠較好地體現(xiàn)人性化,其設計風格與使用方法與現(xiàn)實生活中的對象相統(tǒng)一,在使用上非常方便。
為了實現(xiàn)兌現(xiàn)的視覺表現(xiàn)和質感效果,在進行擬物化設計時需要花費大量的時間和精力,進而會忽略其功能化的的實現(xiàn),因此很多擬物化設計并沒有實現(xiàn)較強的功能化,而只是實現(xiàn)了較好的視覺效果,這是擬物化設計的主要缺點。
扁平化設計從字面意思上理解是指設計的整體效果趨向于扁平,無立體感。扁平化設計的核心是在設計中摒棄高光、陰影、紋理和漸變等裝飾效果,通過符號化或者簡化的圖形設計元素來表現(xiàn)。在扁平化設計中去除了冗余的效果和交互,其交互核心在于突出工鞥呢本身的應用。
扁平化設計與擬物化設計時兩種完全不同的設計風格,扁平化設計的優(yōu)點主要有三點,其一是時尚簡約,扁平化設計總常常使用一些流行的色彩搭配和圖形元素,使看多了擬物化設計的用戶有一種煥然一新的感覺,扁平化設計可以更好的表現(xiàn)出時尚和簡約的美感;其二是突出主題,扁平化設計中很少使用漸變、高光和陰影等效果,或者使用的微弱的效果,這樣可以避免各種視覺效果對用戶視線的干擾,使用戶專注于設計內容本身,突出主題,也使得設計內容更加簡單易用;其三是更易設計,優(yōu)秀的扁平化設計具有良好的架構、排版布局、色彩運用和高度一致性,從而保證其易用性和可識別性。
扁平化設計主要是純色和簡單的圖形符號來構成基本設計,所以在表達情感上不如擬物化設計豐富,這是扁平化設計的主要問題。
好的設計無論是否扁平,都應該通過整潔的視覺交互、有效的設計和易用的體驗為用戶解決問題,扁平化設計的發(fā)展時間只有短短的幾年時間,隨著ios7界面拋棄了之前一直沿用的擬物化設計走向扁平化設計,扁平化設計才逐漸被廣大用戶逐漸接觸,然而ios7扁平化設計也有一些缺陷,比如圖標符號化過于簡單,使用戶不容易理解,或者圖標符號化特征過于復雜,與其他圖標風格不統(tǒng)一等,這是設計師在進行扁平化設計需要注意的方面。
與優(yōu)秀的的UI設計一樣,好的扁平化設計應該把可用性放在首位,扁平化設計的美感需要和可用性息息相關,并且如果必須要在“美感”和“用戶友好”兩者之間二選一,應該是“用戶友好”優(yōu)于“美感”。比如Windows8的界面設計采用了扁平化設計,大膽的配色和平鋪的設計風格與傳統(tǒng)的Windows系統(tǒng)界面有著很明顯的區(qū)別,雖然Windows8界面中的額圖標既美觀又整潔,但是可操作性并不強,拋棄了漸變、高光和陰影等效果,很難讓用戶知道哪些圖標是可以點擊的,哪些是不可以點擊的。有些時候,扁平化實際會變得太“平”了,以至于影響了設計的可用性。如果界面太過于扁平,可操作的元素就會淹沒在看起來一樣的扁平化元素中,沒有任何良好的視覺提示的話,人們并不能知道能和哪個對象進行交互。
類扁平化設計既可以解決扁平化設計所帶來的問題,又向扁平化靠攏。所謂類扁平化設計就是不需要武斷地拋棄漸變和投影燈效果,相反,可以使用細微得漸變、投影燈顏色效果來營造空間快感、距離感、視覺層次和邊緣效果。在類扁平化設計中,通過一些微妙的美學效果給用戶一種視覺上的暗示,告訴用戶哪些對象很重要,并且可以操作,這樣就大大提高了設計的可操作性和易用性,并且保持了扁平化的風格。
圖標是具有明確指代含義的計算機圖形。其中操作系統(tǒng)桌面圖標是軟件或操作快捷方式的標識,界面中的圖標是功能標識。圖標廣義上是指具有指代意義的圖形符號,具有高度濃縮并快捷傳達信息、便于記憶的特性;狹義的是指應用于應用于計算機軟件方面,包括:程序標識、數(shù)據(jù)標識、命令選擇、模式信號或切換開關、狀態(tài)指示等。
隨著計算機的出現(xiàn),圖標被賦予了新的含義,又有了新的用武之地。在這里圖標成了具有明確指代含義的計算機圖形。桌面圖標是軟件標識,界面中的圖標是功能標識,在計算機軟件中,它是程序標識、數(shù)據(jù)標識、命令選擇、模式信號或切換開關、狀態(tài)指示。圖標在計算機可視操作系統(tǒng)中扮演著極為重要的角色,它不僅可以代表一個文檔,一段程序,一張網(wǎng)頁,或是一段命令。圖標在界面設計中無處不在,是界面設計中非常關鍵的部分,隨著社會和科技的發(fā)展,圖標呈現(xiàn)出百花齊放的狀態(tài),圖標設計不僅需要精美質感,更重要的是具有良好的可用性。隨著人們對美的認識發(fā)生改變,越來越多的設計向簡約、精致的方向發(fā)展,通過簡單的圖形和合理的色彩搭配構成簡單的圖標,給人簡約、清晰、實用、一目了然,這就是扁平化圖標。
在界面設計中,圖標設計占有很大的比例。圖標在設計中一般是提供單擊功能的,了解其功能后,要在其易辨認性上下功夫,不要將圖標設計得太花哨,否則劉拉起不容易看出它得功能,這也是扁平化圖標設計的精髓所在。
優(yōu)秀的圖標設計可以為設計界面增添動感?,F(xiàn)在,界面設計趨向于精美和細致,設計精良的圖標可以讓所設計的界面在眾多設計作品中脫穎而出,這樣的界面設計更加連貫,富于整體感,交互性更強。
界面設計的未來方向是簡潔、易用和高效。精美的扁平化圖標設計往往能夠起到畫龍點睛的作用,從而提升設計的視覺效果?,F(xiàn)在,圖標的設計越來越新穎,有獨創(chuàng)性,扁平化的圖標設計的核心思想是要盡可能地發(fā)揮圖標的優(yōu)點:比文字直觀漂亮,在該基礎上盡可能使用簡潔、清晰、美觀的圖形表達出圖標的意義。
(1)可識別性
可識別性是圖標設計的首要原則,是指圖標的設計要鞥能夠準確地表達相應的操作,讓瀏覽者一眼就能明白圖標要表達的意思。例如,道路上的圖標,可識別性強、直觀、簡單。
(2)差異性
差異性也是圖標設計的重要原則之一,同時是容易被設計者忽略的設計原則。只有圖標之間有差異性,才能被瀏覽者所關注和記憶,從而對設計內容留有印象,否則圖標設計就是是失敗的。
(3)與環(huán)境的協(xié)調性
任何圖標或者設計都不可能脫離環(huán)境而獨立存在,圖標最終要放在界面中才會起作用,因此,圖標的設計要考慮圖標所處的環(huán)境,這樣的圖標才能更好地為設計服務。
(4)視覺效果
圖標設計追求視覺效果,一定要在保證差異性、可識別性和協(xié)調性原則的基礎性,現(xiàn)滿足基本得功能需求,然后考慮更高層次的要求——視覺要求。
(5)創(chuàng)造性
在保證圖標實用性的基礎上,還要提高圖標的創(chuàng)造性,只有這樣才能和其他圖標相區(qū)別,給瀏覽者留下深刻的印象。隨著網(wǎng)絡的不斷發(fā)展,圖標的設計更是層出不窮,要讓瀏覽者注意到設計的內容,對圖標設計者提出了更高的要求。創(chuàng)造性在設計中非常重要,在圖標的設計過程中同樣需要具有創(chuàng)意性。
扁平化圖標在在界面設計中應用的越來越多,因其簡介、大方、直觀和易用等特點,使用的越來越廣泛。為了避免扁平化圖標在設計中可能出現(xiàn)的圖標符號化過于簡單、識別度不夠的問題,需要在基礎風格上增加一定的陰影、長陰陽和梯度風格。
(1)基礎風格的扁平化圖標設計
基礎風格的扁平化圖標,不添加任何的漸變、陰影、高光等體現(xiàn)圖標透視感的圖形元素,而是通過機器簡約的基本形狀圖形、符號等表現(xiàn)出圖標的主題。如圖1所示。
(2)陰影風格的類扁平化圖標設計
陰影風格的扁平化圖標主要是為圖標中主體圖形元素添加常規(guī)的陰影效果,如圖2所示。
(3)長陰影效果的類扁平化圖標設計
長陰影風格的扁平化圖標是目前最流行的、也是應用范圍最廣的類扁平化圖標設計分割。長陰影設計主要用于較小的對象和元素,在扁平化圖標設計中應用最為廣泛,具體效果如圖3所示。
(4)微漸變風格的扁平化圖標設計
微漸變風格就是將簡單的圖形元素與傳統(tǒng)的擬物化圖標的高光表現(xiàn)方式相結合,通過微漸變的方式體現(xiàn)出圖標的層次感和立體感,具體效果如圖4所示。
擬物化設計具有識別度高、質感和交互性強、人性化的有點,扁平化具有時尚簡約、主題突出和更易設計的有點,兩種設計理念可以在一定程度上進行結合形成類扁平化設計思路,本文在提出類扁平化設計思路的基礎上,分析了圖標設計的基本概念,從從陰影風格、長陰影風格、微漸變風格三個方面對類扁平化設計在圖標設計中的應用進行了探討。
參考資料:
[1]李海玲.互聯(lián)網(wǎng)產(chǎn)品設計[M].高等教育出版社,2012.
[2]羅仕鑒,朱上上.用戶體驗與產(chǎn)品創(chuàng)新設計[M].機械工業(yè)出版社,2010.
[3]金景文化.扁平化用戶界面設計教程[M].人民郵電出版社,2015.