UI設(shè)計(jì)中扁平化風(fēng)格的發(fā)展方向探討

（山東科技大學(xué) 藝術(shù)與設(shè)計(jì)學(xué)院 256600）

扁平化風(fēng)格是繼擬物化風(fēng)格以后又一席卷全球的設(shè)計(jì)風(fēng)格，它的涵蓋面很廣，近些年在UI設(shè)計(jì)中大放異彩，各大巨頭公司無一不采用扁平化的設(shè)計(jì)語言。在近些年的設(shè)計(jì)語言發(fā)展過程中我們會(huì)發(fā)現(xiàn)雖然扁平化風(fēng)格還是占據(jù)主位，但是人們開始對(duì)其感到有些厭煩。因此越來越多的公司開始將扁平化風(fēng)格與擬物化風(fēng)格結(jié)合起來，追求一種輕擬物化風(fēng)格以達(dá)到更好的用戶體驗(yàn)。

一、扁平化風(fēng)格繼續(xù)發(fā)展的必然性

社會(huì)在進(jìn)步，快節(jié)奏的生活正逐步改變著人們的審美。而用戶體驗(yàn)也逐漸被越來越多的公司所提及，而扁平化風(fēng)格正是因其簡(jiǎn)練的特點(diǎn)而被人們所接受的，它帶給了用戶更好的體驗(yàn)，因此在UI設(shè)計(jì)中繼續(xù)發(fā)展扁平化風(fēng)格也是必然的。

（一）扁平化設(shè)計(jì)風(fēng)格的概念

所謂UI交互中的扁平化設(shè)計(jì)是去除設(shè)計(jì)中三維突出效果的所有風(fēng)格和屬性，屬于一種二維設(shè)計(jì)，在擬物化設(shè)計(jì)中的一些產(chǎn)生3D效果的元素被移除，其核心在于抽象，極端簡(jiǎn)化和符號(hào)化。在UI交互中使用扁平化設(shè)計(jì)可以更快更準(zhǔn)確地傳達(dá)信息給用戶，這也間接地促進(jìn)了用戶體驗(yàn)。

（二）扁平化設(shè)計(jì)風(fēng)格的表現(xiàn)形式

1.在圖形方面，扁平化風(fēng)格多使用簡(jiǎn)單的點(diǎn)線面替代復(fù)雜的細(xì)節(jié)刻畫，將原來風(fēng)靡一時(shí)的擬物化設(shè)計(jì)進(jìn)行了簡(jiǎn)化，并且通過使得其更加簡(jiǎn)潔、統(tǒng)一。雖然扁平化風(fēng)格處理后的一些圖標(biāo)顯得十分簡(jiǎn)單，但是他們同樣也具有很強(qiáng)的識(shí)別性和統(tǒng)一性。

2.從配色上來看，扁平化設(shè)計(jì)并不局限于那個(gè)特定的色彩基調(diào)，設(shè)計(jì)師們都傾向于使用一些高純度、高明度的顏色來進(jìn)行設(shè)計(jì)，因?yàn)檫@些色彩都能給用戶帶來一種獨(dú)特的感受，純粹的亮色往往可以和灰暗的背景形成鮮明的對(duì)比，這樣便可以達(dá)到一種與眾不同的視覺沖擊效果。在扁平化風(fēng)格設(shè)計(jì)中，同類色也正成為一種流行的趨勢(shì)，使用同類色進(jìn)行設(shè)計(jì)的產(chǎn)品往往使用單一的品牌色搭配黑色或白色來形成自己的設(shè)計(jì)語言。雖然扁平化風(fēng)格的配色應(yīng)該是大膽的，但是在選擇顏色上還是要慎重，要根據(jù)自己的產(chǎn)品調(diào)性以及用戶情緒版來進(jìn)行選擇。

3.從版式上來看，正確合理的扁平化排版可以很好地促進(jìn)用戶體驗(yàn)。在進(jìn)行版式設(shè)計(jì)時(shí)我們要注意空間大小的變化，可以進(jìn)行適當(dāng)?shù)牧舭鬃尠媸匠錆M了呼吸感。在設(shè)計(jì)之前要先把自己當(dāng)成用戶，從用戶的角度去分析，比如用戶會(huì)先看到哪里，我們就可以把關(guān)鍵內(nèi)容放大加粗放到視覺中心的位置。

二、扁平化風(fēng)格與擬物化風(fēng)格的對(duì)比

