UI設(shè)計中“后”扁平化風格的探討

胡臻靖

引言

UI設(shè)計扁平化浪潮勢不可擋，從微軟的windows phone開始，到谷歌的Android 4.0，再到蘋果 iPhone的iOS 7，三大公司無論推出何種形式的UI設(shè)計語言，無一不采用扁平化的設(shè)計風格。在近些年發(fā)展的過程中會發(fā)現(xiàn)雖然扁平化風格始終占據(jù)主導地位，但是建立在扁平化風格基礎(chǔ)上的“后”扁平化時代也在悄悄崛起。

一、扁平化發(fā)展的必然性

當今快節(jié)奏生活狀態(tài)下，任何事物都講究體驗。用戶體驗已經(jīng)成為一切設(shè)計的出發(fā)點。在UI設(shè)計中之所以發(fā)展扁平化風格也是具有必然性，扁平化風格視覺要素上的簡潔、清晰非常符合當下人們“去繁留簡”的生活理念，是值得當代設(shè)計師思考的問題。

（一）扁平化的概念

扁平化設(shè)計（flat design），又稱“零3D屬性的設(shè)計”，是近年來視覺傳達設(shè)計領(lǐng)域出現(xiàn)的一種新的設(shè)計風格，是相對于“擬物化”的一種設(shè)計理念。其目的是通過簡化界面中的圖形元素、整合界面配色和精致界面排版，去除一些三維屬性如投影、斜面、浮雕和漸變等特效，在視覺呈現(xiàn)上從三維到二維的轉(zhuǎn)變，給用戶全新的視覺體驗。

（二）扁平化風格視覺要素

通過對三大扁平化UI設(shè)計語言的調(diào)查研究發(fā)現(xiàn)，在從擬物化向扁平化發(fā)展的過程中，其存在著很多的共同點。通過對共同點的歸納總結(jié)，可以看到扁平化視覺要素在圖形、色彩和版面三個方面的簡化都非常符合UI扁平化的目的一一更好地凸顯信息層級。

1.在圖形方面，設(shè)計師通過對具象的元素用點線面來進行概括，對擬物化的國標進行了大幅度簡化，界面的視覺效果在設(shè)計師的改造下風格更為簡潔、統(tǒng)一。正是因為前期擬物化風格打下的基礎(chǔ)，所以讓扁平化風格在推行的過程中不會這么費力，用戶接受起來相對簡單。同時圖形的簡化并不會讓用戶在體驗界面的過程中有感覺到國標的識別性變?nèi)酰械母淖兌际墙?jīng)過設(shè)計師的反復推敲。建立在原有擬物化風格的設(shè)計經(jīng)驗和長期生活的經(jīng)驗上，讓大多數(shù)的圖形都擁有自身強大的識別功能。如蘋果系統(tǒng)的iOS6和iOS7的圖標對比就非常能說明扁平化風格的在圖形上的發(fā)展趨勢，整個趨于簡化，在視覺上看起來更清晰明了（如圖1）。

2.在色彩方面。首先三大扁平化UI設(shè)計語言先后都有大膽地對大量亮色進行嘗試，諸如高純度、高明度的色彩組合使得它們在白色或黑色背景上都帶給用戶非常好的視覺體驗。如微軟公司的Metro UI的設(shè)計風格，不僅在圖形方面采用了簡潔的風格，顏色的配色上采用了高純度和高明度的紅橙黃綠等顏色搭配上純白色的圖形，整個界面干凈清爽，所傳達的信息也十分明確到位（如圖2）.似乎在扁平化風格的勢頭下，傳統(tǒng)的色彩法則并不是特別適用，取而代之的則是彩虹色這種流行色來進行搭配。其次是復古色，在進行扁平化設(shè)計時，這個冑以違背運用彩虹色配色原理的方式一一復古色開始慢慢流行起來，通常選擇一種純色調(diào)和加入白色，色彩的飽和度雖然降低，但是卻變得非常柔美、散發(fā)著濃濃的女性氣息。甚至在同類色的運用上，效果也是可圈可點的。

