論界面設(shè)計的扁平化形式

李亭翠，陳 穎

（阜陽師范學院信息工程學院，安徽 阜陽236000）

論界面設(shè)計的扁平化形式

李亭翠，陳 穎

（阜陽師范學院信息工程學院，安徽 阜陽236000）

扁平化設(shè)計風格能在當今設(shè)計界盛行，并不是偶然的，而是時代發(fā)展所致。扁平化設(shè)計給界面設(shè)計帶來簡約之美，雖然扁平化本身也仍在尋找一種更好的表現(xiàn)形式來給大眾更好的視覺效果，但它依然是大勢所趨。文章通過從圖形、色彩、字體等角度分析扁平化在界面設(shè)計中的發(fā)展形式，并對其整合。

扁平化；界面設(shè)計；設(shè)計形式；要素

引言

隨著人們審美的發(fā)展和需求，擬物化設(shè)計逐漸從主流設(shè)計中退出，而扁平化設(shè)計在未來生活中的使用會越來越頻繁。盡管當初這種別致的設(shè)計風格沒有獲得大眾的一致贊同，可能還受到了一些諷刺和嘲笑，但它依然贏得了業(yè)內(nèi)高度的關(guān)注，還被推到了史無前例的高度，很快就風靡了整個設(shè)計界，成為一種設(shè)計風尚。究其原因，主要是因為扁平化這種簡單、清楚的風格更符合新時代的特征和需要。

1.扁平化界面設(shè)計盛行的必然性

在這個高科技信息化的時代，新媒體技術(shù)的蓬勃發(fā)展讓我們的生活更加便利,手機和平板電腦的普及率越來越高，已成為我們生活中不能缺少的一部分。在過去幾年中，我們也目睹了軟件界面設(shè)計從三維及擬物化到扁平化和極簡化的過渡。

人們怎么會突然從對材質(zhì)、高光和陰影的喜愛轉(zhuǎn)向扁平化了呢?從美學的角度來說，一種視覺風格的審美疲勞后，人必須尋求另一種不一樣的視覺刺激，扁平化設(shè)計在這么短的時間里快速流行，多少有這方面的原因。但是從本質(zhì)上看，它是在這個信息化、多元化時代背景下的一種設(shè)計語言和思維方式的轉(zhuǎn)變，而不只是一種感官層次的改變。這種轉(zhuǎn)變受到了多種因素的推動，以下是其中較為重要的幾個。

1.1信息過載

在當今快節(jié)奏的生活和文化背景下，每一天我們都要不斷的接收各種信息流，有重要的也有無關(guān)緊要的。我們必須時刻地評估、挑選并且創(chuàng)造各種有價值的內(nèi)容，顯然，這是很勞神的。此外，移動設(shè)備功能越來越全面，我們需要在界面上更直觀更易識別。信息迅速膨脹，我們需要內(nèi)容更加的豐富來滿足我們對信息的獲取，所以說人們現(xiàn)在很容易對復雜的裝飾產(chǎn)生一種心理上的負擔，而減少用戶界面中的視覺元素正好吻合了人們需要減壓的心理以及電子設(shè)備的發(fā)展，能夠給予我們少許的寧靜。

1.2簡約是金

盡管傳統(tǒng)的軟件開發(fā)商更加青睞在產(chǎn)品界面中使用大量裝飾以此為由可以賣個好價，但是在現(xiàn)代的需求下，追求極致的簡約和單純的視覺體驗風潮更加偏向于使用簡單化取代繁復化。應用程序越簡單，界面也就越簡單。

很多新的網(wǎng)站以及老網(wǎng)站升級改版后的設(shè)計紛紛采用了扁平化的設(shè)計，不管在電腦還是在移動輸出終端的界面設(shè)計中這已經(jīng)是不可抵擋的趨勢了，并且這種趨勢正以非一般的速度蔓延開來。扁平化并不是簡單的刪除多余的修飾效果，畢竟，用幾根簡單的線條和幾個色塊來表達主題，并沒有用模擬真實物體表達來的那么直觀、容易。簡約的界面設(shè)計需要設(shè)計師擁有更加準確的視覺傳達能力，要運用抽象而又嚴謹?shù)倪壿嬎季S方式加上精準的歸納總結(jié)才可以完美的表現(xiàn)出來。所以說扁平化風格并不代表著設(shè)計師的工作變輕松，更不能說明界面的可用性能被降低。

