杜翔宇 （徐州工程學(xué)院藝術(shù)學(xué)院 221008）

淺談UI設(shè)計中“扁平化設(shè)計”的運用和發(fā)展趨勢
——以IOS UI為例

杜翔宇 （徐州工程學(xué)院藝術(shù)學(xué)院 221008）

作為移動應(yīng)用端上流行的UI設(shè)計風(fēng)格，“扁平化”設(shè)計理念目前在UI設(shè)計中得到了廣泛的應(yīng)用?；谶@種認(rèn)識，本文對UI設(shè)計中“擬物化”“扁平化”設(shè)計概念和內(nèi)涵進(jìn)行了分析，然后以IOS UI 為例對“扁平化設(shè)計”的運用方法展開了研究。最后，本文則對UI設(shè)計中“扁平化設(shè)計”的發(fā)展趨勢進(jìn)行了探討，以期為關(guān)注這一話題的人們提供參考。

“扁平化”；“擬物化”；UI設(shè)計；運用方法；發(fā)展趨勢

所謂的UI，其實就是用戶界面的英文簡稱。就目前來看，UI設(shè)計風(fēng)格可以劃分為兩種，即“擬物化”和“扁平化”設(shè)計風(fēng)格。而“扁平化”設(shè)計理念在IOS UI上的成功運用，使得該種設(shè)計風(fēng)格為人們所熟知，并且逐漸成為了一種獲得大眾認(rèn)可的設(shè)計風(fēng)格。因此，相關(guān)人員有必要對UI設(shè)計中“扁平化設(shè)計”的運用和發(fā)展趨勢展開研究，以便更好的運用該種設(shè)計理念。

一、UI設(shè)計中“擬物化”“扁平化”設(shè)計概念和內(nèi)涵

（一）“擬物化”設(shè)計

所謂的“擬物化”設(shè)計，其實就是一種強(qiáng)調(diào)模擬實物質(zhì)感、明暗和材質(zhì)等特性的界面設(shè)計理念，可以在實現(xiàn)交互的同時進(jìn)行現(xiàn)實操作形式的模擬。采取該種設(shè)計理念，可以實現(xiàn)富有感性化色彩的交互設(shè)計，能夠幫助人們憑借經(jīng)驗盡快學(xué)會操作界面。以ibook這一交互界面為例，其從視覺效果到感官手勢都對真正的書籍進(jìn)行了模擬，甚至實現(xiàn)了對翻書聲音的模擬，能夠給人帶來更具趣味性和親和力的界面操作體驗。

（二）“扁平化”設(shè)計

“扁平化”設(shè)計其實是一種摒棄一切裝飾效果的設(shè)計理念，可以借助簡單直接的方式進(jìn)行事物和信息的展現(xiàn)，可以避免用戶對界面產(chǎn)生過多的認(rèn)知障礙。從特點上來看，“扁平化”設(shè)計以簡約為核心，追求層級優(yōu)化。

1.以簡約為核心

以簡約為核心，就是對透視感和光影效果進(jìn)行摒棄，從而使設(shè)計元素變得符號化和抽象化。在這樣的界面上，所有元素都擁有鮮明的形狀和邊緣，效果如同將所有元素“拍扁了”。如同中國水墨畫，“扁平化”設(shè)計注重留白，以便通過增強(qiáng)界面主體內(nèi)容存在感使人體會簡約的魅力。

2.追求層級優(yōu)化

Synthesis and crystal structure of 10-phenyl-6,7,8,10-tetrahydro-cyclopenta[b]pyrrolo[3,2-f]quinolin

近年來，互聯(lián)網(wǎng)終端開始變得多樣化，其使用場景也越發(fā)復(fù)雜，從而使用戶對界面操作失去了耐心。信息層級優(yōu)化則是“扁平化”的一大特征，其實現(xiàn)了信息從屬層級關(guān)系的簡化，突顯的都是與核心內(nèi)容相關(guān)的交互元素，能夠幫助用戶盡快獲得需要的信息。而這樣的設(shè)計不僅能夠提高用戶操作效率，還能夠體現(xiàn)對用戶的關(guān)懷。

