扁平化UI中的空間表達

張劍

摘要：結(jié)合扁平化界面設(shè)計中平面視覺要素、動態(tài)圖形、交互行為等層面，分析它們對界面空間深度表達的方式和特點，論述了空間在界面設(shè)計中對交互及情感層面的影響和意義，以此論證扁平UI中也需要對空間的表達和隱喻，其目的是為了更高效的交互和更好的體驗。

關(guān)鍵詞：界面；交互；扁平化；空間隨著移動終端所提供的信息和服務(wù)的極速增長，信息直接演變?yōu)榻缑嬷黧w，易用、高效才是界面的終極訴求。裝飾性元素成為界面的負(fù)擔(dān)，因此必然會受到逐步減弱和剝離，扁平化UI因其易用、高效、友好的特性使它廣泛應(yīng)用在移動終端。現(xiàn)在，越來越多的UI都扁平化了，但是扁平并不完全意味著對空間屬性的拋棄，降低視覺效果的信息干擾才是目的，它可以通過平面設(shè)計的語言和交互的隱喻來實現(xiàn)空間的表達，而用戶在關(guān)注信息的意識焦點之外能夠自然的感受到界面中空間的存在。數(shù)字界面中，承載空間是二維的，對空間的塑造主要是平面設(shè)計語言，但是它對最終的實現(xiàn)空間沒有任何限制，可以從二維到任何更高維度。

1色彩和形體對空間的塑造

UI視覺設(shè)計中對空間的探求，主要是形態(tài)和形態(tài)之間在視覺上形成的框架關(guān)系，將這種框架關(guān)系設(shè)置在二維平面空間（指高、寬二維）的狀態(tài)之中。有時也能在二維平面的基礎(chǔ)上表現(xiàn)出帶有縱深感的三維立體空間（指高、寬、深三維）的效果。它需借助明暗、色彩、透視等多種表現(xiàn)手法才能達到，這樣的空間效果使界面中形態(tài)的構(gòu)架關(guān)系顯得更為復(fù)雜和豐富。

通過色彩表達空間感。在擬物化的UI設(shè)計中，可以模擬材質(zhì)和紋理來表現(xiàn)空間感，通過對不同的質(zhì)感、紋理和顏色組合形成豐富多彩的界面視覺空間。但是扁平化UI的典型特征就是不使用材質(zhì)和紋理，主要通過色彩對比來形成空間的深度。不同的色彩具有不同的屬性，我們可以利用色彩的明度、純度和色相對比來獲取界面的空間感。一般情況下，暖色、純色、高明度色、集中色等具有前進的感覺；而冷色、濁色、低明度色、分散色等則具有后退的趨向。冷色調(diào)給人以后退的心理感受，暖色調(diào)給人以前進的心理感受。在黑背景上，亮色具有前進感，深色具有后退感；在白背景上，亮色具有后退感，深色具有前進感。在其他條件相同的情況下，純度越高的色彩越具有前進感；純度越低的色彩越具有后退感。界面設(shè)計師可以利用色彩變化表現(xiàn)空間感的技巧來營造界面中更為真實豐富的空間效果。

通過形體表達空間感。在擬物化UI設(shè)計中，界面框體和圖標(biāo)造型會大量應(yīng)用透視來表現(xiàn)空間感和其三維屬性。而在扁平化UI中則通過形體與形體之間的關(guān)系如大小的差別（近大遠(yuǎn)小），表現(xiàn)出空間上的距離感；或者以形體的重疊和覆蓋使之產(chǎn)生前后和上下的空間感；放射狀的陣列和疏密的利用也能營造空間和深度；還可以利用面的轉(zhuǎn)折來表現(xiàn)空間感，沒有轉(zhuǎn)折的面在平面構(gòu)成中只是二維空間的表現(xiàn)，一旦有了面的轉(zhuǎn)折關(guān)系，就使形體具有了高、寬、厚度的三維立體效果，自然就形成了帶有縱深感的三維立體空間關(guān)系；此外還可以利用圖的關(guān)系，人的實際視覺經(jīng)驗時刻都在體現(xiàn)圖的關(guān)系，因為人的視覺無法對視域中的所有對象進行聚焦，只有被人注視的部分在眼中才是清晰的，而其余部分由于無法準(zhǔn)確在視網(wǎng)膜上成像而呈現(xiàn)焦點之外的模糊狀態(tài)。

2明暗關(guān)系對空間的塑造

除了Windows UI的絕對平面化，其他的扁平化UI都不完全僅僅只有色塊和輪廓。iOS7和大多數(shù)扁平化安卓平臺UI，以其主界面為例，往往是多個圖標(biāo)（只有高度和寬度）并置于畫面中，與畫面平行，圖標(biāo)之間無前后遠(yuǎn)近之分。如果圖標(biāo)的形象無厚度，并且包圍這些形象的空間沒有深度，這樣的空間形式就會和Windows UI一樣是完全的平面性空間（二維平面空間）。但是在iOS7和大多數(shù)扁平化安卓平臺UI中，在追求效率的工具化和情感化之間，采用了偏向于扁平的較為折中的設(shè)計，即表現(xiàn)少量細(xì)節(jié)處的明暗變化，它不依靠紋理，更多的利用色彩和形體的細(xì)微變化來達到，多表現(xiàn)為投影和漸變。這樣的明暗變化去掉了擬物化UI中對質(zhì)感和紋理精雕細(xì)刻的極致表現(xiàn)，也有別于Windows UI高度抽象化。

