常用ui设计导航模式详解，让你找到更适合自己的设计模式

在ui设计中导航的设计可以说是提升整个ui设计用户体验感的关键，所以很多设计师在做ui设计的时候都会在导航上花更多的心思，下面我们跟随小编一起来了解一下ui设计导航的相关资料吧。

　　ui设计导航之底部Tab栏

　　这是APP最常使用的导航模式，用于一级目录的导航，位于页面底部，无论用户单手还是双手操作都能轻松点击，能告诉用户当前位置及用户切换统一层级之间的不同模块。

　　展现形式有：文字 + icon，也有纯icon形式，大部分是文字+icon，可以减少用户记忆负担。

　　优点：

　　1.属于拇指热区范围内，操作方便，用户体验好。

　　2.iOS原生系统，开发成本低。

　　3.切换快速方便，用户不会轻易迷失。

　　4.底部Tab栏具有很强的包容性，可以形成最基本的信息框架，然后用其他的导航模式来承载具体的功能和内容，内容曝光率高。

　　缺点：

　　1.导航数量有限，常见的标签栏导航最多3-5个控件，不宜超过5个，扩展性不高。

　　2.占用底部空间，长时间逗留页面，沉浸感体验不足，所以在不需要的时候隐藏底部标签是很聪明的做法(如文章阅读界面)。

（图片来自网络）

　　ui设计导航之底部（舵式）拓展栏

　　“舵式”拓展栏，为凸出底部功能，把Tab做得比较突出，入口在底部标签中间，两侧是其他操作按钮，很像轮船上用来指挥的船舵，故称为“舵式导航”。

　　优点：

　　1.集中强调某一功能。

　　2.常用于上传照片、视频，分享等操作的集成式的功能。

　　3.提高导航栏的趣味性，让用户贡献更多内容。

　　缺点：

　　1.层级较深，需要用户二次点击才能达到目的，增加了用户交互路径，不适合频繁切换。

　　2.隐藏功能容易被忽视，因此功能入口过多，过多会给用户造成选择压力，引起用户的反感情绪。

　　ui设计导航之顶部Tab栏

　　顶部导航栏位于页面顶部，一般位于导航栏或者状态栏下方，用作于二级导航，基本都以纯文字的形式出现(避免干扰用户浏览页面核心内容)，常见的顶部导航栏有：固定顶部标签导航&可滑动标签导航。

　　优点：

　　1.滑动式顶部标签可无限添加标签，可扩展性强。

　　2.技术上，适配简单，减少开发成本。

　　3.占据空间比底部导航栏小，节省空间。

　　4.划屏切换，简单便捷。

　　缺点：

　　标签数量多，容易导致产品页面过多，越是后面的标签容易被遗忘，导致流量遗失。

　　ui设计导航之列表式导航栏

　　列表式APP导航是我们app ui设计中必不可少的一个信息承载模式，列表导航通常用于二级页面。一般在列表导航里都会有下一个层级，可以通过箭头来告诉用户是否有下级菜单。当列表信息比较多的时候，可以对列表进行分类，可以通过间距和添加小标题分组。

　　优点：

　　1.这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。

　　2.符合用户从上往下的阅读习惯。

　　3.可扩展性强。

　　缺点:

　　1.功能切换很不方便。

　　2.承载信息种类单一，容易引起单调感，很难让用户长时间停留。

　　3.当蕴含信息量庞大时，列表越长，越容易引起用户审美疲劳，且越往下功能效率越低。

（图片来自网络）

　　ui设计导航之宫格式导航栏

　　一般作为信息或平台的入口，为产品或项目信息提供聚合的载体，适合承载订阅类产品或众多属性差异非常明显的分类信息，此类导航信息的呈现内容比较少，但是每个项目选取的效率比较高。

　　优点：

　　1.可以划分多个内容、多个模式，各个功能相互独立，由不同团队独立开发每个模块再聚合。

　　2.可以通过入口来进行流量的分发。

　　3.扩展性好。

　　4.用户能够直观选择自己需要的功能模块。

　　缺点：

　　1.无法让用户在第一时间看到内容，具体的信息往往隐藏在下一级界面，会增加用户的认知成本。

　　2.同时多个入口的情况下用户选择压力大。

　　3.不同入口之间缺乏联动性，切换不方便，用户的操作流程多。

　　相信看完了小编为你介绍的这么多超级详细的ui设计导航模式之后，一定可以帮助你找到更多更适合自己的设计风格的导航模式哦!