在20世紀建筑業(yè)的極簡主義運動強調(diào)了幾點內(nèi)容即：“形式服務于功能”、“少即是多”等等，這些一直延續(xù)到今天都還讓我們受用。另外，我自己特別喜歡在別人問米開朗基羅他是如何創(chuàng)作大衛(wèi)雕像時的答復：“很簡單，我只要鑿去多余的石頭，留下有用的?！睂τ诮缑嬖O(shè)計來說也是同樣的道理。那么作為設(shè)計師，在進行扁平化風格創(chuàng)作時，不僅僅是探求視覺效果的問題，追求產(chǎn)品功能和使用效果才是最本質(zhì)的。

2.扁平化界面設(shè)計形式要素

2.1圖形

毋庸置疑扁平化設(shè)計已成為當下最熱門的設(shè)計風格之一。從圖形的角度來看，扁平化風格設(shè)計已經(jīng)不再推崇寫實的圖形設(shè)計，取消了原來設(shè)計中大熱的陰影、漸變、高光等3D效果，而采用簡潔直觀的呈現(xiàn)形式，用抽象、高度概括性的平面圖形取代三維效果的圖形。扁平化圖形創(chuàng)意的基本形狀有矩形，圓形、菱形、多邊形等，但要留意最好不要用多于六條邊的形狀，因為這樣人們的注意力就有可能會在圖形的邊數(shù)上而忽視掉圖形本來要表達的內(nèi)容信息。雖然扁平化的圖形表面看起來十分簡約，但這并不是簡單地把擬物化設(shè)計中復雜的裝飾效果丟棄就能達到的，剛好相反，它對設(shè)計者的要求更高，要求設(shè)計者對圖形有更加準確的把控能力，通過既抽象又嚴謹?shù)乃季S條理，才能對扁平化圖形進行精簡總結(jié)，最終呈現(xiàn)完美的設(shè)計表現(xiàn)。其中最重要的主旨就是要使圖形經(jīng)過抽象和簡化過后依然能被受眾正確的辨別，從而有效的進行信息的傳遞，讓用戶能有更好的體驗。所以說，表面看起來很簡單的內(nèi)容，但其實內(nèi)部大有乾坤。如果扁平化圖形設(shè)計可以處理適當，就會給人一種簡約而不簡單，清新而不單調(diào)之感，反之，就會讓人感到太過無聊和乏味。(如圖一)

扁平化圖形創(chuàng)意除了以上幾種幾何形狀以外，也可以用多種基礎(chǔ)形狀拼合而成。但這種形狀的組合最好不要超過三種以上的基礎(chǔ)形狀，因為如果這樣，會讓設(shè)計和扁平化的簡約風格相背馳。

圖一 扁平化圖形

2.2色彩

色彩的運用在扁平化設(shè)計中有著舉足輕重的地位，在日常設(shè)計中我們就可以發(fā)現(xiàn)，基本上所有的扁平化設(shè)計都脫離不了色彩。它不僅僅傳遞此圖形是什么顏色，它還是傳遞給觀眾情感的一種最直接的表達方式，一般扮演著和觀眾情感互動的主要角色。所以，如果一個界面的色彩非常明快、活潑，那么也就很容易吸引受眾的目光。

對于色塊的顏色，傳統(tǒng)的色彩規(guī)律不大適用于扁平化設(shè)計中了，扁平化設(shè)計一般都有特定的設(shè)計法則，一般用純色，復古色或是同類色會使設(shè)計更加出彩。例如復古色調(diào)，是在純色的基本上增添白色,以降低顏色的飽和度,讓顏色變得更加柔和。如果把復古色當作設(shè)計的主色調(diào)，那么最終顯示的效果會很棒，這種顏色會讓頁面變得更加淡雅，讓人看著舒適?？傊髦季褪歉鞣N顏色搭配要協(xié)調(diào)，雖然視覺上扁平，但整體界面會感覺豐富、活潑。在擬物化設(shè)計里，有很多界面的底紋都會采取肌理效果，使界面具有很強的質(zhì)感，給人一種親和力。而扁平化設(shè)計中，拋棄掉了真實質(zhì)感的底紋設(shè)計則會讓界面更簡潔直觀，從而可以更加清晰地向受眾傳達想要表達的情感和內(nèi)容。

