移动端UI组控件笔记系列：NO.1 导航篇

前段时间项目不忙，每天就是翻很多设计的文章，还重新翻出了iOS8-12的人机交互指南阅读。我发现有时阅读真是一件很有趣的事情，你不同时段看同一本书，往往会有不同的“获得”，会跟作者发生不同的“心有灵犀”。有时，你以为你当时看的够仔细，却还是会在边边角角发现遗落的惊喜。

想起初学设计的时候，翻开iOS人机交互指南，我根本啃不下去，感觉各种名词特别艰涩，每天被这个栏那个框折磨，硬啃完第一遍，一闭眼脑袋还是晕乎乎的。后来就慢慢看一些分门别类的小文章，然后下载很多app，对照着去理解，到现在，拿着人机交互指南也能看的津津有味了，内心os是，这tm是个好东西啊！ 

个人觉得，对于从事UI 1-3的初中级设计师，最重要的就是深刻地理解设计规范，包括iOS，Android，Web端。一个APP应该怎么做？一个界面有哪些结构，常常包涵那些内容？有什么常见的组件和控件，它们各自的使用场景，样式，交互是什么？ ...学会这些，能最快速高效地帮助你建立起一个知识体系。当你的脑子有这样一个树状知识体系，你再去欣赏那些大厂的做得好app，除了好看，你还能说出它好看的原因，说出它哪些符合最新的设计规范，哪些做了自己的创新。学会使用组件化思维做设计，这其实是一个帮你走向专业角度看设计的很好的方式。

写下这个系列，算是对自己的一个梳理总结，此处立个flag：一定坚持把这个系列更新完！

废话了很多，接下来进入正文：

第一篇很重要，我们就从最重要的导航篇说起。

通常学UI设计，导航栏应该是我们最早接触的概念之一。 导航栏可以说是人机交互最重要的桥梁，它是APP的骨架，将所有的内容有效整合，主次有序，使用户能清晰顺畅地在界面之间穿梭而不至于迷失方向。

为了更好地记忆和理解导航，可以按照导航的呈现内容进行划分：

（1）标签式导航

标签式导航即Tab式导航，是目前移动端市场上应用最为广泛的导航设计。一般来说，我们用标签栏来梳理app信息层级，实现用户对多个对等模块的访问。

应用样式：

一般位于屏幕底部，控制在3-5个标签选项，使用文字＋图标的方式呈现。

优点：

多个模块并列呈现，直观展示了APP的核心功能，用户切换时快速高效，又不容易迷失方向。而且，在标签栏图标设计中可以融入logo等设计元素，独特有趣，又进一步强化了企业和品牌形象。

缺点：

占用屏幕一定高度的空间，而移动端的屏幕空间有限，可以说是寸土寸金的。而且当功能入口过多时，该模式会显得不够实用。

（2）舵式导航

其实，舵式导航可以看成是标签式导航的变体之一。两者相比，区别在于舵式导航是把更主要的功能性按钮置于中间，做一些很有个性化的设计，使其更加突出和醒目。 这就要看产品的调性和定位。

应用样式：

一般位于屏幕底部，主功能按钮位于最中间，多为具有设计感的图标，其余次级功能模块分布在两侧，使用文字＋图标的形式呈现。

优点：

同标签栏，但更重点地突出了主功能按钮，最大程度地引导用户进行该功能操作，且该按钮易于凸显强烈的设计感，富有个性

缺点：

同标签栏，且主功能的过于突出，一定程度的弱化其他功能的使用率，而且对主功能的设计感要求很高。

（3）分段式导航

可以理解为标签栏导航的另一个变体，当标签栏导航位于顶部时，我们称之为分段式导航，其实它是一种次级导航。可以和标签式导航组合使用，标签栏导航显示模块分类，而分段式导航显示页面的分组内容。

应用样式：

有两种方式：1）文字＋线条；2）文字＋背景色。

一般最常使用样式1），因为线条是全贯通的，且线条较细，视觉权重小，不易分散用户注意力，用户仍聚焦于当前内容；而背景色非常显眼，导航栏毕竟重在引导而非展示。但如果需要再进行分类导航，则可以使用样式2），因为这时用户沉浸在选择中，可以适当凸显选项内容。

