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

相关推荐

  • 抖音|如何提升广告的用户体验

    最近发现越来越多的人开始分析抖音这款产品。小编接触抖音时间也蛮久了,到现在成为年轻人的标配。今天小编就来跟你唠唠抖音那些事儿。douyin抖音·  正·  文·  来·  啦·从产品的冷启动,到现在的野蛮成长期,抖音这款产品变化不得不说变化很大,当时的抖音很纯净,并没有什么广告,当然这也是符合产品生命周期的特性。以前的抖音技术流占据了大部分江山,如今的抖音变成了生活小百科,网红商品的发源地,产品内容标准也在随着产品所处的阶段在变化。如今...

    2018-05-05
  • App收银台交互设计思考

    数十万互联网从业者的共同关注!作者:柒0。作者授权早读课转载。来源:简书编辑:Juvae最近完成了“app收银台设计重构”的需求(一期为“账户充值”),作为一个刚毕业的交互新人,踩了一些坑,总结了这次思考的过程与…

    2017-08-01
  • 最近很火的租衣APP用户体验报告

    以下内容并非广告,但是如果衣二三和女神派的营销部门看到的话,要不要考虑来主动给我发点广告费?其实租衣APP这个东西应该火了好一阵了。有我微信的宝宝们可能知道,我这个人有个很大的毛病就是喜欢买衣服。且买来并穿不了一两次,接着就开始在朋友圈各种亏本卖闲置。最近整理衣服发现实在太多真的不能再剁手了,因为根本没地方放。然后突然想到了公司一个客户和我说过她一直用一个租衣APP叫衣二三。看到这个APP的时候我的内心是激动的 --- 终于有软件解决我...

    2018-03-30
  • UED研究如何应用到产品设计中

      腾讯有互联网产品经理的黄埔军校之称。前段时间看腾讯CDC出版的《在你身边,为你设计》,颇有启发。特别摘录书中的《商业价值与用户价值的平衡》中讲UED的部分,看看腾讯是如何让产品责任人和企业高层接受UE…

    2015-07-23
  • 【优秀作业展示】交互设计基础(二)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优秀作业。优秀学生作业第二期申婉彤产品设计15101高铁购票界面设计地点选择日期选择车次车座选择身份认证界面支付界面支付宝支付银行卡支付01Te...

    2018-04-22
  • 网易资深高手:交互设计师必备的9种能力(上篇)

    网易UEDC – 杨杰 : 有好多交互新人或尚未跨进交互设计大门的同学,会经常问的一个问题:交互设计师需要具备怎样的技能和能力?

    2017-12-03
  • 【交互设计】一门感性与理性相结合的专业

    交互设计Sheridan交互设计本科是安大略省唯一一所提供该专业的高等院校。专业强调学生的创造力和逻辑思维,并且会学习到创意过程中的各个阶段的实践经验,从研究和规划的设计与执行。第一次见到文俊同学是在今年国际部举办的春节联欢晚会上,他一直帮着学生会布置会场,忙前忙后,哪里需要帮忙,哪里就有文俊的身影。更令人印象深刻的是他非常标准的广东普通话,来自广东的中国学生并不少,但是他的“广普”着实令人印象深刻。文俊同学四年前来到Sheridan,...

    2018-04-07
  • 用户体验设计 - 快问快答

    首先感谢大家关注我。上篇文章收到了很多小伙伴的反馈,很多人说想多看我更新与用户体验有关的文章,也有反应说有文章长度过长。所以这篇文章我用了快问快答的形式,回答了几个新手用户体验设计师比较关心的问题。因为我自己也是转行做UX,所以希望我走过的弯路大家可以绕过去一些。欢迎大家把我的文章发给其他小伙伴,一起共同进步。也欢迎大家给我意见与建议,你们的观点对我真的很重要!(这次文末有彩蛋)1.什么是用户体验(UX)?这是一个很大的问题,就像你问我...

    微信热点 2018-02-02
  • 看Google设计师设计的细腻动效

    好的动效设计,从来不以炫酷作为目的。

    2017-05-15
  • 设计中的色彩心理学(上):九种色彩所代表的心理感应

    之前写过一些关于色彩的文章,一直说的是关于色彩理论的一些色彩基础,其中有读者提到过想听听关于色彩心理学的一些东西,因此就在这里聊聊自己的一些感想和设计实践中的一些心得体会,并不系统,只谈感想。

    2017-05-10