扁平化UI中的空間表達(dá)

張劍

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

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

1色彩和形體對(duì)空間的塑造

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

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

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

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

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

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

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

3界面動(dòng)態(tài)圖形對(duì)空間的表達(dá)

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

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

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

4界面交互對(duì)空間的隱喻

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

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

5結(jié)語(yǔ)

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

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

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

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

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

[5] iOS人機(jī)界面指南.動(dòng)漫藝術(shù)