从二维到三维,利用 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

相关推荐

  • 为长文进行排版设计,有哪些讲究?

    长内容的可以让你的网站拥有超越视觉美感的吸引力,给用户的愉悦感就不仅仅源自于眼睛。

    2017-05-14
  • U+敏捷研发体系

    “研发是一项创造性的工作,卓有成效的研发需要优秀的研发团队来完成,优越的研发流程始终能够发现最佳的机遇,推出有竞争力的产品和服务,并以最快的速度把这些研发成果投入市场。”△ △ △ U+敏捷研发体系流程 △ △ △需求分析1研发体系中的第一个环节,这一阶段要求需求分析人员针对待开发软件提供完整、清晰、具体的要求,确定软件必须实现哪些任务。其中包含的敏捷建模,要求需求分析人员对现实问题的抽象想法构画出草图,以规避需求的不合理等问题。原型设...

    2018-03-30
  • 交互设计五要素

    在交互设计中,我们要了解这一过程的流程是什么?总体可以分为五个要素:目的、用户、场景、媒介、行为。1、目的:首先要弄清楚,这个产品或功能的目的是什么?目的是为了解决用户的某个需求或者给公司带来价值,这…

  • 产品能力(一)——用户体验要素

    上周开始学习梁宁老师的产品思维三十讲,颇有收获。由于内容很多,分几期总结,与大家一同分享。首先说说我选择学习这门课程的理由,产品能力是一个人的底层能力,之所以这么定义,是因为它具有判断信息,抓住要点,整合有限的资源,把自己的价值打包成一个产品向世界交付,并且获得回报的闭环能力圈。下面我正式开篇,结合我自己的工作经验,总结课程中所学到的知识点。一、产品和好的产品人生无处无产品,工作中提交的邮件和报表,生活中给亲人提供的暖心话语和烹饪的佳肴...

    2018-02-12
  • 交互设计自我发展三部曲——“器、势、人”

    数十万互联网从业者的共同关注!作者: 集创堂-纯色个人微信号:jichuangtang作者授权早读课发表,转载请联系原作者欢迎投稿到早读课,投稿邮箱:mm@zaodula.com交互设计师(或者称UI设计师)发展的三部曲——器、势…

    2017-08-01
  • 简单快速的可用性测试

    2014年11月11日   艾欧交互设计-用户体验 导语:可用性测试是改善产品的最佳方式之一,这一点,在内部已经是不争的共识。只是由于用研人手总是不足,所以为了能让各个部门的同事能更快速地展开一些研究和测试的工作…

    2014-11-11
  • 对话式交互设计

    关注一下,更多精彩等着你1. 轮流表达在对话中我们基于互相来回传递的微妙信号进行轮流表达。如果会话中缺少这种有效的轮流互换,我们就有可能难以保持信息的同步或无法跟上对方的节奏。2. 对话串联在自然语言中,对话的所有元素通常会被连贯地串联起来,包括上下文以及随时间演进的对话方式。这种串联帮助我们跟进会话过程。能够理解欣赏笑话幽默的人都知道,在交流中的每个回合都要注意上下文的关联性,并加强整体的交流。3. 潜在效率人们经常会用简略的口语交流...

    2018-03-21
  • 译文|移动体验设计禁忌

    就移动用户体验设计而言,不断地实践是检验其好坏的一条必经之路。在这篇文章中我们聚焦于基础。我们需要去解决的是如何避免打断用户或者强迫用户思考的问题。

    2017-05-20
  • 【产品分析】微信拼手气红包的贪嗔痴

    春节期间火爆的“拼手气”红包,让用户疯狂点击拼手速网速,拼rp看金额,每一个环节都深深戳着用户的G点,高潮迭起。“拼手气”就是拼人品,那么,最佳手气者是不是有机可循呢?微信红包这样的设计目的在何处? Aaron毛…

    2015-03-05
  • 在交互设计中,极简设计的四种策略

    本文将介绍交互设计中的极简设计4策略,帮助产品经理或产品设计人员在进行产品设计时,可以打造一款真正为“用户”设计的产品。

    2017-05-01