淘宝网站导航设计的优点是什么（店铺导航设计方法）

一、扁平导航：标签导航、舵式导航、宫格导航、Tab导航、超级菜单式导航

1、标签导航（选项卡式导航）——始终存在与界面底部，具有选中态和非选中态，同时选中态以高亮的方式区别于非选中态，用户通过标签快速在页面之间导航。适合功能复杂和信息庞大的APP，如微信、淘宝、网易新闻。

优点：直接展示重要的入口，帮助提升产品的转化率，减少界面跳转的层级，方便用户在各入口间频繁跳转。

缺点：固定在界面底部，会遮挡一部分显示内容，且不易于单手操作。

2、舵式导航（标签导航的延伸）——当页面上存在同一层的几大部分内容，同时又需要一个非常重要且频繁操作入口时，就可以采用舵式导航。通常中间项的设计有区别于其他标签，以鲜亮的颜色或图标存在于标签栏中间，方便用户发现和操作。适合功能复杂和信息庞大且有频繁操作功能的APP，如微博、NICE、一下等社交应用的拍照功能。

优点：位于标签栏的中间，颜色和形状醒目突出，用户易于发现且快捷操作。

缺点：中间项的设计样式太过于突出，导致其他标签使用率低，并且与其他标签不一致，造成标签栏视觉不和谐，对设计要求比较高。

3、宫格导航（跳板式导航）——利用网格布局将主要入口全部聚合在当前视图，超出屏幕的标签下平铺展开，需要滚动屏幕进行的浏览，或隐藏在二级页面，用户点击更多按钮进入聚合页面进行查看。通常这种导航方式支持用户自定义排列，根据自己的使用频率调整入口的先后顺序，以方便日常操作使用。适合工具类型的APP，如支付宝、美图秀秀的主页。

优点：入口都采用相同的设计样式，整个界面非常整齐，让每一个入口都非常清晰地展示在用户面前，易于操作。

缺点：排版没有主次之分，用户无法第一时间分清楚内容，同时太多的入口堆积，也让用户选择压力大。

4、Tab导航——是iOS独有的一种导航方式，其本质与标签导航相同，通常用于二级页面。当信息结构庞大，又不想将应用层级隐藏得太深，可以采用tab导航。最常见的场景是用于改变的当前的视图，或对当前页面内容进行分类浏览。Tab导航通常存在于界面顶部，不易用户操作，可将次级重要的标签放到上方。适合需要信息分类的APP，如系统电话中的所有来电和未接来电，以及APP的排行榜分类。

优点：帮助页面分类信息，减少不必要的层级，用户可以在当前视图进行查看，提升了浏览效率。

缺点：位于界面顶部，使用大屏手机时不易单手操作，通常未选中态较少用户点击，导致转化率偏低。

5、超级菜单式导航——超级菜单式导航方式与抽屉式导航有异曲同工之妙，当内容项分类很多且各内容之间切换不频繁时可采用这种导航方式。通常出现在界面顶部，由非常多的标签形式组成一组导航栏，超出屏幕的标签隐藏起来，通过左右滑动屏幕露出。用户点击折叠按钮将一个较大的覆盖面板从界面顶部滑下，展示所有标签的聚合，还可以对其进行设置排序，满足不同人群的个性需求。适合信息分类非常多的APP，常见于新闻资讯类，如网易新闻、今日头条。

优点：在狭小的空间里展示了全部的信息分类，满足产品的业务需求和所有用户的内容需求。

缺点：未默认露出的标签几乎没有用户去点击，导致转化率极低，但又不能没有。

二、层级导航：列表式导航、跟随式导航、抽屉式导航、弹出式导航

1、列表式导航——这种导航方式结构单一，信息排布简单，非常易于用户理解和浏览，帮助用户快速导航到相应的页面。在APP中，列表长度没有任何限制、可以向下无线延长，通过上下滚动屏幕浏览查看。因此，有时会将列表分组，或在列表的右侧增加索引，提升导航效率。适合展示数量多的并列元素，如通讯录、设置顶、聊天列表、商品列表等。

优点：层次简单清晰且冷静高效，横屏可以展示较长的标题和层次内容。

缺点：形式单一，没有主次之分，当同级内容过多时，用户在浏览时容易产生视觉疲劳，无法聚焦。

