小米商城 - 新品模块UI升级全面解析！

2021-3-3    ui设计分享达人

前言 



近期改版了小米商城APP的新品板块，改版的过程总结了很多非常实用且有价值的设计方法，所以要尽快分享给大家。 

这次分享的内容会从思维到技术全面讲解，会告诉你如何从设计的角度理解需求，针对性的解决问题，以及交付设计时的沟通技巧，可谓是清清楚楚明明白白的分享设计经验。 


案例解析 


电商产品运营板块改版，很大一部分原因是数据不好或不够美观需要提升视觉，下面是改版前的截图和调研UI设计满意度的结果。 



调研的结果中其实前六项都是在讲一件事，就是头图不够好看，最后一个是运营的需求，查看更多入口点击率过低，希望能提升打开率，这点的改版下面会详细讲解。 


从设计的角度找问题根源


旧版头图第一眼看过去，色调、质感其实说的过去，但如果仔细观察分析，就会发现有很多不恰当的地方。 

比如投影与主光源不符、主光源在左侧没有专属感、背景杂乱、空间感太强商品摆设置后，就像是在远处观看物体，这样会导致商品不突出，视觉上容易疲劳。 


上图这些问题普通用户一般不会准确发现，但其实用户能够感知到不舒服，因为不符合人潜意识认知的物理规律。 

所以问卷中大家会提出不够高大尚、没有高级感、不够简洁，这些就是普通用户说不出哪里出了问题的语言表达。 

作为设计师应该能够从用户的语言中，通过专业的设计角度去挖掘问题的根源。 

比如不够简洁，是因为背景中杂乱的东西太多；容易视觉疲劳是因为商品与空间的关系没有掌握好；主光源在左侧，不容易营造商品专属舞台的感觉，而且使用暖色调还会增加视觉疲劳感。 

找到问题的根源后，首先是改善展示商品的舞台，解决商品空间上展示的问题，渲染出一张干净的背景，不会有杂乱的感受，然后通过灯光和舞台材质质感打造商品的专属感。 


了解商品才能更好的打造舞台


舞台是为商品服务的，所以我们要了解大多数展示 商品的色调、拍摄角度、质感材质等，这样才能够更合理的思考舞台的设计。 

另外，还要结合新品板块的特征去研究设计方案，比如新品产品具有神秘感属性，那就需要打造一个贴合新品特征的环境氛围。 


米家商品 


小米手机 


米家的产品大多是白色，小米手机都是绚丽多彩的屏幕和有质感的外框，加上新品商品的属性较为适合有神秘感的氛围，所以综合来看我们需要一个暗色系且有质感的舞台。 

强调舞台质感是因为能够与有质感的手机产品形成一种呼应，手机是小米的支柱产品，当然会宠他，所以在设计上需要倾向手机的展示。 


什么是舞台？


何为舞台，舞台是为演出者服务，其最终目的是给观众更好的视觉体验。 

回到旧版的案例中，商品放置空间的后方，就等于给用户买的是最便宜的后排座位，后排视角当然不会有好的视觉体检，第一排的C位才应该是我们为用户准备的视角。 


演唱会舞台 


舞台中的主光源一定是对称、居中打在舞台中央的，因为这样观众的视线能更好的聚焦在演员身上，并且能渲染氛围，呈现一种专属感。 

所以我们旧版案例中主光源在左侧，右侧是投影，会导致用户的视觉焦点很分散，从而不能把视线有效的引导在商品本身。 





C4D渲染舞台


通过上面总结分析，我们大概对舞台有了一个清晰的设计思路，背景用暗色系让视觉更好的聚焦在商品身上，有反射高光质感能与手机产品形成呼应，空间上给用户近距离的视觉体验，好了打开C4D干... 


C4D渲染舞台 


非常简单的一个场景，使用一个阶梯的圆柱体，放个背景，正前方放一个主光源，左右两个对称的辅助光，材质球上加轻微的反射与高光，这样渲染出来更有质感，材质颜色使用了蓝色调，原因有三点： 

第一，小米刚刚推出的小米11主打的是靓丽的蓝色调，轻装上阵，暗蓝色的舞台与明亮的小米11放在一起会毫无违和感，同时也会呈现强烈的对比效果。 

第二，小米有太多白色的商品，暗蓝色的背景会让白色商品渲染的更加靓丽。 

第三，小米也有很多黑色的商品，偏蓝色的背景能够避免与黑色调商品撞色。 


最终舞台效果图 

最终的的调色在Ps中完成，舞台的中央是亮的，营造了一种聚光灯打在舞台中央的感觉，这样上面放上商品就会体现一种专属感，这种效果是在C4D中材质球使用渐变色。 

