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

劉靜LIU Jing

1.武漢理工大學(xué)，武漢430070（Wuhan University of Technology， 430070Wuhan）

2.武漢交通職業(yè)學(xué)院，武漢430065（Wuhan Technology College of Community，430065 Wuhan）

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

劉靜1，2LIU Jing

1.武漢理工大學(xué)，武漢430070（Wuhan University of Technology， 430070Wuhan）

2.武漢交通職業(yè)學(xué)院，武漢430065（Wuhan Technology College of Community，430065 Wuhan）

交互設(shè)計(jì)是因市場與用戶之需而問世的一種功能型設(shè)計(jì)。交互設(shè)計(jì)的扁平化處理不僅凸顯了交互設(shè)計(jì)自身的功能性特征，而且還是以人為本理念的重要體現(xiàn)。扁平化設(shè)計(jì)是對“當(dāng)代主義”的靈活應(yīng)用與集中詮釋。在相關(guān)理論指導(dǎo)下，從形式構(gòu)造、功能顯示以及視覺呈現(xiàn)幾個方面探討了扁平化設(shè)計(jì)在交互設(shè)計(jì)中的應(yīng)用問題。

扁平化；交互設(shè)計(jì)產(chǎn)品；應(yīng)用

“扁平化”原本是一種管理手段，隨著企業(yè)經(jīng)營規(guī)模的擴(kuò)大，傳統(tǒng)的增加管理層面以應(yīng)對業(yè)務(wù)發(fā)展的辦法，已經(jīng)落伍，而慢慢向淡化層級結(jié)構(gòu)和提高管理質(zhì)量的科學(xué)層面轉(zhuǎn)化，因此導(dǎo)致以往金字塔式的管理模式轉(zhuǎn)換成一種扁平化的組織內(nèi)容，扁平化管理應(yīng)運(yùn)而生。隨著設(shè)計(jì)產(chǎn)業(yè)的發(fā)展，設(shè)計(jì)管理者就從企業(yè)管理中引入扁平化概念并運(yùn)用到自身行業(yè)，如交互設(shè)計(jì)中扁平化的應(yīng)用就是最好的例證。

交互設(shè)計(jì)是一種重要的設(shè)計(jì)形式，在交互設(shè)計(jì)中引入扁平化，主要的目的是為了使所展示的物品的信息發(fā)布簡練、便捷，令認(rèn)知迅速、沒有任何障礙。扁平化在交互設(shè)計(jì)中呈現(xiàn)著三種面貌：第一，形式構(gòu)造簡潔化；第二，功能體現(xiàn)便捷化；第三，視覺呈現(xiàn)簡明化。以下分別介紹并作簡單分析。

一、形式構(gòu)造簡潔化

作為交互軟件的“門面”——用戶界面，直接關(guān)系到交互軟件產(chǎn)品的市場以及社會的認(rèn)可度，并最終影響、決定交互軟件系統(tǒng)的競爭力和發(fā)展?jié)摿Α６缑娼Y(jié)構(gòu)在交互軟件設(shè)計(jì)中至關(guān)重要，作為交互設(shè)計(jì)的基礎(chǔ)能夠產(chǎn)生舉足輕重的作用；界面結(jié)構(gòu)設(shè)計(jì)是否合理，是否能夠迎合市場而滿足消費(fèi)者的需要，對于整個交互產(chǎn)品的設(shè)計(jì)來說舉足輕重。界面結(jié)構(gòu)設(shè)計(jì)成功與否，在很大程度上依賴于對市場的調(diào)研與把握。“根據(jù)市場所反饋的信息，界面設(shè)計(jì)主要呈現(xiàn)兩種趨勢，即橫向界面設(shè)計(jì)與縱向界面設(shè)計(jì)。這兩個層面的合理設(shè)計(jì)，是用戶正確使用與操作交互設(shè)計(jì)的關(guān)鍵。”［1］

1.界面布局簡潔

