移动端导航常见的设计样式有哪些

来源：武汉UI设计培训学校时间：2021/5/23 10:59:05

　　什么是移动端导航? 简单来说，导航是用户从A点到B点的方式，是他们发现设计点并与产品交互的过程。

　　可能很多用户认为导航的目标是“在尽可能短的时间内让用户从A到B”，但时间短只属于操作结果，这个结果需要依靠合理且简单的设计才能实现。

　　▲一个页面中可以存在多种导航。例如在油管首页，有顶部导航栏、筛选器导航和底部导航，这些导航相互搭配为产品助力。

　　移动端导航常见的设计样式

　　汉堡菜单

　　围绕汉堡菜单有很多争论，但存在即合理，在合适的场景下汉堡菜单也能发挥大的作用。

　　来看一下汉堡菜单具备的优势：

　　视觉空间：节省屏幕空间，包含有价值的信息;

　　心智模型：大多数用户熟悉这种设计样式并知道如何操作;

　　使用经验：调节学习曲线，改善使用体验。

　　▲使用用户熟悉的设计可以事半功倍。例如美团和饿了么两个产品有着完全不同的主题色，但外卖点餐流程却是一样的，仍然是用户熟悉的操作，并没有因为产品的不同而改变点餐流程。

　　底部导航

　　底部导航栏通常包含产品中zui主要的导航链接，用户只需要简单的点击就能直观地在不同页面间切换。

　　▲几乎每款产品都缺少不了底部导航栏，它方便用户单手操作，不需要太费力就能访问产品页面，提高可用性。

　　顶部导航

　　关于顶部导航，可以看之前分享的文章——研究了100多个App后，发现了顶部栏UI设计的模式和规则!里面详细介绍了顶部导航的设计方法。

　　▲顶部导航通常包含页面中zui重要的信息，与其他辅助导航结合使用。

　　卡片式导航

　　卡片式是一种出色的设计样式，支持改变各种形状和大小，并且能展示文本、链接或照片等各种元素。

　　随着网络上的内容越来越碎片化和个性化，卡片是在页面中聚合单个信息的好方式。

　　图片

　　▲为了改进体验，卡片可以个性化显示不同的内容。另外卡片很容易适应不同的屏幕尺寸，配合响应性设计。

　　标签

　　标签往往是在一个大主题下同时支持多个选项，每个选项都转到不同的界面。

　　▲标签通常用于在同一页面中的几个视图之间切换，展示内容上的差异性。而顶部导航栏有主页、搜索、收藏夹等多个图标，代表不同的功能。

　　基于手势的导航

　　基于手势的导航可以让用户在所需方向上滑动，来完成特定的操作。

　　这种样式的优点在于，即使zui没有经验的用户也很容易掌握，因为手势通常是直观的，只需要轻微使用就可以正确。

　　图片

　　▲国外大火的约会产品Tinder以及的探探，都使用了基于手势的导航样式，为用户带来滑动的乐趣。

　　▲基于手势的导航并不是Tinder发明的，但这款产品无疑将这种流行带给了大众。经典的向左或向右滑动模式保持了事物的动态性、简单性和娱乐性。

　　全屏导航

　　全屏导航是指将大部分屏幕用于导航操作，能够很好地将用户的注意力聚焦到具体的产品细节上。这是一种以连贯的方式提供大量导航的方法，可以立即帮助用户了解产品的功能。

　　3D touch;zui初是由苹果公司提供给用户的，这是一种创建导航快捷方式的方法，可以显示选定的APP的一些关键操作。

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/478/news/361138/违者必究！ 以上就是武汉UI设计培训学校 小编为您整理 移动端导航常见的设计样式有哪些的全部内容。