二、以IOS UI 為例探討UI設(shè)計中“扁平化設(shè)計”的運用方法

（一）IOS UI設(shè)計中由“擬物化”到“扁平化”的演變過程

相較于“擬物化”設(shè)計，“扁平化”設(shè)計無疑是性的設(shè)計風(fēng)格，是目前得到廣泛爭論的設(shè)計形式。自從蘋果公司進(jìn)行IOS7的推出后，其UI設(shè)計就開始由“擬物化”向“扁平化”演變，從而使扁平化設(shè)計風(fēng)格在移動端的操作系統(tǒng)中得到了推廣應(yīng)用。如下圖1所示，為iPhone IOS6與iPhone IOS7的對比圖。從視覺效果上來看，IOS7的色彩顯得更加艷麗，圖形也更加簡約，實現(xiàn)了抽象化表達(dá)。比較“擬物化”和“扁平化”的IOS UI界面可以發(fā)現(xiàn)，擬物化系統(tǒng)僅僅是進(jìn)行事物表面的模擬，并未進(jìn)行內(nèi)容的延展，并且也缺乏想象空間。在看圖的過程中，受眾雖然能夠較快接受，但是很難進(jìn)行延伸拓展。所以，刻意進(jìn)行交互界面的“擬物化”設(shè)計，將導(dǎo)致界面的操作效率遭到降低。隨著數(shù)碼的普及應(yīng)用，人們對產(chǎn)品的使用要求顯然發(fā)生了變化1。但是“擬物化”設(shè)計的審美追求顯得單一，所以無法滿足人們的審美需求。而扁平化設(shè)計可以實現(xiàn)多余裝飾的剔除，可以幫助用戶排除復(fù)雜圖標(biāo)外觀的干擾，將注意力集中在軟件功能上，從而使用戶可以盡快獲得想要的信息。因此，IOS UI的“扁平化”設(shè)計已然成為了一種設(shè)計風(fēng)格，可以引領(lǐng)UI設(shè)計潮流。

圖1 IOS6與IOS7比較圖

（二）簡約圖標(biāo)的設(shè)計運用

在移動應(yīng)用客戶端上，設(shè)置圖標(biāo)的目的就是為了幫助用戶識別各軟件功能，所以圖標(biāo)的美觀性并不是最主要的設(shè)計考量因素。根據(jù)“扁平化”設(shè)計理念，在設(shè)計圖標(biāo)時就應(yīng)該進(jìn)行簡約圖標(biāo)的運用，從而引導(dǎo)用戶關(guān)注軟件的功能。在IOS UI的“扁平化”設(shè)計中，使用的圖標(biāo)具有明顯的“扁平化”特征，其組成元素未添加斜面、漸變、羽化和陰影等修飾，僅僅使用簡單到極致的單色塊組合，從而使圖標(biāo)和按鈕等界面元素得到了簡化。如下圖2所示，IOS7中各圖標(biāo)基本形都由幾何形與幾何形或曲直線與幾何形構(gòu)成，如指南針、相機(jī)等，表現(xiàn)方式比較簡練。而利用簡潔的線條實現(xiàn)圖形的高度概括，則對設(shè)計師有較高的要求。因為，在進(jìn)行簡單圖形設(shè)計時，設(shè)計師必須要實現(xiàn)事物圖形特點的高度提煉，需要達(dá)到使用戶一目了然的目的，從而使用戶適應(yīng)信息和接受信息的時間得以減少。

圖2 IOS7圖標(biāo)

（三）鮮活色彩的設(shè)計運用

