UI界面的扁平化設(shè)計(jì)風(fēng)格研究

殷菲　魏薇

摘 要：隨著時(shí)代的發(fā)展，科技的進(jìn)步，越來(lái)越多的移動(dòng)終端設(shè)備出現(xiàn)在人們的日常生活中，極大程度地便利著人們的生活。而隨著人們生活水平的進(jìn)一步提高，人們對(duì)設(shè)計(jì)產(chǎn)品的要求也越來(lái)越高。新形勢(shì)下，為了更好地滿足用戶的使用需求，提高設(shè)備的使用效率，UI界面的扁平化設(shè)計(jì)應(yīng)用而生。它不同于以往的設(shè)計(jì)風(fēng)格，其注重以簡(jiǎn)約的形式將內(nèi)容呈現(xiàn)在人們眼前。本文主要就扁平化設(shè)計(jì)的含義，扁平化設(shè)計(jì)的起源，扁平化設(shè)計(jì)的優(yōu)勢(shì)技巧及應(yīng)用進(jìn)行論述，進(jìn)一步探討了未來(lái)UI界面的扁平化設(shè)計(jì)風(fēng)格的發(fā)展趨勢(shì)。

關(guān)鍵詞：UI界面；扁平化；設(shè)計(jì)風(fēng)格

引言

在電子產(chǎn)業(yè)不斷發(fā)展的今天，電子產(chǎn)品在人們中的應(yīng)用率逐漸提升。人們?cè)谶M(jìn)行設(shè)備選擇時(shí)對(duì)界面設(shè)計(jì)的關(guān)注度越來(lái)越高。界面設(shè)計(jì)的優(yōu)劣直接關(guān)系著消費(fèi)者對(duì)該設(shè)備的使用效果。扁平化設(shè)計(jì)是順應(yīng)時(shí)代發(fā)展潮流而衍生出的一種新的界面設(shè)計(jì)風(fēng)格，以其獨(dú)特的極簡(jiǎn)模式迅速吸引了各個(gè)設(shè)計(jì)家的眼球，成為當(dāng)下十分流行的一種趨勢(shì)，甚至可以說(shuō)其成為了人們?nèi)粘Ｉ钪胁豢苫蛉钡囊徊糠?。扁平化設(shè)計(jì)的出現(xiàn)，使得信息呈現(xiàn)更加直觀簡(jiǎn)潔，很大程度地降低了人們認(rèn)知的障礙，提高了應(yīng)用效率。

1扁平化設(shè)計(jì)風(fēng)格的含義

扁平化設(shè)計(jì)是根據(jù)其所應(yīng)用的形狀而命名的，它在設(shè)計(jì)的過(guò)程中采用的是二維的風(fēng)格，也就是把物體幾乎看做平面來(lái)進(jìn)行處理設(shè)計(jì)且不遺棄任何常規(guī)界面所提供的功能。其最核心的要素就在于拋開(kāi)一切多余的東西，比如透視、紋理、陰影、斜面、漸變等能做出立體裝飾效果的這一類(lèi)元素，進(jìn)而可以使“信息”本身能夠作為核心內(nèi)容被凸顯出來(lái)，同時(shí)在設(shè)計(jì)元素的選擇上，則更傾向于抽象、極簡(jiǎn)和符號(hào)化。所以，扁平化設(shè)計(jì)中所有的元素邊界相對(duì)來(lái)說(shuō)都比較整齊，尤其是在手機(jī)系統(tǒng)的設(shè)計(jì)上，更少的按鈕和選項(xiàng)，使得UI界面更加干凈整理，使用起來(lái)極為簡(jiǎn)潔，從而可以更加簡(jiǎn)單直接地將信息和事物的工作方式展現(xiàn)出來(lái)，進(jìn)而可以有效地減少認(rèn)知障礙的產(chǎn)生。同時(shí)，在扁平化設(shè)計(jì)應(yīng)用的基礎(chǔ)上，移動(dòng)系統(tǒng)設(shè)備不僅界面美觀、簡(jiǎn)潔，而且還可以降低設(shè)備的功能損耗，進(jìn)而延長(zhǎng)設(shè)備的待機(jī)時(shí)間和提高運(yùn)算速度。

2扁平化設(shè)計(jì)風(fēng)格的起源

