淺談交互性界面中視覺(jué)傳達(dá)設(shè)計(jì)的扁平化趨勢(shì)

梁宏昌

【摘要】我們正在走向真正的移動(dòng)信息時(shí)代，智能移動(dòng)終端迅速發(fā)展，手機(jī)、平板電腦這些新興數(shù)碼設(shè)備帶來(lái)了多元化的傳播方式，個(gè)人的日常生活和工作學(xué)習(xí)，都漸漸離不開(kāi)這些移動(dòng)設(shè)備所提供的的各種資訊和應(yīng)用。移動(dòng)設(shè)備的軟硬件在不斷地開(kāi)發(fā)新功能新版本，視覺(jué)體驗(yàn)日漸豐富，與此同時(shí)，扁平化的視覺(jué)設(shè)計(jì)正在成為一種新的潮流。

【關(guān)鍵詞】交互界面 視覺(jué)傳達(dá)設(shè)計(jì) 扁平化

媒介是社會(huì)發(fā)展的基本動(dòng)力， 每一種新媒介的產(chǎn)生， 都開(kāi)創(chuàng)了人類感知和認(rèn)知世界的方式， 創(chuàng)造出新的社會(huì)行為類型。[1]隨著移動(dòng)通信技術(shù)和電子科技的飛速發(fā)展，用戶獲取信息逐漸從個(gè)人PC轉(zhuǎn)向便攜的移動(dòng)設(shè)備，設(shè)備的顯示屏幕越來(lái)越細(xì)膩和微型化，這就鞭策著操作界面中的視覺(jué)設(shè)計(jì)不斷地更新變化，須具備簡(jiǎn)潔、直觀、統(tǒng)一、識(shí)別性強(qiáng)等美感特征。

1.交互性界面設(shè)計(jì)的友好性和美觀性

應(yīng)用界面的友好性在很大程度上決定了其能否能被廣泛接受，移動(dòng)應(yīng)用的開(kāi)發(fā)者都很重視交互效果的友好性，考慮用戶操作是否易用、指示是否清晰可靠、功能是否完善等。傳統(tǒng)的PC操作基本依靠鼠標(biāo)和鍵盤來(lái)完成交互操作。而現(xiàn)在隨著便攜設(shè)備的智能化發(fā)展，大量的交互操作都是基于觸摸、手勢(shì)甚至非接觸式的感應(yīng)來(lái)進(jìn)行。所以，一個(gè)應(yīng)用界面應(yīng)如何設(shè)計(jì)從而能方便適應(yīng)手勢(shì)控制成為移動(dòng)界面設(shè)計(jì)的一個(gè)關(guān)鍵。另外，應(yīng)用程序隨著時(shí)間、速率、彈性、圖像和色彩的變換、滾動(dòng)等種種設(shè)置，在設(shè)計(jì)者的精心微調(diào)之下，能帶給用戶多少驚奇和享受，這種效果的呈現(xiàn)也是交互性設(shè)計(jì)的重點(diǎn)。

只考慮功能的設(shè)計(jì)界面是難以獲取受眾的，注重友好性的界面設(shè)計(jì)還要求我們重視美感，美的界面設(shè)計(jì)可以幫助人們保持在一個(gè)合適的心理負(fù)荷下，從而更適合日益發(fā)展的技術(shù)給人們帶來(lái)的挑戰(zhàn)。[2]由于用戶體驗(yàn)和可用性的關(guān)系密切，所以用戶操作界面時(shí)候的心理體驗(yàn)也是決定其友好性的重要因素。美使人心情愉悅，這種愉悅感反過(guò)來(lái)又使受眾的思維更具進(jìn)取性，從而更容易找到所面對(duì)問(wèn)題的答案。

2.界面設(shè)計(jì)中視覺(jué)元素的扁平化設(shè)計(jì)

現(xiàn)在越來(lái)越多的操作界面采用扁平化的視覺(jué)設(shè)計(jì)。扁平化設(shè)計(jì)給人的感覺(jué)通常都很簡(jiǎn)潔，簡(jiǎn)潔、友好的特性也使得它廣受移動(dòng)界面和時(shí)尚網(wǎng)站設(shè)計(jì)的青睞。扁平化設(shè)計(jì)的通俗理解是：使用簡(jiǎn)單特效，或者無(wú)特效來(lái)創(chuàng)建的設(shè)計(jì)方案，它不包含三維屬性。這一設(shè)計(jì)趨勢(shì)極力避免任何擬物化設(shè)計(jì)的元素，最核心的地方就是放棄一切裝飾效果，諸如投影、斜面、浮雕、漸變等特效都不會(huì)在設(shè)計(jì)中出現(xiàn)。扁平化設(shè)計(jì)有其獨(dú)特的觀感，它依賴于一個(gè)清晰的層次感，所有的元素的邊界都干凈利落，這種設(shè)計(jì)有著鮮明的視覺(jué)效果，它所使用的元素之間有清晰的層次和布局，這使得用戶能直觀的了解每個(gè)元素的作用以及交互方式。[3]扁平化的設(shè)計(jì)風(fēng)格如今在網(wǎng)頁(yè)和手機(jī)上的應(yīng)用無(wú)所不在，尤其在便攜設(shè)備上，因?yàn)槠聊坏南拗疲沟眠@一風(fēng)格在用戶體驗(yàn)上更有優(yōu)勢(shì)，更簡(jiǎn)潔的圖標(biāo)使得界面的視覺(jué)效果干凈整齊，使用起來(lái)便捷而順暢，可以更加簡(jiǎn)單直接的將信息和事物的工作方式展示出來(lái)，減少認(rèn)知障礙的產(chǎn)生。

