下图中的操作逻辑是,选中左侧的智能安防,点击智能门锁到二级页面展示出所有的智能门锁 。
文章插图
二级页延续设计样式
图中二级页面的Tab依旧延续一级页的设计样式,目的就是给用户快速传递它的功能性 。
上图为什么价格颜色没有保持一致性?
原因是不同颜色在对应的页面,能更好地贴近用户心智,一级页价格颜色为黑色 , 是因为橘色价格会影响到分类页的功能性 。
分类页本质上还是一个快速找商品的入口页面,并非是商品列表页 。
二级页设计成突出的橘色,是因为用户的操作路径已经从关注商品到了关注商品属性 , 其中价格最为关注 。
所以突出价格这符合用户的心智,这样最终提高的是产品导购效率 。
敲黑板!一个值得探讨的交互设计!
这是一个非常值得探讨的交互设计案例,我们的高级交互设计师都被深陷其中,相信看完这个案例,你会大有收获 。
下图中是二级页面,交互方式一个是上下滑动切换品类,另一个是左右滑动切换品类 , 你觉得哪一种更合适呢?
文章插图
上下滑动 VS 左右滑动
旧版的交互设计是左右滑动,这次改版产品经理和交互设计师探讨后认为上下滑动更符合用户当下使用场景 。
原因如下,小米商城品类下的sku并不多,比如上图,点击智能门锁下面只有三个sku(一个sku是一个商品) 。
很多品类下面其实只有一个sku,用户常常在此页面只看到一个商品,然后页面下面就出现猜你喜欢 。所以,他们认为页面的利用率不够高,应该多曝光同类型产品 。
比如点击智能门锁,下面紧接就是相关的智能猫眼品类,这样就能增加更多产品的曝光,从而提高转化 。
一般人听到这一波有理有据的分析,大概都会认同,其实非也,大大的非也!
首先回到分类页的功能上,分类页是帮助用户快速找到所需商品,所以当用户点击智能门锁,用户只是对智能门锁有兴趣 。
所以只展示智能门锁商品,符合用户的心里预期,其次是页面中无论sku多还是少 , 用户的视觉都是聚焦在他感兴趣的商品上 。
文章插图
视觉突出的Tab设计倘若用户对其他品类有兴趣,Tab突出的图文设计形式 , 也完全可以满足用户侧滑、点击快速地切换品类 。
最后
设计虽说没有对错 , 但一定有更恰当的设计,做设计遇到问题时,应该多多与相关人员探讨 , 了解他们看问题的角度,如何理解用户和功能,这样能大大避免我们看问题的不全面性 。
本次小米商城分类页的设计,凝聚了我们整个团队的力量,每个设计点都经过了大家缜密思考和验证所得出,干活很多,特别希望能给你带来一些收获 。最后感谢团队的小伙伴们!
#专栏作家#吴星辰,微信公众号:互联网设计帮,人人都是产品经理专栏作家 。
本文原创发布于人人都是产品经理 。未经许可,禁止转载 。
题图来自Unsplash,基于CC0协议
- 小米手机有会议记录功能嘛「开会不用带纸和笔小米手机隐藏会议神器一键全部记录」
- 小米平板5pro厚度「小米平板5Pro体验尺寸加大一点体验提升意外明显」
- 怎么把小米手机的其他文件清理干净「手机miui其他文件怎么清理」
- 小米11pro怎么关闭手机分身「小米11pro如何取消应用分身小米11pro关闭手机分身方法介绍」
- 小米手机 使用技巧「小米手机五个技巧都超级实用不看不知道」
- 小米miui有什么用「4个小米MIUI的冷门实用功能都不知道的话几千块白花了」
- 小米升级miui12信号变弱「更新MIUI13012后像素阉割信号虚弱为何小米越更新越弱」
- 小米怎么开启纸质「小米这个功能千万别浪费了1键开启纸质文件瞬间变成电子档」
- 小米手机强制刷新率「MIUI上强制开启全局高刷新率」
- 小米手机哪里关广告「使用小米手机这6个地方一定要关掉不然每天都会收到很多广告」