小米商城布局「小米商城分类页UI升级五大细节设计全面解析」 _小米商城分类页UI升级五大细

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

文章插图
前言
近期小米商城APP分类页做了UI升级，这次分类页改版，凝聚了我们整个团队的力量，做了各种尝试，死抠细节，最终敲定下来的设计，所以这篇文章干货满满，值得读一读。
一、分类页的作用分类是人类常用的一种思维方式和习惯，目的就是能够满足快速定位和查寻，比如家中把内衣、袜子、裤子、上衣分类放置就非常容易找到。
【小米商城布局「小米商城分类页UI升级五大细节设计全面解析」】在产品中分类页的作用同样如此，就是帮助用户快速找到所需商品。搞清楚了分类页的作用，我们才能更好地设计它，任何页面的设计亦如此。
二、案例解析小米商城分类页这次改版的主要目的是，要着重突出主营商品手机的视觉表现，同时升级整体UI设计。

文章插图
小米手机分类页新旧对比
分类页是底部导航的一级页面，设计理念上一定是根据商城首页的规范和调性进行设计（小米商城首页UI前段时间做了改版）。
目前首先设计的标签是：简洁、轻量化、低饱和、重商品，去色块。
首页的设计风格，整体是白色背景，瀑布流商品在灰色块上，没有多余的线条做分割，标题无修饰等，这些都将是分类页设计参考方向。

文章插图
首页设计风格
当设计风格有预期之后，还要尽可能把市面上主流电商产品的分类页进行研究分析，这是一个必须有的过程，能避免你闭门造车。
了解自己产品的特点再结合对竞品的研究，两者碰撞取其优，才能设计出禁得起考验的设计。

文章插图
竞品分析
1. 手机展示为什么要改样式？开头我们分析了分类页的作用是能够快速定位找到商品，那为什么现在要把手机的价格和卖点标签展示出来？这似乎违背了分类页的功能。

文章插图
手机新旧样式对比
其实不难理解，因为手机是小米商城的主营产品，所以视觉上强化也无可厚非。
这种设计形式在自营电商类平台是一项创举，京东、天猫这种全品类平台不存在主营商品，设计上也就不适合存在倾向性。
2. 细节设计案例一：Tab设计这次的分类页的改版，在页面中增加了Tab切换，这样设计的好处是，当用户选中左侧分类后，用户能看到这个分类下还有那些品类。

文章插图
新增Tab切换
Tab的设计没有着重强调视觉上的表现，出于两个考虑，一是要弱于左侧分类样式，二是不抢商品的视觉层级。
新增的Tab在设计过程中，做了很多种样式的尝试，这其实也是验证设计的一个好方法，下面具体介绍给大家。
当你设计出一种方式后，感觉不太对，那就把所有可以呈现的样式都设计出来，这样大概率你会看出哪个更合适。
同时也能明白，开始的设计为什么感觉不对，进而验证了设计，当然也完全可以开始就把各种样式都设计出来进行比较分析。