一切事物的出現(xiàn)及發(fā)展都不是橫空出世，扁平化設(shè)計(jì)的發(fā)展過(guò)程是有跡可循的，其根源可以被追溯到名為“瑞士風(fēng)格”的一種裝飾設(shè)計(jì)風(fēng)格上。20世紀(jì)初的瑞士現(xiàn)代主義運(yùn)動(dòng)催生了這種設(shè)計(jì)風(fēng)格，隨著二戰(zhàn)結(jié)束，這種設(shè)計(jì)風(fēng)格開(kāi)始在歐洲流傳開(kāi)來(lái)，贏得了更多的擁簇。瑞士風(fēng)格，包括后來(lái)的包豪斯，隨后迅速在世界范圍內(nèi)得到了越來(lái)越廣泛的歡迎，并且在21世紀(jì)初獲得了新生。這就是衍生出了今天所說(shuō)的扁平化設(shè)計(jì)。最初，這種風(fēng)格大多以海報(bào)、郵票、明信片的方式呈現(xiàn)，但是它的出現(xiàn)，在很大程度上擴(kuò)展了UI設(shè)計(jì)領(lǐng)域的視野。后來(lái)隨著時(shí)代的不斷發(fā)展，功能主義、極簡(jiǎn) 主義為代表的現(xiàn)代主義風(fēng)格界面設(shè)計(jì)呈現(xiàn)在我們眼前。扁平化設(shè)計(jì)不同于之前所流行的細(xì)節(jié)極為豐富的擬物化設(shè)計(jì)，它更加看重交互和功能的支持，這使得設(shè)計(jì)具有了更多的可能性。扁平化設(shè)計(jì)沒(méi)有多余的裝飾，所有的信息都以簡(jiǎn)潔的方式來(lái)呈現(xiàn)，進(jìn)而我們能夠在很短的時(shí)間內(nèi)獲得更多的有效信息，這種方式無(wú)疑更加適合我們當(dāng)今快節(jié)奏的生活和工作方式。最初走出扁平化設(shè)計(jì)這一步的是微軟，它從瑞士風(fēng)格、現(xiàn)代主義和包豪斯中汲取靈感，隨后在2010年推出了WindowsPhone7，它就是典型的扁平化設(shè)計(jì)。這個(gè)版本的操作系統(tǒng)中采用了大量的簡(jiǎn)單的形狀，清晰的排版，明亮而對(duì)比明顯的色彩，復(fù)雜的細(xì)節(jié)和紋理都被移除了。三年之后所發(fā)布的iOS7中友好而直觀的UI設(shè)計(jì)和微軟雖然不盡相同，但是在設(shè)計(jì)理念上兩個(gè)系統(tǒng)互為印證，成為了扁平化設(shè)計(jì)在數(shù)字設(shè)計(jì)領(lǐng)域應(yīng)用的證明。

3扁平化設(shè)計(jì)風(fēng)格的優(yōu)勢(shì)和設(shè)計(jì)技巧

扁平化設(shè)計(jì)最基本的特征在于它采用簡(jiǎn)單的元素和形狀，走的是極簡(jiǎn)風(fēng)格；它具有強(qiáng)功能性、大膽而易讀的版面設(shè)計(jì)，進(jìn)而產(chǎn)生清晰而嚴(yán)謹(jǐn)?shù)囊曈X(jué)層次；它關(guān)注細(xì)節(jié)，具備明亮的色彩和對(duì)比度明顯的視覺(jué)感知；采用柵格、幾何特征以及視覺(jué)平衡的原則，避免使用紋理、漸變和復(fù)雜的樣式。這使得扁平化設(shè)計(jì)的優(yōu)勢(shì)之處有很多，主要包括它具有可讀性和易讀性；通過(guò)形狀、色彩和字體來(lái)呈現(xiàn)清晰的視覺(jué)層次；有效的支持web和移動(dòng)端的導(dǎo)航設(shè)計(jì)；自適應(yīng)性，適合響應(yīng)式設(shè)計(jì)；在各種屏幕上都具備良好的可讀性；對(duì)于開(kāi)發(fā)更加友好，降低在設(shè)備上的負(fù)載。除此之外，扁平化設(shè)計(jì)還為創(chuàng)意設(shè)計(jì)提供了廣闊的空間。

要想做出好的扁平化設(shè)計(jì)，是需要技巧的。由于扁平化設(shè)計(jì)完全屬于二次元世界，這個(gè)概念最核心的地方就是放棄一切裝飾效果，將具象的立體物體造型歸納轉(zhuǎn)化為簡(jiǎn)單的幾何形體。首先就要求設(shè)計(jì)師不但對(duì)造型要由獨(dú)特的把握能力，還需要具有一定的幾何歸納能力。其次，字體是扁平化設(shè)計(jì)的重要組成部分，它與其他元素相互配合，為設(shè)計(jì)添彩。對(duì)于大部分UI設(shè)計(jì)來(lái)說(shuō)都應(yīng)該了解字體的作用，嚴(yán)格遵循規(guī)范進(jìn)行設(shè)計(jì)。再者，扁平化UI設(shè)計(jì)更注重的是顏色的搭配。色彩作為的人們感官直接接觸的事物，給人印象深刻。扁平化設(shè)計(jì)一般采用明亮絢麗的顏色，使設(shè)計(jì)更加醒目。最后，設(shè)計(jì)師要懂得簡(jiǎn)化自己的設(shè)計(jì)方案，進(jìn)行簡(jiǎn)化的交互設(shè)計(jì)，這樣可以有效的把商品組織起來(lái)，以簡(jiǎn)單但合理的方式排列。不要以為扁平化只是把立體的設(shè)計(jì)效果壓扁，實(shí)質(zhì)上，扁平化設(shè)計(jì)則是功能上的簡(jiǎn)化與重組。

