中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

人類總是能探索到新的領地，尤其是在虛擬的網絡空間。為了有效利用手機屏幕上的有限空間，設計師們開辟了第三個維度，即在 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小視角，返回到更高層級。

翻頁動效 Fipping

via?fastcompany

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

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

Steller by Mombo Labs

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

圖：Tinder

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

滑動 Sliding

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

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

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

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

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

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

本文由 @eloisechou 原創發布于人人都是產品經理。未經許可，禁止轉載。