2、跟随式导航——跟随式导航也被称为扩展列表式导航，是由列表式导航延伸出来的一种变体。具有列表式导航同样的优点，而列表式导航在内容较多时无法聚集的缺点在跟随式导航上优化了这一点。在用户上下滚动屏幕时，列表分组的标题保持顶部、侧边和底部导航栏固定，当所包含的子级内容全部浏览完毕，就被下一个分组标题替换。方便用户查看统一分类的内容，并可以迅速定位目标，提升浏览效率。如通讯录和APP更新页面。

优点：将信息合理分类，结构变得清晰且富有层次，用户可以通过分类进行快速导航。

缺点：使用场景并不丰富，在视觉上打乱了整齐划一的排版，对设计要求较高。

3、抽屉式导航——一般从底部和顶部拉出，如果从左右两侧拉出，通常称为侧边导航栏。隐藏非核心的操作和功能，保持界面内容的干净美观，可以让用户更专注在核心内容上。这种导航极大的节省了屏幕空间，同时界面与抽屉之间流畅的过渡动画，也给用户带来体验上的愉悦感。适合功能结构庞大的APP，如QQ、小咖秀。

优点：除了节省页面展示空间外，还具有良好的扩展性，任何次要且不频繁操作的入口都可以放进去。

缺点：导航按钮非常隐蔽，用户不易发现，无论是导航按钮还是抽屉菜单在大屏手机时都不易单手操作。

4、弹出式导航——弹出式导航与抽屉式导航的核心思想一致，也是将内容隐藏起来，折叠在屏幕某个角落的按钮中，在用户需要操作时点击按钮弹出菜单项。菜单以弹出框的形式出现，并在当前视图覆盖一层蒙版，与底层内容视图分离开，让用户聚焦在当前的操作上，且用户不用跳出当前视图。弹出框仅在需要的时候才弹出，以节省屏幕空间。适合支持快捷工具操作的APP，如微信右上角的加号按钮。

优点：节省了页面展示空间，可在当前界面进行操作，不必跳出界面，用户体验比较连贯。

缺点：导航按钮非常隐蔽，用户不易发现，如果放置在界面中又会干扰用户视线，影响浏览效率。

三、内容导航：轮播式导航、陈列式导航、瀑布式导航

1、轮播式导航——轮播式导航是像轮播图一样，用户可以通过左右滑动屏幕进行浏览内容。轮播图下方展示一组分页点，包括了指示当前视图的选中态和未选中态，通过分页点可以清楚的地知道轮播数量以及当前所处的位置。它将并列关联但又独立的信息聚合在一个单独的页面、能够最大程度的保证界面的简洁高效，用户通过这种导航方式在并列项之间进行选择。轮播时平滑的过渡动画也直观地呈现在用户面前，具有非常流畅的用户体验。适合并列项数量多且包含信息可聚合的APP，如系统天气应用。

优点：把页面内容通过整理设计后聚合在一起，形成一块视觉焦点，方便用户进行全局性浏览查看。

缺点：对设计要求极高，如果排版混乱会导致用户在第一眼无法浏览所有内容。

2、陈列式导航——陈列式导航也被称为瀑布流式导航，它是将各个并列的内容项的主要信息聚合在一起，以卡片的形式直接展示在界面视图中。每一个卡片保持同样的外观，按排序列向下无线延伸，用户通过上下滚动屏幕进行浏览查看，因非常像飞流直下的瀑布而得名。但受限于手机屏幕尺寸的宽度，通常横屏只并列两个卡片，超过两个就会让界面内容展示过于密集，用户无法正常浏览。适合有图片展示商品的APP，如淘宝、口袋购物。

优点：卡片式的设计内容丰富，最大限度地直接露出主要内容，直观的信息呈现帮助用户提升产品的转化率。

缺点：对设计要求极高，如果排版混乱会导致用户在面对满屏的内容时无所适从。

3、瀑布式导航——瀑布式导航与陈列式导航相似，是把信息、图像、文字、按钮等一系列数据聚合到矩形区域内，用户可以直接在当前视图进行转发、点赞、收藏等操作。通常是横向全屏展示，因外形像一张卡片，常把这样的设计称为卡片设计。这种导航方式能够合理利用空间，对每个卡片作为一个独立整体进行设计，清爽的列出全部信息。卡片与卡片之间相互独立，互不干扰阅读。适合图片社交或资讯的APP。

优点：方便用户对于感兴趣的内容进行预判，且可以快捷操作，卡片式的设计使得浏览更清晰。

缺点：每一个卡片占用空间较大，视觉压力偏重，并对结构设计和图片质量要求极高。