2.3字體

由于扁平化設(shè)計本身就十分簡約，運用的元素也是少之又少，字體的樣式和布局就會在設(shè)計中變得格外的重要，甚至會直接影響設(shè)計的最終效果，因此字體設(shè)計在扁平化設(shè)計中也必須非常的考究。字體的設(shè)計應該根據(jù)整個頁面的風格來定義，如果在很簡潔的頁面上放上非常精致繁復的字體就會變得格格不入。扁平化風格的界面設(shè)計選擇簡單的字體最為適宜。文字的清晰度和粗細也都非常重要的因素，而且最好一個界面中字體系列保持在兩種左右，不易太多以免繁雜。字體不單單要迎合大眾的審美需求，也要實用，方便閱讀。在扁平化設(shè)計中經(jīng)常采用的是無襯線字體，如：黑體、微雅、方正幼線等，這是由于它們特殊的字體形態(tài)更符合扁平的特點。無襯線體里，字體較寬，會讓人感到輕松，排版的時候不容易有緊張感，更容易閱讀，而且不管在任何背景上也都能輕松的識別。無襯線體的線條非常的簡練，具有幾何感，這種不帶有任何花哨的字體與簡單明快的扁平化界面設(shè)計是非常吻合的，從而確保設(shè)計在視覺上的統(tǒng)一性 (如圖二)。當然也可以用一些別致的字體做點綴，但是必須要懂得適可而止，不能太過太繁。

另外，扁平化界面設(shè)計中字體的排版也需要格外的注重，字體占據(jù)面積的比例一定要把控好，一定要適當?shù)牧舭?，讓整個畫面有呼吸感，這樣可以更好的襯托出主體內(nèi)容，更易被受眾接受，文字占的空間面積大則會顯得擁擠，給人以壓迫感，也不適合扁平化簡約、明快的風格。

圖二 扁平化字體

3.扁平化界面設(shè)計形式創(chuàng)新-扁平立體化

3.1扁平化界面設(shè)計的局限性?

眾所周知，Iphone一直處于界面設(shè)計時尚的前沿，從一代的擬物化界面設(shè)計，注重細節(jié)，每個圖標和按鈕都做到極致。再到前不久才發(fā)布的IOS8操作系統(tǒng)，扁平化設(shè)計風格完全與以前的擬物化迥異，但還是吸引著大批的追隨者。究其原因是簡潔直觀，色彩明艷，更富有時尚感的扁平化設(shè)計風格，在視覺層次上呈現(xiàn)得更為輕盈、明快，沒有過往的厚重感覺，從而深得年輕消費者的追捧。

扁平化設(shè)計盡管讓人在視覺上有煥然一新的新鮮感，吸引大眾，可是在用戶體驗上還是需要用戶花時間去琢磨，使用起來不像擬物化設(shè)計那么簡單明了。因為在擬物化界面設(shè)計中圖形帶有一點過渡的漸變，微微的浮雕效果，這些多多少少都提高了用戶的辨識度并引導用戶該如何去使用。而扁平化設(shè)計摒棄了這樣特征，沒有了逼真的細節(jié)效果，界面中的每個元素都處于同一平面上，那么用戶在使用時就會有：這是什么？按鈕還是標題？我點擊后會出現(xiàn)什么？等諸多疑問，這些都直接影響用戶能否愉快、順暢地使用。在實際生活中也很容易發(fā)現(xiàn)，扁平化的界面設(shè)計在人群中普及率還不是很高，特別對于兒童和老人，因為在界面上去除了擬物化，而扁平化的設(shè)計在辨識度上沒有擬物化那么直接，從而增加了使用者的學習成本。另外，扁平化設(shè)計如果沒有處理得當就會顯得很平，沒有層次感，使用操作起來就會產(chǎn)生一些問題。

3.2形式創(chuàng)新-扁平立體化

