行业关键字
2020 C-IDEA设计奖 | Shadows After Dark国际海报大赛 | ADC第100届年度奖 | PORADA 2020年度全球设计大赛
UI设计UI理论和资料 → 正文
小米商城:新品模块UI升级全面解析!
作者: 吴星辰 来源: 视觉同盟 时间: 2021年2月22日

近期改版了小米商城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. 敲黑板!“查看更多”入口的处理

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

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

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

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

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

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

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

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

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

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

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

↓↓

↓↓

↓↓

做减法的icon

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

8. 总结

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

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

二、最后

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

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

(责任编辑: Admin

作品欣赏

  • Free Rabbit图标设计
  • 智利Mauricio Cancino概念设计
  • 葡萄牙09FDIP公共中心
  • 躺着的艺术雕塑公共座椅设计
欢迎关注视觉同盟微信公众号:
微信公众平台:搜索“vudn2004”或扫描下面二维码:
English | 关于我们 | 站点地图 | 联系热线 | 合作伙伴 | 艺术顾问 | 订阅 | 手机版
版权所有 © 2004-2021 视觉同盟 visionUnion.com)
Copyright © 2004-2021 VisionUnion.com Incorporated. All rights reserved
京ICP备09005192号
视觉同盟旗下子站:品牌专区 | 中国创意设计人才网 | 视觉同盟社区 | 视觉同盟论坛 | 英文版