--------------------------------分割线-----------------------------------

我一直在想，

每个公司一定都有自己选拔人才的方式和套路，

当然也会有属于自己的题库。

校园招聘更是这样了，每年各大厂都会花费各种人力物力财力，

想尽办法来筛选从象牙塔刚出来的我们

除了简历的筛选，有时候会有心理测试，

有时候还会有和公务员考试一样的行测题目来算算数。

都通过了再然后才能进入技能的笔试。

我想写一个系列，算是交互类技能笔试的一种分享和笔试后的总结回顾吧。

（虽然我不知道我能不能坚持写下去~）

移动导航栏设计------常考指数3颗星

我这里不写出来哪个公司考过，确实是个交互基础类的题，

不是那种考你经验的实践大题，分值也很低，答起来力求快／准／稳。

要留出来时间给后面大题比较好。

我就写写我的答案+平时看书和网络总结的，有侵权的地方请联系我删掉，各种转载的文章我有的找不到出处了，当然我的答案也不一定完整，欢迎来与我交流。

说起导航设计模式，必然要提一本书《移动应用UI设计模式》

美国用户体验大师Neil的书，我觉得纸质版的书籍总比网络总结来的更精准更靠谱吧。以下导航的名字就按照这个书的来了，也写了其他的说法的概述。

根据产品层级的深度和广度，选择适合的导航模式，是产品设计中的关键一环。

以上图为本书的所有导航，我先一一说一下，再结合现在案例以及其他作者的整理的使用来补充谈。

一、跳板式（有的作者把它叫做宫格式）

它特征是，登录界面中的菜单选项就是进入各个应用的起点。对操作系统并没有特殊要求，在各种设备上都有良好表现。它有时也被称为”快速启板”（Launchpad）。

一般用做主导航，常用的布局模式3*3（常说的九宫格布局）2*3、2*2和2*1网格。但也不一定要拘泥于网格，也可以按照不同的优先级顺序，放大或者缩小网格，以突显出内容的层次感。

当然，在使用的时候也不一定是一种导航，也可搭配使用。

案例是很著名的美图秀秀，以前版本和最新版本我都放在这里了，

最新版本还配合了左右滑动。

但是实际上此类导航的缺陷就是信息互斥，无法相互通达，

因而有时候给用户带来了更多的操作步骤

使用情况总结：它比较适合入口相互独立互斥，且不需要交叉使用的信息归类

一旦入口需要有所交集，必然导致更多的操作负累，这个时候只能根据产品特性做出权衡，如果不适合，建议果断拒绝这种方式。

二、列表菜单式

最常见的主导航模式之一，有多种变化形式，又可分为分组列表、个性化列表、行内扩展式列表（这个一般用做次级导航）和增强性列表（是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的）

同时，列表菜单很适合用来显示较长或拥有次级文字内容的标题。

下面举出的分别是增强列表／个性列表／分组列表

以下是网络其他笔者的总结

列表式导航大多作为辅助导航来展示二级甚至更深层次的内容，若要作为主导航，必须满足层级浅且内容平级的条件

需要注意的是：

l  列表式导航的数量保持在一屏以内，超过一屏最好再分一级，

l  将最终要的内容归纳在前4个列表更容易被人们记住

l  要注意为列表内容分类。

三、选项卡式（标签式导航）

几乎大部分的app都采用的是这种导航模式作为主导航。根据操作系统不同，选项卡位置和设计也不相同。ios的选项卡是在底部 ，Android的则是在顶部。

其他导航模式和选项卡式导航搭配使用时一般都会用做次级导航。

当然，这个书很老了，那我们来看看现在的案例

也有作者细分为底部tab式导航、顶部tab式导航、底部tab的扩展导航这三种。

大部分都在底部吧，因为在手机操作中，拇指的可控范围有限，缺乏灵活度。尤其是在如今的大屏手机上，拇指的可控范围还不到整个屏幕的三分之一——主要集中在屏幕底部、与拇指相对的另外一边。（拇指的热区如下图所示）

举几个截图例子如下，分别是底部选项卡导航／顶部选项卡导航／选项卡与宫格两种结合的导航

当然有的Android的物理按键已经放在底部了，为了不产生堆叠，很多Android应用运用了顶部tab式导航，这是一种妥协下的行为。

还有腾讯新闻等这类新闻类APP，由于内容、分类较多，运用顶部和底部双tab导航，而切换频率最高的tab放在顶部，这是为什么呢？因为新闻在每个tab都是沉浸式阅读，最常用的操作是在一个tab中不断地下滑阅读内容，将常用的tab放在顶部，加入手势切换的操作，反倒能带来更好地阅读体验。

总结使用情况：

1、预计用户会经常切换视图。

2、顶级内容视图有限 在3-5个之内。

3、想让用户清楚地指导有可供选择的视图

其他笔者的总结：

l 某项功能必须固定在底部，那么其他tab只能固定在顶部，但为了方便操作，顶部tab导航最好支持手势操作，即滑动即可切换;

