唯美APP设计IOS移动端

唯美APP设计IOS移动端 简书

唯美APP设计IOS移动端关注赞赏支持唯美APP设计IOS移动端

本文是转载文

移动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

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

推荐阅读更多精彩内容这是一个大胆的命题，以我的性格，这样的题目无论如何是不会面众的，如此说主要是因为我是一个偏内向的人，几乎不表露自己...阅读 91评论 0赞 1建宇已经三天三夜没有合眼了！为了让公司能够继续运作下去，他这几天除了打电话跟投资人约时间就是跟投资人见面谈。然而，...阅读 109评论 1赞 0带着最后一天在丽江脖子上被蜜蜂蛰的痛感，我在凌晨一点下了飞机，坐着飙到120码的出租车回到家。 回来就开始不...阅读 358评论 3赞 10“现在啊 总有些年轻人 拿着青春做噱头” 我一直一直记得 四年前你们遭受到的质疑 时间真的是太快 转眼间 我的少年...阅读 41评论 0赞 2本学期我校为了真正落实集体备课，更好的促进每一位教师课堂高效，我们用了先自备出个案，再共备形成共案，继而选一名教师...阅读 39评论 0赞 0评论0赞赞1赞赞赏