产品 | 打造界面的空间感

从二维到三维,利用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 设计从二维拓展到三维,使得像素不再处于同一平面,而是处于具有不同层级的三维空间中。从简单的二维设计向富有层次感的动效设计过渡是未来交互设计的发展方向,给设计师增加了更多的可能性,但无疑这也是我们未来需要适应的一个新的维度,也是一个巨大的挑战。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,468评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,620评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,427评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,160评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,197评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,334评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,775评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,444评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,628评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,210评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,767评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2 341

推荐阅读更多精彩内容