APP设计之--导航

我们先来看看导航的定义。所谓的导航指的是：引导用(yòng)户访问APP的栏目、菜单、分(fēn)类等布局结构形式的总称。

　　也就是说，导航主要是引导用(yòng)户，告诉用(yòng)户怎么找到自己想要的信息或完成用(yòng)户自己想要完成的任務(wù)。可(kě)见，导航在一个APP中的重要性是非常高的。导航设计的合理(lǐ)性关系着用(yòng)户是否能(néng)够找到信息和完成任務(wù)。

　　那么，导航设计究竟应该如何做呢(ne)?这个说实话，不同的APP，导航设计既可(kě)能(néng)是相似的，也可(kě)能(néng)是完全不同的。因此，导航设计究竟应该如何做的答(dá)案只能(néng)是：根据APP的情况来定。

　　不过，虽然我们不能(néng)给出一个标准答(dá)案说：APP导航这样设计就可(kě)以了。但在众多(duō)的APP导航设计中，我们能(néng)够找到一些常见的设计模式，以此来作為(wèi)一个参考，辅助我们的APP导航设计。

　　下面，我将就APP导航设计的常见模式进行一个总结。

　　首先，我将定义一个叫做原始导航的导航。原始导航是一个最最粗糙的导航，通过纯文(wén)字的链接入口来导航。如下图：

　　看到原始导航，是不是觉得弱爆了，怎么可(kě)能(néng)有(yǒu)这样的导航呢(ne)?所以，我把它定义為(wèi)原始导航，然后在此基础上通过不断的演变来形成我们常见的导航模式。

一、标签导航(选项卡导航)

　　有(yǒu)了原始导航，你可(kě)能(néng)会说，原始导航这种入口的摆放方式太占空间了，就五个入口就占据了整个界面。有(yǒu)没有(yǒu)一种更加省空间的导航模式呢(ne)?当然有(yǒu)。

　　首先，我们将五个入口放到界面的下方，就会形成常见的底部标签导航。

　　通常，底部标签导航有(yǒu)3～4标签，一般不会超过5个，有(yǒu)更多(duō)的选项操作时可(kě)将最后一项设置為(wèi)更多(duō)，将一些次要功能(néng)放置在更多(duō)里。这是一种非常常见的导航模式。如果你的应用(yòng)需要用(yòng)户频繁的在不同分(fēn)页切换，可(kě)以采用(yòng)这种导航。虽然它还是会占用(yòng)一定的界面空间，但比起原始导航来说好多(duō)了。现在很(hěn)多(duō)APP(包括iso和android)都在用(yòng)这种模式。

　　当然，如果你在五个标签中，有(yǒu)一个标签是最重要或最频繁使用(yòng)的，想要重点突出，可(kě)以使用(yòng)下面变形的底部标签导航。

　　这种底部标签导航模式并不常见，但在一些APP中还是可(kě)以看到它的应用(yòng)。比如微博的底部标签导航。

　　其次，我们将标签放到界面的上方，就会形成常见的顶部标签导航。

　　顶部标签导航在ios app中一般当作二级导航。在android app中，这种导航模式以前被用(yòng)作一级导航，但自从google推出了“抽屉导航”作為(wèi)一级导航后，顶部标签导航就被常用(yòng)為(wèi)二级导航了。

　　作為(wèi)一个二级导航，顶部标签导航应用(yòng)于多(duō)种情境下，可(kě)以固定数量，展示有(yǒu)限的几个标签。也可(kě)以扩大一定的数量，变成向左滑动展现更多(duō)标签。甚至可(kě)以像网易新(xīn)闻那样，衍生出订阅功能(néng)。顶部标签导航也是一种非常常见的导航模式。

二、抽屉导航

　　说完标签导航，你可(kě)能(néng)会说，我是有(yǒu)六七个导航，但其中只有(yǒu)一个导航是主要的，别的虽然有(yǒu)用(yòng)，但用(yòng)户非常非常少用(yòng)。这种情况下能(néng)不能(néng)只显示主要的内容，其它导航隐藏起来呢(ne)?这样还可(kě)以更近一步地节省页面空间。

　　当然可(kě)以。在这种情况下你可(kě)以使用(yòng)抽屉导航。

　　抽屉导航是将菜单隐藏在当前页面后，点击导航入口即可(kě)像拉抽屉一样拉出菜单。这种导航的优点是：节省页面展示空间，让用(yòng)户将更多(duō)的注意力聚焦到当前页面。比较适合于不那么需要频繁切换内容的应用(yòng)，例如对设置、关于等内容的隐藏。缺点是：对于那些需要经常在不同导航间切换或者核心功能(néng)有(yǒu)一堆入口的app不适用(yòng)。抽屉导航设计需要注意的是一定要提供菜单画出的过渡动画。

四：下拉导航

　　讲完抽屉导航后，还有(yǒu)另外一种类似的导航模式同样可(kě)以节省页面空间，并且隐藏次要入口，这就是下拉导航。

