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

互联网空间不像现实世界,它完全是一个平面化的二维虚拟空间,所有的物体都处于一个空间平面上,但是信息内容却是有层级关系的,那么应该如何在一个平面空间里来展现多重层级关系的信息呢?


互联网空间不像现实世界,它完全是一个平面化的二维虚拟空间,所有的物体都处于一个空间平面上,但是信息内容却是有层级关系的,那么应该如何在一个平面空间里来展现多重层级关系的信息呢?

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

人类总是能探索到新的领地,尤其是在虚拟的网络空间。为了有效利用手机屏幕上的有限空间,设计师们开辟了第三个维度,即在 Z 轴上展示叠加的分层动效进行交互表达。

在几何体系中,Z 轴是 X 轴和 Y 轴之外垂直于屏幕的轴,我们通过引入 Z 轴在交互设计中呈现三维的物理空间感。

Material Design 在平面的 UI 基础上引入 Z 轴即高度,通过抽象化纸片在物理世界中的形态,定义各种信息层级和常用状态的表达方式。

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

via Jokūbas

通过在 Z 轴上进行分层设计,模拟物理世界中人与物的真实的交互模式,帮助用户理解产品设计,为设计师们带来更多发挥的空间。

接下来我们来看一些常见的分层设计,看它们是如何通过加入 Z 轴来营造富有空间感的交互行为的?

突出层级关系,引导用户操作行为

利用 Z 轴优先层级引导用户的行为,把最重要的功能摆在 Z 轴层级的最顶层,聚焦用户注意力,比如说发布一条新的帖子,发送一条消息等。

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

via Michael Miller

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

拿Facebook 来举例,当点击某个好友头像后,俩人聊天对话层固定,顶部悬浮按钮则展示层级关系,不仅节约了空间,而且让用户搞清楚自己所在的位置,用户很难迷失。这个案例中,让 Facebook聊天层级始终位于最顶层,即用户的焦点中心。成功地利用了 Z 轴分层设计突出产品某个重要的功能,引导用户行为。

视角缩放

举例来说,当用户选择某个元素后,视角放大至详情页面,点击左上角返回按钮则可迅速回复到主菜单。

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

via FΛNTΛSY

而 Foursquare 的 Map 案例则是展示了从高空往下鸟瞰的视角,放大了人眼的视角,感觉上人从远走近了该位置。

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

无论是放大还是缩小视角,一定要厘清信息层级的关系,放大视角,进入更多细节的详情展示页面。缩小视角,返回到更高层级。

翻页动效 Fipping

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

via fastcompany

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

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

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

Steller by Mombo Labs

翻页动效大部分都是基于卡片式设计,卡片式设计可以将大小不同、媒介形式不同的内容单元以一种统一的方式进行混排,实现视觉上的统一性和平衡性,可以翻面、折叠/展开、堆放,是一种十分节约空间的信息组织形式。

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

图:Tinder

Tinder 有效利用 Z 轴层级空间堆叠了多张卡片案例。当点击心形按钮,表示对这个姑娘感兴趣,卡片堆叠到右边,点击 X 按钮,表示对这个姑娘不感兴趣,卡片堆叠至左边。

滑动 Sliding

滑动是最为普遍的转场动效之一,因为它简单易懂,设计起来也十分简单。常见被用于导航菜单或者隐藏面板中。

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

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

比如我们再来看下图 Gmail 的侧滑菜单栏设计,当激活侧边菜单,邮件列表向右滑动,露出侧边菜单。虽然侧滑是一个十分常见的动效设计,但是 Gmail 的设计仍然有很多需要值得注意的地方。

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

邮件列表位于 Z 轴的顶层,侧边菜单则位于次一层级,根据重要级别来看,位于顶层的邮件列表为主界面。这样做的好处是,当主界面往右滑出,这个滑出的距离恰好是够我们可以看到每封邮件的前几个字,让用户大概对邮件来源有个大致极其重要程度的了解,是多么贴心的设计啊。

一些关于 Z 轴分层设计的实践要点:

  • 不要刻意营造 Z 轴分层交互,用户使用体验才是最重要的。
  • 你需要考虑的是层级交互是否能帮助用户更好的理解你的设计?
  • 空间感在交互设计中存在的主要意义,是引导用户建立起对产品的使用逻辑。
  • 一般来说,每一个页面层级只传达一件事。
  • 想要加入一个菜单栏但发现没有空间?这时候可以考虑一下 Z 轴,比如通过隐藏面板把它放置到主菜单之下。
  • 无论是放大还是缩小视角,一定要厘清信息层级交互关系。
  • 谨慎使用层级交互,因为它会增加空间关系的复杂度。
  • 多观察物理世界中的真实交互,它给你的预期和感受,因为互联网设计中的很多灵感都来自于对真实世界的反映。

 

