UI設計中扁平化風格的發展方向探討

（山東科技大學 藝術與設計學院 256600）

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

一、扁平化風格繼續發展的必然性

社會在進步，快節奏的生活正逐步改變著人們的審美。而用戶體驗也逐漸被越來越多的公司所提及，而扁平化風格正是因其簡練的特點而被人們所接受的，它帶給了用戶更好的體驗，因此在UI設計中繼續發展扁平化風格也是必然的。

（一）扁平化設計風格的概念

所謂UI交互中的扁平化設計是去除設計中三維突出效果的所有風格和屬性，屬于一種二維設計，在擬物化設計中的一些產生3D效果的元素被移除，其核心在于抽象，極端簡化和符號化。在UI交互中使用扁平化設計可以更快更準確地傳達信息給用戶，這也間接地促進了用戶體驗。

（二）扁平化設計風格的表現形式

1.在圖形方面，扁平化風格多使用簡單的點線面替代復雜的細節刻畫，將原來風靡一時的擬物化設計進行了簡化，并且通過使得其更加簡潔、統一。雖然扁平化風格處理后的一些圖標顯得十分簡單，但是他們同樣也具有很強的識別性和統一性。

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

3.從版式上來看，正確合理的扁平化排版可以很好地促進用戶體驗。在進行版式設計時我們要注意空間大小的變化，可以進行適當的留白讓版式充滿了呼吸感。在設計之前要先把自己當成用戶，從用戶的角度去分析，比如用戶會先看到哪里，我們就可以把關鍵內容放大加粗放到視覺中心的位置。

二、扁平化風格與擬物化風格的對比

擬物化原來因為它的逼真寫實而風靡一時，而扁平化去除了一切擬物化三維的因素而受到人們的廣泛認可。有些人認為擬物化比較寫實且可玩性比較強，而有些人認為扁平化簡潔的風格更利于信息的傳達，更能增進用戶體驗。

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

UI設計是一種為智能設備、互聯網產品服務的一類設計，因此必須從實用性的角度出發去看待兩種設計風格。在圖標設計中，擬物化設計因為其復雜性，所以在設計過程中必定需要多個圖層的配合，加上一些描邊、投影、漸變等特效，導致其設計出來的圖標大小難以控制，占用了設備更多地空間。

（二）扁平化與擬物化的適配性對比

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

（三）扁平化與擬物化的交互體驗對比

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

三、UI設計風格未來發展方向的探討

隨著蘋果公司iOS13以及Mac Os Catalina系統的發布，我們可以看出蘋果公司的設計方向已經從純扁平化變為了輕擬物化，將扁平化風格與擬物化風格有機的結合。在iOS13的備忘錄中的畫筆已經脫離了純粹的扁平化，轉向了輕擬物化的風格，而Mac Os Catalina系統中啟動臺里面的一些圖標也增強了漸變，添加了光影的感覺，更加有立體感了。不僅是蘋果，微軟、谷歌等互聯網巨頭公司對于自己產品的設計理念也不再拘泥于完全的扁平化，他們都在嘗試一種輕擬物化新風格，也許這便是未來UI設計風格發展的方向。

（一）扁平化設計依舊是主流設計語言

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

（二）扁平化與擬物化風格的結合

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

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

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

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

四、總結

扁平化風格發展也有幾年的時間了，對于產品的用戶來說，他們關心的永遠是信息本身，這也是今后扁平化設計仍會是一種主流設計風格的原因。但是這并不妨礙扁平化風格與擬物化風格進行有機融合，也并不妨礙輕擬物化風格的誕生。因為人們也逐漸開始對純粹的扁平化風格產生厭倦，兩種風格有機融合而成的輕擬物風格可以更好地促進用戶體驗。沒有永恒的設計風格，但是只要我們將用戶體驗放在第一位，無論怎樣都先從用戶的角度去考慮，不斷去探索、去嘗試，便可以讓自己的設計永遠走在時代的最前沿。