l 该APP是沉浸式体验，如新闻、小说等，为了带给用户更好的阅读体验，可以将tab放在顶部。

     还有在交互控件上，这里有两个容易混淆的名称（其实我觉得叫什么没啥关系啦，能灵活应用就行了，这里就是插播一条～）

四、陈列馆式导航

陈列馆式的设计通过在平面上显示各个内容项来实现导航，主要用来显示一些文章、菜谱、照片、产品等，可以布局成轮盘、网格或用幻灯片演示。

很多啦～

总结应用：视觉展示／无层级的时候

五、仪表式导航

仪表式导航提供了一种度量关键绩效指标（Key Performance Indicators，KPI）是否达到要求的方法。经过设计以后，每一项量度都可以显示出额外的信息。这种主要的导航模式对于商业应用、分析工具以及销售和市场应用非常有用。

六、隐喻式导航

这种导航的特点是用页面模仿应用的隐喻对象。这种导航主要用于游戏，但在帮助导航人们组织事物（如日记、书籍等），并对其进行分类的应用中也能看到。尽管现在倾向于扁平化设计，但一些应用仍然能够通过模仿真实世界的物体和工具提升可用性。

总结：隐喻式导航主要用在沉浸式应用中，如游戏、图像和音乐的编辑软件。

七、超级菜单式 & 八、下拉导航式

一般会组合一些检索的菜单来使用，下面是别笔者总结的。

九、抽屉式导航

经常和底部tab式导航结合使用的抽屉式导航，我们可以称之为优雅的隐喻。

起源于Android的一种导航模式，后在ios中也常见到。一般在Android中用做主导航，在ios中往往会搭配其他的主导航模式做次级导航使用。

因为不太会被用户发现，降低了用户的参与程度，所以使用上应当谨慎。

其他笔者的总结：

l  如果应用主要的功能和内容都在一个页面里面。只是一些用户设置这类低频操作内容需要显示在其他页面里。为了让主页面看上去干净美观，可以把这些辅助功能放在抽屉栏里。

l  如果你的应用有不同的视图，且他们是平级的，需要用户同等地对待，抽屉栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。

l  在大屏时代使用抽屉栏，手势操作显得尤为重要，从屏幕边缘唤出抽屉栏是个不错的选择。

需要注意的是：需要用户有一定参与的信息层级，最好不好放置在抽屉栏

十、悬浮icon导航

无论你到达APP的哪个页面，悬浮icon永远悬浮在上面，你依靠悬浮层随时可以去想要去的地方。

其他笔者的总结：

悬浮式icon是一个非常便捷的操作入口，也适应大屏幕时代。

但需要注意的是

l 悬浮式icon会遮挡某些页面的操作，在设计的时候应该考虑进去，比如无论在那个页面永远为悬浮icon留有位置。

l 在某些信息层级繁多且复杂的APP，让用户自主决定是否需要调出悬浮式icon，或者让用户自定义菜单会更加符合用户的心理预期。

这个作者还小结了一下：

标签式导航：最常用、最不易出错，请第一时间考虑它

抽屉式导航：如果你的信息层级繁多，可以考虑将辅助类内容放在抽屉中

列表式导航：作为辅助导航来展示二级甚至更深层级的内容，每个APP必不可少，但请注意数量与分类

平铺式导航：如果你的内容是随意浏览，无需来回跳转的，可以考虑它。

宫格式导航：不建议在APP中作为主导航使用，如果非使用不可，请增加跳转的关联性

悬浮式导航：更适应大屏的导航模式，不妨试一试，但注意不要让它遮挡住某些页面的操作

十一、一些应用在次级导航中的导航。。。

书里面还写了很多的次级导航，下面总结如下

A 翻页式（Page Swiping）

这种模式可以通过滑动手势快速导航内容页。表现 这种导航模式的最常见方式式利用页面指示器(小 圆点)。适合以图片为主的多项同类内容的展示。

B 滚动选项卡

在某一个模块中显示多种类别或视图时，这种分类很有用。滚动选项卡一般比标准的标签栏要窄，因为它们没有必要作为触摸对象。

使用场景:
1. 分类较多且清晰。
2. 作为选项卡导航的次级导航。

C 折叠菜单式(Accordion)

（可能和上面超级菜单是一个东西，算了～叫什么不重要，补在这里吧）

折叠菜单能使用户在同一页面上查看到更多的信息。这种模式比跳转到灵异页面再跳回去更高效。适合子分类类别少且分类信息多的场景。

就酱啦

写完了，应该很全了，

针对于交互设计的笔试来说吧，

我觉得答常用那几个就好，并且给出案例和适用的场景就OK了。

如果面试要问起来的话，

也要说出来案例App的名字，就会显得咱十分专业，并且一看就是平常会留心观察移动App设计的好设计师，

毕竟这是咱们的职业素养嘛～

可以了～

加油～嘿嘿～求赞

weibo@就是下凡凡凡凡