本文由 @eloisechou 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/27661/

(0)
CatherineCatherine
上一篇 2017-05-18 14:08
下一篇 2017-05-18 16:19

相关推荐

  • 【译】2016年UX发展状态

    原文:The State of UX in 2016 作者:Fabricio Teixeira 译者:冬火鸟 简介:总结2015,了解目前发展趋势,hold住2016UX发展动态 #1 抠像素的时代已经结束了 2015年,你将“UX”这个流行的词汇加入到了你的简历中——…

    2016-01-29
  • 交互设计七大定律之The Law Of Proximity 接近法则

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    2015-08-27
  • 移动端体验设计6大禁

    我们一开始为什么去安装应用程序?是为了使我们的生活更方便。但当一个应用无法满足这一要求时,用户肯定就会离它而去。一个应用的成功是受多种因素影响的,其中整体移动用户体验是最重要的影响因素。绝佳的用户体验是一个应用程序成功的关键。

    2017-05-17
  • 好的人机交互设计(UX)评判标准的四个原则

    一些设计的基本原则往往是通用的,甚至可以说放之四海皆准的,例如优先级、一致性、界面的隐喻等等,好的设计都需要考虑到这些问题,甚至再更广的范围内也同样适用,而不仅仅是交互设计范畴。 一个设计师&产品…

    2015-04-14
  • 交互式网站UI设计指南

      Web开发社区有着大量的交互式设计轻松解决方案。虽然现在大多数网站都能够做到交互性了,但是我们需要不断向前、创新。我们很容易将注意力集中到编码方面,但是有时候不同屏幕尺寸的实际设计考虑却往往被忽视。 …

    2014-12-23
  • 请记住,视觉设计远不止“好看”这么简单

    设计师和理发师其实有点像,理发师基本分为三种:一种是只会搞基础发型的,比如寸头、中规中矩的长发、老太太卷头等;一种是只会剪流行发型的(这种发型师还很容易 摇身一变成为造型大师,告诉你你应该改变,应该剪目前最流行的某款发型,但实际上可能是他只擅长这款发型);还有一种是最可遇不可求的,他根据你的脸型、 性格等,用最简单的手法量身设计发型,让顾客的气质度立刻得到提升。

    2017-06-03
  • iOS 9人机界面指南(四)UI元素

    文章索引状态栏展示了关于设备及其周围环境的重要信息。默认(深色)内容
     

    2017-05-26
  • 混合型界面:对话式UI会走向何方?

    2016年是对话式设计之年。消息应用正以惊人的好评度和参与率,占领世界和app store的排行榜。每个社区产品、应用市场、点播服务、约会应用、社交游戏和电商产品,为了提高好评度、参与率和销量,都已经或即将加入消息功能。

    2017-05-11
  • 用户体验促进销售,因为专业,所以放心!

    在激烈的市场竞争中,如何突破胶着的态势,是每一个经销商必须面对的考验,过去的数年我们迎来了婴幼儿纪念产品行业大发展,同时伴随着发展也出现了许多行业的问题,如粗制仿冒产品、过度的市场开发、价格战等,在多年的市场摸索中,我们认为只有坚持品质领先、积聚品牌内涵才能构筑核心竞争能力,才能在激烈的竞争中赢得用户长久的信赖。好的品牌形象与产品如何能让用户充分感知呢?增强用户体验是重要的方法。面临市场上如此多的商家和产品,用户的取舍关键因素在哪里呢?...

    2018-04-18
  • mBack交互方式分析

    本文作者将对魅族最新研发的交互方式—mBack进行分析,从谈论手机操作系统方式与电脑的操作系统方式有着两个较为明显的差异,到分析mBack的缺点,值得一看。乔布斯说:伟大的产品都是只有一个按键的。在已经将交互优化到已经不能再删减时,如何有效的组织和隐藏就显得尤为重要。随意性用户可能使用过类似的产品或服务,有兴趣使用更为复杂的产品,但是不愿意接触全新的产品,除非新功能足够简单。主流用户是最大地群体。他们使用产品的目的是完成任务,他们永远也不会产生学会所有功能的想法。

    2017-05-01