欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

电商专题页面设计技巧

发布时间:2017:09:06 10:01:33 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1565个文字,预计阅读时间4分钟
导语
写在前面的话电商中的专题设计都是单页设计的一种应用。单页设计,简单将其比喻为在一张纸上进行的创作和设计。单页最早出现在平面设计中,设计师通过用不同尺寸、材质的纸张

写在前面的话

商中的专题设计都是单页设计的一种应用。

单页设计,简单将其比喻为在一张纸上进行的创作和设计。

单页最早出现在平面设计中,设计师通过用不同尺寸、材质的纸张,在仅有的正面和反面上进行自由设计的过程,主要用在折页、宣传单、海报中。

如下图:

推荐阅读:公司某个网站在别的电脑上能打开,但唯独在公司的电脑上却打不开,如何解决?


电商专题页面设计技巧

图片来自花瓣网

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

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

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

如下图:


电商专题页面设计技巧

什么是整体专题设计的“冰糖葫芦原则”

在设计单页的专题时,为了让首屏到次屏再到内容区间的视觉更加的连贯和流畅,就要充分利用好局部对比和整体关系来使页面效果更加的完整。


电商专题页面设计技巧

冰糖葫芦原则一:单页的点,这里指切入点

专题单页中的切入点就是整体页面中的主线。

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

如下图:


电商专题页面设计技巧

冰糖葫芦原则二:单页的线,用来连接和引导

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

运用一些艺术化的表达方式,来给页面增加一些趣味性和装饰性。

如下图:


电商专题页面设计技巧

冰糖葫芦原则三:单页的面,用于整体风格的设计

这里的指的是对整张页面的完成度。

单页设计不要局限于完成首屏设计或者某个单一元素的设计中。

它强调的是从头到尾、(首屏到次屏再到内容区,再到最底部)、从局部到整体的一种视觉联系。

下面我们来看3组优秀的设计:


电商专题页面设计技巧

10个专题设计的技巧

接下来是我整理的10个专题设计的技巧,主要是一些大的理论点,大家结合着自己的专题去思考吧。

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

头图元素的设计不分楚河和汉界。

不能只抱着做个头图就完事的想法去做单页面,要让头图视觉和下面的内容有联系。

打破首屏(就是俗称的头图)与次屏在设计上有明显的颜色条分隔、形式分隔、线分隔等。

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


电商专题页面设计技巧

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

所谓的承上启下,就是说页面中要有一个贯穿整体的主要元素,去构成整张页面的视觉焦点。

让元素头尾呼应,上下连贯。

举个例子:

(1)图中红圈所示

专题中出现的主要元素如:头和尾部的元素要在视觉上做到呼应和一致性;

(2)图中黑圈所示

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

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


电商专题页面设计技巧

3、背景颜色要整体,慎用色块“切豆腐”

尽量不要用色块进行页面内容的分区,整体的单页设计大多用的是单一颜色的背景。

对于一些平台型的活动单页来讲,我们常看到一些用不同色块分区的设计。当然,这样的处理方式是为了更好的分出不同的活动内容,也是做为设计的表现形式。

对于品类专题、店铺首页来说多色块的分隔显然整体性会差一些。

如下图:

左图是整块的暗蓝色的背景,没有任何分区,整体页面看着比较统一;

右图是分块的浅色系的背景,利用颜色进行分区,使得整体页面比较活泼和俏皮。

(注:并不是说不能用多色块对页面内容进行分区,而是要看具体的需求和主题,选择用不同的形式去表现)


电商专题页面设计技巧

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

上面讲到元素的重复出现是为了更好的连接由点到面的整体感;

但是出现在整体中的元素或东拼西凑、或风格千奇百变的话,那么单页的整体性还是会大大折扣。

无论从排版上、字体选择上、按钮样式、色彩等方面都要做到一致性,这样的单页才是整体的。

如图所示:


电商专题页面设计技巧

5、一眼看完3屏多,不做留白就得晕

单页因其把所有信息和元素都集中表现在一整张页面中,所以单页设计也注定是能超过3屏以上的页面设计。

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:网页设计中的80/20法则

下一篇:2017网页设计合集赏析

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信