编辑指南:手机商城的新产品版块是展示新产品的最佳场所，可以帮助最大限度地增加新产品的曝光率，促进销售转型。因此，新模块的设计尤为重要。本文作者参与了小米商城APP新产品版块的改版，总结了一些经验与大家分享。

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

这次分享的内容会从思维到技术进行充分的讲解，会告诉你如何从设计的角度去理解需求，如何有针对性的解决问题，如何在交付设计的时候进行沟通。可以用分享设计经验来形容，清晰明了。

一、案例分析

电子商务产品运营板块修改的很大一部分原因是数据不够好或者不够美观，无法提高视觉感。以下是改版前的截图和调查UI设计满意度的结果。

其实调查结果前六项都是关于一件事，就是头像不够好，最后一项是运营需求。查看更多入口的点击率太低，希望提高开启率。这一点的修改将在下面详细解释。

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

乍一看，旧版头像的色调和质感其实都是过去的，但仔细观察分析就会发现很多不合适的地方。

比如投影和主光源不匹配，主光源左侧没有独占感，背景凌乱，空太强。货物摆放好后，就像是在远处观看物体，会导致货物在视觉上不突出，容易疲劳。

上图中，普通用户一般无法准确发现这些问题，但实际上用户可以因为不符合人类潜意识认知的物理规律而感到不适。

所以在问卷中，大家都会提出，不算高水平，高水平，简洁。这些都是普通用户分不清哪里出了问题的语言表达。

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

比如因为背景里乱七八糟的东西太多，不够简洁；视觉疲劳很容易，因为没有很好的把握商品和空的关系。主光源在左侧，不容易给商品营造专属舞台的感觉，使用暖色也会增加视觉疲劳。

找到问题根源后，首先完善陈列商品的舞台，解决空上陈列商品的问题，渲染出干净的背景而不感觉凌乱，然后通过灯光和舞台材质质感营造出商品的专属感。

2.了解商品，更好地搭建舞台

舞台是为商品服务的，所以我们需要了解大部分陈列商品的色调、拍摄角度、质感、材质，这样才能更合理的思考舞台的设计。

另外要根据新产品的特点研究设计方案。比如，新产品具有神秘的属性，所以我们需要营造一种适合新产品特点的环境氛围。

米家货

小米手机

米家的产品大多是白色的，小米的手机是彩色的屏幕和有质感的边框，新产品的属性更适合神秘的氛围，所以我们需要一个阴暗有质感的舞台。

强调舞台质感是因为它能与有质感的手机产品形成一种呼应。手机是小米的支柱产品，肯定会宠着他，所以设计需要偏向手机的显示器。

3.舞台是什么？

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

回到老版本的情况，把货放在空后面，相当于给用户买了最便宜的后座。当然后视图不会有好的目测，第一排的C位应该是我们为用户准备的视图。

舞台上的主光源必须是对称的，以舞台中央为中心，因为观众的眼睛可以更好的聚焦在演员身上，可以渲染气氛，表现出一种独占感。

所以在我们老的情况下，主光源在左侧，右侧是投影，会造成用户的视觉焦点分散，从而无法有效地将视线引导到商品本身。

4.C4D渲染阶段

通过以上总结和分析，我们大概对舞台有了一个清晰的设计思路。背景采用深色使视觉更好的聚焦在商品上，反射出来的高光质感可以呼应手机产品。空给用户近距离的视觉体验。好，打开C4D。

C4D渲染阶段

一个很简单的场景，用一个阶梯式的圆柱体，放一个背景，前面放一个主光源，左右两个对称的辅助灯，在纹理球上加入轻微的反射和高光，让渲染更有质感，材质的颜色是蓝色。原因有三:

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

最终阶段效果图

最终配色在Ps完成，舞台中央明亮，营造出聚光灯打在舞台中央的感觉，这样放上商品会体现出一种独占感。这个效果是材质球在C4D使用渐变颜色。

此外，深蓝色的气氛中有一种神秘的感觉，与新产品的外观非常一致。整个舞台没有强烈的反光和高光质感，因为舞台的质感弱于商品本身，否则容易抢占客人。

新旧对比