3.在版面方面，由于扁平化設(shè)計中無論從圖形、色彩搭配或是字體選擇都遵循簡潔的原則，因此排版的效果就顯得非常關(guān)鍵。合理的、講究的排版效果所帶來的視覺效果是無法估量的，直接決定用戶對界面中信息層級的體驗。微軟的Windows8將界面的內(nèi)容放在了第一位，采用地鐵站牌排版的靈感，將圖形和大量文字共同排版在所謂的“動態(tài)磁貼”中，構(gòu)成了整個界面（如圖3），通過圖形和大小文字的編排，信息層級一目了然。除了影響最大的圖形元素的編排，字體的選用也是其中非常講究的一環(huán)，它們之間相輔相成、相互作用。在很大一部分的扁平化界面設(shè)計中使用的都是無襯線字體。例如蘋果各種系統(tǒng)冪直使用無襯線字體Helvetica，直到iOS 9出于字體可讀性的考慮才替換成SanFrancisco。他們的共同點是擁有現(xiàn)代感的外觀，用在界面編排中整體感覺是干凈、順暢。去除襯線字體那些“不需要”的裝飾，也非常符合扁平化設(shè)計去繁留簡的設(shè)計理念。努力用不同的字體表達不同的概念，通過字體告訴用戶這一設(shè)計所代表功能的含義，努力使字體成為排版環(huán)節(jié)中扁平化設(shè)計的強而有力的表達方式。

二、扁平化與擬物化對立性探討

在很長一段時間里，由于扁平化風格的出現(xiàn)，兩種風格總是被作為對立面來提起。但實際上他們存在許多聯(lián)系，在UI設(shè)計風格發(fā)展的過程中他們始終是你中有我、我中有你的關(guān)系，并不能用一刀切的方式將兩者的關(guān)系完全割裂。擬物化設(shè)計的風格似乎更能讓剛接觸界面的人懂得如何操作，人機之間的交互在某種程度上可以實現(xiàn)得更高效快速。因為其中很多與生活場景相似的表達方式更容易讓人接受和學習，人機之間通過溝通情感達到高度的交流，其最終目的就是讓用戶在最短的時間學會使用產(chǎn)品。但是擬物化風格的存在并沒有影響到扁平化風格的出現(xiàn)，事實上更好刺激了扁平化風格的發(fā)展，使得“后”扁平化風格的發(fā)展更加合理。

三、UI設(shè)計風格發(fā)展可能性的探討

從微軟到蘋果再到谷歌，我們發(fā)現(xiàn)各大互聯(lián)網(wǎng)公司都不再拘泥于單純的扁平，而是都在嘗試用各種方式去“反對”扁平，都在試圖為扁平化的設(shè)計語言注入新的血液。這些反對形式，代表著時下最為流行的發(fā)展趨勢，其中不乏出現(xiàn)前期擬物化風格的影子，但恰恰是這些“影子”的出現(xiàn)也為未來UI設(shè)計風格發(fā)展方向提供了更多可能性。

（一）扁平化風格仍將占據(jù)主導地位

扁平化設(shè)計風格雖然存在需要學習成本的問題，但是在前期擬物化風格的鋪墊下，學習的成本已經(jīng)大大降低。其存在的確有十分多的優(yōu)點：去除一切不必要的裝飾元素，讓信息作為最主要的元素顯示出來，其目的是引領(lǐng)用戶走向“更流暢、更簡約”的體驗。

（二）多元化的設(shè)計作為補充

1.空間的表達。雖然推崇扁平化的設(shè)計，但是在扁平化的設(shè)計里同樣要植入空間的概念，其目的是降低視覺效果的信息干擾。用戶在聚焦主要層級信息的同時可以清晰地感受到空間的存在，這其實也是建立在前期擬物化風格的影響下，只是兩者表現(xiàn)的方式不同而已。在扁平化設(shè)計風格的界面中，空間的表達方式是二維的，更多還是運用點線面等元素對空間進行塑造，但這并不意味扁平化的空間表達就只能僅此而已。將二維效果轉(zhuǎn)變?yōu)楦叩木S度例如運用空間的表達反而對信息層級的表達有很好的幫助，常見的增加空間感的常用手段：

