编辑:[db:作者] 时间:2024-08-25 02:55:39
想当年,我一度天真得以为产品图只须要扣个小图就大功告成了,直到我经历了与运营同学之间的爱恨情仇,我终于创造,这个看似大略的步骤实在深远影响着信息的传达、乃至转化。
最近在做线上展会时研究了一下,结合了部分案例(edm banner需求及之前所接手的线上展会项目)来讲解产品图版式,hope u like it~
一样平常说到产品图,就涉及到产品所处的场景,我按照利用场景将其分为两种——瓷片区和banner区。
一、瓷片区场景
瓷片区是电商平台中常见的引流模块,常日由产品+笔墨的形式组合,表现形式犹如一块块瓷片,因此才有了“瓷片区”这个形象的称呼。
对付单个产品每每不须要考虑产品的摆放问题,但是当一个卡片中存在多个产品时(比如展会的主推商品模块),如果用堆砌和平铺的方法进行摆放,每每会导致一些视觉灾害。毕竟给定的区域是方方正正的瓷片区,而不是banner。
更适宜瓷片区场景的排版办法,便是像贴瓷砖一样将产品一张张的贴上去。在大卡片中,用大小同等的小卡片容纳产品,不仅视觉上更加规整统一,也可以实现更精准的点击区域,最主要的是,白底产品不用抠图。
而且,视觉样式也可以更多样化——
在样式的选择上,阿里巴巴和Aliexpress的瓷片区给了我很多启示。 阿里是暗色背景+白色模块+灰色大卡片+以留白分隔的产品。
Aliexpress则直接以大卡片作为模块,灰色背景+白色大卡片+以色块分隔的产品。
二、banner场景
不可点展示图、霸屏、顶通等等这类引流性子的横幅广告,都可以称之为banner。而banner最核心的目的便是:快速传达信息并吸引用户向下浏览或点击。
因此,banner中的产品如果像瓷片区一样规整得摆放,就会让banner显得过于去世板,无法迅速吸引用户眼球,从而也增加了失落去转化的风险。不过,完备可以将这种摆法进行优化调度。
1. 斜向瓷片
这种是由瓷片区场景的摆放方法蜕变而来,将瓷片倾斜45度,既拥有瓷片法规整同等的特点,斜向的摆放也让banner拥有了动感和活力,避免正向摆放所带来的去世板呆板。
适用范围:运营所给的产品数量较多(一样平常不少于3个时)。
2. 斜向平铺
比较斜向瓷片,平铺的产品不用固定在单个的容器中,全部斜向铺开,视觉上比较瓷片更加富有活力,也带来更多的视觉冲击。唯一的缺陷是,对付产品图及排版能力的哀求较高,产品轮廓越靠近矩形视觉效果越好,并且在排版时只管即便保持产品之间同等的间距来增加同等性。否则就会让全体banner变得混乱不堪。
比如下面第二个edm banner,由于产品形状的多样,便不如第一个banner更加规整同等,而且产品过大的间距让产品图过于疏松了,和文案分不开。
适用范围:数量较多、形状对称的产品。产品形状越靠近矩形,或者产品品类越同等,效果越好!
其余,这种摆法适用于更多类型的版式,不论是旁边版式还是环抱版式。
小技巧:可以在产品背景上加上一些不影响主体的赞助手段(线、面),用背景的同等性来提升产品版式的同等性。
如阿里的banner,就用了分层渐变、色块和赞助线来赞助提升版式的内在逻辑性。
3. 堆砌
相对来说适用范围较小的一种版式。
这种堆砌的摆法实在是对现实摆法的仿照,比较前两种更具有立体感和真实感。
BUT,这种摆法非常受制于产品的体历年夜小,一旦产品间比例有所失落衡,就会带来“很假”的觉得;二来很随意马虎造成产品的相互遮挡,尤其是一些颜色靠近的产品会糊成一团,降落产品本身的辨识度;末了,产品相互遮挡带来的投影也会显著加大视觉的事情量。
适用范围:一些适宜产品堆砌的特定场景(比如圣诞节的banner)。
4. 场景展示
堆砌摆法的优化版本,用一个个立方体、柱体等模型仿照现实天下的商品展示台,再将产品放置到展台上方。这个摆法不仅避免了产品间的相互遮挡,3D渲染出的场景也极大提升了真实感以及视觉不雅观赏性。
虽然多一步c4d建模渲染的步骤,不过只要完成一个场景,后期只须要改换材质、调度模型就可以连续复用。
适用范围:无限制,一个或多个皆可。尤实在用于专题页、活动页等主要页面的主视觉。
以上,便是我有关产品摆法的所有分享。实在产品摆法可能不止这么几类,这里只是举出一些常见的例子,到底是什么样的摆法当然是详细问题详细剖析了。希望这篇分享对你有所帮助~
#专栏作家#
Andrewchen;微信公众年夜众号:转行人的设计条记,大家都是产品经理专栏作家。中科院硕士自学转行,善于通过笔墨帮助年轻设计师发展和提效。延迟知足、长期主义。
本文原创发布于大家都是产品经理,未经容许,禁止转载。
题图来自 Unsplash,基于CC0协议。
本站所发布的文字与图片素材为非商业目的改编或整理,版权归原作者所有,如侵权或涉及违法,请联系我们删除,如需转载请保留原文地址:http://www.baanla.com/bgl/88972.html
下一篇:返回列表
Copyright 2005-20203 www.baidu.com 版权所有 | 琼ICP备2023011765号-4 | 统计代码
声明:本站所有内容均只可用于学习参考,信息与图片素材来源于互联网,如内容侵权与违规,请与本站联系,将在三个工作日内处理,联系邮箱:123456789@qq.com