方寸指间——导航设计

　　导航设计

　　导航设计需求要突出产品的核心点，尽量做到任务路径的扁平化，同时还有考虑到导航操作的便捷性

　　本章将会归纳app的导航样式库，主要讲解主导航和二级导航的设计。常见的主导航包括：标签式、

　　侧滑抽屉式、桌面式、菜单式、点聚式等。常见的二级导航包括：旋转木马、列表、图示、选项卡等

　　主导航和二级导航可以相互转化，比如桌面式可以转化为二级导航，列表也可以转化为主导航。

　　

 

　　标签式导航

　　标签式导航是IOS主推的导航模式，位于屏幕底部，在Android常见于顶部。这种布局方式能够让用户直观

　　的了解到app的核心功能。同时，使用上能很好的在几个标签之间快速的跳转。标签式分类可以根据罗家和

　　重要性控制在5个以内，通过视觉表现用户当前的位置，页面之间的切换快速又不容易迷失，简单有效。

　　表亲啊是导航，也经常融合一些个性化设计。例如，在标签栏中间位置融合一个Logo或产品最核心的功能

　　点，丰富了标签栏的样式。

　　

 

　　侧滑抽屉式导航

　　抽屉式导航追求核心内容的突出，弱化导航界面，常见于一些信息流产品。抽屉式导航在形式上一般位于当

　　前界面的后方，通过左上角的按钮或者手势滑动呼出。由于是隐藏在屏幕之外，所以导航界面空间较大，为

　　可扩展性和个性化带来了更多的可能性。由于导航默认是隐藏的，在选择之后需要有明确的提示告诉用户当

　　前的位置。

　　

　　桌面式导航

　　桌面式导航，是一种类似于手机桌面各个应用入口的导航方式。每一个入口往往是一个比较独立的信息内容

　　，用户进入一个入口之后，只处理与此相关的内容，如果要跳转到其他的入口，必须先回到入口汇总页面。

　　这种导航方式在工具类app中比较适用，每个工具都有一条独立的体系，同时也容易扩展并增加多个入口。

　　这种导航方式不适合需要频繁在几个任务之间跳转切换的情况。

　　

 

　　菜单式导航

　　菜单式导航也可以是以突出内容为主的导航方式。一般位于产品顶部，通过点击呼出导航菜单。导航菜单位

　　于界面的上层，用户可点击导航以外的区域来收起菜单。菜单式导航与界面的连贯性较好，展开和收起菜单

　　对当前界面没用影响。但由于导航菜单位于屏幕顶部，不适合结合手势，操作上有难度，所以不适合需要频

　　繁切换的功能。此外，考虑到菜单导航的面积限制，一般都是用列表来展示导航条目。

　　

　　

　　点聚式导航

　　点聚式导航最早来自应用Path，它将用户最频繁使用的多个核心功能点汇聚在主界面中显示，方便用户随时

　　呼出使用。它不同于传统的标签栏那样占据界面的最下方一栏，而是通过一个点的方式汇聚这些功能入口。

　　由于点聚式导航所占用的空间较小，所以它常出现在一些主要流程界面中，作为全局导航使用。下图第三个

　　案例是淘宝出触屏版的点聚式导航，它融合了消息提醒和一些动态互动效果，让导航更具有趣味性。

　　

 

　　二级导航•走马灯

　　走马灯的导航方式，一般适用于图片或整块内容的并排展示，用户通过左右手滑动来聚焦当前的内容。一般

　　来说，走马灯的内容数量不能够太多，控制在5~7个以内，以避免用户的操作疲劳。在设计上可提供视觉暗

　　示，例如显示下一张图片的一部分内容，或者添加分页指示器，让用户在浏览页面的时候保持清晰的方向感

　　和对数量的认知。

　　

 

　　二级导航•列表

　　列表式导航更容易扩展和分组，常用于设置、消息合和承载大量信息的界面。又以列表的左右宽度比较大，可

　　以结合图标、标题说明和消息数字提示等。为了让列表信息更有层次，在设计上可以考虑分组或二级列表的方

　　式。二级列表可以做到展开和隐藏，方便用户查找信息并快速定位。

　　

 

　　二级导航•图示

　　图示是一种有趣的导航方式，它让导航更加的可视化，同时根据页面内容发生变化，可以及时的更新图片，适

　　合以图片为主的内容。经常变化的图片也会让用户感受到栏目内容更新的及时性，对用户来说更具有吸引力。

　　同时这种导航需要配置固定的栏目说明或者标题，防止不断的更新图片让用户找不到相应的入口。

　　

 

　　二级导航•分段选项卡

　　分段选项卡是对主导航内容的再次分类，位于界面的顶部，视觉上会突出当前所在位置。分段选项卡一般在顶部

　　导航栏下方，一次最多显示4张选项卡。如果内容有更多，可以结合手势滑动页面。