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

小提示：您能找到这篇{小米商城：新品模块UI升级全面解析！}绝对不是偶然，我们能帮您找到潜在客户，解决您的困扰。如果您对本页介绍的小米商城：新品模块UI升级全面解析！内容感兴趣，有相关需求意向欢迎拨打我们的服务热线，或留言咨询，我们将第一时间联系您！

编辑导读：一个手机商城中的新品板块，是展示新品的最佳位置，能够帮助新品最大程度的曝光，并且促进销售转化。因此，新品模块的设计显得格外重要。本文作者参与了小米商城APP的新品板块的改版，从中总结了一些经验，与你分享。

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

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

一、案例解析

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

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

1. 从设计的角度找问题根源

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

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

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

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

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

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

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

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

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

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

米家商品

小米手机

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

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

3. 什么是舞台？

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

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

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

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

4. C4D渲染舞台

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

C4D渲染舞台

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

1. 小米刚刚推出的小米11主打的是靓丽的蓝色调，轻装上阵，暗蓝色的舞台与明亮的小米11放在一起会毫无违和感，同时也会呈现强烈的对比效果。
2. 小米有太多白色的商品，暗蓝色的背景会让白色商品渲染的更加靓丽。
3. 小米也有很多黑色的商品，偏蓝色的背景能够避免与黑色调商品撞色。

最终舞台效果图

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

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

新旧对比

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

黑白商品图展示

5. 优化头图比例

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

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

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

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

调整文案排版：

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

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

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

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

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

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

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

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

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

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

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

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

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

↓↓

↓↓

↓↓

做减法的icon

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

8. 总结

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

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

二、最后

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

另外，欢迎大家体验小米商城APP，如果发现在交互和UI上有不好的地方，欢迎在评论区提出你的建议和意见，如果你的见解独到有用，我们会按你的想法进行优化，感谢。

#专栏作家#

吴星辰，微信公众号：互联网设计帮，专栏作家。

本文于。未健身房朋友圈广告推广客户经许可，。

，基于CC0协议