jrs低调看直播nba-官网在线

nba直播小米商城:新品模块UI升级全面解析!

时间:2021-02-04 04:17

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  听到很多言论说在中国程序员是吃青春饭的,那么产品经理呢,也吃青春饭吗?

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。