移动App中的10种创新导航设计

本文转译自Speckyboy，内容有删减

特别提醒：本文内含10张GIF图，可能消耗35M流量，请留意页面加载速度

移动App中的10种创新导航设计

移动应用的导航条设计经过这么多年的发展，有许多种不同的样式。如果所有的导航设计都遵循相同的结构，那么对于用户来说，将会更加直观理解，但是世界总是多样化的，导航设计亦如是。

不同的App使用不同的方式与思路来解决导航问题。比如一个有七八个主菜单的App可能会用汉堡包设计模式。如果只有三个菜单，可能只会用标签栏。

除此之外，苹果iOS和谷歌Android之间在设计方面存在一种对立关系。iOS建议产品底部和顶部用标签导航、汉堡包导航。

这样的好处是我们在导航设计中看到了一些不错的创新，设计师们正在寻找最适合他们的产品和用户的解决方案，在本文中，我们会汇总一些最新的最好的例子。

1、Pub导航

（原谅我不知道这个Pub怎么用中文表达比较好）

1.gif

这种Pub导航设计在Windows Phone上设计的比较多，他使用干净的粗体字和加大字号的布局。

2、底部导航

2.gif

这个很漂亮的设计使用了一个底部标签栏和顶部切换条。交互方式符合用户预期，并且高效。

3、侧边菜单导航

3.gif

这个案例是侧边菜单导航，使用了一种独特的汉堡包图标和精美的开关过度动画。

4、Google报亭式导航

4.gif

这种Google报亭式导航使用一种独特的布局概念，因此同一个导航菜单有3个不同的阶段。最高级别的菜单允许用户关注更多的主题，而最低级别的菜单考虑到内容的可读性和冗余空间。

5、近导航搜索

5.gif

这是一种非常创新的搜索交互方式，不是在顶部添加搜索框，而是将搜索作为一个选项卡项目打开。这个选项卡使用简单的过滤器打开搜索。

6、概览导航

6.gif

这种导航方式比较新颖，它从水平布局切换到具有进度条的垂直紧凑布局。

7、多彩导航

7.gif

这个动画使用了一些视觉上令人愉悦的效果将汉堡包图标转换为全屏导航列表。

8、侧边导航

8.gif

这种侧边导航从边上立体90度切换到水平180度，非常具有立体感，很独特。

9、底部弹出菜单

9.gif

点击底部的按钮时，App的底部导航就会触发一些漂亮的视觉效果。UI的其余部分淡出，焦点投射到新的两个菜单上。

10、交互式导航

10.gif

这个交互案例比较特别，因为它最开始是在全局视图中显示导航项目以便用户触发。当用户开始滚动时，这个导航会浓缩为汉堡包图标，以便留出空间给内容。