界面布局是在有限的范圍內(nèi)，依據(jù)客觀需要將圖標(biāo)、圖像、文字等在一個限定的面積、范圍內(nèi)按照整體需要及其內(nèi)在聯(lián)系而重新組織安排，即借助圖形的排列組合，形成一種獨(dú)特的視覺美，而有效地激發(fā)用戶的使用熱情。毫無疑問，當(dāng)代信息繁多，要求軟件的界面設(shè)計(jì)務(wù)必簡單便捷，而扁平化在交互設(shè)計(jì)軟件中的應(yīng)用，就極大地促成了這一效果的產(chǎn)生。界面設(shè)計(jì)簡潔，可以使用戶在第一時間內(nèi)快速獲取所需的信息，操作便捷省時，于是就有了增加界面結(jié)構(gòu)的邏輯性、突出界面功能的強(qiáng)烈要求。

2.界面層級扁淺

在交互設(shè)計(jì)中引入扁平化管理理念，不僅可以刪減掉不必要的管理環(huán)節(jié)，同時還可以有效提高軟件的運(yùn)行效率。軟件界面是用戶使用頻率最高的內(nèi)容之一，為使用戶快速找到自己需要的信息，可以根據(jù)用戶的需要，將一些基礎(chǔ)的、低層的信息上挪，壓縮或者刪去一些不必要的中級信息標(biāo)簽。這種設(shè)計(jì)理念下所形成的管理模式相對傳統(tǒng)的杉樹狀——“尖而高”，則主要呈現(xiàn)出灌木狀的“寬而扁”。這種淺層級的界面結(jié)構(gòu)，最顯著的特征就是訪問路徑短，可以使用戶直接在頂級層面快速、完整控制并觀察其他的子模塊，簡單而且容易上手也是這種設(shè)計(jì)的特征之一，越扁、層級越少就越方便用戶。

當(dāng)軟件界面設(shè)計(jì)層次趨于淺化、“扁化”時，于是“有限的界面空間就必須安置、容納較多的界面內(nèi)容，這些或頂層或低層的運(yùn)行標(biāo)簽如何有條不紊、層次分明地排列其中，就成了界面設(shè)計(jì)的關(guān)鍵。”［2］在對較淺層次的界面進(jìn)行設(shè)計(jì)時，為使界面盡可能簡潔，有必要針對用戶需求對一些常用的以及核心的功能給予重點(diǎn)地凸顯。

二、功能體現(xiàn)便捷化

軟件的功能是要通過軟件的操作來完成的，所以這也是軟件交互設(shè)計(jì)的重點(diǎn)。功能最終的受益者理所當(dāng)然是用戶，讓用戶利用軟件達(dá)到最佳使用效果，是交互軟件設(shè)計(jì)的核心。但是隨著軟件表達(dá)功能的充分展現(xiàn)，用戶很難直接達(dá)到自我操作的效果，為了解決這一問題，使用戶不僅能夠便捷操作，而且可以不必犧牲設(shè)計(jì)師的設(shè)計(jì)意圖，因此簡便化操作便成為必然。

1.操作引導(dǎo)生動

直接有效地激發(fā)使用者的使用興趣，是軟件設(shè)計(jì)的一個重點(diǎn)，因此生動的操作引導(dǎo)方式就成了設(shè)計(jì)追求的目標(biāo)。比如說搜狐新聞手機(jī)客戶端引導(dǎo)頁面的設(shè)計(jì)，由于新聞類型眾多，若操作頁面過多過繁，勢必會使用戶煩躁，但搜狐客戶端摒棄了繁雜的頁面設(shè)計(jì)，利用干凈且有條理的頁面布局以及有力的文字表現(xiàn)形式，使引導(dǎo)頁面簡介明了、沉穩(wěn)大氣，并頗具指引性。再比如UC瀏覽器引導(dǎo)頁面設(shè)計(jì)，為了解決一般瀏覽器下載時遇到下載麻煩的問題而將瀏覽器與整個引導(dǎo)頁面相連接，既方便用戶使用，同時還以一種特殊的方式強(qiáng)調(diào)了自身的優(yōu)勢所在，使用戶操作時既舒心又放心且省心。

2.操作過程簡單

