达达新闻
达达资讯
展开

3个方法做好电商详情页头图设计?

发布日期2020-05-27   浏览量:20

在电商设计工作中,详情页的设计是我们不得不面对的一大难题,和普通专题页不一样,详情页设计更多的是对文案、卖点进行视觉提炼、视觉表达的过程。如何把一个产品的卖点、特色通过视觉流畅地表达给用户,减少用户阅读的时间成本、提升视觉带给用户的整体感受。而详情页设计中第一屏——头图,对于整体而言的重要程度也非同一般,一张优秀的头图设计可以吸引用户继续阅读、提升用户的停留时长、间接的促进订单买成。那么既然这么重要,我们在进行设计工作的时候应该注意些什么?哪些设计技巧可以提升我们详情页头图设计的视觉表现?达达设计和你一起通过分析、总结的方式探讨。


头图设计的注意点


正是因为头图设计的重要性,很多设计师会把大部分精力花费在这里,一味强调视觉要多么出众、与众不同,甚至是用特别复杂的合成手法、各种特效等等去烘托头图的重要性,其实这样有时候反而会事与愿违,那么我们应该注意什么?


视觉流畅性,也就是说第一屏要让别人看起来舒服,文案与视觉所传递的信息能一目了然,不会给人一种阅读困难的感觉。

头图复杂不代表出众,这里可以提到「少即是多」的理论,过多、复杂的效果有时候反而会影响视觉传达。要充分与产品结合,要让产品出现在合理的场景内。

那么常用的详情页头图设计的表现形式有哪些呢?下面举例说明。


1.产品局部放大

在详情页头图设计中,产品局部放大是一种比较常用的视觉表达形式,因为它会给用户呈现出一种简洁大气的视觉感受和比较强烈的视觉冲击力,同时也会让你的设计整体显得饱满、有内容、不单调。很多时候头图设计只是简单的背景、文案以及放大或者局部放大的产品相互结合,就可以做出很出色的头图。


案例中均为一些优秀的详情页的头图设计,从整体来看,这种放大产品或者说以产品为核心的海报设计,有以下几点优势:


画面整体简洁、大气,视觉的流畅性以及可读性很强,给人的视觉感受很舒服,有种品牌感、高级感。

绝对的产品核心,直奔主题,而且因为增大了产品所占画面的比例,不会给人一种缺少内容,或者空的感觉,整体视觉重点很明显,没有太多辅助性的元素分散用户注意力。

背景设计很有特点,看似都是简单的颜色背景,实则特点溢于言表。


2.场景表现法

所谓场景表现法,顾名思义就是将产品置于某一个视觉场景内,这样做的目的在于提升详情页第一屏的视觉代入感,通过场景表现对产品的用途、功能、卖点等等进行视觉表达,这种形式既体现了视觉又兼顾了产品,给用户形成的视觉感受更加形象、立体、鲜明。下面举例说明:


通过案例我们发现,场景表现的形式重点在于:场景与产品的视觉融合以及关联度,这里的场景可以是产品的实拍图,也可以是自己合成的场景图。如果是自己找场景融合或者干脆自己合成场景,这对于设计师的基本功要求是很高的,但是精髓还是在于光与影的体现,其次是头脑风暴,比如:牙刷放在厨房做场景就是不合理的。做这种场景合成的时候应该先问自己几个问题,以空气净化器为例:


空气净化器用在哪里哪类场景内?答:经常用于客厅、办公室、卧室。

客厅场景应该有什么?答:窗帘、沙发、绿植、地板、桌子等等。

光从哪里来?哪些物品靠近光源?物品的哪个区域靠近光源?影子在哪里?

产品与场景的结合很容易被其他视觉元素抢,那么我们通常可以:


将次要视觉元素模糊处理,用类似景深的视觉效果表现主体;

将主体放大,其他视觉元素按照正常比例呈现,也能很好地突出主体;

弱化周围视觉元素,比如将产品置于夜晚的情景内等等。

这种场景表现产品的形式,最重要的就是最终的场景感和产品的融入是否合理,同样场景不易过于复杂,无论什么样的形式,视觉流畅度都是要兼顾的。有些场景也可以在花瓣、站酷或者其他的素材网站上去找,只要与产品的结合度可以,稍微修改即可。


3.立体块形式

立体块可以理解为三维的形式,就是通过各种形式的立体块的摆放与产品相结合,也是详情页头图设计的表现形式之一,而这类场景不要太过于复杂,还是以产品为主,突出产品,也并非一定要借助三维软件,可以通过找参考的方式结合基本的透视理论就可以完成。比如:


至于立体感的体现,只要保证透视合理的情况下,还是可以转化为光感,记住前面所说的重点,多加练习即可。


最后说下排版,达达设计公司建议:详情页的排版不宜太过复杂,过于复杂的排版只会增加阅读的时间成本,一定要注意好可读性,不要因为追求特色忽略了设计的本质问题。


在线咨询
在线咨询
达达顾问
138 2522 2127
码上了解