如何打造电商详情页设计?

如题所述

随着移动电商的迅猛发展,视觉营销这一传统行业的惯用手段也逐渐融入移动电子商务,并越来越受重视,这都由移动电子商务特殊的购物方式所决定。在移动端App上购物,由于接触不到商品实物,消费者只能通过色彩、图像和文字来判断商品是否符合自己的需求。因此,视觉营销在移动电子商务中的作用,就是通过色彩、图像、文字等形成的强烈冲击力来吸引消费者点击进店,提升店铺流量,刺激消费者的购物欲望,最终成交。因此,视觉营销对移动端店铺提升有效流量非常重要。那么移动端店铺视觉营销该如何打造呢?





首先配色技巧


移动端店铺整体配色一定要给人以统一、协调的感觉。统一的颜色是指主色调只有一种,在此基础上搭配一些其它颜色。黄金配色比例是70%∶25%∶5%。其中70%为大面积使用的主色,25%为辅助色,5%为点缀色。


常见的色彩搭配有同类色搭配、邻近色搭配、互补色搭配和对比色搭配。同类色搭配使得整个页面看起来色彩统一,又有层次感;邻近色搭配的效果比同类色搭配更加丰富;互补色搭配对比最为强烈、醒目和鲜明;对比色搭配色彩的对比更加有诱惑力。在移动端店铺配色过程中背景和文字内容对比不强烈、色彩过多及过分强调色彩的刺激度,这些都是在移动端店铺配色过程中存在的问题。


其次店铺风格的形成

移动端店铺风格的形成要素包括店铺的主要风格、店铺主题气氛及店铺的包装色彩。经营不同的产品就需有不同的店铺风格,否则就会让人觉得不伦不类。常见的店铺风格有简约清爽型、商业型、炫酷型、可爱型和特色型等。例如,商业型的店铺促销产品位置明显,直截了当,适合中性、男性人群浏览,适用于虚拟产品、手机、数码产品和家居等行业;可爱型的店铺通常为暖色调,以卡通图案或者动物花草为装饰元素,适合小女生人群浏览,适用于饰品、毛绒玩具、居家日用和鞋子等行业。


移动端店铺的主题气氛主要通过店铺的配色和装饰来烘托。例如,以国庆节为主题的店铺配色大多采用红色,然后通过灯笼和烟花等元素来体现国庆节的节日气氛;以七夕节为主题的店铺大多采用紫色、粉色等颜色来营造浪漫和甜蜜的气氛,然后通过鹊桥等元素来体现七夕的节日气氛。

人们对一个店铺色彩的记忆往往更倾向于其包装,包装本身也代表着整个店铺的风格定位。例如,如店铺主营18-30岁的女性时尚女装服饰,那么比较适合的主题色就是偏粉色、红色的柔和浪漫色系;如店铺主营手机、相机等数码类产品,那么蓝色、黑色和灰色往往会给消费者以理智、高贵、沉稳的感觉。在配色的过程中需要巧用VI配色技巧,一般可分为单色VI、双色VI和多色VI设计,主要表现在店铺的整体色彩效果与店铺Logo色彩的对应性,使得页面整体风格协调、统一。

温馨提示:答案为网友推荐,仅供参考
第1个回答  2021-06-26
在电商设计工作中,详情页的设计一直都是衡量电商设计师能力的重要指标,正是因为它的重要程度,所以也就成了困扰很多设计师的难题。目前详情页基本上都采用了分屏式的设计,目的为了提升视觉流畅度以及减少阅读障碍。这种方式就将详情页设计转变为具有组合效应的单屏海报设计。所以做好每一屏海报就成了最终需要解决的问题。那么有哪些实用的详情页设计技巧,可助我们一臂之力?

在写这篇文章之前,我翻阅了很多比较不错的详情页首焦设计,发现这么多不同产品和类目的详情页,在设计手法上竟有很多相似之处!不信你来看!
上面是我在翻阅的过程中随机筛选的12张详情页首焦,从视觉角度来看,每张首焦都给人一种干净舒服的感受,元素虽然不多,但却一点也不单调、层次感很强。
从实现难度来看,没有很复杂的设计手法让你望而却步,整体来看实现起来都不算难,明白原理之后,只需多加练习就可以。那么该有同学问了:为什么我看完之后还是不会?这时候,再回过头看上面的12张首焦,着重观察每张图的明暗关系,光影变化!哇!很丰富所以说,简单的场景一样可以做出很有层次感的首焦海报,场景的复杂与否和最终的视觉效果没有直接关系。通过设计手法表现出场景元素间的明暗变化在详情页设计中用到的非常多。简而言之就是:营造明暗变化。

