产品排版设计模板：电商瓷片区与Banner区布局技巧

忆往昔, 我曾甚是天真地觉得, 产品图仅靠抠个小图, 便算是大功告成之时, 直至我历经了与运营同学间那复杂的、爱恨交织难以言明的种种纠葛, 我才最终发觉, 这般看似简易的步骤, 实则深远地影响着信息的传递, 甚而关乎着转化。

最近呢, 在进行线上展会那件事儿的时候做了些研究, 把带有电子直邮通栏广告的需求以及之前亲手接到手去过着手做了的线上展会项目里的部分案例给结合起来, 以此来对产品图片的排版样式进行讲解, 希望你们会喜欢它～。

普遍提及产品图的时候, 就会关联到产品栖身的场景, 我依据使用场景把它划分成两类那就是瓷片区以及banner区。

一、瓷片区场景

瓷片区, 是那种在电商平台里常见的引流模块, 它一般是以产品加上文字这般的形式来进行组合的, 其表现形式就好像是那一块块的瓷片, 所以呢, 才有了“瓷片区”这个形象化的称呼。

对于单个的产品而言, 通常是无需去考虑产品摆放这一问题的, 然而, 当一个卡片当中存有多个产品的时候（就像展会的主推商品模块那般）, 要是采用堆砌以及平铺这样的方式来进行摆放, 往往就会致使出现一些视觉方面的灾难情况。毕竟所给定的区域乃是方方正正的瓷片区, 并非是banner。

那种更适配瓷片区场景状态的排版形式, 是如同粘贴瓷砖那般把产品一张张地往上粘贴。于大卡片之中, 借助大小保持一致的小卡片去收纳产品, 不但在视觉层面显得更为规整统一, 而且还能够达成更精确的点击区域, 最为关键的是, 白底的产品无需进行抠图操作。

而且，视觉样式也可以更多样化——

从样式那儿的挑选领域之中, 阿里巴巴以及Aliexpress的瓷片区域给予了我好些启迪。

阿里是暗色背景+白色模块+灰色大卡片+以留白分隔的产品。

AliExpress直接把大卡片用作模块, 其背景是灰色的, 包含白色大卡片, 还有用色块分隔开来的产品。

二、banner场景

不可以点展示图, 不可以进行霸屏, 不可以有顶通等等这类具有引流性质的横幅广告, 皆能够称作banner。而banner最为核心的目的是: 迅速传达信息, 且吸引用户往下浏览, 或者进行点击。

故而, 要是位于banner里的产品如同瓷片区那般呈现出规整的摆放态势, 那么就会致使banner显得过度死板, 难以迅速地对用户眼球形成吸引力, 且进而还增添了失去转化的风险, 然而吧, 对于这般摆法, 是完全能够予以优化调节的。

1. 斜向瓷片

这种是从瓷片区场景的摆放方式演变而来的, 把瓷片倾斜成45度, 它既有瓷片法规整统一的特性, 斜向放置又使得banner具备了动感与活力, 防止正向摆放造成的死板乏味。

适用范围：运营所给的产品数量较多（一般不少于3个时）。

2. 斜向平铺

跟斜向瓷片比, 平铺的产品无需固定于单个容器内, 全都斜向展开, 视觉方面相较于瓷片更具活力, 也能带来更多视觉冲击。唯一不足之处是, 对产品图及排版能力要求较高, 产品轮廓愈趋近矩形视觉效果愈佳, 且排版时要尽量维持产品间一致间距以增添一致性。不然会致使整个banner变得杂乱无章。

以如下第二个edm banner为例, 鉴于产品形状存在多种样式, 所以不像第一个banner那般工整统一, 并且产品间距过大致使产品图显得过于松散, 与文案无法紧密相连。

适用范畴为, 数量相对较多且形状呈对称状的产品, 产品形状越是趋近于矩形, 或者产品的品类越是具备一致性, 那么所呈现出的效果便越好！除此之外，这样的摆放方式适用于更多样式的版式, 不管是左右版式亦或是环绕版式。

有个小技巧, 能够在产品背景那里添加些许不会对主体造成影响的辅助方式, 像是线, 面, 借助背景的一致性去提升产品版式的符合规律、协调一致程度。

比如阿里的那个banner, 采用了分层渐变的方式, 运用了色块, 还借助了辅助线, 其目的是助力增添版式原本潜藏的被视作内在逻辑性的部分。

3. 堆砌

相对来说适用范围较小的一种版式。

这种采用堆砌方式的摆法实际是对于现实摆法的模拟, 它跟前两种比较起来, 更具备立体感, 也更有真实感。

然而, 这样一种摆法, 因其极大地受限于产品的那个体积大小, 一旦产品之间所呈现出的那种比例出现失去平衡的态势后, 就无疑会给人带来一种觉得“特别假”的感受。另一方面, 它非常容易致使产品彼此之间形成相互遮挡的状况, 尤其是那些颜色较为近似的产品, 它们会混淆在一起变成一团, 从而降低了产品自身所具有的辨识度。最终, 由产品互相遮挡这一情况所产生的投影, 也会明显地加大视觉方面的工作量。

适合的范围是, 一些适用于产品进行多次摆放堆砌的特定情景, 像是圣诞节时候所需要用到的横幅广告那种情景。

4. 场景展示

此为堆砌摆法的优化版, 借助一个个立方体、柱体等模型, 对现实世界的商品展示台予以模拟, 接着将产品放置于展台上方。这种摆法不但避免了产品间的相互遮挡, 而且经 3D 渲染出的场景极大地提升了真实感以及视觉观赏性。

尽管存在要多进行一步c4d建模渲染这般的情况, 然而只要达成一个场面, 到了后期仅仅需要去更换材质, 并且调整模型, 便能够实现连续复用。

适用范畴是, 不存在限制情况, 无论是一个还是多个均可采用。特别适用于专题页面, 特别是活动页面等具有重要性的页面那儿的主要视觉呈现方面, 的情况。

接下来要说的, 便是我针对产品摆法所做的全部分享内容。实际上, 产品摆法或许并非仅仅局限于这几种类型, 此处仅仅是列举出一些较为常见的示例而已, 究竟是何种摆法, 那自然是要依据具体的情况进行具体的分析才行。期冀这一番分享能够为你带来些助力~

#专栏作家#

Andrewchen, 微信公众号是转行人的设计笔记, 是人人都是产品经理专栏作家, 中科院硕士自学转行, 擅长借文字助力年轻设计师成长以及实现提效, 崇尚延迟满足、秉持长期主义。

继续浏览有关 产品排版设计电商Banner布局 的文章