扁平化UI的空間表達！

文/張劍

扁平化UI因其易用、高效、友好的特性使它廣泛應用在移動終端，但是扁平並不完全意味著對空間屬性的拋棄，降低視覺效果的信息干擾才是目的，它可以通過平面設計的語言和交互的隱喻來實現空間的表達，而用戶在關注信息的意識焦點之外能夠自然的感受到界面中空間的存在。對UI空間塑造主要有以下方式：

色彩和形體

通過色彩表達空間感。在擬物化的UI設計中，可以模擬材質和紋理來表現空間感，通過對不同的質感、紋理和顏色組合形成豐富多彩的界面視覺空間。但是扁平化UI的典型特徵就是不使用材質和紋理，主要通過色彩對比來形成空間的深度。不同的色彩具有不同的屬性，我們可以利用色彩的明度、純度和色相對比來獲取界面的空間感。

一般情況下，暖色、純色、高明度色、集中色等具有前進的感覺；而冷色、濁色、低明度色、分散色等則具有後退的趨向。冷色調給人以後退的心理感受，暖色調給人以前進的心理感受。在黑背景上，亮色具有前進感，深色具有後退感；在白背景上，亮色具有後退感，深色具有前進感。

在其他條件相同的情況下，純度越高的色彩越具有前進感；純度越低的色彩越具有後退感。界面設計師可以利用色彩變化表現空間感的技巧來營造界面中更為真實豐富的空間效果。

通過形體表達空間感。在擬物化UI設計中，界面框體和圖標造型會大量應用透視來表現空間感和其三維屬性。而在扁平化UI中則通過形體與形體之間的關係如大小的差別（近大遠小），表現出空間上的距離感；或者以形體的重疊和覆蓋使之產生前後和上下的空間感；放射狀的陣列和疏密的利用也能營造空間和深度；還可以利用面的轉折來表現空間感。

明暗關係

在界面設計的空間表現上，為了塑造出生動的空間感、層次感，明暗表現有著不可替代的重要作用。物體接受了光源，會產生投影，投影可在形象的前面或後面，表現出形象的輪廓、體積。投影的存在使形象更富於真實感，它是空間感的反映。

時下流行的扁平化長陰影設計，更強化了界面中陰影對空間的表現力和形式感，就像冬天傍晚時分，物體長長的投影一樣，格外引人注目。這種45°比一般情況要長很多的投影效果在保持扁平化的同時更強調了空間的表達。當然，扁平化UI中陰影和漸變的應用需要遵循少量精鍊的原則，在合適和重要的區域添加才能起到畫龍點睛的作用。

動態圖形

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

動態過渡對空間的表達。在界面中動態的轉場過渡越來越多的運用，常配合手勢使界面對空間深度的隱喻更為深入和自然，同時也傾向於將信息扁平化。漸隱漸現相對於變形和三維翻轉比較輕量；同樣是移動，時間、速度、加速度、距離的不同組合造成的心理感受也會大不一樣。

界面中全新的動畫，也為界面帶來「深度」和「活力」。界面的動態圖形也通過創新表達空間的深度，這種創新不一定是顛覆性的，或許僅僅是基於以前的一些微小細節的變化。

空間的隱喻

隱喻是一個綜合的手段：包括視覺層面的擬物、行為的模擬以及對整體概念的利用。在扁平化的UI中也通過這一方式營造了用戶對於空間感受的心理真實。行為的隱喻來自真實世界，但不像擬物那樣顯而易見，它伴隨著操作發生，自然而然。在界面信息陳列有兩種模式：

同一空間毗鄰陳列將信息同屏並列地顯示出來，當然這樣做取決於信息和功能的多少，也可以篩選主要的信息呈現。毗鄰陳列提供了更直觀的操作方式，加速了交互行為。

另一種方式是沿時間線陳列，這種方法把功能、信息分割進不同深度的層級關係里，這麼做能減少用戶誤操作的次數，同時便於在不同層級強化主要信息。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！