在界面設(shè)計的空間表現(xiàn)上，為了塑造出生動的空間感、層次感，明暗表現(xiàn)有著不可替代的重要作用。物體接受了光源，會產(chǎn)生投影，投影可在形象的前面或后面，表現(xiàn)出形象的輪廓、體積。投影的存在使形象更富于真實感，它是空間感的反映。例如谷歌chrome網(wǎng)上應(yīng)用商店的Gmail圖標(biāo)使用簡潔的平面化的圖形風(fēng)格，利用必要的符號傳達含義，在細(xì)節(jié)處添加的那塊投影，讓縱深的空間立刻顯現(xiàn)出來。雖然去除投影并不影響其傳達含義，但是這樣的圖像失去了空間層次。而具備陰影的狀態(tài)的圖形則更具有視覺“張力”，這種意味著它具有更多的審美趣味。而時下流行的扁平化長陰影設(shè)計，更強化了界面中陰影對空間的表現(xiàn)力和形式感，就像冬天傍晚時分，物體長長的投影一樣，格外引人注目。這種45°比一般情況要長很多的投影效果在保持扁平化的同時更強調(diào)了空間的表達。此外，在類似MIUIV5這樣的扁平化界面的圖標(biāo)中，除了使用投影，也使用了細(xì)微的漸變表現(xiàn)了形體的明暗關(guān)系，加上其圓形倒角的外輪廓和同樣有明度變化的桌面背景，恰當(dāng)?shù)乇磉_了界面空間的三維屬性。

當(dāng)然，扁平化UI中陰影和漸變的應(yīng)用需要遵循少量精煉的原則，在合適和重要的區(qū)域添加才能起到畫龍點睛的作用。

3界面動態(tài)圖形對空間的表達

界面設(shè)計要求向用戶傳遞信息過程中通過合理的空間表現(xiàn)或隱喻來呈現(xiàn)界面的層級結(jié)構(gòu)和相互關(guān)系，將空間深度變化為能幫助傳遞一定信息的視覺表達元素，其存在意義的核心是“層次”和“秩序”。界面設(shè)計可以有效地利用動態(tài)圖形，通過有組織，有目的的設(shè)計理念和設(shè)計手段，把時間與空間串聯(lián)，結(jié)合現(xiàn)實中的三維空間及時間，從而擴大界面視覺語言的表現(xiàn)力。

動態(tài)過渡對空間的表達。在界面中動態(tài)的轉(zhuǎn)場過渡越來越多的運用，常配合手勢使界面對空間深度的隱喻更為深入和自然，同時也傾向于將信息扁平化。漸隱漸現(xiàn)相對于變形和三維翻轉(zhuǎn)比較輕量；同樣是移動，時間、速度、加速度、距離的不同組合造成的心理感受也會大不一樣。可以理解的是，在能夠彰顯品牌特征或者特色的功能細(xì)節(jié)上，體現(xiàn)空間深度的動畫可以用一些更為個性和突出的效果；而在一些常見的轉(zhuǎn)場過渡和頻繁的操作上，則采用一些基礎(chǔ)和輕量的動畫更為合理。一個應(yīng)用上如果動畫的數(shù)量、幅度和頻率不加以限制，則會類似靜態(tài)界面的視覺噪聲而帶來干擾。有空間表現(xiàn)的過渡動畫要流暢和自然、靈活，其動畫幅度需要適度并有細(xì)節(jié)的表現(xiàn)。常見的例子是類似幾何體通過面轉(zhuǎn)折的方式進行同級界面的轉(zhuǎn)換，或者類似于iOS7中應(yīng)用圖標(biāo)通過縮放展開應(yīng)用程序界面。MIUIV5主界面中，圖標(biāo)組文件夾打開的過渡動畫也使用這樣縮放的形式，將文件夾里的程序圖標(biāo)放大展開到前景的屏幕空間中或收縮合攏到文件夾內(nèi)，在展開后圖標(biāo)陣列并置在界面的前景，之前的界面則通過降低色彩明度并高斯模糊而退后到遠(yuǎn)景的空間，通過模擬景深或視覺焦點的效果來隱喻了空間的深度，呈現(xiàn)的效果就像懸浮于桌面的磨砂玻璃，這樣的動態(tài)過程和界面呈現(xiàn)方式不僅讓用戶清楚當(dāng)兩個界面轉(zhuǎn)換過程和相互關(guān)系，也避免了多余信息的干擾。