目前市場上出現(xiàn)的許多軟件產(chǎn)品，都有“黑箱化”嫌疑。所謂“黑箱化”，是指在軟件設(shè)計(jì)行業(yè)，既不能打開，又不能從外部觀察內(nèi)部狀態(tài)的系統(tǒng)，這樣的操作系統(tǒng)困擾了很多用戶，不僅增加了用戶操作的心理負(fù)擔(dān)，也加大了操作的失敗率。軟件操作系統(tǒng)應(yīng)當(dāng)以用戶的使用習(xí)慣以及思維邏輯為依據(jù)，也就是以人為本。設(shè)計(jì)師在設(shè)計(jì)時一定要注意對這個問題的把握，尊重用戶的思維方式和使用習(xí)慣，從而使其設(shè)計(jì)的產(chǎn)品能夠操作簡易、便捷。

比如社交網(wǎng)站狀態(tài)欄的設(shè)計(jì)，一般情況下此類網(wǎng)站都是由頭像、發(fā)布人、內(nèi)容以及時間戳等信息或者圖片構(gòu)成簡易的操作系統(tǒng)，按照人們常規(guī)的閱讀習(xí)慣，是從基本頭像再到文字內(nèi)容，然后借助字體大小、顏色差別等凸顯重點(diǎn)、突出主題思想，順應(yīng)用戶習(xí)慣，變復(fù)雜為簡易，達(dá)到軟件設(shè)計(jì)的既定目標(biāo)。

3.操作反饋明晰

用戶判斷自我操作正、誤的標(biāo)尺就是及時、優(yōu)良的信息反饋。正面的反饋信息一般是在用戶錯誤操作時，系統(tǒng)即時反饋信息以警示用戶。正面反饋信息不但可以降低用戶的使用顧慮還能增添用戶在正確操作后的滿意度，防止了部分用戶因憂慮操作不正確而撤銷自我操作的舉動。比如很多網(wǎng)購交易在使用者提交訂單之后，系統(tǒng)會出現(xiàn)“系統(tǒng)正在處理訂單……請稍候”等信息，這類信息就屬于正面反饋信息，借助此類信息告知用戶行為發(fā)生的過程，防止用戶因不明情況而點(diǎn)擊“撤銷”。如果沒有反饋信息，用戶撤銷后自然就不會滿意此次的購物流程，那么即使前面所有的環(huán)節(jié)都很順暢、出色，這個商品網(wǎng)站也會因此流失客戶，網(wǎng)站的用戶粘性將會迅速降低，因此對于反饋信息的設(shè)計(jì)就顯得尤為重要。“在交互設(shè)計(jì)中，設(shè)計(jì)師一般都是采用動畫、音頻或者視頻、文字等元素——無論什么元素，最終都必須為用戶提供正面的反饋信息，提升用戶的滿意度，使用戶可以無后顧之憂、安心放心地完成操作程序。”［3］

三、視覺呈現(xiàn)簡明化

除了結(jié)構(gòu)與功能要求簡單與易操作之外，交互設(shè)計(jì)在視覺上同樣需要簡練快捷。扁平化設(shè)計(jì)是通過視覺呈現(xiàn)效果來完成表達(dá)、詮釋的，因此目前被認(rèn)可與接受的扁平化設(shè)計(jì)主要是指摒棄以往“流行”的陰影、切入、漸變等設(shè)計(jì)效果，力求“平”、簡的效果，以突顯軟件使用的清晰與簡潔。

1.擬物效果淡化

蘋果系統(tǒng)在擬物化設(shè)計(jì)方面的執(zhí)著的確給用戶帶來了很多麻煩：第一，應(yīng)用系統(tǒng)與實(shí)物的差異。如以修改了的QuickTime 4的按鈕為例，Windows8改變了以往傳統(tǒng)的音量控制模式，借用現(xiàn)實(shí)生活中播放設(shè)備模式，將音量調(diào)節(jié)為滾輪式旋鈕設(shè)計(jì)，雖然符合扁平化的設(shè)計(jì)理念，但這卻使新老用戶頗不習(xí)慣；第二，模擬界面和模擬功能的差異。顧名思義，模擬界面與模擬功能，就是參照實(shí)際生活之中實(shí)際物體的界面與功能而設(shè)計(jì)、規(guī)劃并使用于應(yīng)用程序，但是事實(shí)上這種照應(yīng)生活實(shí)際的設(shè)計(jì)未必可以給用戶帶來新的體驗(yàn)與體驗(yàn)方便，從某種程度上說，甚至給用戶的使用造成了諸多的不便；第三，擬物化的設(shè)計(jì)不利于交互設(shè)計(jì)的優(yōu)化，并且給開發(fā)工作增添了新的難度。目前，擬物化界面設(shè)計(jì)憑借形象逼真的畫面、低成本的學(xué)習(xí)方式，發(fā)展為當(dāng)下設(shè)計(jì)界的主流設(shè)計(jì)形式，但是隨著時間的推移，擬物化設(shè)計(jì)出現(xiàn)的問題越來越多，如過度設(shè)計(jì)造成的審美疲勞等。因此堅(jiān)持設(shè)計(jì)目的，摒棄過度裝飾，以體現(xiàn)設(shè)計(jì)的本質(zhì)，這是保證當(dāng)代交互設(shè)計(jì)水平提高的重要措施之一。

