专栏名称: haoyang0625
公众号:产品狗郝阳(ID:pmhaoyang) Wechat:hellohy0625 [email protected] 一个正在实习的产品狗的写东西的地方
目录
相关文章推荐
896汽车调频  ·  郭艾伦再发声:对方一直在逃避,太让人寒心 ·  2 天前  
896汽车调频  ·  郭艾伦再发声:对方一直在逃避,太让人寒心 ·  2 天前  
羊城晚报金羊网  ·  眼球被戳中结膜破碎,郭艾伦再次回应受伤事件: ... ·  2 天前  
江苏教育新闻  ·  “50岁,仍要拼!”她宣布复出 ·  3 天前  
51好读  ›  专栏  ›  haoyang0625

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

haoyang0625  · 简书  ·  · 2018-03-20 22:34

正文

本文转译自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

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







请到「今天看啥」查看全文