今天来和大家分享一个比较常规的界面，他常规到我们写总结的文章都会忽略，因为觉得这个界面没有什么可总结的。

但是当我设计这个界面时，也还是会纠结用什么样式，为什么不同行业的APP展现形式也 不一样，于是想着将其汇总一下 。

目录

1、界面入口

2、模块组成

3、布局方式

4、各行业设计区别

一、界面入口

全部、更多、分类页的入口主要在导航条、金刚区、底部Tab这三个位置中。

虽然它们在不同APP中有不同的入口、不同的叫法，比如在腾讯视频中叫"更多频道"，当当中叫“分类”，京东金融叫“全部应用”。但是在功能模块上都相似，都是一个商品或功能的聚合界面，帮助用户更快速的选择或操作。

二、模块组成

分类页综合起来主要有搜索区、导航区、推荐精选推广、商品入口、商品选择、功能入口等模块。

在设计时，可根据自身需要进行自由组合。

通常在电商界面中，由搜索区、导航区、商品入口、推广Banner、推荐等模块构成。其主要作用是帮助有目标的用户快速找到对应商品，同时从运营的角度来看当然希望推荐更多的东西给用户，因此该界面组成较为复杂。

而在水果蔬菜类APP中，其他几个模块和电商类似，不同的是他可以直接在该界面将商品加入购物车，减少用户操作，帮助有目标的用户快速选购。

在工具型界面中，相对较为简单，大多为导航区和功能入口区组成，一些APP功能比较少的就直接只有功能入口区。其作用是将应用中重要的功能或应用放到该界面，为用户提供快捷功能入口。

当然，在设计时不必拘泥必须要用某种形式，具体采用什么模块组合完全取决你的设计目的。

比如网易云课堂、得到，他们的面向人群仍然是C端用户，因此在设计时仍然会考虑运营需求，添加推广、推荐模块等。每日瑜伽为了方便用户查找，还添加了筛选功能模块。

最后，在设计时如果有必要可根据类型进行针对性的模块选择。

比如当当的分类页，不同类别下的界面，内容区模块以及模块的设计重点都有差异，比如珠宝饰品，用户首先挑选的是样式，因此时尚饰品这里配图重点展示。而家居家装类用户更关注品牌，因此品牌进行重点展示，而听书更多的就是小说的类别了，因此直接用文字展现，可展示更多的内容。

三、布局方式

分类页的布局按照导航的摆放位置来看，可分为上下排版、左右排版、混合排版、无导航四种。

1、上下排版

上下排版一般用在导航数量较多的情况，在工具型的产品中较为常见，其优势是内容区的展示空间较大。

在设计时注意，导航数量尽量不超过9个，导航数量过多，用户选择起来比较吃力，如果超过9个可考虑采用左右排版的方式。

2、左右排版

左右排版在电商类的产品中较为常见，其优势是一屏可展现的导航数量多，同时用户使用时无需滚动，操作效率相对上下排版高，缺点是内容展示区相对较窄。

当然该形式不仅仅只用于电商，当我们的分类过多时，不管什么产品均可考虑该方式。

3、混合排版

混合排版一般用在需要展示一级、二级、具体商品的情况中，其优势是用户在当前页面即可完成加入购物车，或直接进入商品详情的操作，为用户节省操作步骤。

需要注意的是，由于导航占用了部分高度，因此内容展示区空间较少，在设计时需要考虑好导航的交互状态，从而让界面展示更多的内容。

4、无导航

无导航也就是界面中全是内容区，该方式主要用于内容比较少的情况，在工具型的APP中较为常见，一般内容区在2-3屏内，用户直接滑动即可快速浏览所有功能。

采用该方式，尽管数据量不太大，但是用户在找功能时仍然比较费劲，因此采用该方式设计时，一般在顶部都会设计最近使用的模块，帮助用户快速定位功能。

四、划重点

一起来回忆下本文重点：

1、分类页界面入口主要有导航条、金刚区、底部Tab这三个位置，虽然他们的叫法不同，不过其功能模块都类似。

2、分类页综合起来主要有搜索区、导航区、推荐精选推广、商品入口、商品选择、功能入口等模块。在设计时无需拘泥于某种形式，根据产品设计目标选择合适的方式即可。

3、布局方式主要有上下排版、左右排版、混合排版、无导航排版。在设计时可根据分类和内容的多少进行选择。

本文原创，未经作者允许不可转载！

更多内容，欢迎关注作者微信公众号：海盐社