干货丨移动端导航的七种设计模式

常见是因为，无论你用的是Android还是iOS，每天一打开手机，宫格式导航就会对你说hello了（就是下图啦）

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

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

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

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

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

总价一下：

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

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

悬浮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 Design中，同样提出了悬浮icon的设计概念。

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

总结：

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

但需要注意的是

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

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

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

最后总结一下：

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

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

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

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

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

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

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

（编辑：南平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!