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

  一、分类页的作用

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

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

  二、案例解析

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

  小米手机分类页新旧对比

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

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

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

  首页设计风格

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

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

  竞品分析

  1.手机展示为什么要改样式？

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

  手机新旧样式对比

  其实不难理解，因为手机是小米商城的主营产品，所以视觉上强化也无可厚非。

  这种设计形式在自营电商类平台是一项创举，京东、天猫这种全品类平台不存在主营商品，设计上也就不适合存在倾向性。

  2.细节设计案例一：Tab设计

  这次的分类页的改版，在页面中增加了Tab切换，这样设计的好处是，当用户选中左侧分类后，用户能看到这个分类下还有那些品类。

  新增Tab切换

  Tab的设计没有着重强调视觉上的表现，出于两个考虑，一是要弱于左侧分类样式，二是不抢商品的视觉层级。

  新增的Tab在设计过程中，做了很多种样式的尝试，这其实也是验证设计的一个好方法，下面具体介绍给大家。

  当你设计出一种方式后，感觉不太对，那就把所有可以呈现的样式都设计出来，这样大概率你会看出哪个更合适。

  同时也能明白，开始的设计为什么感觉不对，进而验证了设计，当然也完全可以开始就把各种样式都设计出来进行比较分析。

  Tab切换样式探索

  上图第一种样式最不合适，原因很简单，与左侧分类选中样式相冲，导致页面视觉层级混乱。

  第二种样式，虽然视觉层级明显，但是线段的样式，还是与左侧的选中的线段有横七竖八的感觉，页面略显杂乱。

  第三种样式，看起来很合适，但其实在这个页面中视觉过重，因为页面中还会出现当前选中Tab的大字号标题，这就导致两者都突出，失去主次。

  第四种样式，使用了灰背景黑文字，设计简洁视觉表现力没有那么强，符合在此页面中的定位，所以看起来更加舒适。

  3.细节设计案例二：左侧Tab设计

  左侧Tab的设计与旧版相比，去掉了分类与商品展示之间的分割线，这样所有分类项文字即可左对齐排列。

  事实上没有分割线必须文字左对齐，这样视觉呈现才会工整。

  左侧Tab样式新旧对比

  再者就是左侧Tab选中样式的设计，也是经过了多种尝试才最终定下来的方案，旧版是选中变为品牌色，未选中项是较黑的颜色，从视觉层级来说没有问题。

  新版比旧版整体降低了一个视觉层级，目的是希望让用户的视觉更聚焦内容，选中样式为品牌色线段，文字黑色（#333333）并加粗，未选中项是（#666666）灰色。

  左侧Tab选中样式，视觉表现解析

  上图第一种和第二种方式，当然并不是在任何场景下都不推荐使用，只是在这个页面有更好的选择。

  4.细节设计案例三：页面元素间距设计

  元素的间距玩的好，那UI设计就成功了一半。下图中，红色的间距是48px，蓝色是24px（三倍图设计稿），这两个间距是以6的倍数定义，同时也是两倍关系，即五分原则。

  有规律的元素间距

  在一个页面中，保持元素之间间距的规律性非常重要，我了解到很多设计师包括我自己，在手机端的UI设计，都习惯以6px为倍数去设定间距，原因就是6更容易与元素形成黄金比例。

  5.文字间距设定的知识点

  一般文字大小和本身的大小会有一定的间隙，它就像一个透明的PNG图，有一些空隙，那文字和元素的间距应不应该包括文字的空隙呢？

  据我了解很多设计师习惯用文字默认的正常边界，设定与元素之间的间距，也有很多设计师用文字本身边界的大小去设定间距，如下图所示。

  两种文字边界设定方式

  我个人使用并推荐第一种正常边界计算，原因这样设计上更快捷统一，开发也能有效正确地按设计给的间距编码。

  虽然视觉上的实际高度会有一些差异，但都差也就不叫差了，况且文字的间隙并不会很大。

  第二种方式用文字本身的实际边界去设定间距，这样确实很严谨，但在设计的过程当中费时费力。

  经常出现多一个像素少一个像素的问题，开发测量出来的间距也会没有规律，什么数值都有会一头雾水。

  第二种方式，如果是平面类设计非常合适，按文字本身边界严谨的计算间距，简直完美。

  6.细节设计案例四：设计的延续性

  UI设计特别讲究设计语言一致性，保持一致性是产品传递给用户最好的认知方式。

  下图中的操作逻辑是，选中左侧的智能安防，点击智能门锁到二级页面展示出所有的智能门锁。

  以上就是优漫教育小编为大家介绍的“【UI设计培训】：小米商城五大细节设计全面解析？”相关内容，学习ui设计培训，可以参考优漫教育提供的ui学习路线，该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等，根据优漫提供的ui学习路线图，可以让你对学好ui需要掌握的知识有个清晰的了解 ！