將不必要的裝飾放棄后，就只剩下形狀和色彩。所以，“扁平化”設(shè)計十分注重色彩的設(shè)計和運用。從IOS UI設(shè)計來看，IOS7顯然具有色彩鮮艷、明亮的特點，與其他采取“扁平化”設(shè)計的UI在色彩上具有相似性。如下圖3所示，IOS7界面色調(diào)擁有豐富的層次，色彩之間的搭配十分和諧溫和。利用多用色塊和單純顏色配合，則給人帶來了干凈、清晰的感受，也能夠使界面各種關(guān)系得以清楚的表現(xiàn)出來。在應(yīng)用軟件界面上，IOS UI使用的是單色調(diào)，可以給軟件帶來一個系統(tǒng)視覺主題，從而使整個操作界面擁有統(tǒng)一協(xié)調(diào)色彩，繼而使界面顯得干凈和簡潔2。比如在IOS7通訊APP中，統(tǒng)一使用白色和綠色組合。對于使用者來講，經(jīng)過長時間交互，用戶會形成固定思維，認(rèn)定白色和綠色組合為通訊，從而迅速完成圖標(biāo)的查找。之所以進(jìn)行單一主題色的確定，則是為了緩解UI界面中過多元素組成給人帶來的負(fù)荷感。在IOS UI的“扁平化”設(shè)計中，僅僅依靠不同純色塊的相互配比，就可以利用簡單的純色進(jìn)行良好視覺效果的營造。

圖3 IOS7色彩搭配

在IOS UI的“扁平化”設(shè)計中，所有的視覺元素都保持著簡單、自然的特點，其字體排版與界面風(fēng)格一致，也體現(xiàn)了簡約和自然的設(shè)計理念。在界面排版方面，采取“扁平化”界面可以進(jìn)行重要信息的突出，并且將次要信息隱藏起來，從而為用戶提供需要傳達(dá)的關(guān)鍵信息。如下圖4所示，IOS7界面將次要信息隱藏在下拉菜單中，利用簡單的信息布局為用戶瀏覽界面提供了便利，同時也有利于用戶觀察全局信息，因此可以使用戶的滿意度得到提升。而在字體應(yīng)用方面，界面中較為重要的字體明顯要更大一些，從而達(dá)成了突出文本的作用。同時，所有元素都有統(tǒng)一參照物，并且有規(guī)律的放置。此外，IOS UI界面上的文字中貫穿著標(biāo)點，使得文字顯得簡潔且并不突兀，可以起到幫助讀者理解文字的作用。為更好的實現(xiàn)信息傳遞，蘋果公司推出的IOS9甚至采用了全新字體方案，為用戶打造了新字體3。目前，該種字體被稱之為蘋方，具有清晰易讀的顯示效果，并且能夠為簡體、繁體的切換提供支持。相較于之前的字體，該種字體擁有清晰棱角，更容易閱讀。

三、UI設(shè)計中“扁平化設(shè)計”的發(fā)展趨勢

（一）適應(yīng)性不斷增強(qiáng)

隨著互聯(lián)網(wǎng)終端的復(fù)雜化發(fā)展，“扁平化”設(shè)計的適應(yīng)性也將不斷增強(qiáng)。近年來，移動終端的尺寸、界面分辨率都在不斷改變。而采取“扁平化”的設(shè)計方式，則能夠為不同分辨率屏幕提供良好的界面支持，能夠使小圖片和高分辨率之間的矛盾在一定程度上得到化解，所以能夠為用戶提供擁有更好顯示效果和更高適用性的界面。因此在大屏?xí)r代，“扁平化”設(shè)計能夠更好的適應(yīng)時代的發(fā)展需求，并且也能夠為小屏終端UI設(shè)計提供更好的途徑。此外，使用“扁平化”設(shè)計元素，占用的存儲空間也較小，能夠確保終端運行的流暢性，從而使用戶獲得更好的體驗。所以在UI設(shè)計中，“扁平化”設(shè)計的較強(qiáng)適應(yīng)性在未來將得到更好的體現(xiàn)。

（二）結(jié)構(gòu)輕量化發(fā)展

