胡臻靖

引言

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

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

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

（一）扁平化的概念

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

（二）扁平化風(fēng)格視覺(jué)要素

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

1.在圖形方面，設(shè)計(jì)師通過(guò)對(duì)具象的元素用點(diǎn)線面來(lái)進(jìn)行概括，對(duì)擬物化的國(guó)標(biāo)進(jìn)行了大幅度簡(jiǎn)化，界面的視覺(jué)效果在設(shè)計(jì)師的改造下風(fēng)格更為簡(jiǎn)潔、統(tǒng)一。正是因?yàn)榍捌跀M物化風(fēng)格打下的基礎(chǔ)，所以讓扁平化風(fēng)格在推行的過(guò)程中不會(huì)這么費(fèi)力，用戶接受起來(lái)相對(duì)簡(jiǎn)單。同時(shí)圖形的簡(jiǎn)化并不會(huì)讓用戶在體驗(yàn)界面的過(guò)程中有感覺(jué)到國(guó)標(biāo)的識(shí)別性變?nèi)?，所有的改變都是?jīng)過(guò)設(shè)計(jì)師的反復(fù)推敲。建立在原有擬物化風(fēng)格的設(shè)計(jì)經(jīng)驗(yàn)和長(zhǎng)期生活的經(jīng)驗(yàn)上，讓大多數(shù)的圖形都擁有自身強(qiáng)大的識(shí)別功能。如蘋(píng)果系統(tǒng)的iOS6和iOS7的圖標(biāo)對(duì)比就非常能說(shuō)明扁平化風(fēng)格的在圖形上的發(fā)展趨勢(shì)，整個(gè)趨于簡(jiǎn)化，在視覺(jué)上看起來(lái)更清晰明了（如圖1）。

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

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

二、扁平化與擬物化對(duì)立性探討

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

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

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

（一）扁平化風(fēng)格仍將占據(jù)主導(dǎo)地位

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

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

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

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

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

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

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

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

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

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

結(jié)論

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