（1）陰影的搭配使用.在扁平化的界面中，由于拋棄了大量的擬物化風格中豐富的紋理效果和質(zhì)感表現(xiàn)，取而代之只能是用明暗關(guān)系來對形體的細微變化進行表達。這個時候當許多圖形堆疊在界面中時，它們只有長度和寬度，與主畫面處于同一個維度，沒有前后遠近之分，這樣對信息層級的表達是絲毫沒有好處的，這個時候在表達元素的前后層次上就需要依賴陰影的輔助。正如蘋果系統(tǒng)下的京東購物APP的界面設(shè)計就使用了小部分的陰影（如圖4），讓人在感受界面的信息層級時就有非常好的體驗感，更是大大提升了人機之間的交互。當界面中的按鈕元素出現(xiàn)陰影時，很自然能讓人感受到這個擁有陰影的按鈕與其他扁平化的國標處于不同的信息層級上，是可以點擊的。如果說界面中陰影的存在是空間感的反映，同時也使形象更具有真實感。那么除了陰暗的表現(xiàn)方式對空間感、層次感的塑造起到了非常關(guān)鍵的作用，陰影所依賴的光源也是十分關(guān)鍵的。光源的照射會使物體產(chǎn)生陰影，陰影通過跟物體的位置發(fā)生前后左右的變化，來讓人感受到物體大致的輪廓和體積。因此，扁平化UI中除了陰影，也經(jīng)常搭配漸變和光源效果一起使用，但是三者都只能局部或是少量運用，反之則會讓人有喧賓奪主的感受。

（2）元素的三維立體。擬物化UI設(shè)計中，界面框體和國標造型會大量應用透視來表現(xiàn)空間感和其三維屬性。那么在扁平化的界面中如何打破扁平，增加元素的立體感呢？在前期擬物化風格的影響下，扁平化UI設(shè)計通過形體變換大小來表達空間以及相互之間的距離差;形與形通過重疊或是覆蓋，帶來視覺上前后、上下的層次;另外疏密關(guān)系或是形的規(guī)律漸變也能營造縱深感，進而讓人感受到空間的存在;還有轉(zhuǎn)折面的存在使形體具有長、寬，同時兼具厚度，非常好地表達了空間。同樣也以蘋果系統(tǒng)下的京東購物APP的界面設(shè)計來打個比方，在打開APP界面時候所跳轉(zhuǎn)出來的三維元素就很好地詮釋了界面中的空間感的存在（如圖5）。圖片中的禮盒形象不再是完全的扁平化圖形，通過錢幣、紅包和紙鈔的組合形成前后重疊的層次感，禮盒通過面的轉(zhuǎn)折表達營造空間的縱深感，通過這些方式給用戶帶來較強的空間感受。

2.動效的普及。在扁平化風格占主導地位的今天，視覺技術(shù)與虛擬現(xiàn)實之間的關(guān)系越來越密切。也許許多設(shè)計師會認為動效是無關(guān)緊要的，但是動效確實對用戶的交互體驗有著顯著的提升，逐漸成為一種界面設(shè)計中不可取代的趨勢。在經(jīng)過界面一些傳統(tǒng)視覺元素的輪番轟炸后，用戶的體驗或多或少會呈現(xiàn)出疲憊感.而這個時候適當加入一些產(chǎn)品動效，會讓用戶產(chǎn)生新鮮感，在進行與產(chǎn)品的交互過程中保持好奇心，更好地參與到整個界面的體驗中。但是這也不代表越高科技或是越炫酷的動效就能讓用戶的體驗越好，界面設(shè)計中的動效還是應當把握適度的原則，在不占用產(chǎn)品太多內(nèi)存的情況下，在產(chǎn)品的楊。功能區(qū)加入動效，這樣才會起到畫龍點睛的效果。隨著2014年HTML5的推出，為動效的實現(xiàn)提供了強大的技術(shù)支持，讓動效的實現(xiàn)變得更為輕松，從而讓設(shè)計師對動效的重視也提到了空前的高度。在人機交互的過程中，設(shè)計師通過傳統(tǒng)元素的設(shè)計將用戶的吸引力集中到動效上，用戶通過動效更好地提高與界面的交互，大大提高了參與度。