　　下拉导航，与抽屉式导航的目的相同，都是為(wèi)了突出内容。一般位于产品顶部，通过点击呼出导航菜单。导航菜单以浮窗形式位于界面上层，可(kě)通过点击导航菜单以外的區(qū)域使其收起。下拉导航的菜单与界面的连贯性比抽屉式要好，容易让用(yòng)户感知当前位置。但由于是位于屏幕上方，相对隐蔽而且不能(néng)结合手势操作，所以该菜单形式也不适合于频繁的切换功能(néng)使用(yòng)。考虑到导航菜单的可(kě)用(yòng)面积较小(xiǎo)，所以一般采用(yòng)列表的形式展示菜单内容。

　　下拉导航有(yǒu)一种比较常见的变式，就是下来菜单中展示两级甚至多(duō)级(一般就是两级，没见过更多(duō)的)，很(hěn)多(duō)人称其為(wèi)超级菜单导航。如下：

　　这种导航模式说实话用(yòng)得比较少。但最近在各种O2O形态的APP中有(yǒu)比较多(duō)的使用(yòng)(可(kě)能(néng)跟分(fēn)类级别多(duō)而且不好组织有(yǒu)关)。比如：美团、百度外卖等都有(yǒu)用(yòng)超级菜单。

五、宫格导航

　　我在原始导航里设定了5个入口。可(kě)是，如果有(yǒu)7、8个甚至10多(duō)个入口呢(ne)?而且这些入口你也不好说到底哪个对用(yòng)户是最重要的，重要性差不多(duō)，怎么办?OK，宫格导航可(kě)以解决这个问题。

　　宫格导航将主要入口全部聚合在页面，让用(yòng)户做出选择。这样的组织方式虽然无法让用(yòng)户第一时间看到内容或执行操作，用(yòng)户的选择压力也比较大。但却能(néng)够让用(yòng)户整體(tǐ)上了解APP提供的服務(wù)，从而选择自己所需要的那个服務(wù)。

　　目前来说，这种导航模式越来越少用(yòng)在一级导航了。不过，作為(wèi)二级导航，作為(wèi)一系列工具入口的聚合，或作為(wèi)内容列表的一种图形化呈现形式，还是存在在各种APP里。如：zakeer的核心页面就是宫格导航，但其与订阅功能(néng)结合，没有(yǒu)让所有(yǒu)宫格斗展示出了。各种手机界面打开后的app展示页面基本上都是宫格模式的。

　　由于受到卡片式设计的影响，宫格模式的变形也非常多(duō)。接下来简单说一下这些变形。

　　首先，可(kě)以将宫格的卡片变大，宫格与宫格时间不留空白，如下图：

　　是不是和锤子手机的宫格展示布局一样了?

　　上面这种展现方式所能(néng)展现的卡片数量有(yǒu)限。如果我们将其稍做调整，增加纵向滚动功能(néng)，就可(kě)以增加卡片数量的展现，可(kě)以说是无限的。如下图：

　　优酷安卓app里的“频道”模块采取的就是这种模式。

　　如果更进一步，是不是可(kě)以对上面这种无限的展示宫格进行分(fēn)类呢(ne)?当然可(kě)以。然后我们就有(yǒu)了下面这种导航模式：

　　当然，每个分(fēn)类下能(néng)够展示的数量可(kě)以更多(duō)，并不限于3个。

　　这时，如果我们想要在分(fēn)类下，展示更多(duō)的内容，但又(yòu)想多(duō)展示分(fēn)类，怎么办?可(kě)以在以上的导航模式中再进一步变形，如图：

　　允许每行宫格横向滑动展示更多(duō)，这样就扩展了展示的数量，又(yòu)不会减少分(fēn)类数量的展示。

　　宫格导航还有(yǒu)没有(yǒu)别的变式呢(ne)?当然有(yǒu)。比如：

　　可(kě)以通过变化宫格导航中卡片的大小(xiǎo)，来凸显宫格中内容的不同重要性。

　　可(kě)以将宫格导航和订阅功能(néng)结合，形成独特的订阅导航。

　　……

　　变化形式根据不同的需要很(hěn)可(kě)能(néng)有(yǒu)很(hěn)多(duō)种。一般来讲，常见的这些导航模式就够了。

六、列表导航

　　列表式APP导航是我们在APP设计种必不可(kě)少的一个信息承载模式。当然作為(wèi)一个APP的导航也是非常方便的。这种导航模式从原始导航中很(hěn)好转换，只要将列表左对齐，增加向右箭头表明是否还有(yǒu)下级即可(kě)。如图：

　　目前来看，列表导航通常用(yòng)于二级页，由于它与宫格导航一样，不会默认展示任何实质内容，所以通常app不会在首页使用(yòng)它。这种导航结构清晰，易于理(lǐ)解，冷静高效，能(néng)够帮助用(yòng)户快速的定位去到对应的页面。

　　自然，如果你想要对列表进行分(fēn)类也是可(kě)以的。这样逻辑上会更加清晰。如下：

　　如果说虽然可(kě)以分(fēn)类，但实在不知道如何确定分(fēn)类名称。把分(fēn)类名称去掉也是可(kě)以的。只是用(yòng)间距将每一组列表隔开也能(néng)起到梳理(lǐ)逻辑的作用(yòng)。

