浅谈移动端导航的七种设计模式分享(2)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:UI中国   作者:elaine90

关键词

每一个APP都是一个宫格,这些宫格聚集在中心页面,用户只能在中心页面进入其中一个宫格,如果想要进入另一个宫格,必须要先回到中心页面,再进入另一个宫格。每个宫格相互独立,它们的信息间也没有任何交集,无法跳转互通。因为这种特质,宫格式导航被广泛应用于各平台系统的中心页面,这就是为什么说他常见。

但是为什么不常用呢,大家可以翻一下手机里的APP,看看哪个APP的主导航用了宫格式导航?你可能只能找到一个最常用的,尤其是爱自拍的亲们-美图秀秀(如下图)

浅谈移动端导航的七种设计模式分享

经常使用美图秀秀的人都会有一个共同的烦恼,例如我拍了一张图片,我需要美图一下,我的心理模型是这样的:进入美图秀秀-打开一张图片-先祛斑祛痘、放大眼睛、瘦个脸-最后加上特效(自然/甜美可人/粉嫩系)-保存图片。

但是美图秀秀给我的实际模型却是这样的:进入美图秀秀-打开一张图片-进入人像美容-祛斑祛痘、放大眼睛、瘦个脸-保存图片-再进入美化图片-加个特效-再次保存。这样做的结果是流程复杂,而且我多存了一张没用的照片,还要到照片里进行删除。

这就是宫格式导航的缺陷,信息互斥,无法相互通达,只能给用户带来了更多的操作步骤。

总价一下:

宫格式导航适合入口相互独立互斥,且不需要交叉使用的信息归类

一旦入口需要有所交集,必然导致更多的操作负累,这个时候只能根据产品特性做出权衡,如果不适合,建议果断拒绝这种方式。

六、悬浮icon导航

悬浮icon导航,是将导航页面分层,无论你到达APP的哪个页面,悬浮icon永远悬浮在上面,你依靠悬浮层随时可以去想要去的地方,同时,为了让悬浮icon不遮挡某个页面的操作,通常悬浮的icon都可以在屏幕边缘自由移动。

iOS系统就运用了这种导航模式-Assistive Touch, Assistive Touch是在iOS5出现之后搭载的新的辅助功能,知乎上很多人吐槽这个悬浮方块非常碍事,还有很多人说这是因为home键质量不佳而且官方并没有明确提出有效的解决方案,所以AssistiveTouch是曲线救国,此处应有笑声…我最早的一部4S用了2年,摔碎屏2次,home键都依然坚挺,撇开home键不谈,单说悬浮icon在大屏幕时代发挥的作用,当你单手持握手机,拇指在手机中部浏览,你想回到主屏幕,但是手指却难以到达屏幕底部,悬浮方块在这个时候就能为你提供快捷操作。

浅谈移动端导航的七种设计模式分享

而且你可以在AssistiveTouch里自定义顶层菜单,我比较喜欢里面的屏幕快照功能,不用按住电源键和home键就能截屏的感觉棒棒哒!

Assistive Touch从iOS5一直活到iOS9,真不是一个鸡肋的功能,关键看你怎么用。

在Android的Material Dsign中,同样提出了悬浮icon的设计概念。

浅谈移动端导航的七种设计模式分享

尽管现在很难看到悬浮icon作为导航的设计,但我相信随着大屏的发展,悬浮式icon一定会越来越广泛的使用

总结:

悬浮式icon是一个非常便捷的操作入口,也适应大屏幕时代。

但需要注意的是

l 悬浮式icon会遮挡某些页面的操作,在设计的时候应该考虑进去,比如无论在那个页面永远为悬浮icon留有位置。

l 在某些信息层级繁多且复杂的APP,让用户自主决定是否需要调出悬浮式icon,或者让用户自定义菜单会更加符合用户的心理预期。

七、更多自由

我总结的导航其实只有6种,但大家一定不能被现有的导航模式所束缚,未来会有新的导航模式,新的操作手势…,设计的心应该是自由的,若你羽翼未丰,就在规则的天空中飞行,可能不会出彩但不至于犯错;若你已成雄鹰,便可自由飞翔,,突破规则,甚至建立自己的规则。

最后总结一下:

标签式导航:最常用、最不易出错,请第一时间考虑它

抽屉式导航:如果你的信息层级繁多,可以考虑将辅助类内容放在抽屉中

列表式导航:作为辅助导航来展示二级甚至更深层级的内容,每个APP必不可少,但请注意数量与分类

平铺式导航:如果你的内容是随意浏览,无需来回跳转的,可以考虑它。

宫格式导航:不建议在APP中作为主导航使用,如果非使用不可,请增加跳转的关联性

悬浮式导航:更适应大屏的导航模式,不妨试一试,但注意不要让它遮挡住某些页面的操作

最后,根据产品层级的深度和广度,选择适合的导航模式,是产品设计中的关键一环。与大家共勉。吐血总结了这么多,如果觉得对你还有所帮助,点个赞呗!如果有争议,在评论区讨论一下,我会不断修改。O(∩_∩)O

 收藏