3.材質(zhì)的重新運用。在擬物化風格中材質(zhì)被運用到了極致，無論什么樣的元素都本著真實再現(xiàn)物體本身的目的進行模仿。但是到了扁平化風格中，卻走向了另一個極端，一度完全拋棄材質(zhì)的使用。直到蘋果在iOS7.0中出現(xiàn)毛玻璃（如圖6），這就像是一個信號，告訴大家扁平化界面中擬物化風格中的材質(zhì)將會出現(xiàn)在所需要的功能上。隨后微軟Fluent Design system設(shè)計體系中亞克力材質(zhì)的運用，所有的這些都在試圖重新通過不同材質(zhì)的運用，打破非常純粹的扁平化，相信未來還會有更多材質(zhì)加入。

4.品牌概念的植入。說到品牌設(shè)計總是與傳統(tǒng)平面聯(lián)系到一起，這是一個比較寬泛的概念。但是無論是平面設(shè)計中還是界面設(shè)計中都同樣適用。品牌設(shè)計通常通過圖形、字體、版式等設(shè)計元素讓消費者對品牌產(chǎn)生印象，產(chǎn)生品牌的認同感。正如上文分析到三大扁平化設(shè)計語言中也同樣會使用圖形、色彩和版式編排的視覺元素。在界面設(shè)計中品牌的植入指的是在界面中除了運用到之前所提及的視覺元素，另外，如動效的加入也可以讓用戶在體驗的時候有很好的感受，并達到讓用戶記住所喜愛的界面設(shè)計，并進一步想了解這個界面設(shè)計的想法。如蘋果系統(tǒng)下的網(wǎng)易公司所推出兩個購物APP一一嚴選和考拉，兩款購物APP的界面所采用的圖片風格、顏色搭配都有所區(qū)別。嚴選的圖標設(shè)計更加方正，配色上則更加傾向小清新，整個界面非常年輕、文藝（如圖7）。而考拉的界面設(shè)計中圖標的設(shè)計則比較圓潤、柔和，顏色的選擇上傾向粉色系，更加時尚、女性化（如圖8）。不同的搭配營造出不同的界面印象，給大眾傳遞出不同的品牌調(diào)性。

（三）人文關(guān)懷

現(xiàn)今的設(shè)計不僅僅滿足于使用功能到位，而是更加傾向于人與物的情感交流。由于生活節(jié)奏的變快，希望一切東西都變得簡單，不需要人們花費太多的時間和精力去對待，也許正是在這個時間點上，扁平化風格的出現(xiàn)正好符合了大眾的需求，被更好地接受和喜愛。只有用戶覺得好用的界面才是真正的好產(chǎn)品，設(shè)計永遠都是為人服務的。不同的產(chǎn)品應具備不同的設(shè)計風格。即使是在三大扁平化風格設(shè)計占據(jù)大多數(shù)市場份額的今天，擬物化設(shè)計還是在很多地方存在，比如追求畫面寫實的游戲。所以說并不是說技術(shù)進步了，設(shè)計風格更迭了，擬物化設(shè)計就會不見了，真正能否存在取決于應用的場景。設(shè)計風格隨著社會的發(fā)展、生活節(jié)奏的加快和技術(shù)的進步而改變。

結(jié)論

UI設(shè)計風格發(fā)展的不同時期，人們根據(jù)自身的變化對設(shè)計風格也提出不同期望和要求，兩種風格本身并不存在沖突。通過對扁平化風格浪潮下風格的探討，我們也不難看出，在發(fā)展的過程中，雖然扁平化風格將會占主導地位，但是空間、材質(zhì)或是動效發(fā)展的將來，擬物化和扁平化還是會交織在一起，并不能完全割斷，反之通過兩者的有效結(jié)合產(chǎn)生“后”扁平時代的風格。