擬物化原來因?yàn)樗谋普鎸憣?shí)而風(fēng)靡一時(shí)，而扁平化去除了一切擬物化三維的因素而受到人們的廣泛認(rèn)可。有些人認(rèn)為擬物化比較寫實(shí)且可玩性比較強(qiáng)，而有些人認(rèn)為扁平化簡(jiǎn)潔的風(fēng)格更利于信息的傳達(dá)，更能增進(jìn)用戶體驗(yàn)。

（一）扁平化與擬物化的空間占用對(duì)比

UI設(shè)計(jì)是一種為智能設(shè)備、互聯(lián)網(wǎng)產(chǎn)品服務(wù)的一類設(shè)計(jì)，因此必須從實(shí)用性的角度出發(fā)去看待兩種設(shè)計(jì)風(fēng)格。在圖標(biāo)設(shè)計(jì)中，擬物化設(shè)計(jì)因?yàn)槠鋸?fù)雜性，所以在設(shè)計(jì)過程中必定需要多個(gè)圖層的配合，加上一些描邊、投影、漸變等特效，導(dǎo)致其設(shè)計(jì)出來的圖標(biāo)大小難以控制，占用了設(shè)備更多地空間。

（二）扁平化與擬物化的適配性對(duì)比

如今智能設(shè)備種類繁多，不同設(shè)備之間的適配便成了UI設(shè)計(jì)的一個(gè)關(guān)鍵所在。為了適配不同設(shè)備，有些時(shí)候不得不對(duì)設(shè)計(jì)進(jìn)行延伸和拓展的操作。擬物化設(shè)計(jì)在延伸、拓展后會(huì)導(dǎo)致變形，而扁平化設(shè)計(jì)變沒有上述的問題，這也間接降低了設(shè)計(jì)成本。

（三）扁平化與擬物化的交互體驗(yàn)對(duì)比

在UI設(shè)計(jì)中，雖然擬物化在適配性和空間占用等方面不如扁平化，但是這種設(shè)計(jì)風(fēng)格也并非是一無是處。就像iOS6的原生界面設(shè)計(jì)，擬物化風(fēng)格的UI設(shè)計(jì)界面模擬了真實(shí)世界的材質(zhì)、細(xì)節(jié)、光影等，模擬現(xiàn)實(shí)世界的交互方式，使不同認(rèn)知水平的用戶都能迅速認(rèn)出這是什么東西，認(rèn)知和學(xué)習(xí)的成本很低。與之相比，UI設(shè)計(jì)中的扁平化雖然十分簡(jiǎn)約，能夠強(qiáng)調(diào)視覺層級(jí)，讓用戶更加專注于內(nèi)容本身，但是較擬物化設(shè)計(jì)而言，用戶需要一定的學(xué)習(xí)成本，而且給人一種冷冰冰的感覺，傳達(dá)情感的能力比較弱。

三、UI設(shè)計(jì)風(fēng)格未來發(fā)展方向的探討

隨著蘋果公司iOS13以及Mac Os Catalina系統(tǒng)的發(fā)布，我們可以看出蘋果公司的設(shè)計(jì)方向已經(jīng)從純扁平化變?yōu)榱溯p擬物化，將扁平化風(fēng)格與擬物化風(fēng)格有機(jī)的結(jié)合。在iOS13的備忘錄中的畫筆已經(jīng)脫離了純粹的扁平化，轉(zhuǎn)向了輕擬物化的風(fēng)格，而Mac Os Catalina系統(tǒng)中啟動(dòng)臺(tái)里面的一些圖標(biāo)也增強(qiáng)了漸變，添加了光影的感覺，更加有立體感了。不僅是蘋果，微軟、谷歌等互聯(lián)網(wǎng)巨頭公司對(duì)于自己產(chǎn)品的設(shè)計(jì)理念也不再拘泥于完全的扁平化，他們都在嘗試一種輕擬物化新風(fēng)格，也許這便是未來UI設(shè)計(jì)風(fēng)格發(fā)展的方向。

（一）扁平化設(shè)計(jì)依舊是主流設(shè)計(jì)語言

雖然各大巨頭公司不再拘泥于純粹的扁平化，但是他們所推崇的輕擬物化風(fēng)格依舊是由扁平化風(fēng)格所主導(dǎo)的，擬物化設(shè)計(jì)在其中只是起到了一個(gè)畫龍點(diǎn)睛的作用。扁平化風(fēng)格簡(jiǎn)約的特點(diǎn)使它注定不會(huì)像原來的擬物化風(fēng)格那樣被時(shí)代所淘汰。

