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

从二维到三维 ，如何利用z轴打造界面的空间感 互联网空间不像现实世界 ，它完全是 个平面化的二维虚拟空间 ，所有的物体都处于 个空 间平面上 ，但是信息内容却是有层级关系的 ，那么应该如何在 个平面空间里来展现多重层 级关系的信息呢 ？ 人类总是能探索到新的领地 ，尤其是在虚拟的网络空间。为了有效利用手机屏幕上的有限空间 ，设 计师们开辟了第三个维度 ，即在 z 轴上展示叠加的分层动效进行交互表达。 在几何体系中 ，z 轴是 x 轴和 y 轴之外垂直于屏幕的轴 ，我们通过引入 z 轴在交互设计中呈现三维 的物理空间感。 Mat erial Design 在平面的UI基础上引入z轴即高度 ，通过抽象化纸片在物理世界中的形态 ，定义各 种信息层级和常用状态的表达方式。 via Jo kūbas 通过在 z 轴上进行分层设计 ，模拟物理世界中人与物的真实的交互模式 ，帮助用户理解产品设计 ， 为设计师们带来更多发挥的空间。 接下来我们来看 些常见的分层设计 ，看它们是如何通过加入 z 轴来营造富有空间感的交互行为的 ？ 一、突出层级关系 ，引导用户操作行为 利用 z 轴优先层级引导用户的行为 ，把最重要的功能摆在 z 轴层级的最顶层 ，聚焦用户注意力 ，比 如说发布 条新的帖子 ，发送 条消息等。 via Michael Miller 拿 Faceboo k 来举例 ，当点击某个好友头像后 ，俩人聊天对话层固定 ，顶部悬浮按钮则展示层级 关系 ，不仅节约了空间 ，而且让用户搞清楚自己所在的位置 ，用户很难迷失。这个案例中 ，让 Faceboo k 聊天层级始终位于最顶层 ，即用户的焦点中心。成功地利用了 z 轴分层设计突出产品某 个重要的功能 ，引导用户行为。 二、视角缩放 举例来说 ，当用户选择某个元素后 ，视角放大至详情页面 ，点击左上角返回按钮则可迅速回复到主 菜单。 via FΛ NT Λ SY 而 Fo rsq are 的 map 案例则是展示了从高空往下鸟瞰的视角 ，放大了人眼的视角 ，感觉上人从远 走近了该位置。 无论是放大还是缩小视角 ， 定要厘清信息层级的关系 ，放大视角 ，进入更多细节的详情展示页面 。缩小视角 ，返回到更高层级。 三、翻页动效 f lipping via f ast co mpany 通过在电子屏幕里模拟物理世界中纸张特性 ，在虚拟纸上进行信息呈现 ，让页与页之间有 个上下 层级关系 ；其中最经典的案例就是翻页动效。 翻页动效时常被用于电子杂志的动效中 ，它相当于完成 个 180 度的转场动效。最有名的就是 Flipboard 翻页手势 ，自然而直观 ，如果过渡顺畅自然的话 ，会感觉像是真的在翻阅 本杂志 ，给 人带来意想不到的惊喜。 St eller by Mo mbo Labs 翻页动效大部分都是基于卡片式设计 ，卡片式设计可以将大小不同、媒介形式不同的内容单元以 种统 的方式进行混排 ，实现视觉上的统 性和平衡性 ，可以翻面、折叠/展开、堆放 ，是 种十分 节约空间的信息组织形式。 图 ：T inder T inder 有效利用 z 轴层级空间堆叠了多张卡片案例。当点击心形按钮 ，表示对这个姑娘感兴趣 ，卡 片堆叠到右边 ，点击 x 按钮 ，表示对这个姑娘不感兴趣 ，卡片堆叠至左边。 四、滑动 SLI DI NG 滑动是最为普遍的转场动效之 ，因为它简单易懂 ，设计起来也十分简单。常见被用于导航菜单或 者隐藏面板中。 如上图 ，往上滑动可见位于下个 层级的隐藏面板 ，手机屏幕的空间就那么点儿大 ，上图案例通过 把功能面板隐藏了 ，这样设计的目的无疑也节省了空间。 比如我们再来看下图 Gmail 的侧滑菜单栏设计 ，当激活侧边菜单 ，邮件列表向右滑动 ，露出侧边 菜单。虽然侧滑是 个十分常见的动效设计 ，但是 Gmail 的设计仍然有很多需要值得注意的地方。 邮件列表位于 z 轴的顶层 ，侧边菜单则位于次 层级 ，根据重要级别来看 ，位于顶层的邮件列表为 主界面。这样做的好处是 ，当主界面往右滑出 ，这个滑出的距离恰好是够我们可以看到每封邮件的