扁平化風(fēng)格在交互設(shè)計(jì)中的應(yīng)用研究

王 艷

1 扁平化設(shè)計(jì)概念分析

1.1 界面設(shè)計(jì)中的扁平化設(shè)計(jì)

扁平化設(shè)計(jì)屬于二維設(shè)計(jì)，扁平化的設(shè)計(jì)在裝飾效果方面做出了很大程度的取舍，而放棄裝飾效果也是扁平化設(shè)計(jì)概念的一個(gè)重要核心，在扁平化設(shè)計(jì)風(fēng)格下所有元素的邊界都順應(yīng)了現(xiàn)代的發(fā)展氣息，做出干凈、利落、簡潔、符號(hào)化的一種形態(tài)，而且在字體的修飾過程中扁平化設(shè)計(jì)風(fēng)格主張無襯線修飾，在一定程度上弱化了一些干擾信息，相應(yīng)的使重要的內(nèi)容與信息的表達(dá)得到了有效的呈現(xiàn)。

1.2 交互設(shè)計(jì)中的扁平化設(shè)計(jì)

首先針對(duì)于交互設(shè)計(jì)的對(duì)象進(jìn)行分析，交互設(shè)計(jì)的對(duì)象主要是客戶（人）和機(jī)器（電子終端設(shè)備或產(chǎn)品），相應(yīng)的設(shè)計(jì)部門能夠結(jié)合客戶的需求取向挖掘出客戶在應(yīng)用機(jī)器的過程中所體驗(yàn)到的感受，然后結(jié)合客戶的交互心理和交互行為進(jìn)行重點(diǎn)分析，以扁平化的設(shè)計(jì)風(fēng)格設(shè)計(jì)出更符合客戶的交互方式，從而達(dá)到了在交互設(shè)計(jì)視角下扁平化設(shè)計(jì)風(fēng)格的應(yīng)用，通過這一設(shè)計(jì)流程能夠促進(jìn)客戶交互體驗(yàn)的提高，而且給予客戶一個(gè)更為愉快舒適的交互體驗(yàn)，同時(shí)還能夠促進(jìn)相應(yīng)電子終端設(shè)備、產(chǎn)品的應(yīng)用效率。扁平化設(shè)計(jì)風(fēng)格在交互設(shè)計(jì)中的應(yīng)用減少了人們了解交互方式的時(shí)間，而且交互過程的精煉簡化是順應(yīng)當(dāng)前時(shí)代的發(fā)展趨勢(shì)，主張為用戶提供更有效率、更為便捷的交互體驗(yàn)，所以丟棄冗長的交互界面，以及簡化交互的流程、客戶交互體驗(yàn)的不斷完善是扁平化設(shè)計(jì)風(fēng)格在交互設(shè)計(jì)中應(yīng)用的最大優(yōu)勢(shì)。

2 扁平化設(shè)計(jì)風(fēng)格的特點(diǎn)分析

通過上述扁平化設(shè)計(jì)風(fēng)格在交互設(shè)計(jì)和平面設(shè)計(jì)中的應(yīng)用能夠明確，在扁平化設(shè)計(jì)中設(shè)計(jì)元素屬于扁平的形狀、界面設(shè)計(jì)簡潔精煉、以及零3D 效果是扁平化設(shè)計(jì)風(fēng)格的重要特點(diǎn)，從扁平化設(shè)計(jì)風(fēng)格的特點(diǎn)中能夠了解扁平化設(shè)計(jì)風(fēng)格提倡“通俗易懂”，主張應(yīng)用效率和交互體驗(yàn)，這種設(shè)計(jì)風(fēng)格是一種思維方式同時(shí)也是一種設(shè)計(jì)理念，所以設(shè)計(jì)工作人員在扁平化設(shè)計(jì)風(fēng)格應(yīng)用的過程中，一方面要重視客戶應(yīng)用過程中視覺效果的簡潔能夠?yàn)榭蛻魩砀鼮楸憬莸牟僮黧w驗(yàn)，另一方面就是要綜合考量視覺效果是否能夠融合與相應(yīng)的設(shè)備功能。視覺效果的扁平化理念主要來源于“形式服從功能”，也就是說功能性是扁平化設(shè)計(jì)的重要特點(diǎn)，無論是設(shè)計(jì)還是裝飾所要達(dá)到的目的都是為了提供功能本身的應(yīng)用效果，所以只要在最簡單的情況下突出功能本身，那么其他繁雜的裝飾就如同畫蛇添足，這種理念并不是一味的去簡化元素設(shè)計(jì)，也會(huì)從客戶的角度上對(duì)元素的顏色、字體、色塊、模板等各個(gè)方面進(jìn)行協(xié)調(diào)。

3 扁平化設(shè)計(jì)風(fēng)格在交互設(shè)計(jì)中的應(yīng)用分析

3.1 設(shè)計(jì)元素的提煉

1）元素提煉的主要內(nèi)容。對(duì)元素的內(nèi)容進(jìn)行重點(diǎn)提煉并將其簡化，比較典型的一個(gè)元素提煉實(shí)例就是畢加索的“牛”，如圖1 所示，作者從最初的寫實(shí)風(fēng)格轉(zhuǎn)換為最后的單線經(jīng)過了幾個(gè)簡化的步驟，在簡化過程中作者不僅僅是對(duì)元素裝飾進(jìn)行了簡化，還綜合考量了簡化過程中的元素取舍。圖1為畢加索作品“牛”簡化過程圖示。

