微信号:youshege

介绍:优设网官方帐号,国内知名设计师学习平台.和大家一起来利用碎片时间学习设计和PS技术吧!

公司的APP导航设计太落后了,老板让我创新一下...

2017-10-13 13:13 熊就要个熊样

优设品牌号,旗下新品及内测邀请码资格均在此号,关注推送掌握动态,有机会第一时间获取。

封面设计:Oleg Frolov

手机导航的设计有许多不同的形状的交互形式。如果所有的导航系统都遵循相同的结构,那么用户将更直观,更容易理解,实际情况并非如此。

不同的应用提出了独特的问题,可以使用导航设计解决。例如,一个有七个或八个主菜单项的APP可能用汉堡包菜单。有三个菜单项的APP可能会用各种各样的tab标签栏。

除此之外,还有就是为了平衡苹果iOS和谷歌Android之间的设计规则,因此划分为底部标签栏,顶部标签栏和汉堡包菜单栏。

酒吧指南导航

Windows操作系统的导航指南给出了独特的用法,在顶部导航栏里使用清晰且大的粗体。

底部导航

这个漂亮的例子是使用底部可切换的tab标签栏与顶部tab条组合。由此产生的交互既令人满意,又令人印象深刻。

左边菜单导航

左侧菜单导航使用一个‘汉堡包’图标和独特的过渡效果。

谷歌的报刊导航

谷歌报刊导航概念采用独特的布局,有3种不同的导航方式。顶部的水平导航可以更好的展示标题,而底部导航则展示更多具有可读性的内容。

快速的导航搜索栏

这是一个一个非常具有创新的方法来实施他们的搜索功能。而不是把搜索栏放在顶部的导航里。点击搜索栏还会出现相应的tab标签 ,它起到迅速筛选条件的作用。

可变换的导航

这个导航概念在从水平布局转换到紧凑的纵向布局和包含目标状态的指示器方式,是令人耳目一新的。

多色导航

这个动画概念使用一些视觉效果,从汉堡图标过渡到等宽等高的导航列表。

侧边导航

这种侧边导航的方式很独特,点击左下角的按钮,它从一个水平到垂直的角度转换。

底部导航

当添加按钮被点击时,这个APP的底部导航会触发一些漂亮的视觉动画效果。用户界面的其余部分消失,重点是弹出的两个新的按钮。

互动导航


这种导航的交互示例很好地展现,最初阶段,单点击进入在全视图的导航项目。当用户向下滚动时候,这个导航被压缩成一个汉堡包图标,以展示最佳的浏览区域。


 
优秀网页设计 更多文章 甲方从此不再说logo要大大大了.... 今年工资还没涨,是我不够努力吗? 还在下载素材拼凑作品吗?7个创意实战技巧让你灵感爆棚 没想到色卡还能这么用…… 用了这4个修图秘技,让你国庆出游的照片瞬间有格调...
猜您喜欢 如何在K8S上玩转TensorFlow ? 白鹭引擎再度升级:成首个支持柔体动画的H5引擎 当我们在聊用 iPad Pro 画画的时候,我们在聊什么? 什么样的人可以称为「架构师」(无删节版) 不要自称是程序员,我十多年的 IT 职场总结