优点：

对页面内容再次进行划分，使用户可以轻松切换访问感兴趣的内容。常见于新闻类，资讯类，视频类的APP应用。

缺点：

位于导航顶部，切换不是不方便，而且也占用一定高度的屏幕空间，使可呈现主内容的区域变少。

（4）列表式导航

一般是次级导航，多用于将某个页面的内容进行分类，并以列表的形式呈现。

应用样式：内容分栏显示，可以用浅色分割线进行划分 。左侧标题左对齐，可以是纯文字，也可以是文字加图标，右侧内容右对齐，可以是说明当前项目状态的文字或图标，也可以为空。

优点：适用于大量信息的分类展示，结构清晰，易于理解，还可以方便进行分组及检索

缺点：形式过于单一，信息内容过多时，容易使用户产生视觉疲劳，不会长久停留。

（5）抽屉式导航

又被叫做优雅的隐喻。适用于沉浸式浏览的APP应用，把除核心功能以外的操作都整合收起，使用户只集中注意力于主要内容。 

应用样式：将部分次要功能整合隐藏在当前页面的某个按钮，点击入口或侧滑时，像抽屉一样拉出菜单。适合设置，关于等不需要频繁切换的功能模块。

优点：着重突出最核心的内容，较大程度地弱化其他功能选项。主内容有较大的展示空间，简化界面，可以使用户获得良好的沉浸式应用体验。

缺点：引导性不足，其他的功能模块很容易被忽视。

（6）下拉菜单式导航

一般位于应用顶部，对同模块下的内容进行分类，通过点击可快速呼出选项，多以浮窗形式呈现在当前界面上。较常用于电商，美妆，外卖，图片等浏览类APP的次级导航，容易使用户能感知到当前位置。

应用样式：多是弹窗形式浮现在页面内，分栏显示类别选项。

优点：将多个分类进行整合性隐藏显示，节省了屏幕空间，对于浏览内容很多的应用，非常灵活。

缺点：位于屏幕上方不适合手势操作，位置相对隐蔽，不适合频繁切换的功能。

（7）幻灯片式导航

应用样式：使用整个页面去呈现当前的内容，多用于阅读，天气，日历等功能性应用APP，可以左右滑动进行切换显示。

优点：单个页面的整体展示性效果好。

缺点：页面形式过于相似单一，且页面间只能按顺序查看相邻界面。容易视觉疲劳，因此展示的页面不宜过多，3-5个页面最适当。

（8）宫格式导航

主页面是所有入口的合集，每个入口相互独立，只展示与此入口相关的内容。适合功能模块多，且存在差异性的应用APP。

应用样式：主页面均匀平铺各个功能入口，可以最大程度地展现各个功能模块，定位准确，非常清晰。

优点：每个模块选取的可能性都比较高，都可以实现流量的导入，具有很好的延展性。

缺点：信息呈现内容少，用户不能在第一时间知道每个入口的信息。无法在多个入口间灵活跳转，每次都要退回到入口总界面。

（9）点聚式导航

应用样式：将用户最频繁操作的多个重要功能汇聚于主界面的一个按钮上，通过点击，可以呼出多个功能选项，排列类似宫格导航。Path是其中最具有代表性的一个典型。

优点：将多个常用功能进行整合，灵活有趣，又节省空间，能有效进行引导。

缺点：这部分功能被隐藏了，无法直接显示，对交互的设计性要求很高。

（10）卡片式导航

又可以称为瀑布流式导航，常作为二级导航，适用于电商，美食，旅游，视频等，以图片内容为主的应用APP。

应用样式：以图片为主，文字为辅的单元展示形式。

优点：排版精美，观赏性高，可以根据需求快速及时地更新图片。

缺点：浏览内容时容易迷失，使用户不知道当前所处层级。对图片要求高，不然会显得很杂乱。

以上，是本次对于导航的全部总结。当然，单一的导航肯定无法满足丰富多变的产品需求，因此，有时也需要我们进行不同种类间的混搭。在实际项目中，我们需要根据不同的需求进行选择。