信息化時代的到來，使得人們的生活中充斥著大量的信息碎片，從而給用戶瀏覽操作帶來了較大的負(fù)擔(dān)。實現(xiàn)信息結(jié)構(gòu)的輕量化，則能夠使用戶的操作邏輯更加清晰，從而使用戶能夠更輕松的進(jìn)行信息獲取。所以，隨著時代的發(fā)展，“扁平化”設(shè)計將進(jìn)一步實現(xiàn)信息結(jié)構(gòu)的輕量化。通過使信息層級變得“扁平化”，則可以使內(nèi)容本身得到強(qiáng)化，從而減少用戶因理解信息結(jié)構(gòu)和邏輯花費的成本，因此能夠使用戶獲取信息的距離得到縮短。例如，百度手機(jī)助手的瀏覽頁面設(shè)計就使用了半層彈層這種“扁平化”設(shè)計模式，從而通過簡化信息框架增強(qiáng)了信息的存在感，為用戶帶來了更為輕松自然的操作體驗。

（三）更符合大眾審美

無論是從文字發(fā)展還是繪畫發(fā)展角度來看，人們在最初發(fā)展階段都是追求寫實模仿。而當(dāng)實現(xiàn)了極致寫實之后，人們就可以使進(jìn)行抽象文字和抽象繪畫的探索。UI界面設(shè)計也是一種藝術(shù)形式，其發(fā)展也將尊崇這一規(guī)律，從而更好的滿足大眾的審美需求。所以，盡管“擬物化”設(shè)計受到了人們的喜愛，但是“扁平化”設(shè)計必將會成為一種潮流4。隨著數(shù)字產(chǎn)品審美趨勢的變化，“扁平化”設(shè)計也將進(jìn)一步借助自身優(yōu)勢取得審美上的突破。在生活中充斥大量炫酷的擬物效果的背景下，“扁平化”界面將憑借其簡潔、質(zhì)樸、大方的特點給人帶來全新的感受，從而使人們的審美疲勞得以有效緩解。

（四）更注重用戶體驗

從根本上來講，UI設(shè)計追究的就是給用戶帶來更好的體驗。而“扁平化”UI設(shè)計同樣需要追求為用戶帶來更好的體驗，同時也并非是完全依靠想象得到的，其也是擬物的，但更加抽象化。所以，為增強(qiáng)用戶體驗，還要在“扁平化”設(shè)計的基礎(chǔ)上進(jìn)行效果元素的添加，從而使界面元素的辨識度得到提高。IOS8界面之所以引起較大的爭論，就是由于其過度“扁平化”，卻忽視了給用戶帶來的體驗5。因此，相信隨著設(shè)計師對用戶體驗的重視程度的加深，“扁平化”設(shè)計也將達(dá)成提升用戶體驗的UI設(shè)計目標(biāo)。

四、結(jié)論

憑借簡約和信息透明化的優(yōu)勢，“扁平化”設(shè)計方式在UI設(shè)計中得到了廣泛的應(yīng)用。而隨著信息時代的到來，這種優(yōu)勢將更加明顯，從而使其獲得更好的應(yīng)用前景。

注釋：

1.林陽.UI設(shè)計中扁平化理念應(yīng)用研究——創(chuàng)造平面功能化[J].藝術(shù)科技，2014（1）:267.

2.陶薇薇,張小玲.UI界面中扁平化設(shè)計的原則與技巧[J].科技傳播，2014（13）:176+155.

3.卜祥維.關(guān)于UI扁平化設(shè)計在移動終端的應(yīng)用與價值探究[J].戲劇之家，2014（13）:161-162.

4.王凡,黃迅.探析扁平化Metro UI設(shè)計與“少即是多”設(shè)計原則的相關(guān)性[J].包裝世界，2015（2）:92-93.

5.徐亞非,王勤勤.“互聯(lián)網(wǎng)+”時代下的UI設(shè)計發(fā)展趨勢[J].藝術(shù)科技，2015（9）:204+236.