什么是光就不解释了,生活中随处可见:灯光、日光、月光……并且物理老师也告诉我们:同种均匀介质中,光是沿直线传播的!无论是在设计,还是现实生活中,我们通常会把光与影放在一起说,即光影,两者密不可分,有光就要有影,有明就要有暗。只是体现光影、明暗关系,就足以让设计作品变得丰富、有层次感,比如现实生活中的汽车:在详情页设计中,光影并不是越复杂越好,反而越实用的越简单。注意:在详情页设计中,一般情况下不会用到直观的光源,大多都是拟定光源位置,一但光源位置确定,画面中的所有元素(包括背景)都要遵循:靠近光源的位置亮,远离光源的位置暗。那么如果光源位置确定,应该在背景上如何体现?上图所示就是拟定光源位置后,背景明暗关系对照图,其实做起来很简单,就是通过渐变叠加实现的,相比纯色底,这种渐变的背景是不是更实用?在详情页设计中,一些有模特的场景图,大部分都使用渐变的背景,下面看两个案例:
渐变的背景增加了整体的层次感,模拟了一个设计上的环境感,而且模特的形象因此也更加立体,作品整体也不显单调。

产品特写或者局部放大时,渐变背景用到的也很多!

一、产品即是场景详情页设计,核心还是产品,很多时候产品素材本身通过修图,明暗变化就很强,这时就可以完全依靠产品素材,做好背景处理及文字排版就可以了,下面看几个案例:
看似案例很简单,实则很考验设计功底,渐变的背景用的恰到好处,模拟了一种有光源的视觉变化,从而提升了画面整体的视觉层次感。简洁大气的作品也更易于大众接受。下面我们看个实操案例:
最终成品

如上图案例所示,依靠产品自身丰富的明暗变化,利用简单的构图形式,一张详情页首焦轻松完成。但这种形式受产品自身影响,有一定局限性,并不是所有的产品都适用。接下来我们继续!

二、搭建小场景搭建小场景在详情页设计中也是非常实用的,为什么要说小场景呢?小不是代表体积小,而是场景要简约,无需特别复杂,简约并不意味着简单,重点是要有层次感、把控好整体的明暗变化和光影。还是不太懂?下面看一个最基础的小场景搭建:

上图案例是不是给你的感觉很简单,除掉产品和文案,几乎没有任何多余的元素装饰,那么有个问题:为什么一点也不单调呢?剖析一下:

看似简单的场景,对设计功底的考验一点也不少,小场景设计中,如何体现光影是非常重要的。说完基础的小场景,我们继续往下延伸。很多产品的详情页设计都用到了更真实的使用或者摆放场景,目的是让用户更加直观的了解产品,视觉上更有代入感。在偏真实的小场景设计中,对于光的表现还可以再丰富,比如现实生活中的窗户格、植物、阳光等等,都是对光的一种加强体现,下面我为大家总结一些实用的表现形式:
类似上图中的光的表现形式有很多种,在详情页中都非常实用,它能起到加强光感、赋予整体环境感的作用,并且对提升作品层次感有很大帮助。下面我们看下在设计中的使用。窗户格形式

光照效果

素材影子
不管是哪种表现形式,其目的都是在营造一种光影的环境感,提升作品整体视觉变化强度,避免单调!也让产品更贴合现实,易于解读和表达。
下面再看个实操案例:
最终成品

在实操案例中,对于场景的搭建并不难,如何体现光的感觉才是最重要的一笔,光赋予了作品环境感,视觉上的明暗的变化使得作品给人的感觉丰富有层次。

对于详情页中的小场景搭建,前后遮挡用到的很多,根据实际情况选择合适的遮挡物即可。

在详情页设计中,对于光的表现形式远不至于文中所说到的,这里只是为大家提供一些实用的设计思路。不妨找一些不错的详情设计,对应着本文内容,自己再验证、总结一下,这样印象会更深刻。本回答被网友采纳
相似回答