从二维到三维,如何利用z轴打造界面的空间感

互联网空间不像现实世界，它美满是一个平面化的二维虚拟空间，一切的物体都处于一个空间平面上，然而信息内容却是有层级关系的，那么应当如安在一个平面空间里来展现多重层级关系的信息呢？

人类老是能摸索到新的领地，特别是在虚拟的网络空间。为了有用利用手机屏幕上的有限空间，设计师们开拓了第三个维度，即在 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 案例则是展现了从高空往下俯瞰的视角，缩小了人眼的视角，感到上人从远走近了该地位。

不管是缩小还是缩藐视角，必定要厘清信息层级的关系，缩藐视角，进入更多细节的概况展现页面。缩藐视角，返回到更高层级。

三、翻页动效 flipping

via fastcompany

通过在电子屏幕里模仿物理世界中纸张特征，在虚拟纸上进行信息出现，让页与页之间有一个上下层级关系；其中最经典的案例就是翻页动效。

翻页动效经常被用于电子杂志的动效中，它相当于完成一个 180 度的转场动效。最著名的就是 Flipboard 翻页手势，自然而直观，假如过渡顺畅自然的话，会感到像是真的在翻阅一本杂志，给人带来意想不到的惊喜。

Steller by Mombo Labs

翻页动效大部分都是基于卡片式设计，卡片式设计能够将大小不一样、媒介形式不一样的内容单元以一种一致的方法进行混排，完成视觉上的一致性和均衡性，能够翻面、折叠/开展、堆放，是一种非常节省空间的信息组织形式。

图：Tinder

Tinder 有用利用 z 轴层级空间堆叠了多张卡片案例。当点击心形按钮，表示对这个姑娘感兴致，卡片堆叠到右侧，点击 x 按钮，表示对这个姑娘不感兴致，卡片堆叠至左侧。

四、滑动 SLIDING

滑动是最为广泛的转场动效之一，缘由是它简单易懂，设计起来也非常简单。罕见被用于导航菜单或许隐蔽面板中。

如上图，往上滑动可见位于下个一层级的隐蔽面板，手机屏幕的空间就那么点儿大，上图案例通过把功能面板隐蔽了，这样设计的目标无疑也节俭了空间。

好比我们再来看下图 Gmail 的侧滑菜单栏设计，当激活侧边菜单，邮件列表向右滑动，显露侧边菜单。尽管侧滑是一个非常罕见的动效设计，然而 Gmail 的设计依然有许多需求值得留意的地方。

邮件列表位于 z 轴的顶层，侧边菜单则位于次一层级，依据重要级别来看，位于顶层的邮件列表为主界面。这样做的利益是，当主界面往右滑出，这个滑出的距离正好是够我们能够看到每封邮件的前几个字，让用户也许对邮件起源有个大致极端重要水平的了解，是何等贴心的设计啊。

一些关于 z 轴分层设计的实践要点：

不要锐意营造 z 轴分层交互，用户应用体验才是最重要的。你需求考虑的是层级交互是不是能帮助用户更好的懂得你的设计？空间感在交互设计中存在的主要意义，是引导用户树立起对产品的应用逻辑。普通来讲，每个页面层级只转达一件事。想要参加一个菜单栏但发现没有空间？这时候候能够考虑一下 z 轴，好比通过隐蔽面板把它放置到主菜单之下。不管是缩小还是缩藐视角，必定要厘清信息层级交互关系。谨严应用层级交互，缘由是它会增加空间关系的复杂度。多视察物理世界中的真实交互，它给你的预期和感觉，缘由是互联网设计中的许多灵感都来自于对真实世界的体现。

z轴分层交互，为设计开拓了新的领地，让UI设计从二维拓展到三维，使得像素不再处于同一平面，而是处于具有不一样层级的三维空间中。从简单的二维设计向富有条理感的动效设计过渡是将来交互设计的发展方向，给设计师增加了更多的也许性，但无疑这也是我们将来需求顺应的一个新的维度，也是一个庞大的挑战。

本文由@UXREN 投稿公布于人人都是产品经理。未经允许，制止转载。

郑重声明：此文内容为本网站转载企业宣传资讯，目的在于传播更多信息，与本站立场无关。仅供读者参考，并请自行核实相关内容。