上图中的纹理化阶段可以增加手机的真实感投影，视觉融合性非常好。下图展示的是黑白产品，在深蓝色背景下可以有效突出产品。

黑白商品地图显示

5.优化表头比例

新版和旧版还有一个最大的区别。新版表头比例降为1:1。为什么是这个比例？为什么老版本的长图不合适？

老版本的长图占据了第一屏的巨大面积，一般不适合归一化的功能模块。(规范化指的是产品中一直存在的功能模块)长图或者全屏幕适合操作异常强的活动模块，比如节日活动，节日结束后会去掉。

小米的新版块是主页上正常的功能模块，太大的显示面积其实浪费了第一屏空。之所以采用1:1的比例，是因为对几个竞争产品的新模块进行分析，采用1:1的比例。

所以记住这句话，当市场已经验证了设计形式的时候，最好是采用，这样就可以大概率的避免错误。

调整副本布局:

老版本的文案是3行，会显得有点啰嗦。中间的文字有点多余，占地方。改成两行就够了，一个产品名称，一个产品卖点。

旧版本的灯笼是传统的起源标志。为了给商品展示留下一个相对较大的区域，新版将提灯改为数字指示，如上图右下角2/5的形式所示，从而由4行变为2行，直观、简洁、突出。

6.敲黑板！“查看更多”条目的处理

在上面问卷调查的最后一项中，操作生希望用户可以多点击列表中的“查看更多”条目。现在点击率不高的原因是设计风格是辅助形式，如下图所示。

如果只根据操作学生的需求加强入口的视觉表现，可能不是一个好的设计方案。

在你想突出的地方进行视觉强化是典型的产品思维，UI设计师要结合整体页面结构的交互形式考虑优化设计。

首先梳理一下用户在这个页面上的浏览过程。当用户打开这个页面时，他首先看到的是标题图像，因为它最引人注目，然后他开始滑动页面来浏览商品列表。

此时，如果“多看”门户网站以强烈的色彩或动态设计显示，会吸引部分用户点击进入“多看”页面，如果用户未能继续浏览页面，则看不到平台推荐的产品，不符合产品设计逻辑。

因此，当用户浏览到列表中的最后一项，还没有被某一项吸引时，再有一个“查看更多”按钮条目会更合理，这样这种交互方式才能满足用户的浏览顺序，如下图修改所示。

此外，标题也进行了优化。老版本的主标题和副标题的安排会占用更大的面积，看起来还是很挤。另外，主标题和字幕的尺寸过大，直接导致用户的注意力忽略了字幕。

新版改版后，减小了主标题的字体大小，在排版模式下主字幕左右，不会在视觉上遮挡字幕的显示，最大的好处是在页面上发布空。见下图感受一下。

7.满足运营要求并添加动态iCON

为了满足希望用户更多进入所有新产品页面的运营学生的需求，设计在产品列表底部增加了“更多新产品”按钮，并在页面右上角增加了一个动态效果图标进入所有新产品页面。

当时构思这个图标的时候，从一个视觉表现很强的动态形态，一直做减法，直到恰当、合理、有效地融入页面。下图中最后一个最简单的设计是明确的方案，简单的动态效果突出但不突兀，恰到好处。

↓↓

↓↓

↓↓

减法图标

动态元素在页面中最有吸引力，即使被削弱了，所以有时候在设计中有一个策略，就是在前期利用动态效果培养用户的习惯和认知，在动态效果中发挥了作用之后再变回非动态效果，避免动态元素在浏览页面过程中的干扰。

8.总结

修改后的设计无法按照表面需求进行设计，必须找到问题的根源，然后有针对性地解决这些问题。在交付设计时，我们还必须告诉需求方这个设计的目的是什么，我们解决了什么问题。

如果说不出设计目的，那就补上，这样至少可以锻炼一下思维能力。如果补上，自然会有清晰正确的设计思维。

第二，最后

如果你现在打开小米商城，进入小米尚信，你会发现只有一个背景图被改动了，因为开发没有排到上一期，但最终会根据这次改版的效果开发上线。所以有时候遇到这种情况，设计师需要根据目前的产品开发框架进行适应和设计。