个人公众号：鱼大大设计铺，ID：ydsjp2018

转载请私信作者，并注明来源公众号：沐风与体验设计

交互设计其实就是根据产品目标和用户目标，选择最合适的导航结构、页面结构、交互控件以及动效。这个任务在有的公司是产品经理代劳，有的是UI设计师代劳，在有的公司里则是专门的交互设计师去做这件事。

交互设计的本质，是关于应用与用户交流的渠道的设计。手机交互设计兴起这么多年，各种形形色色的设计方式几乎已经都出现遍了。

最近打算整理一下手机上的一些常用导航结构、页面结构以及交互控件，统称手机交互设计通用组件。

就像那句名言说的“没必要重复发明轮子”。如果现有的结构和做法，已经被证实为高效实用的，就可以直接拿来实用，也没有必要进行强行创新。我的这个整理，意义也在于此。

整理难免会有疏漏，欢迎大家留言补充。

首先，先列出现在整理到的所有应用级导航结构：

所谓应用级，就是指这是应用的最高一级导航。如果是存在于某个tab里的导航形式，则不在本文的考虑范围。

一、底部导航栏

这是最常用的一种导航形式。底部导航栏位于页面底部，操作方便。但也是因为位于底部，所以导航栏里各个tab的内容不是很突出。

如果你更想让用户时时注意到应用的每个tab的标题，那么顶部tab导航更合适。

另外，底部导航栏有两种用法：

层级导航，即进入一个tab后，用户在这个tab里点击别的入口，进入二级页，则底部导航栏消失，是比较沉浸的做法。

如果用户要去往另一个tab页面，用户必须一步步返回或者从头开始重新选择。

层级导航示意

另一种是扁平导航，扁平导航允许用户在多个内容分类之间切换。网易云音乐和App Store使用了这种导航形式。

扁平导航示意

关于两者在用法上的详细区别，请参考之前写过的这篇文章：

掌握了这个导航控件，你可以设计80%的应用导航

二、舵式导航

舵式导航是在底部导航栏的基础上增加了一个操作入口，其用法与底部导航栏相同。操作入口位于中央，一般设置为发布新内容的功能居多（如小红书），也有功能的主推功能（如百度app）。

点击底部导航栏上的操作入口，一般会出现一个模态浮层：有的是半屏，有的是全屏。至于半屏还是全屏，取决于需要呈现的内容的多少。

半屏浮层示例

全屏浮层示例

这里的操作入口，由于位置极明显，所以需要放置用户高频操作的按钮，或者应用很希望用户点击的按钮。

三、顶部tab导航

这里讨论的顶部tab导航，是整个应用的架构采用顶部tab导航，如下边左图所示。

不包括在一个tab中，使用顶部tab导航来组织页面的情况，如下边右图，在首页tab里，又包含了3个tab

这种导航的操作方式，是通过左右划动来切换不同的tab，而tab位于页面的顶部。这是一种很安卓的风格，它的好处是导航里的每个tab都比较明显。

至于坏处，我认为现在大家还不是很习惯通过左右划动来切换tab。

最典型的一个例子，就是QQ音乐：之前都是顶部tab导航，终于还是扛不住，在最近的版本改成了底部导航栏这种最为常用的导航形式。

其实很久以前的安卓版微信，也是顶部tab导航，只是后来也改成了底部导航栏形式。

通过这两个例子，可以看出应用的顶级导航使用顶部tab导航，风险还是比较大的。所以，如果你的tab的个数在3~5个，还是推荐大家使用底部导航栏。

四、分段控件导航

分段控件是iOS设计规范里独有的一种控件，最典型的是iOS自带的短信应用中顶部用于切换不同类型短信的这个控件

分段控件可以包含两个或者更多的分段选项，选项之间的切换，是通过点击操作来完成。这是它和顶部tab导航最大的区别。

此外，它的选项数量比较受限，一般是2~5个，而顶部tab导航则没有这个限制。

使用分段控件，一般是“不得已而为之”，往往是由于手势冲突，不得不使用分段控件这种依靠点击来切换选项的控件。否则，都是能选顶部tab导航就选。

抖音的顶级导航使用了底部导航栏，在首页tab中，由于从右向左划动的手势已经名手有主（划动后打开播主个人页），因此为了防止手势冲突而使用了分段导航。

所以，当有如下情形时，请使用分段控件导航：

1. 应用中左右划动操作已经被占用。
2. tab个数在2~5个。

以上总结了4种导航结构：底部导航栏、舵式导航（中央是操作按钮）、顶部tab导航（各个tab更明显，但横划不方便操作）、分段控件导航（手势冲突时选择）。

个人公众号：鱼大大设计铺，ID：ydsjp2018

转载请私信作者，并注明来源公众号：沐风与体验设计