另外，暗蓝色的氛围上有一种神秘的感觉，这非常符合新品的亮相方式，整个舞台没有很强的反射和高光质感，是因为 舞台的质感要弱于商品本身的质感，否则容易喧宾夺主。

新旧对比 

上图中有质感的舞台可以增加手机的写实投影，视觉上融合的非常好，下图中是白色和黑色商品的展示，在暗蓝色的背景下都能够有效的突出商品。 

黑白商品图展示 


优化头图比例


新版与旧版还有一个最大的区别，新版头图的比例缩小至1:1，为什么是这个比例？旧版的长图为什么不合适？ 


旧版长图占据首屏巨大的面积，这种形式一般不适合常态化功能模块，（常态化是指产品中一直存在的功能模块）长图或者整屏适用于非 常态化强运营的活动模块，比如节日活动，节日过后就会下架。 

小米上新板块是首页中常态的功能模块，太大的展示面积其实浪费了首屏空间，之所以用1:1比例，是因为分析了若干个竞品的上新模块都采用的是1:1的比例。 

所以记住这句话， 当市场已经验证过的设计形式，最好的就是采用它，这样大概率能避免出错。


调整文案排版


旧版的文案是3行，看上去会略显啰嗦，中间文字有点多余，还占了面积，改为两行足以，一个产品名称，一个产品卖点。 


旧版走马灯是常规的原点示意，为了能给商品展示留出相对更大的面积，新版把走马灯改为了数字示意，如上图右下角2/5的形式，这样就从4行变为了2行，直观简洁突出。 


敲黑板！“查看更多”入口的处理


上文问卷调查中最后一条，运营同学希望用户能更多的点击列表中的“查看更多”入口，之所以现在点击率不高，是因为设计样式是一种辅助形式，下图所示。 


如果按运营同学的需求只是去强化入口的视觉表现，那未必是一个好的设计方案。 

想要突出哪里就在视觉上强化哪里，这是典型的产品思维，而UI设计师应该结合整体页面结构的交互形式去思考优化设计。 

首先梳理一下用户在此页面的浏览过程，当用户打开此页面时，第一眼看到的是头图，因为他最吸引眼球的，其次就是开始滑动页面浏览商品列表。 

那么这时如果“查看更多”入口，通过强烈的色彩表现，或者动效设计的方式，那一定会有部分用户被吸引点击进入“查看更多”页面，而用户没能继续向下浏览页面，就会看不到平台推荐的商品，这不符合产品的设计逻辑。 

所以，当用户浏览到列表最后的商品了，还没有被某个商品吸引，这时再出现一个“查看更多”按钮入口会较为合理， 这样的交互方式才符合用户浏览的顺序，修改后如下图。 


另外，标题也做了优化，旧版主标题与副标题上下排列的方式会占据更大的面积，而且看起来还是非常拥挤，再加上主标题与副标题大小对比过于大，也直接导致用户视线会忽略掉副标题。 

新版修改后缩小主标题字号，排版方式上主副标题成左右结构，这样视觉上完全不会遮挡副标题的展示，而且最大的好处还释放了页面中的空间，看下图感受一下。 



满足运营需求，增加动态iCON


为了满足运营同学希望用户更多的进入全部新品页面的需求，设计上除了在商品列表下方增加了“更多新品”按钮，同时也在页面的右上角增加了一个进入全部新品页面的动效形式icon。 

当时在构思这个icon时，从一个视觉表现很强的动态形式，一直做减法直至非常恰当合理有效的融入页面当中，下图中最后一个最简洁的设计是确定的方案，简单的动效突出而不突兀，恰到好处。



↓↓




↓↓



  
↓↓



做减法的icon 

动态元素在页面中最为吸引人，哪怕是做了弱化处理，所以有时候在设计上有一种策略是，前期用动态的效果去培养用户的习惯和认知，当对动态效果已经发挥了作用之后，后面就可以改回非动态效果，这样就能避免浏览页面过程中动态元素的干扰。 


总结：


改版设计，不能根据表面需求去设计，一定要找到问题的根源所在，然后针对性的解决这些问题，当交付设计时，一定还要告诉需求方， 这样设计的目的是什么，解决了我们现有的哪些问题。 

说不出来设计目的，编也要编出来，这样至少能锻炼你的思考力，编的多了自然会有明确正确的设计思考了。 


最后 


如果你现在打开小米商城进入小米上新，会发现只改了一张背景图，因为开发还没有排上期，但最终会按此次改版的效果开发上线，所以有时候遇到这种情况时，设计师还需要结合当前产品的开发框架进行适配设计。

 

文章来源：站酷  作者：吴星辰

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

分享本文至：
« 眼镜类官方网站 信息容器的归类与应用 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档