圖1

在扁平化設(shè)計(jì)風(fēng)格中，元素提煉的過程與上述過程相似，是從擬物化轉(zhuǎn)變?yōu)楸馄交囊粋€(gè)過程，而元素提煉內(nèi)容的目的則是為了實(shí)現(xiàn)元素目標(biāo)的清晰化，更深層次的凸顯元素本身的功能。圖2 為蘋果手機(jī)IOS6 系統(tǒng)部分圖標(biāo)與IOS7 系統(tǒng)部分圖標(biāo)的對(duì)比。

圖2

2）去除特效裝飾。扁平化設(shè)計(jì)風(fēng)格在實(shí)際的應(yīng)用中去除了一些特效裝飾，包括元素的漸變效果、陰影效果以及元素表面的紋理等，僅僅只留下一些較為簡單的線條作為元素分界線，目的則是為了為更為重要的信息留出廣泛的空間，從而使客戶在操作的過程中更集中于元素功能的本身。圖3 為蘋果手機(jī)IOS6 系統(tǒng)與IOS7 系統(tǒng)計(jì)算器的平面設(shè)計(jì)對(duì)比。

圖3

3）圖形幾何、符號(hào)化。扁平化設(shè)計(jì)風(fēng)格往往在平面交互設(shè)計(jì)中將圖標(biāo)元素符號(hào)化，圖形設(shè)計(jì)融合幾何設(shè)計(jì)理念，給予客戶一個(gè)更為直觀的視覺體驗(yàn)。

圖4 為扁平化設(shè)計(jì)風(fēng)格平面按鈕設(shè)計(jì)圖示。

圖4

3.2 風(fēng)格顏色的搭配

用色的選擇。在扁平化設(shè)計(jì)風(fēng)格選擇元素用色的過程中，較為常用的就是多色系的應(yīng)用，對(duì)于元素顏色的選擇存在3 至8 個(gè)顏色，但是并不是所有的顏色都能夠被應(yīng)用在扁平化風(fēng)格設(shè)計(jì)中，針對(duì)于顏色的選擇首先考慮較為鮮亮、飽和度較高的顏色，而且還考量了所選擇的顏色在亮背景和暗背景上所呈現(xiàn)的視覺效果。此外復(fù)古色系也是扁平化風(fēng)格設(shè)計(jì)所看重的一個(gè)選擇，復(fù)古色系給與用戶一種柔和的視覺效果而且在與字體相配和的過程中復(fù)古色系更為融洽。最后就是單色系的應(yīng)用，單色系能夠彰顯出扁平化界面的規(guī)整統(tǒng)一化，而且單色系能夠在一定程度上縮小界面設(shè)計(jì)的視覺效果。

3.3 色塊的利用

在扁平化設(shè)計(jì)風(fēng)格中色塊的應(yīng)用能夠促使整個(gè)界面功能區(qū)劃分明確，而且當(dāng)文本、按鈕以及各個(gè)功能的元素圖表都布滿一個(gè)界面時(shí)，通過色塊的合理搭配能夠?qū)崿F(xiàn)信息咨詢類別的歸納與整合，所以色塊在扁平化設(shè)計(jì)風(fēng)格中發(fā)揮著功能區(qū)域劃分的作用。

3.4 字體的運(yùn)用

文字是用戶在獲取信息咨詢過程中的一個(gè)最為直接的方式，也是信息咨詢傳達(dá)效果最為準(zhǔn)確的一個(gè)方式，但是在扁平化設(shè)計(jì)風(fēng)格中并不是所有的文字字體都能夠被應(yīng)用于扁平化設(shè)計(jì)中，目前針對(duì)于字體的運(yùn)用將“無襯線字體”作為扁平化風(fēng)格的標(biāo)準(zhǔn)用字，而且在字體筆畫的粗細(xì)程度方面扁平化設(shè)計(jì)風(fēng)格將其統(tǒng)一規(guī)范，從而提高文字的可讀性。

3.5 板式的合理優(yōu)化、細(xì)節(jié)的呈現(xiàn)

大圖、半透明界面在界面板式的優(yōu)化中是兩個(gè)常用的方式，但是在覆蓋底圖的過程中，相應(yīng)的設(shè)計(jì)人員應(yīng)綜合考量覆蓋畫面的效果是否滿足需求，被覆蓋的部分是否合理。扁平化設(shè)計(jì)風(fēng)格雖然是純平面的設(shè)計(jì)，但是為了增強(qiáng)扁平化的效果以及受眾的視覺體驗(yàn)，常常會(huì)在一些細(xì)節(jié)上增加一個(gè)色塊，使其趨近于立體的視覺效果，較為常用的就是長投影設(shè)計(jì)。

4 結(jié)束語

在交互體驗(yàn)中界面設(shè)計(jì)是電子終端設(shè)備與客戶溝通最為直接的一個(gè)陣地，客戶在一個(gè)有限的屏幕中每天要獲取大量的信息咨詢，而扁平化設(shè)計(jì)風(fēng)格的應(yīng)用在除去繁雜的干擾元素之后，給予客戶呈現(xiàn)的則是更為直觀、簡潔的應(yīng)用體驗(yàn)，信息內(nèi)容得到了一定程度的凸顯而客戶在進(jìn)行信息咨詢獲取的過程中也能夠更集中于信息咨詢本身。