李亭翠，陳 穎

（阜陽(yáng)師范學(xué)院信息工程學(xué)院，安徽 阜陽(yáng)236000）

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

李亭翠，陳 穎

（阜陽(yáng)師范學(xué)院信息工程學(xué)院，安徽 阜陽(yáng)236000）

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

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

引言

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

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

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

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

1.1信息過(guò)載

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

1.2簡(jiǎn)約是金

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

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

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

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

2.1圖形

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

扁平化圖形創(chuàng)意除了以上幾種幾何形狀以外，也可以用多種基礎(chǔ)形狀拼合而成。但這種形狀的組合最好不要超過(guò)三種以上的基礎(chǔ)形狀，因?yàn)槿绻@樣，會(huì)讓設(shè)計(jì)和扁平化的簡(jiǎn)約風(fēng)格相背馳。

圖一 扁平化圖形

2.2色彩

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

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

2.3字體

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

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

圖二 扁平化字體

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

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

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

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

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

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

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

圖三

圖四

結(jié)語(yǔ)

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

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

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

[3]馬娜娜.簡(jiǎn)潔而不乏味——淺談扁平化界面設(shè)計(jì)［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-)，女，安徽阜陽(yáng)人，阜陽(yáng)師范學(xué)院信息工程學(xué)院助教，碩士。研究方向：產(chǎn)品設(shè)計(jì)及教學(xué)。

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