编辑导语：分类页是产品设计中的常见设计业务，通过有效分类，用户可以快速地查找与定位，获取自己所想要的商品的信息。本篇文章里，作者结合其团队对小米商城App分类页改版的设计经验，分享了分类页设计的具体细节，一起来看一下。

前言

近期小米商城APP分类页做了UI升级，这次分类页改版，凝聚了我们整个团队的力量，做了各种尝试，死抠细节，最终敲定下来的设计，所以这篇文章干货满满，值得读一读。

一、分类页的作用

分类是人类常用的一种思维方式和习惯，目的就是能够满足快速定位和查寻，比如家中把内衣、袜子、裤子、上衣分类放置就非常容易找到。

在产品中分类页的作用同样如此，就是帮助用户快速找到所需商品。搞清楚了分类页的作用，我们才能更好地设计它，任何页面的设计亦如此。

二、案例解析

小米商城分类页这次改版的主要目的是，要着重突出主营商品手机的视觉表现，同时升级整体UI设计。

小米手机分类页新旧对比

分类页是底部导航的一级页面，设计理念上一定是根据商城首页的规范和调性进行设计（小米商城首页UI前段时间做了改版）。

目前首先设计的标签是：简洁、轻量化、低饱和、重商品，去色块。

首页的设计风格，整体是白色背景，瀑布流商品在灰色块上，没有多余的线条做分割，标题无修饰等，这些都将是分类页设计参考方向。

首页设计风格

当设计风格有预期之后，还要尽可能把市面上主流电商产品的分类页进行研究分析，这是一个必须有的过程，能避免你闭门造车。

了解自己产品的特点再结合对竞品的研究，两者碰撞取其优，才能设计出禁得起考验的设计。

竞品分析