互聯(lián)網(wǎng)空間不像現(xiàn)實世界，它完全是一個平面化的二維虛擬空間，所有的物體都處于一個空間平面上，但是信息內(nèi)容卻是有層級關(guān)系的，那么應(yīng)該如何在一個平面空間里來展現(xiàn)多重層級關(guān)系的信息呢？

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

在幾何體系中，Z 軸是 X 軸和 Y 軸之外垂直于屏幕的軸，我們通過引入 Z 軸在交互設(shè)計中呈現(xiàn)三維的物理空間感。

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

via?Jokūbas

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

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

突出層級關(guān)系，引導用戶操作行為

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

via?Michael Miller

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

視角縮放

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

via?FΛNTΛSY

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

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

翻頁動效 Fipping

via?fastcompany

通過在電子屏幕里模擬物理世界中紙張?zhí)匦裕谔摂M紙上進行信息呈現(xiàn)，讓頁與頁之間有一個上下層級關(guān)系；其中最經(jīng)典的案例就是翻頁動效。

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

Steller by Mombo Labs

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

圖：Tinder

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

滑動 Sliding

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

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

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

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

一些關(guān)于 Z 軸分層設(shè)計的實踐要點：

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

本文由 @eloisechou 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。