当前位置:首页 > 空调维修 > 文章正文

小米商城分类页UI进级五大年夜细节设计周全解析

编辑:[db:作者] 时间:2024-08-25 09:01:53

序言

近期小米商城APP分类页做了UI升级,这次分类页改版,凝聚了我们全体团队的力量,做了各种考试测验,去世抠细节,终极敲定下来的设计,以是这篇文章干货满满,值得读一读。

小米商城分类页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设计特殊讲究设计措辞同等性,保持同等性是产品通报给用户最好的认知办法。

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

二级页延续设计样式

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

上图为什么价格颜色没有保持同等性?

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

分类页实质上还是一个快速找商品的入口页面,并非是商品列表页。

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

以是突出价格这符合用户的心智,这样终极提高的是产品导购效率。

敲黑板!
一个值得磋商的交互设计!

这是一个非常值得磋商的交互设计案例,我们的高等交互设计师都被深陷个中,相信看完这个案例,你会大有收成。

下图中是二级页面,交互办法一个是高下滑动切换品类,另一个是旁边滑动切换品类,你以为哪一种更得当呢?

高下滑动 VS 旁边滑动

旧版的交互设计是旁边滑动,这次改版产品经理和交互设计师磋商后认为高下滑动更符合用户当下利用场景。

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

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

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

一样平常人听到这一波有理有据的剖析,大概都会认同,实在非也,大大的非也!

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

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

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

末了

设计虽说没有对错,但一定有更恰当的设计,做设计碰着问题时,该当多多与干系职员磋商,理解他们看问题的角度,如何理解用户和功能,这样能大大避免我们看问题的不全面性。

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

#专栏作家#

吴星辰,微信"大众年夜众号:互联网设计帮,大家都是产品经理专栏作家。

本文原创发布于大家都是产品经理。
未经容许,禁止转载。

题图来自Unsplash,基于CC0协议

本站所发布的文字与图片素材为非商业目的改编或整理,版权归原作者所有,如侵权或涉及违法,请联系我们删除,如需转载请保留原文地址:http://www.baanla.com/ktwx/206596.html

XML地图 | 自定链接

Copyright 2005-20203 www.baidu.com 版权所有 | 琼ICP备2023011765号-4 | 统计代码

声明:本站所有内容均只可用于学习参考,信息与图片素材来源于互联网,如内容侵权与违规,请与本站联系,将在三个工作日内处理,联系邮箱:123456789@qq.com