從二維到三維，利用 Z 軸打造界面的空間感
互聯網空間不像現實世界，它完全是一個平面化的二維虛擬空間，所有的物體都處於一個空間平面上，但是信息內容卻是有層級關係的，那麼應該如何在一個平面空間里來展現多重層級關係的信息呢？
人類總是能探索到新的領地，尤其是在虛擬的網路空間。為了有效利用手機屏幕上的有限空間，設計師們開闢了第三個維度，即在 Z 軸上展示疊加的分層動效進行交互表達。
在幾何體系中，Z 軸是 X 軸和 Y 軸之外垂直於屏幕的軸，我們通過引入 Z 軸在交互設計中呈現三維的物理空間感。
Material Design 在平面的 UI 基礎上引入 Z 軸即高度，通過抽象化紙片在物理世界中的形態，定義各種信息層級和常用狀態的表達方式。
通過在 Z 軸上進行分層設計，模擬物理世界中人與物的真實的交互模式，幫助用戶理解產品設計，為設計師們帶來更多發揮的空間。
接下來我們來看一些常見的分層設計，看它們是如何通過加入 Z 軸來營造富有空間感的交互行為的？
突出層級關係，引導用戶操作行為
利用 Z 軸優先層級引導用戶的行為，把最重要的功能擺在 Z 軸層級的最頂層，聚焦用戶注意力，比如說發布一條新的帖子，發送一條消息等。
拿 Facebook 來舉例，當點擊某個好友頭像後，倆人聊天對話層固定，頂部懸浮按鈕則展示層級關係，不僅節約了空間，而且讓用戶搞清楚自己所在的位置，用戶很難迷失。這個案例中，讓 Facebook 聊天層級始終位於最頂層，即用戶的焦點中心。成功地利用了 Z 軸分層設計突出產品某個重要的功能，引導用戶行為。
視角縮放
舉例來說，當用戶選擇某個元素後，視角放大至詳情頁面，點擊左上角返回按鈕則可迅速回復到主菜單。
而 Foursquare 的 Map 案例則是展示了從高空往下鳥瞰的視角，放大了人眼的視角，感覺上人從遠走近了該位置。
翻頁動效 Fipping
via fastcompany
通過在電子屏幕里模擬物理世界中紙張特性，在虛擬紙上進行信息呈現，讓頁與頁之間有一個上下層級關係；其中最經典的案例就是翻頁動效。
翻頁動效時常被用於電子雜誌的動效中，它相當於完成一個 180 度的轉場動效。最有名的就是 Flipboard 翻頁手勢，自然而直觀，如果過渡順暢自然的話，會感覺像是真的在翻閱一本雜誌，給人帶來意想不到的驚喜。
翻頁動效大部分都是基於卡片式設計，卡片式設計可以將大小不同、媒介形式不同的內容單元以一種統一的方式進行混排，實現視覺上的統一性和平衡性，可以翻面、摺疊/展開、堆放，是一種十分節約空間的信息組織形式。
Tinder 有效利用 Z 軸層級空間堆疊了多張卡片案例。當點擊心形按鈕，表示對這個姑娘感興趣，卡片堆疊到右邊，點擊 X 按鈕，表示對這個姑娘不感興趣，卡片堆疊至左邊。
滑動 Sliding
滑動是最為普遍的轉場動效之一，因為它簡單易懂，設計起來也十分簡單。常見被用於導航菜單或者隱藏面板中。
比如我們再來看下圖 Gmail 的側滑菜單欄設計，當激活側邊菜單，郵件列表向右滑動，露出側邊菜單。雖然側滑是一個十分常見的動效設計，但是 Gmail 的設計仍然有很多需要值得注意的地方。
郵件列表位於 Z 軸的頂層，側邊菜單則位於次一層級，根據重要級別來看，位於頂層的郵件列表為主界面。這樣做的好處是，當主界面往右滑出，這個滑出的距離恰好是夠我們可以看到每封郵件的前幾個字，讓用戶大概對郵件來源有個大致極其重要程度的了解，是多麼貼心的設計啊。
一些關於 Z 軸分層設計的實踐要點：
* 不要刻意營造 Z 軸分層交互，用戶使用體驗才是最重要的。
* 你需要考慮的是層級交互是否能幫助用戶更好的理解你的設計？
* 空間感在交互設計中存在的主要意義，是引導用戶建立起對產品的使用邏輯。
* 一般來說，每一個頁面層級只傳達一件事。
* 想要加入一個菜單欄但發現沒有空間？這時候可以考慮一下 Z 軸，比如通過隱藏面板把它放置到主菜單之下。
* 無論是放大還是縮小視角，一定要釐清信息層級交互關係。
* 謹慎使用層級交互，因為它會增加空間關係的複雜度。
* 多觀察物理世界中的真實交互，它給你的預期和感受，因為互聯網設計中的很多靈感都來自於對真實世界的反映。
Z 軸分層交互，為設計開闢了新的領地，讓 UI 設計從二維拓展到三維，使得像素不再處於同一平面，而是處於具有不同層級的三維空間中。從簡單的二維設計向富有層次感的動效設計過渡是未來交互設計的發展方向，給設計師增加了更多的可能性，但無疑這也是我們未來需要適應的一個新的維度，也是一個巨大的挑戰。
原文：從二維到三維，利用z軸打造界面的空間感
推薦閱讀：
※產品經理的直覺和良心
※交互設計師為什麼需要具備產品思維？
※產品設計者，如何設計陌生領域的產品
※想精想怪60——精確的描述