导航UI设计「优劣对比」
今天给大家普及一下导航UI设计「优劣对比」相关知识，最近很多在问导航UI设计「优劣对比」，希望能帮助到您。
在产品设计当中，导航最主要的作用有两个：第1个是告诉用户当前所处的位置，第2个是为用户提供其他功能的入口。
此外，导航还有一个比较重要的作用，那就是可以向受众展示应用的功能结构和信息范围。结合实际生活场景，会更容易理解导航有展示功能结构这一作用的说法。
当当V10.3.0版本商品页、首页
随着设计的不断迭代和更新，导航设计的玩法也越来越多，但本质的设计逻辑万变不离其宗，今天，数艺君整理了8个时下流行的导航设计例子，分享给大家。
5种常见的一级导航
5种常见的一级导航方式包括标签式、抽屉式、下拉式、点聚式和桌面式。每一种导航方式都有各自的优势与劣势，设计师需要结合自己的产品结构进行选择。
01
标签式导航
标签式导航是苹果公司主推的一级导航方式，也叫Tab式导航。导航上都是一级页面入口，由代表入口内容的图标和注解文字组成，如YHOUSE APP城市生活社区，发现好玩的地方和有共同爱好的人）的导航。
有些标签式导航则采用简化的方式，如好物APP（原创家居售卖平台）的导航只有文字，选中文字后会在文字底部标上一条黑色的线条；而nice APP（美图分享、短视频直播软件）的导航去掉了注解文字，只留下了图标，被选中时图标由浅灰色变为黑色。
YHOUSE 5.2版
好物APP6.2.1版
nice APP 4.8.0版
标签式导航常处于一级页面的底部，导航入口一般有3~5个标签。当导航只有2个标签时，没有必要在页面底部进行单独设计。
笔者以前常用的一款美食图片社交类APP底部的标签超过了5个，查看其他入口的方式是用手指在屏幕上左右滑动，这样会影响用户的使用效率和流畅度。
所以，如果标签超过5个，就需要重新规划APP的架构或调整导航的优先级，将导航与二级导航进行合并后放在页面底部。
优势：
使用标签式导航，用户在打开应用后就能直观地看到APP的核心功能与结构，用户能在一级页面中的每个标签之间快速切换，并且标签上的文字或显示的状态就能告诉用户当前所在的位置。
劣势：
使用标签式导航，对标签的数量有要求，如果少于3个标签，不建议设置导航；如果多于3个标签，导航会显示不全，并且用户的使用体验也不好。
延伸应用：
如果APP是带有用户原创内容功能的，则可以把导航的中间位置设置为发布功能。例如，nice APP页面的中间是一个相机图标，点击相机图标就能进入手机相册的页面，在手机相册内可以拍照或拍视频。还有另外一种情况，点击中间的发布按钮会展开更多的功能选项，如可以有发布图文、直播、红包和音乐等功能。
02
抽屉式导航
抽屉式导航也叫汉堡式菜单，一般出现在APP页面的左右两侧。用户停留在可以唤出导航的页面时，用手指向左右侧滑动或点击左右上角的图标显示导航页面。
抽屉式导航的动画效果也有比较简单的，如点击小红书APP首页左上角的用户头像后，页面会从左向右浮出抽屉式导航，背景也会出现一层黑色透明的遮罩效果。
酷狗音乐APP8.8.0版本
小红书APP 5.0版本
抽屉式导航页面常见的表现形式有两种：一种是主页面缩小并浮动在抽屉式导航页面上，另一种是导航页面隐藏在主页面后。
优势：
由于抽屉式导航页面是可以自定义的，而且用户可以用手指在纵向进行上下滑动，承载的信息量也比较大，因此可以放比较多的功能入口和信息。
劣势：
由于导航列表是隐藏在主页面的侧边，信息过多时导航列表上功能的可发现性比较低，因此用户需要花较多的注意力去找到目标入口。
跟标签式导航相比，使用抽屉式导航，用户对APP功能的结构就没有那么清楚。另外，用户点击进入某个入口后，侧边导航列表会被收起，所以不具备标识用户所在位置的作用，而且用户在不同功能间进行切换的操作步骤会变多。
延伸应用：
抽屉式导航有个好处，就是不用跳转到新的页面，并且信息承载能力较好。在有货APP和京东APP上对某一类商品进行筛选时，抽屉式导航就比较适合，在导航面板里选择查询选项后点击“确认”按钮，就会把商品按筛选条件重新排序。
另外，抽屉式导航在游戏类APP中也比较常见，有复杂成长系统和任务系统的手游都把内容放在页面的左右两侧，用户点击悬浮在页面上的入口就能唤出页面，再次点击入口或页面上的收起按钮就可以隐藏页面。
03
下拉式导航
下拉式导航位于APP顶部的导航条上，用户通过点击菜单按钮向下弹出下拉式导航。用户点击任意菜单会跳转到相应的板块，同时下拉式导航会被收起。用户点击其他任何地方也能收起导航。使用下拉式导航的典型的应用就是新浪微博APP。
新浪微博APP 7.10.2版本
优势:
与标签式导航相比，下拉式导航的信息承载力更好，因为被选中的页面位置会更新在导航条上面，同时也具备标签式导航指示用户所在页面位置的优点。与抽屉式导航相比，下拉式导航可发现性高，且用户在功能板块之间的切换也比较流畅
劣势：
由于导航的位置在顶部，因此用户在使用大屏幕的手机且在单手持握手机的场景下操作会有些不方便，用户可能需要改变持握手机的方式。
另外，下拉式导航需要用户先点开导航面板，然后在面板里点击进入别的功能页面。与标签式导航相比，下拉式导航不支持用手指左右滑动的方式进行页面的切换。
延伸应用:
在美柚APP页面上，下拉式导航可以对内容进行筛选排序。在海狐海淘APP页面上，下拉式导航应用在商品搜索结果页面和商品类别页面上，让用户点击筛选条件，且一个页面上可以有多个下拉式导航。
美柚 APP 6.2.1版本
海狐海淘 APP 3.7.0版本
04
点聚式导航
点聚式导航的“ ”号图标在页面的左下角，用户点击“ ”号图标后就可以把导航全部打开，再次点击“ ”号图标后导航就会被收起。Path APP（社交平台）使用的就是点聚式导航。
Path APP 6.5.1版本
优势:
点聚式导航入口一直悬停在页面的左下角，在一级页面上比较方便查找，并且与标签式导航相比，不会占据屏幕的空间。
劣势:
点聚式导航在展开的时候是环形排列的，功能入口选项只能使用图标表示，不能出现文字，这就要求图标能通俗地表达清楚选项的意思和要求。另外，切换到其他页面时，导航上的图标不能指示出当前页面的位置。
延伸应用:
用好好住APP（装修设计、家居生活分享社区）发布动态时，页面会弹出“发布文章”“发布图片”“发布整屋”这3个选项。设计师在这个场景中把点聚式导航的环形排列方式改成了图标加文字的横向排列方式，每一个选项的意思都很容易被理解。
另一种延伸应用是苹果手机自带的 Assistive Touch，苹果手机APP的页面入口可以随着手势拖动到屏幕上的任意位置，但常规的APP一般不会用这样的设计方案。
好好住 APP 2.11.6版本
苹果手机Assistive Touch
05
桌面式导航
旧版本的支付宝APP首页就采用了桌面式导航。支付宝APP把它包含的功能或独立应用的入口都放在首页。
之所以叫桌面式导航，是因为这种导航的布局方式与手机桌面一样，采用这种导航设计的前提是导航页面上每个入口对应功能的独立性要高。
支付宝 APP（旧版本）
优势：
桌面式导航是在单独的一个页面里放多个功能入口，信息承载能力比较好，可扩展性也比较好。用户进入APP的第一个页面就会显示APP的功能，对其他功能的推广也会有帮助。
劣势：
桌面式导航的每个功能入口都是独立的，用户进入一个入口后，如果要使用其他功能，就要返回到导航再点击其他的入口。
对于需要频繁切换功能的应用来说，用户体验会比较差。另外，用户第一眼看到的APP首页上全都是功能入口，从企业角度来看，这种情况分散了用户的注意力。
延伸应用：
当APP还承载着其他独立的功能和应用入口时，设计师会把桌面式导航设计成与大众点评APP的首页一样的模式。用户看见的APP首页不全是排列好的入口，首页顶部会用左右翻页的形式来展示更多入口，首页下部还是主推与业务相关的信息。
例如，在丽芙家居APP（家居产品售卖平台）的商品分类中，如果分类数量不会随着业务的增长而改变，那么使用桌面式导航的延伸形式是比较合适的。
在电商类APP上面经常能看见衣服、鞋子和包等商品分类，其视觉结构上面是对应的图标、下面是文字，用户能够比较轻易地通过这些内容了解商品信息。
大众点评APP 9.7.0版本
丽芙家居APP 5.3.1版本
2
3种常见的二级导航
二级导航是对内容的类别再一次细分，如提到“动态”这个词就会让人联想到动态需要分“最新动态”和“我关注的动态”。用户点击这两个功能入口之后，会切换到对应的页面，这种二级导航被称为Tab式导航。
其他两种常见的二级导航分别是列表式导航和幻灯片式导航，接下来笔者将详细讲解每一种二级导航的应用场景和优劣势。
01
Tab式导航
Tab式导航的名称比较形象，其切换方式主要有两种：一种是点击后切换到另一个类别，并通过高亮的方式把选中的状态显示出来；另一种是通过用手指左右滑动的方式进行切换。
如果导航在页面顶部，其表现的形式有两种：一种像艺术头条APP（艺术资讯阅读类应用）那样，导航位于大标题下方；另一种像in APP（萌趣贴纸自拍应用）的导航位于页面中间，用户滑动导航时导航底部会有红色线条出现。
不过Tab式导航很少在首页上出现，大多会出现在详情页内，如堆糖APP（好物推荐社区）的商品详情页面。
在电商类APP中，导航条会随着页面的向上滚动而变化。当用户重新向下滑动页面，直到Tab式导航上方出现其他的内容时，导航条才会跟着页面向下滚动。
艺术头条 APP
in APP
堆糖 APP
设计师在设计导航条的时候，要考虑好导航条的扩展性。如果二级导航比较多，那么要考虑采用什么样的方法才能在有限的空间内展示更多的选项。
02
列表式导航
列表式导航在排列方向上都是纵向的，列表式导航多用于“个人中心”的页面，不同入口对应的功能之间关系不大，每个入口都是单独的功能页面。
一部分应用分类的设计方案也是列表式，如尖叫设计APP（原创家居集合品牌售卖平台）的分类，这里的导航设计方案是配合图片进行展示的；而网易云音乐APP中“我的音乐”中“本地音乐”“最近播放”“我的电台”“我的收藏”这4个类别列表是没有图片的。
尖叫设计APP 2.8.4版本
网易云音乐APP 4.3.4版本
列表式导航的每一项内容都不会超过一行，一般是结合图标再以文字左对齐的方式显示。列表的右边通常会有向右的箭头，引导用户点击跳转到新的页面。如果列表过长，则会像闲鱼APP那样，把几个类别放在一个组里，在视觉上对各类别进行区分，这样列表的信息结构看起来也会比较清晰。
列表式导航还可以使用状态文案，如得到APP的列表，在“我的账户”后有相关数字显示当前的余额。
另外在“推荐「得到」给好友”下方有一行引导性文字，一定程度上加强了用户推荐的动力。
列表式导航信息承载能力好，用户点击选项进入的页面还可以继续呈现其他的列表，如用户点击“设置”选项后，进入的页面还会出现有“关于我们”“清理缓存”和“是否开启4G使用”等选项的列表。
闲鱼 APP 6.0.3版本
得到 APP 4.0.0版本
03
幻灯片式导航
幻灯片式导航的呈现方式是比较“酷炫”的，如想去APP（设计师原创服饰平台）的“专题”页面的导航，用户可通过用手指在屏幕上左右滑动的方式查看所有相关入口。
当设计师选择采用幻灯片式导航时，其承载的信息数量不能过多，因为越排列在后方的内容流量会越少，用户来回翻阅会增加时间成本。
并且幻灯片页数过多时用户很难知道自己停留在哪页上，所以设计师在设计时最好加上分页指示器，让用户对幻灯片式导航的信息量有个预估并能够清楚自己停留在哪个位置。
想去 APP 4.5.5版本
用户在青芒杂志APP（精选内容订阅平台）上选择订阅频道时，每个类别下面的频道是可以横向滚动的，其标题变成了一张封面图，频道被换成了商品，这与幻灯片式导航的交互方式一样。
多个类别在页面上是纵向排列的，这样的交互方式在一些电商类APP中也很常见。幻灯片式导航的另一种延伸应用是类似Tasty APP（旅行美食推荐指南）的话题功能，所有话题入口排列成一行，用户可以通过左右滑动的方式查看话题。
Tasty APP的话题入口的上半部分是图片，下半部分是话题名称。也有在背景图片上显示话题名称的表现形式，但这种表现形式要求页面上的入口数量不能过多。
青芒杂志APP 2.0.1版本
Tasty APP 1.4.8版本
