互聯網空間不像現實世界，它完全是一個平面化的二維虛擬空間，所有的物體都處于一個空間平面上，但是信息內容卻是有層級關系的，那么應該如何在一個平面空間里來展現多重層級關系的信息呢？

人類總是能探索到新的領地，尤其是在虛擬的網絡空間。為了有效利用手機屏幕上的有限空間，設計師們開辟了第三個維度，即在 z 軸上展示疊加的分層動效進行交互表達。

在幾何體系中，z 軸是 x 軸和 y 軸之外垂直于屏幕的軸，我們通過引入 z 軸在交互設計中呈現三維的物理空間感。

Material Design 在平面的UI基礎上引入z軸即高度，通過抽象化紙片在物理世界中的形態，定義各種信息層級和常用狀態的表達方式。

via Jokūbas

通過在 z 軸上進行分層設計，模擬物理世界中人與物的真實的交互模式，幫助用戶理解產品設計，為設計師們帶來更多發揮的空間。

接下來我們來看一些常見的分層設計，看它們是如何通過加入 z 軸來營造富有空間感的交互行為的？

一、突出層級關系，引導用戶操作行為

利用 z 軸優先層級引導用戶的行為，把最重要的功能擺在 z 軸層級的最頂層，聚焦用戶注意力，比如說發布一條新的帖子，發送一條消息等。

via Michael Miller

拿 Facebook 來舉例，當點擊某個好友頭像后，倆人聊天對話層固定，頂部懸浮按鈕則展示層級關系，不僅節約了空間，而且讓用戶搞清楚自己所在的位置，用戶很難迷失。這個案例中，讓 Facebook 聊天層級始終位于最頂層，即用戶的焦點中心。成功地利用了 z 軸分層設計突出產品某個重要的功能，引導用戶行為。

二、視角縮放

舉例來說，當用戶選擇某個元素后，視角放大至詳情頁面，點擊左上角返回按鈕則可迅速回復到主菜單。

via FΛNTΛSY

而 Foursquare 的 map 案例則是展示了從高空往下鳥瞰的視角，放大了人眼的視角，感覺上人從遠走近了該位置。

無論是放大還是縮小視角，一定要厘清信息層級的關系，放大視角，進入更多細節的詳情展示頁面?？s小視角，返回到更高層級。

三、翻頁動效 flipping

via fastcompany

通過在電子屏幕里模擬物理世界中紙張特性，在虛擬紙上進行信息呈現，讓頁與頁之間有一個上下層級關系；其中最經典的案例就是翻頁動效。

翻頁動效時常被用于電子雜志的動效中，它相當于完成一個 180 度的轉場動效。最有名的就是 Flipboard 翻頁手勢，自然而直觀，如果過渡順暢自然的話，會感覺像是真的在翻閱一本雜志，給人帶來意想不到的驚喜。

Steller by Mombo Labs

翻頁動效大部分都是基于卡片式設計，卡片式設計可以將大小不同、媒介形式不同的內容單元以一種統一的方式進行混排，實現視覺上的統一性和平衡性，可以翻面、折疊/展開、堆放，是一種十分節約空間的信息組織形式。

圖：Tinder

Tinder 有效利用 z 軸層級空間堆疊了多張卡片案例。當點擊心形按鈕，表示對這個姑娘感興趣，卡片堆疊到右邊，點擊 x 按鈕，表示對這個姑娘不感興趣，卡片堆疊至左邊。

四、滑動 SLIDING

滑動是最為普遍的轉場動效之一，因為它簡單易懂，設計起來也十分簡單。常見被用于導航菜單或者隱藏面板中。

如上圖，往上滑動可見位于下個一層級的隱藏面板，手機屏幕的空間就那么點兒大，上圖案例通過把功能面板隱藏了，這樣設計的目的無疑也節省了空間。

比如我們再來看下圖 Gmail 的側滑菜單欄設計，當激活側邊菜單，郵件列表向右滑動，露出側邊菜單。雖然側滑是一個十分常見的動效設計，但是 Gmail 的設計仍然有很多需要值得注意的地方。

郵件列表位于 z 軸的頂層，側邊菜單則位于次一層級，根據重要級別來看，位于頂層的郵件列表為主界面。這樣做的好處是，當主界面往右滑出，這個滑出的距離恰好是夠我們可以看到每封郵件的前幾個字，讓用戶大概對郵件來源有個大致極其重要程度的了解，是多么貼心的設計啊。

一些關于 z 軸分層設計的實踐要點：

• 不要刻意營造 z 軸分層交互，用戶使用體驗才是最重要的。
• 你需要考慮的是層級交互是否能幫助用戶更好的理解你的設計？
• 空間感在交互設計中存在的主要意義，是引導用戶建立起對產品的使用邏輯。
• 一般來說，每一個頁面層級只傳達一件事。
• 想要加入一個菜單欄但發現沒有空間？這時候可以考慮一下 z 軸，比如通過隱藏面板把它放置到主菜單之下。
• 無論是放大還是縮小視角，一定要厘清信息層級交互關系。
• 謹慎使用層級交互，因為它會增加空間關系的復雜度。
• 多觀察物理世界中的真實交互，它給你的預期和感受，因為互聯網設計中的很多靈感都來自于對真實世界的反映。

z軸分層交互，為設計開辟了新的領地，讓UI設計從二維拓展到三維，使得像素不再處于同一平面，而是處于具有不同層級的三維空間中。從簡單的二維設計向富有層次感的動效設計過渡是未來交互設計的發展方向，給設計師增加了更多的可能性，但無疑這也是我們未來需要適應的一個新的維度，也是一個巨大的挑戰。

本文由@UXREN 投稿發布于人人都是產品經理。未經許可，禁止轉載。