4扁平化設(shè)計(jì)風(fēng)格的應(yīng)用

扁平化設(shè)計(jì)的多樣性和靈活性使得它在設(shè)計(jì)領(lǐng)域占有越來(lái)越高的比重，加上人們對(duì)其的強(qiáng)烈需求，使得扁平化設(shè)計(jì)應(yīng)用越來(lái)越廣泛。微軟可以說(shuō)是第一個(gè)大規(guī)模使用扁平化設(shè)計(jì)的公司，以微軟WINDOWS8操作系統(tǒng)為例，該系統(tǒng)中每一個(gè)磁貼都是一個(gè)標(biāo)準(zhǔn)的矩形，磁貼之間僅有大小和顏色的區(qū)分，每個(gè)磁貼上都附有一個(gè)象征功能的標(biāo)志剪影，用來(lái)指導(dǎo)用戶進(jìn)行操作。并且系統(tǒng)界面進(jìn)行很大程度的簡(jiǎn)化，精心排版，使得界面內(nèi)容一目了然。與此同時(shí)，界面信息量也并沒(méi)有減少。通過(guò)滑動(dòng)和點(diǎn)擊，可以進(jìn)行不同信息群的橫向切換和同一信息群的深度瀏覽，使得界面條理清晰，提高了用戶的訪問(wèn)效率。此外，在蘋(píng)果操作系統(tǒng)iOS7的標(biāo)志設(shè)計(jì)上，蘋(píng)果設(shè)計(jì)師改變以再現(xiàn)事物為追求的設(shè)計(jì)理念，用簡(jiǎn)單的圖形代表應(yīng)用的具體功能。同時(shí)，為了加深用戶的印象，設(shè)計(jì)師采用鮮艷的色彩，強(qiáng)烈的對(duì)比來(lái)加以突出，個(gè)性鮮明而又簡(jiǎn)單明了。除此之外，在我們的日常生活中，還有很多很多扁平化設(shè)計(jì)應(yīng)用的實(shí)例。隨著時(shí)代的發(fā)展，扁平化設(shè)計(jì)已經(jīng)成為設(shè)計(jì)領(lǐng)域的主流趨勢(shì)，扁平化設(shè)計(jì)風(fēng)格的應(yīng)用，大大簡(jiǎn)化了我們的生活。

5扁平化設(shè)計(jì)風(fēng)格的未來(lái)發(fā)展趨勢(shì)

隨著人們生活水平的逐漸提高，電子產(chǎn)品市場(chǎng)逐步發(fā)展，越來(lái)越多的UI界面設(shè)計(jì)朝著扁平化的方向轉(zhuǎn)化，這是一個(gè)由繁到簡(jiǎn)的變化過(guò)程，它順應(yīng)了時(shí)代發(fā)展的潮流，有著相當(dāng)深厚的理論基礎(chǔ)。扁平化設(shè)計(jì)風(fēng)格是對(duì)傳統(tǒng)的設(shè)計(jì)風(fēng)格的再創(chuàng)造，既有批判性的繼承，又有其獨(dú)特的一面。在UI界面的設(shè)計(jì)路線上，越來(lái)越多的設(shè)計(jì)師傾向于選擇扁平化設(shè)計(jì)風(fēng)格。它簡(jiǎn)單的風(fēng)格很是符合如今人們的審美。扁平化風(fēng)格最大的優(yōu)勢(shì)就在于它可以更加簡(jiǎn)單直接的將信息和事物的工作方式展示出來(lái)，減少認(rèn)知障礙的產(chǎn)生，在某種程度上極為有效的節(jié)約了人們的時(shí)間?？偟膩?lái)說(shuō)，設(shè)計(jì)風(fēng)格和其所在時(shí)代的技術(shù)息息相關(guān)，當(dāng)前設(shè)計(jì)發(fā)展的大趨勢(shì)還是簡(jiǎn)化。所以，未來(lái)一定時(shí)期內(nèi)，扁平化設(shè)計(jì)依舊是時(shí)代的主流，具有比較廣闊的發(fā)展空間。新時(shí)期下，我們要積極轉(zhuǎn)變觀念，設(shè)計(jì)出更多更好的產(chǎn)品，以更好地滿足人們的需要。

參考文獻(xiàn)：

[1]性能提升UI改版騰訊手機(jī)管家全新體驗(yàn)[J].計(jì)算機(jī)與網(wǎng)絡(luò)，2013（09）.

[2]仇慧琴，田世彬.智能手機(jī)UI界面設(shè)計(jì)分析[J].赤峰學(xué)院學(xué)報(bào)（自然科學(xué)版），2016（16）.

[3] 關(guān)志如.UI靜態(tài)頁(yè)面設(shè)計(jì)與卡通動(dòng)效結(jié)合研究[J].湖南城市學(xué)院學(xué)報(bào)（自然科學(xué)版），2016（01）.