足彩网-首页 10年专注环保设备研发制造 环保设备【http://dragandesign.com】系统设计\制作\安装一条龙服务
足彩网 中文网址:【麻豆视频.COM】
当前位置:足彩网 > 足彩网 > 案例分类1 >
14

小米商城分类页 UI 升级五大细节设计全面解析!

作者:admin 来源:未知 时间:1623420857 点击:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  图中二级页面的 Tab 依旧延续一级页的设计样式,目的就是给用户快速传递它的功能性。

  原因是不同颜色在对应的页面,能更好地贴近用户心智,一级页价格颜色为黑色,是因为橘色价格会影响到分类页的功能性。

  二级页设计成突出的橘色,是因为用户的操作路径已经从关注商品到了关注商品属性,其中价格最为关注。

  这是一个非常值得探讨的交互设计案例,我们的高级交互设计师都被深陷其中,相信看完这个案例,你会大有收获。

  下图中是二级页面,交互方式一个是上下滑动切换品类,另一个是左右滑动切换品类,你觉得哪一种更合适呢?

  旧版的交互设计是左右滑动,这次改版产品经理和交互设计师探讨后认为上下滑动更符合用户当下使用场景。

  原因如下,小米商城品类下的 sku 并不多,比如上图,点击智能门锁下面只有三个 sku(一个 sku 是一个商品)。

  很多品类下面其实只有一个 sku,用户常常在此页面只看到一个商品,然后页面下面就出现猜你喜欢。所以,他们认为页面的利用率不够高,应该多曝光同类型产品。

  比如点击智能门锁,下面紧接就是相关的智能猫眼品类,这样就能增加更多产品的曝光,从而提高转化。

  首先回到分类页的功能上,分类页是帮助用户快速找到所需商品,所以当用户点击智能门锁,用户只是对智能门锁有兴趣。

  所以只展示智能门锁商品,符合用户的心里预期,其次是页面中无论 sku 多还是少,用户的视觉都是聚焦在他感兴趣的商品上。

  src=视觉突出的 Tab 设计倘若用户对其他品类有兴趣,Tab 突出的图文设计形式,也完全可以满足用户侧滑、点击快速地切换品类。

  设计虽说没有对错,但一定有更恰当的设计,做设计遇到问题时,应该多多与相关人员探讨,了解他们看问题的角度,如何理解用户和功能,这样能大大避免我们看问题的不全面性。

  本次小米商城分类页的设计,凝聚了我们整个团队的力量,每个设计点都经过了大家缜密思考和验证所得出,干活很多,特别希望能给你带来一些收获。最后感谢团队的小伙伴们!

  以上就是小编为大家介绍的小米商城分类页 UI 升级五大细节设计全面解析!的全部内容,如果大家还对相关的内容感兴趣,请持续关注江苏某某环保设备有限公司

  本文标题:小米商城分类页 UI 升级五大细节设计全面解析!  地址:/case/alfl1/1318.html



欢迎来到:❥❥足彩网❤dragandesign.com❤足彩网,是一款超级好玩的消除类型的游戏,游戏的玩法非常的有趣,你在游戏中可以通过不断…

XML地图 足彩网

环保设备公司,10年品牌打造行业正规!

【Copyright ©2017-2021 足彩网-首页 】  版权所有

网站地图 足彩网