（二）扁平化與擬物化風(fēng)格的結(jié)合

1.可以在扁平化風(fēng)格中加入一些動(dòng)效設(shè)計(jì)。動(dòng)效設(shè)計(jì)作為擬物化風(fēng)格的一部分，逐漸走進(jìn)了我們的視野，它為原本單調(diào)的扁平化設(shè)計(jì)更加有人情味了。它能清楚表現(xiàn)出層與層的關(guān)系。在用戶使用手勢(shì)操作的時(shí)候，優(yōu)秀的動(dòng)效設(shè)計(jì)可以讓用戶感覺是自己控制了整個(gè)界面的動(dòng)向，讓用戶有一種成就感和沉浸感。當(dāng)界面需要彈出一些提醒信息時(shí)，加入一些動(dòng)效既能很好地吸引用戶的注意，又不會(huì)顯得很生硬，而且還能使得界面增添一絲額外的活力，使得使用者感受到產(chǎn)品的生命力，也間接提升了用戶體驗(yàn)。這都是單純的扁平化設(shè)計(jì)所不能做到的。

2.谷歌的Material Design首先提出了界面空間的概念，它并不是完全抽象的扁平化風(fēng)格，它和擬物化風(fēng)格一樣，學(xué)習(xí)了現(xiàn)實(shí)生活中諸如投影、紙張的模擬等隱喻方法，在最大限度保證可讀性的基礎(chǔ)上增添了一些我們熟悉的擬物化風(fēng)格的影子，因此這也算是扁平化風(fēng)格與擬物化風(fēng)格的一種結(jié)合。Material Design提出了扁平化交互中Z軸的觀點(diǎn)，眾所周知，手機(jī)的界面二維的，而這種設(shè)計(jì)方法通過類似投影、動(dòng)效等的一些二維的設(shè)計(jì)元素構(gòu)建了Z軸（三維）的概念。不同的投影便可以使用戶知道哪一個(gè)內(nèi)容的層級(jí)是最高的。

3.投影本是擬物化設(shè)計(jì)所獨(dú)有的，但是當(dāng)許多圖形胡亂地堆疊在一起，沒有主次時(shí)，可以適當(dāng)加上一些顯示生活中才存在的投影。因?yàn)檫@不僅可以很好地區(qū)分視覺層級(jí)，還能讓用戶知曉這個(gè)內(nèi)容和其他純扁平化的內(nèi)容處在不同的信息層級(jí)上，是可以點(diǎn)擊的，從而打消了用戶的疑惑提升了體驗(yàn)感。但是在使用投影時(shí)要注意同一視覺層級(jí)投影的方向和顏色要一致，而且只能少量使用投影，否則會(huì)導(dǎo)致視覺層級(jí)的混亂。

4.材質(zhì)是擬物化風(fēng)格才有的一種屬性，純粹的扁平化風(fēng)格完全拋棄了材質(zhì)這個(gè)概念。而隨著iOS7引入了毛玻璃的效果，越來越多產(chǎn)品的設(shè)計(jì)語言中也加入了毛玻璃的效果，這給了用戶一種耳目一新的感覺。在扁平化的界面風(fēng)格中通過不同材質(zhì)的靈活運(yùn)用打破了純粹的扁平化設(shè)計(jì)，這也是扁平化設(shè)計(jì)與擬物化設(shè)計(jì)的有機(jī)融合。

四、總結(jié)

扁平化風(fēng)格發(fā)展也有幾年的時(shí)間了，對(duì)于產(chǎn)品的用戶來說，他們關(guān)心的永遠(yuǎn)是信息本身，這也是今后扁平化設(shè)計(jì)仍會(huì)是一種主流設(shè)計(jì)風(fēng)格的原因。但是這并不妨礙扁平化風(fēng)格與擬物化風(fēng)格進(jìn)行有機(jī)融合，也并不妨礙輕擬物化風(fēng)格的誕生。因?yàn)槿藗円仓饾u開始對(duì)純粹的扁平化風(fēng)格產(chǎn)生厭倦，兩種風(fēng)格有機(jī)融合而成的輕擬物風(fēng)格可以更好地促進(jìn)用戶體驗(yàn)。沒有永恒的設(shè)計(jì)風(fēng)格，但是只要我們將用戶體驗(yàn)放在第一位，無論怎樣都先從用戶的角度去考慮，不斷去探索、去嘗試，便可以讓自己的設(shè)計(jì)永遠(yuǎn)走在時(shí)代的最前沿。