　　对于列表导航来说，还有(yǒu)一种常见的变式：将列表下内容中的核心内容展示出来，常见的是核心数据展现。如下：

　　这种变式有(yǒu)时候也被成為(wèi)仪表式导航，通过标题和核心数据来展现核心内容，同时作為(wèi)导航使用(yòng)。这种导航模式可(kě)以参见各种互联网金融APP中的产品列表。

七、轮播导航

　　如果我们将原始导航中的5个入口共处一个页面变成每个页面仅限一个入口可(kě)以吗?或者说，我们将宫格导航变成一宫格呢(ne)?会有(yǒu)一种新(xīn)的导航模式吗?

　　按照上面的假设，我们会有(yǒu)一种常见的导航模式：轮播导航。如下：

　　当然，只有(yǒu)应用(yòng)信息足够扁平，可(kě)以尝试轮播导航。轮播导航如果应用(yòng)得当，能(néng)够给人耳目一新(xīn)的體(tǐ)验。轮播导航能(néng)够大程度的保证应用(yòng)的页面简洁性，操作也是最方便的，只需要手指左右滑动。缺点也很(hěn)明显：承载入口的数量有(yǒu)限，超过10个可(kě)能(néng)就优点多(duō)了。这种导航常见于查看图片，也经常与其他(tā)导航模式结合，作為(wèi)banner广告呈现。

八、点聚导航

　　如果一个界面，因為(wèi)内容或功能(néng)展示的需求，需要极端简化其入口，应该如何做?点聚导航是一种选择。

　　当层级框架比较复杂，几个并列的模块中都有(yǒu)用(yòng)户频繁使用(yòng)的核心内容，但有(yǒu)需要简化页面时，会考虑使用(yòng)点聚式导航。点聚式导航将多(duō)个核心功能(néng)聚汇到主界面中显示，方便用(yòng)户呼出使用(yòng)。由于点聚式占用(yòng)空间小(xiǎo)，一般会融入一些动态的互动效果，让导航更具趣味性。很(hěn)多(duō)图片拍摄及编辑、视频拍摄及编辑类APP会使用(yòng)这类导航。

九、隐喻导航

　　如果原始导航中的五个入口，变成游戏界面中的五个关卡，只是简单地将其按照上下顺序列出来就会不太适用(yòng)。游戏对导航的要求不仅要可(kě)用(yòng)，更要和整个游戏的风格等匹配。因此，有(yǒu)了隐喻导航这种模式，用(yòng)页面模仿应用(yòng)的隐喻对象。这种导航主要用(yòng)于游戏，但在帮助导航 人们组织事物(wù)(如日记、书籍等)，并对其进行分(fēn)类的应用(yòng)中也能(néng)看到。

十、关于导航的一些其它想法：

　　虽然每个导航模式有(yǒu)常见的用(yòng)法，但并没有(yǒu)绝对的限定，要具體(tǐ)情况具體(tǐ)分(fēn)析。比如顶部标签导航可(kě)以作為(wèi)一级导航，但与抽屉导航结合的话，可(kě)能(néng)就会变成二级导航。

　　就目前的情况来看，很(hěn)少有(yǒu)APP能(néng)够只用(yòng)一种导航模式，至少需要两种。绝大多(duō)数的APP都在混合使用(yòng)多(duō)种导航模式。很(hěn)多(duō)APP甚至可(kě)能(néng)使用(yòng)多(duō)大七八种导航模式，有(yǒu)的一个界面就可(kě)能(néng)用(yòng)三到四种导航模式。

　　导航模式混合使用(yòng)并不可(kě)怕，关键是要在设计上做好文(wén)章，确保用(yòng)户能(néng)够获得良好的用(yòng)户體(tǐ)验。

　　导航的具體(tǐ)设计方式多(duō)种多(duō)样，有(yǒu)只有(yǒu)文(wén)字的，有(yǒu)文(wén)字图标结合的，有(yǒu)图片文(wén)字结合的，有(yǒu)图片文(wén)字图标结合的、有(yǒu)只有(yǒu)图标的……具體(tǐ)的形式不在这里多(duō)谈。用(yòng)什么样的形式取决于内容需要什么样的展现形式。

　　文(wén)中的导航模式只是一种参考，这些模式其实还有(yǒu)各种各样的变形。只要能(néng)够引导用(yòng)户清晰明确地找到信息或完成任務(wù)的导航都是优秀的导航，并不一定非得使用(yòng)某种导航。

　　关于导航就写到这里。完。

标题名称：APP设计之--导航
分(fēn)享URL：

网站建设、网络推广公司-创新(xīn)互联，是专注品牌与效果的网站制作，网络营销seo公司；服務(wù)项目有(yǒu)App设计等

广告

声明：本网站发布的内容（图片、视频和文(wén)字）以用(yòng)户投稿、用(yòng)户转载内容為(wèi)主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文(wén)章观点不代表本网站立场，如需处理(lǐ)请联系客服。電(diàn)话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新(xīn)互联