沈六月每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
在《用户体验设计要素》一书中，作者将用户体验分为5个层级：战略层、范围层、结构层、框架层、表现层。
其中框架层里面有个重要的概念就是导航设计。导航就像一本书的目录，当看到书的目录时，就知道这本书的框架分为几部分，每个框架的内容点是什么，这些内容点又是如何排布的。好的导航设计会告诉用户怎样找到自己想要的信息和完成自己想要的任务等。
本篇讲解移动端导航设计，分以下5种：标签栏式导航、下拉菜单、抽屉式导航、宫格式导航、列表式导航。
01、标签栏式导航(tabbar)
a、定义
标签式导航设计是我们最常见的导航模式之一，几乎绝大部分app中都有在用，用于一级页面当中负责各主业务模块的切换；标签式导航tab数一般会保持3～5个标签，极限情况下不少于2个；
标签式导航可分为顶部标签式、底部标签式、舵式导航(底部扩展式导航)。
b、样式类型
- 顶部标签式：顾名思义就是 tabbar 位于顶部，最早知道它是在 Material Design 里面，因为 Google Pixel 手机底部存在物理导航，所以将标签导航置于顶部不会显得突兀。它很少用作一级导航，一般是二级导航比较多，几乎以纯文字的形式；当标签类目过多的时候，可以通过左滑展现更多标签，比如很多新闻阅读类的 app：
- 底部标签式：最基本的导航，有文字+icon，也有纯 icon 形式，但大部分是文字+icon 的形式，不容易造成理解上的误导；当标签多余5个时，可以将剩余优先级不高的功能集合到一个功能入口中，例如“更多、个人中心等”
- 舵式导航(底部扩展式导航)：在底部导航栏中有一个非常突出的功能，作为该APP的核心功能或操作，称为舵式导航。经常以颜色或者是大小的区别来展示这个核心。如菜鸟裹裹的寄件为了突出功能，咸鱼的发布为了拓展二级导航等，最主要的还是让人有点击的欲望。
c、底部导航样式表达
图标可配置：首页作为一个app的门面担当，从视觉上能否第一眼抓住用户非常关键，特别是在一些逢年过节，营造节日的氛围。
图标动效：加入情感化设计，利用小动效的交互来表达当前选中效果，增加趣味性；
标签小红点：表达当前有相关的新信息，让用户快速看到，引导点击
02、下拉菜单
下拉菜单一般为辅助导航，当一个页面承载的功能太多时，可以将一些功能收纳到某一个元素里，可以节省页面空间，显示足够多的条目；
优点：节省页面控件；交互方便，点击 icon 唤醒，点击其他区域收起隐藏；与界面的连贯性强，用户能够清楚的知道自己所在的位置。
缺点：大部分位于顶部，操作不便，不易频繁操作；入口不明显，容易被忽视。
03、抽屉式导航
抽屉式导航又叫侧边栏式导航或汉堡式导航，和下拉式菜单类似，都是为了隐藏非核心的操作和功能，可以使用户获得沉浸式的体验和降低其他模块的切换频率，用户无需经过导航，一打开app就可以直接进入想要的功能界面。
优点：隐藏次要功能，聚焦核心内容；隐藏减少非核心功能，沉浸式体验优秀；节省页面空间；标齐选项可扩展性强。
缺点：隐藏性比较高，用户不容易发现，一定程度上也降低了某些功能的使用率，所以使用抽屉式导航作为主导航要慎重，比如内容类、电商类的app想让用户发现的点有很多，就不太适合使用抽屉式作为主导航。
随意从目前的趋势上看，已经很难再找到使用抽屉式导航的app了，原先的小红书、网易云音乐、优酷、马蜂窝等在随着业务的拓展上，需要加大流量出口，在改版中已不再使用抽屉式导航，目前保留的还剩滴滴。
04、宫格式导航
宫格式导航将主要入口全部聚合在该界面中，从而让用户了解APP的服务，选择自己想要的；各个入口之间相互独立，没有太多交集；但在同一界面上宫格式导航比其他导航更容易吸引用户注意，往往会把一些很重要的、最希望被用户发现的功能加入到宫格中，一般适用于二级导航。
优点：宫格式结构可以作为信息或平台的入口，让用户了解app中的所有服务并快速选择自己需要的服务。同时也具有较强的延展性
缺点：根据席克定律，一个人面临的选择越多，压力越多，这个宫格式无法避免的。当信息量选择大的时候，也是无法作为一级页面主要导航。同时功能之间无法灵活跳转，链接度较差。
05、列表式导航
列表式导航是最早也是最容易的信息展示方式之一，可以无限延伸功能信息框架。列表通常用来展示某个具体模块内容的信息进行分类。
优点：条目清晰，学习成本低；
缺点：操作单一无沉浸式体验，需要结合标签等布局一起设计，更好的传递功能信息，满足友好体验；
总结
在大部分的app中，导航的形式并不是以上一种单一形式存在的，设计导航首要因素是套理解需要，从需要出发，并没有哪一种导航最完美，很多需要导航与导航之前互相搭配使用，配合相应的场景设计结合做出适合用户的导航，给用户好的引导体验。
Powered by Froala Editor
全部评论：0条
更多作品
发表评论