2.視覺形制扁平

“19世紀(jì)美國著名建筑設(shè)計(jì)師強(qiáng)調(diào)的“形式追隨功能”這一設(shè)計(jì)理念，在20世紀(jì)得到了人們的認(rèn)可與熱捧。形式追隨設(shè)計(jì)，即事物的外在表現(xiàn)形式必須反映、迎合事物的功能需要。”［4］在現(xiàn)代設(shè)計(jì)領(lǐng)域，這一理念已經(jīng)成為設(shè)計(jì)的準(zhǔn)繩。扁平化設(shè)計(jì)就是對這一理念的正確應(yīng)用。扁平化設(shè)計(jì)利用一些簡化、符號化了的設(shè)計(jì)打造一種二次元世界，利用簡單易懂的形式體現(xiàn)主體強(qiáng)大的使用功能。例如Windows 8的設(shè)計(jì)，借助明亮的色彩、塊面的機(jī)構(gòu)、個性化的動畫，使其設(shè)計(jì)在眾多擬物化的設(shè)計(jì)品質(zhì)中獨(dú)領(lǐng)風(fēng)騷，而備受用戶青睞。

需要聲明的是，扁平化設(shè)計(jì)并不是徹底拋棄立體效果，逆潮流而生，而是真正把握了時代潮流并與用戶以及市場需求高度吻合之后的正確選擇與使用，相比于其他設(shè)計(jì)，扁平化設(shè)計(jì)更多的是在追求形式的簡單與功能的強(qiáng)大。

四、結(jié)語

隨著互聯(lián)網(wǎng)在社會生活中的不斷滲入，交互設(shè)計(jì)的功能性以及實(shí)用性越來越多地得到了人們

［］［］的關(guān)注和重視，社會的進(jìn)步要求交互設(shè)計(jì)必須緊跟時代前進(jìn)的步伐，遵循用戶和市場的需要，在交互設(shè)計(jì)中認(rèn)真實(shí)施扁平化設(shè)計(jì)——對此形式的運(yùn)用，是“當(dāng)代主義”在交互設(shè)計(jì)中的重要體現(xiàn)。

［1］百度百科.用戶界面設(shè)計(jì)［EB/OL］.（2013-10-13）［2014-11-08］.http：//baike.baidu.com/ view/440933.htm.

［2］宋方，金錦虹，逯新輝.析“扁平化”手機(jī)界面設(shè)計(jì)［J］.包裝工程，2012（14）：60-63.

［3］李世國，費(fèi)釬.和諧視野中的產(chǎn)品交互設(shè)計(jì)［J］.包裝工程，2009（1）：137-140.

［4］崔天劍.現(xiàn)代設(shè)計(jì)的形式意味［J］.藝術(shù)百家，2013（4）：178-180.

The Application of Flat Design in Interaction Design

Interaction design is a functional design in response to market and customer needs. The fl at design in it not only highlights the functional features of interactions， but also a refl ection of the human-oriented concept. It is the fl exible practice of Modernism and also the integrated interpretation. With relevant theories， this paper from structure， function expression and visual presentation the three aspects discusses the application issues of fl at design in interaction design.

fl atten；interaction design products；application

J023

Adoi：10.3963/j.issn.2095-0705.2015.01.011（0061-03）

2014-12-26

劉靜，武漢理工大學(xué)藝術(shù)與設(shè)計(jì)學(xué)院博士生，武漢交通職業(yè)學(xué)院藝術(shù)學(xué)院副教授。