扁平化UI中的空間表達

張劍

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

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

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

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

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

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

2明暗關系對空間的塑造

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

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

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

3界面動態圖形對空間的表達

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

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

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

4界面交互對空間的隱喻

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

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

5結語

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

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

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

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

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

[5] iOS人機界面指南.動漫藝術