其實(shí)生活中處處可見(jiàn)扁平化設(shè)計(jì)作品，比如蘋果手機(jī)，采用棱角分明的線條，加上蘋果的IOS系統(tǒng)界面，單色鮮明的對(duì)比，非常漂亮。扁平化設(shè)計(jì)與當(dāng)下最常見(jiàn)擬物化計(jì)形成鮮明對(duì)比，Andorid系統(tǒng)界面均采用擬物化，作為手機(jī)領(lǐng)域的風(fēng)向標(biāo)品牌蘋果手機(jī)最新推出的IOS8使用了扁平化設(shè)計(jì)，鮮明的個(gè)性與特點(diǎn)，讓人記憶深刻，是一種非常新穎及簡(jiǎn)便的設(shè)計(jì)美學(xué)原則在手機(jī)網(wǎng)頁(yè)界面設(shè)計(jì)中運(yùn)用的典型案例。

3.扁平化設(shè)計(jì)在交互性界面中運(yùn)用的優(yōu)勢(shì)

一種設(shè)計(jì)方式的創(chuàng)新，有好的一面，也有不好一面，不是所有的人都能完全的接受新的創(chuàng)新方式。有人會(huì)認(rèn)為感覺(jué)扁平化風(fēng)格過(guò)于冰冷。但是一種全新的設(shè)計(jì)方式的出現(xiàn)，并被大部分人所接受甚至追捧，并能引領(lǐng)新的設(shè)計(jì)潮流，那么它的優(yōu)點(diǎn)必定大于缺點(diǎn)。

早期具有代表性的界面是微軟在Windows Phone 7中引入的Metro界面設(shè)計(jì)，簡(jiǎn)潔的圖形、明亮的色彩搭配網(wǎng)格分割，給用戶一種清爽、清新、明朗的體驗(yàn)，為以后扁平化風(fēng)格創(chuàng)作做出了重大啟示。而將扁平化的風(fēng)格推向頂峰并迅速普及的是蘋果的于2013年發(fā)布的IOS7操作系統(tǒng)。

扁平化風(fēng)格更加注重圖標(biāo)在美觀之外的功能性意義，對(duì)色彩種類的運(yùn)用相對(duì)較少，所占存儲(chǔ)空間比較小，因而相比擬物化風(fēng)格，它在有限的時(shí)間中加載速度更快；更容易突出主題，減少對(duì)用戶的視覺(jué)干擾和記憶負(fù)擔(dān)；便于識(shí)別，扁平化的圖標(biāo)設(shè)計(jì)更加簡(jiǎn)潔加上醒目的色彩，即使在較遠(yuǎn)的距離，也能夠清楚地被用戶識(shí)別；設(shè)計(jì)也相對(duì)容易，無(wú)需考慮多余的裝飾，只需注意圖形的直觀性、界面網(wǎng)格布局，色彩的運(yùn)用等方面，使圖標(biāo)保持易用性、一致性。[4]

4.結(jié)語(yǔ)

在Win8 metro界面中和蘋果產(chǎn)品及IOS系統(tǒng)中，均可以看到很多扁平化設(shè)計(jì)影子，在安卓系統(tǒng)中，也同樣可以看到準(zhǔn)扁平化設(shè)計(jì)元素且體驗(yàn)良好。越來(lái)越多的網(wǎng)站設(shè)計(jì)也在走扁平式設(shè)計(jì)的路線，扁平化的簡(jiǎn)約風(fēng)格的設(shè)計(jì)正在成為一個(gè)深受歡迎的潮流，人們正在遠(yuǎn)離一直很受歡迎的擬物化設(shè)計(jì)。任何一個(gè)新生事物都有其生命周期，海量的信息和創(chuàng)新讓人應(yīng)接不暇，設(shè)計(jì)師只有根據(jù)內(nèi)容要求有尺度的使用扁平化設(shè)計(jì)的美學(xué)原則，把精力集中到每一處細(xì)節(jié)上，將一切元素合理整合，才能設(shè)計(jì)出人性化的操作界面，正如美國(guó)著名信息建筑家理查德·沃爾曼所說(shuō)， “現(xiàn)在我們開(kāi)始理解到新技術(shù)的出現(xiàn)并非是為了取代那些 ”舊“ 的， 而是“舊” 的要容納 “新” 的。[5]所以，一味地為了扁平化而設(shè)計(jì)則會(huì)顯得庸俗。

【參考文獻(xiàn)】

[1]馬歇爾·麥克盧漢，理解媒介———論人的延伸 [M]. 何道寬， 譯. 北京： 商務(wù)印書(shū)館， 2000

[2]任婕. 騰訊網(wǎng)UED體驗(yàn)設(shè)計(jì)之旅[M]. 電子工業(yè)出版社. 2015.（04）

[3]Art Eyes設(shè)計(jì)工作室. 創(chuàng)意UI photoshop玩轉(zhuǎn)圖標(biāo)設(shè)計(jì)[M]. 人民郵電出版社. 2015（01）

[4]郗鑒. 界與面一本寫給青春設(shè)計(jì)師的書(shū)[M].電子工業(yè)出版社.2015.（05）

[5]原研哉，設(shè)計(jì)中的設(shè)計(jì) [M]. 濟(jì)南： 山東人民美術(shù)出版社， 2006.