全部、更多、分类页,界面设计很简单吗?

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

全部、更多、分类页,界面设计很简单吗?

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

目录

1、界面入口

2、模块组成

3、布局方式

4、各行业设计区别

一、界面入口

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

全部、更多、分类页,界面设计很简单吗?

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

二、模块组成

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

全部、更多、分类页,界面设计很简单吗?

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

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

全部、更多、分类页,界面设计很简单吗?

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

全部、更多、分类页,界面设计很简单吗?

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

全部、更多、分类页,界面设计很简单吗?

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

全部、更多、分类页,界面设计很简单吗?

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

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

全部、更多、分类页,界面设计很简单吗?

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

三、布局方式

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

全部、更多、分类页,界面设计很简单吗?

1、上下排版

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

全部、更多、分类页,界面设计很简单吗?

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

2、左右排版

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

全部、更多、分类页,界面设计很简单吗?

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

3、混合排版

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

全部、更多、分类页,界面设计很简单吗?

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

4、无导航

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

全部、更多、分类页,界面设计很简单吗?

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

四、划重点

一起来回忆下本文重点:

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

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

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

本文由 新媒体之家 作者: 海盐社 发表,其版权均为原作者所有,文章内容系作者个人观点,不代表 新媒体之家 对观点赞同或支持,未经许可,请勿转载,题图来自Unsplash,基于CC0协议。
4

发表评论