新闻中心

电商推广专题页面设计

2017-07-25 18:06:33 小v 109

宣传页设计,当我们需要做一张折页、宣传单、海报的时候,我们该如何去设计,才能吸引用户的眼球呢?


下面我先给大家介绍一下宣传页,这里称为单页,最早出现在平面设计中,设计师通过用不同尺寸、材质的纸张,在仅有的正面和反面上进行自由设计的过程

如下图:

网站开发,微信商城,米速云铺,网络推广,H5开发

图片来自花瓣网


电商领域的单页设计,像是平面单页在使用环境上的升级,它不仅拥有平面设计中的所有设计规律,更有着网站设计的特点。

比如:可以利用新的视差滚动和H5的技术,来使页面与人的交互更密切,也使得用户在浏览页面时,更像是在阅读一个故事。

它主要出现在一些促销类的活动页面、产品介绍页、店铺首页等需求中。

如下图:

网站开发,微信商城,米速云铺,网络推广,H5开发

图片来自:2014年天猫双11狂欢城的主会场


专题单页面找准中线,也就是切入点

平面设计理论中的点用来聚焦、发散、吸引人们的注意力。

如下图:

网站开发,微信商城,米速云铺,网络推广,H5开发


专题单页中的线用于引出故事的情节。

运用一些艺术化的表达方式,来给页面增加一些趣味性和装饰性,整体看更像是再讲故事般呈现出来。

如下图:

网站开发,微信商城,米速云铺,网络推广,H5开发


下面是专题单页设计的几个技巧

1、头图有个点,下面设计才好接

头图元素的设计不分楚河和汉界。头图是我们单页设计的第一步,我们需要考虑的是,要让头图视觉和下面的内容有联系。

打破首屏与次屏在设计上有明显的颜色条分隔、形式分隔、线分隔等。

如下图,红圈所示的位置就是头图的高度所在,一般头图的高度值建议在450〜600之间,太高了就会浪费空间。

网站开发,微信商城,米速云铺,网络推广,H5开发


2、承上启下,页面要有头有尾

承上启下,就是说页面中要有一个贯穿整体的主题元素,去构成整张页面的视觉焦点。让就像一篇文章一样,要前后呼应,上下连贯,整篇文章只贯穿一个主题。

举个例子:如下两幅图

① 专题中头和尾部的元素要在视觉上做到呼应和一致性;

② 专题中贯穿整体的这个元素,一定要在整体页面中一气呵成,否则就会出现断点的感觉。

如果在实际需求应用中无法做到整体设计的表现,那么也应该尽量在局部或者某些元素的运用上做到这点。


网站开发,微信商城,米速云铺,网络推广,H5开发


3、背景颜色要整体,慎用色块


尽量不要用色块进行页面内容的分区,整体的单页设计大多用的是单一颜色的背景。对于品类专题、店铺首页来说多色块的分隔显然整体性会差一些。


4、由点到面整体感,切记东拼和西凑

上面讲到元素的重复出现是为了更好的连接由点到面的整体感;但是出现在整体中的元素或东拼西凑、或风格千奇百变的话,那么单页的整体性还是会大大折扣。无论从排版上、字体选择上、按钮样式、色彩等方面都要做到一致性,这样的单页才是整体的。


5、3屏多页面设计,要做留白 

单页因其把所有信息和元素都集中表现在一整张页面中,所以会超过3屏以上的页面设计。信息量大,对每屏间的高度适当控制,既要保持屏与屏之间的可呼吸性和留白,给人们放松和喘息的空间。但留白不是留白色的意思

 

在设计时,不要因为页面有留白和大空隙的出现,使得整体视觉的连接上,出现视觉断点的情况。要尽量做到屏内可紧、屏外可松,让整体页面充满节奏感。

如下两幅图

网站开发,微信商城,米速云铺,网络推广,H5开发

(出自:http://www.webjx.com/web/xindejiqiao-34100.html)


6、按整体效果来设计

整张页面设计强调的是整体从点、到线、再到面的构思和表现。我们在设计中用放大局部来看细节,缩小页面来看整体页面的方法去完成一张超高的,具有创意和实用平衡的页面设计。

举个例子:

如图所示的几个放大效果,在细节的处理和技巧上都是很棒的哦。


网站开发,微信商城,米速云铺,网络推广,H5开发


总结:在网页设计越来越注重个性、趣味性以及视觉冲击力的今天,专题页面的构图也已经千变万化,以上只是列举出了其中较常见的一部分,不同的主题,不同的内容,构图排版的出发点也不尽相同。


构思的时候可以大胆尝试,考虑内容和风格,先确定构图,再往里面添加内容,充分考虑到内容的排版,尽量做到让一个专题有大创意的同时又具有小细节,实现整体形式感的完美和谐的统一。



网站开发,微信商城,米速云铺,网络推广,H5开发

网站建设,分销商城,小程序商城开发,定制软件开发,高端网站定制开发,网络推广,seo优化,H5开发

商务合作请联系(手机 : 137-8783-6665

QQ:93636964)



网站开发,微信商城,米速云铺,网络推广,H5开发

网站开发,微信商城,米速云铺,网络推广,H5开发



公司动态

友情链接

会员中心

站内搜索