扁平化并不等于沒有一點設(shè)計修飾效果，在實際設(shè)計中，設(shè)計師應根據(jù)設(shè)計理念、服務對象的特征以及要解決的問題靈活運用扁平化風格。一個較為成功的扁平化設(shè)計的創(chuàng)作，最根本上需要把產(chǎn)品功能排在第一位，而不單單只是考慮視覺呈現(xiàn)的問題，不要為了扁平化而扁平化，扁平化的視覺呈現(xiàn)也是為了產(chǎn)品的功能服務的。在界面設(shè)計時，我們要時刻牢記設(shè)計形式是服務于產(chǎn)品功能的，怎么樣用直觀的界面和交互向用戶展示產(chǎn)品的整體構(gòu)架和功能是我們首先要考慮的問題。簡約而不簡單，把影響用戶理解和使用產(chǎn)品的視覺要素刪除，合理的運用效果，自然的指引用戶正確的使用產(chǎn)品，這是扁平化界面設(shè)計的宗旨。例如在電子書之類的界面設(shè)計中，用戶最需要的需求就是瀏覽閱讀，這時應把對閱讀產(chǎn)生誤導障礙的界面元素隱藏起來，當用戶需要的時候再通過手勢滑動來展現(xiàn)出來。

由于扁平化界面設(shè)計形式的局限性使有些設(shè)計不能完美的呈現(xiàn)出來，那么我們可以尋求另一種新的形式來取代純粹的扁平化形式：扁平立體化，即是在扁平化的基礎(chǔ)上延伸出擬物化設(shè)計。如圖三中的一系列圖片就是在扁平化的基礎(chǔ)上延伸出的立體化圖形，這種圖形用單純的色塊組合而成，在平面上展現(xiàn)出擬物的視覺效果，既簡單又富有趣味性，綜合了兩者的優(yōu)點，避免了單純的扁平化不直觀的弊端。另外，雅虎在扁平化風潮的強力影響下，也經(jīng)過了很多次扁平化LOGO稿圖的演變，最終采用了一款類似扁平立體化的效果圖。LOGO從原本的襯線體變成了無襯線體，最后的感嘆號還添加了一點動畫的寫實效果(如圖四)。

圖三

圖四

結(jié)語

設(shè)計服務于人，不管我們在設(shè)計時選用哪一種設(shè)計形式，扁平化、擬物化還是扁平立體化，都取決于哪種形式更能表達我們想要的最終效果，并且以用戶的情感需求為主導。扁平化風格帶著濃重的時代氣息席卷了設(shè)計界的多個領(lǐng)域，我們欣然接受，雖然扁平化設(shè)計流行大熱，但也只不過是為設(shè)計師們提供了一種新的設(shè)計表現(xiàn)形式，而并不是把原來的一切全部舍棄。最實質(zhì)的還是我們應該怎樣去把設(shè)計做好，怎樣能表達設(shè)計想要表達的目的，而不應該只是拘泥于形式。設(shè)計師們應根據(jù)用戶需要揚長避短，合理的取舍，讓各種設(shè)計形式發(fā)揮自己最大的優(yōu)勢，既給人們帶來視覺上的盛宴又有實質(zhì)上的便利。

[1]宋方.析“扁平化”手機界面設(shè)計[J].《包裝工程》，2012，33（014）：60-63．

[2]韓曉墨.繼承與發(fā)展并重—論扁平化設(shè)計的席卷[J].現(xiàn)代裝飾理論,2013.16．

[3]馬娜娜.簡潔而不乏味——淺談扁平化界面設(shè)計［J］.大眾文藝，2013（16）：137-138.

編輯：董剛

On the Flat form of Interface Design

LI Tingcui，CHEN Ying
（College of Inforrmation Engineering Fuyang Teachers'College，F(xiàn)uyang Anhui 236000）

Flat design style prevalent in the design world today,is not accidental,but a product of the era development.Flat design brings to the interface design contracted beauty,although flatter themselves are still looking for a better form to give the public a better visual effect,but still flat is the trend of The Times. Articles by analyzing from the Angle of graphics,colors,fonts,and so on flat in the form of the development of interface design,and its integration.

flat；interface design；design form；elements

J045

A

2095-7327（2017）-03-0028-04

李亭翠(1982-)，女，安徽阜陽人，阜陽師范學院信息工程學院助教，碩士。研究方向：產(chǎn)品設(shè)計及教學。

本文是阜陽師范學院信息工程學院媒體與設(shè)計研究中心科研項目（編號：2015MTYSJ03、2015MTYSJ02）；安徽省人文社會科學研究重點項目：SK2016A071；2016年國家級大學生創(chuàng)新創(chuàng)業(yè)訓練計劃項目：201613619001成果之一。