界面中全新的動畫，也為界面帶來“深度”和“活力”。界面的動態(tài)圖形也通過創(chuàng)新表達空間的深度，這種創(chuàng)新不一定是顛覆性的，或許僅僅是基于以前的一些微小細(xì)節(jié)的變化。例如，在淘寶網(wǎng)站的界面中，加載頁面內(nèi)容的“等待”動態(tài)圖形，使用了在深度空間中平行于“Z”軸向上的一組圓形以“Y”軸為圓心轉(zhuǎn)動，這些圓形是完全扁平化的色塊，但通過色彩和體量的變化，隱喻了縱深的三維空間的存在，以前的很多界面類似的動態(tài)圖形的表達也是一組圓形的轉(zhuǎn)動，只是在基于二維平面的空間之中。此外，技術(shù)的創(chuàng)新也帶來了iOS7中與之前完全不同“深度”的用戶界面，它會根據(jù)運動來發(fā)生變化，由此產(chǎn)生專屬iOS7的視差，具體呈現(xiàn)的效果是基于主界面前景的圖標(biāo)和背景空間圖像之間隨著屏幕角度的變化帶來類似于視點變化而造成的前景遮擋背景的空間關(guān)系，以此來隱喻深度空間的存在。

4界面交互對空間的隱喻

隱喻是我們對世界加以概念化的方法，隱喻來源于直接的體驗，它作為一種設(shè)計手法廣泛運用于界面設(shè)計中，其歷史可以追溯到GUI的創(chuàng)造，經(jīng)典的例子是桌面、文件夾、垃圾筒等等概念。隱喻是一個綜合的手段：包括視覺層面的擬物、行為的模擬以及對整體概念的利用。在扁平化的UI中也通過這一方式營造了用戶對于空間感受的心理真實。行為的隱喻來自真實世界，但不像擬物那樣顯而易見，它伴隨著操作發(fā)生，自然而然。滾動條是一個典型的例子，當(dāng)呈現(xiàn)信息的框體（如瀏覽器、文檔處理軟件等）中內(nèi)容量超越了標(biāo)準(zhǔn)顯示空間的容量，用戶瀏覽時通過往下、往右拖曳滾動條顯示后續(xù)的內(nèi)容。頁面內(nèi)容和滾動條之間是一種反向的運動，這正如同在真實環(huán)境中前行時景物向后退去的視覺感受，以此來印證空間和運動的關(guān)系。

在界面信息陳列有兩種模式：同一空間毗鄰陳列將信息同屏并列地顯示出來，當(dāng)然這樣做取決于信息和功能的多少，也可以篩選主要的信息呈現(xiàn)。毗鄰陳列提供了更直觀的操作方式，加速了交互行為。另一種方式是沿時間線陳列，這種方法把功能、信息分割進不同深度的層級關(guān)系里，這么做能減少用戶誤操作的次數(shù)，同時便于在不同層級強化主要信息。iOS在沿時間線陳列方式中，通過動態(tài)表現(xiàn)，體現(xiàn)了界面在 X、Y、Z 軸之間的空間層級關(guān)系，用戶可以輕松地理解屏幕中所存在的“空間”，以及在這其中所處的位置坐標(biāo)。用戶通過手勢來過渡到同級或者是深層級的界面，在這一交互過程中，水平或垂直（X、Y）坐標(biāo)方向是同級界面的轉(zhuǎn)換，而縱深（Z）坐標(biāo)方向是深度層級的轉(zhuǎn)換，這樣的方式通過對空間的隱喻讓用戶對層級界面的邏輯關(guān)系更容易理解。

5結(jié)語

界面設(shè)計的非物質(zhì)設(shè)計性決定了對情感的關(guān)注是其重要特征。扁平UI對空間的隱喻，其目的還是為了高效的交互、良好的體驗以及營造深度的沉浸感。而關(guān)于沉浸感，扁平和擬物有著不同的解釋和目標(biāo)。扁平化的沉浸感是沉浸在信息的海洋中，擬物化UI中我們可以認(rèn)為那些承載信息的容器環(huán)境也是內(nèi)容的一部分，其界面元素在視覺上做了不同程度的刻畫，其沉浸感強調(diào)的是整體氛圍的融合。從這一層面來理解，信息之外的內(nèi)容并非純粹的裝飾。拋開視覺層面的風(fēng)格不談，界面中對空間的表達和隱喻，不僅不會形成信息干擾，而且比純信息的展示更為高效，是情感化的而非工具化的。參考文獻：

[1] 唐納德·A·諾曼（美）.設(shè)計心理學(xué)[M].梅瓊，譯.北京：中信出版社，2003.

[2] 唐納德·A·諾曼（美）.情感化設(shè)計[M].付秋芳，程進三，譯.北京：電子工業(yè)出版社，2006.

[3] Carrie Cousins（美）.Flat Design：Can You Benefit from the Trend？ [EB/OL].http：∥designmodo.com/flatdesign/.

[4] 艾倫·庫珀（美）.交互設(shè)計之路[M]. Chris Ding，譯.電子工業(yè)出版社，2006.

[5] iOS人機界面指南.動漫藝術(shù)