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

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

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

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

via Jokūbas

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

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

一、突出層級(jí)關(guān)系，引導(dǎo)用戶操作行為

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

via Michael Miller

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

二、視角縮放

舉例來說，當(dāng)用戶選擇某個(gè)元素后，視角放大至詳情頁面，點(diǎn)擊左上角返回按鈕則可迅速回復(fù)到主菜單。

via FΛNTΛSY

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

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

三、翻頁動(dòng)效 flipping

via fastcompany

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

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

Steller by Mombo Labs

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

圖：Tinder

Tinder 有效利用 z 軸層級(jí)空間堆疊了多張卡片案例。當(dāng)點(diǎn)擊心形按鈕，表示對(duì)這個(gè)姑娘感興趣，卡片堆疊到右邊，點(diǎn)擊 x 按鈕，表示對(duì)這個(gè)姑娘不感興趣，卡片堆疊至左邊。

四、滑動(dòng) SLIDING

滑動(dòng)是最為普遍的轉(zhuǎn)場(chǎng)動(dòng)效之一，因?yàn)樗?jiǎn)單易懂，設(shè)計(jì)起來也十分簡(jiǎn)單。常見被用于導(dǎo)航菜單或者隱藏面板中。

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

比如我們?cè)賮砜聪聢D Gmail 的側(cè)滑菜單欄設(shè)計(jì)，當(dāng)激活側(cè)邊菜單，郵件列表向右滑動(dòng)，露出側(cè)邊菜單。雖然側(cè)滑是一個(gè)十分常見的動(dòng)效設(shè)計(jì)，但是 Gmail 的設(shè)計(jì)仍然有很多需要值得注意的地方。

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

一些關(guān)于 z 軸分層設(shè)計(jì)的實(shí)踐要點(diǎn)：

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

z軸分層交互，為設(shè)計(jì)開辟了新的領(lǐng)地，讓UI設(shè)計(jì)從二維拓展到三維，使得像素不再處于同一平面，而是處于具有不同層級(jí)的三維空間中。從簡(jiǎn)單的二維設(shè)計(jì)向富有層次感的動(dòng)效設(shè)計(jì)過渡是未來交互設(shè)計(jì)的發(fā)展方向，給設(shè)計(jì)師增加了更多的可能性，但無疑這也是我們未來需要適應(yīng)的一個(gè)新的維度，也是一個(gè)巨大的挑戰(zhàn)。

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