分类，是指将商品根据种类、目标人群、使用场景等某一统一规则进行整理归类。导航则是告知用户在哪里，可以去到什么地方以及如何到达那里的方式。在线下商场里，会将符合同样标准的商品会放在同一片区。我们发现，即使是不同的百货商场里，商品的划分区域也是相似的。如，一楼是化妆品；二、三楼是女装；四楼卖男装；五楼卖箱包和文体用品……而在每一层的电梯区域，指示牌会告诉用户他们所处的位置，并且告知他们不同楼层是什么商品的片区。
受到线下商场的分类导航的启发，在线电商也对不同的商品设计了不同的分类。合理的分类导航，能够提高用户查找到目标商品的效率。在本篇文章中，我们将总结移动端常见的几种分类导航的设计。
第一种 导航与分类同页展示 且含 导航定位(电梯)
电梯，也称之为导航定位，是指在同一个页面中，在不同类别内容的起始位置设定了锚点，当用户选择了某一分类，页面能快速定位到该分类下。 导航位置可在页面左侧，也可在页面顶部。
导航在页面左侧
一级分类导航在页页面布局左侧，且竖式排列。所有子分类平铺展示在页面布局右侧。这种展示方式往往应用在分类层级为2级，且二级分类内容含图文，一屏仅能展示1-2个分类的子分类的情况下。
优点
1. 一屏内最多可展示10个左右的一级分类，一级分类较少的情况下，可直观地总览全部一级分类。
2. 由于每个一级分类下的二级分类较多，用户可通过无限滑动的方式浏览所有内容，也可通过导航定位快速切换不同的一级分类，两种方式相结合，用户操作更便捷。
缺点
1. 一个页面承载的内容过多，加重认知负载。
2. 由于页面右侧会展示所有的二级分类，若二级分类的数量过多，会导致页面变慢；若做分页，往下滑动时会有卡顿情况出现。
3. 若一级分类下的二级分类较少，一屏里会展示不同一级分类下的二级分类，但左侧的一级分类会定位到第一个二级分类对应的一级分类下，会对用户的认知造成误解，以为右侧都是同一个一级分类下的内容。因此。二级分类较少且在一屏里可以展示的情况下，不建议采取这种展示方式。
导航在页面顶部
一级分类导航固定展示在顶部，全部子分类垂直展示在一级分类导航下方。一级分类导航可通过导航定位快速切换并定位到某个一级分类的子分类下。
优点
1. 由于一级分类导航在顶部，子分类垂直展示，视觉区间更广，用户可以更加专注去关注子分类内容，同时操作区域更开阔，能承载不同的操作。如图示意，除了可以点击分类名称进入结果页，也可以点击”更多“查看更多。
缺点
1. 受制于屏幕宽度影响，一级导航最多只能展示6个，用户需要进一步滑动导航去浏览更多内容，具有一定隐蔽性；对于安卓用户来说，左滑容易误操作成返回操作。若一级分类较多，不建议使用这种布局。
第二种 导航与分类同页展示
与第一种导航相比，这种分类导航没有导航定位，可展示的分类最多可为3级。导航位置可在页面左侧，也可在页面顶部。
优点
1. 明确分界，用户在滑动的时候， 选中了某一分类后，往下滑动， 看到的只会是同一个一级分类下的内容。若子分类层级较多，展示会更加明确。
2. 通过导航切换不同的一级分类，向服务器请求对应数据，若同一分类下数据过多，页面不会负载太重。
缺点
1. 若一级分类下的子分类较少，想要查看不同一级分类的内容，需要用户频繁操作。因此，分类较少的情况下，不适用于这种展示方式。
第三种 导航与分类在不同页面展示
在首页展示重要的一级分类，将不重要的一级分类放在在”全部“分类下，点击”全部“进入全部分类页面。分类页面中无导航，所有分类平铺展示。
优点
1. 首页突出核心，可对重要或常用的一级分类突出展示。
2. 目标用户可以更有针对性地进行筛选，选择了感兴趣的目标分类后，不会被不相干的内容所干扰。
缺点
1. 隐藏了部分一级分类，若用户不去探索，可能无法察觉到其余的一级分类。
2. 分类总览页面，用户只能从上往下线性查找，查找效率低。
3. 若每个分类下的数量较多，且所有内容无法在两屏内展示完全，用户可能失去耐心探索到底部，导致即使有用户感兴趣的内容，用户也未找到的情况。
感谢阅读~希望这篇文章对你有帮助 ：）
By 爱生活爱旅游的用户体验设计师 do小鱼
你也许还感兴趣：
后台产品这样设计更高效
课程类商品营销落地页改版
如何提升商品详情页转化率？这5个电商要素必须知道！
Web筛选器的设计