「10招」教你玩转电商专题页面设计

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

写在前面的话

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

单页计划，简朴将其比喻为在一张纸长举办的创作和计划。

单页最早呈此刻平面计划中，计划师通过用差异尺寸、材质的纸张，在仅有的正面和后面长举办自由计划的进程，首要用在折页、宣传单、海报中。

如下图：

图片来自花瓣网

电商规模的单页计划，更像是对平面单页在行使情形上的进级，它不只拥有平面计划中的全部计划纪律，更有着网站计划的许多特点。

好比：可以操作新的视差转动和H5的技能，来使页面与人的交互更亲近，也使得用户在赏识页面时，更像是在阅读一个故事。

它首要呈此刻一些促销类的勾当页面、产物先容页、店肆首页等需求中。

如下图：

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

在计划单页的专题时，为了让首屏到次屏再到内容区间的视觉越发的连贯和流通，就要充实操作好局部比拟和整体相关来使页面结果越发的完备。

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

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

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

如下图：

冰糖葫芦原则二：单页的线，用来毗连和引导

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

运用一些艺术化的表达方法，来给页面增进一些意见意义性和装饰性。

如下图：

冰糖葫芦原则三：单页的面，用于整体气魄威风凛凛的计划

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

单页计划不要范围于完成首屏计划可能某个单一元素的计划中。

它夸大的是从新到尾、(首屏到次屏再到内容区，再到最底部)、从局部到整体的一种视觉接洽。

下面我们来看3组优越的计划：

10个专题计划的能力

接下来是我清算的10个专题计划的能力，首要是一些大的理论点，各人团结着本身的专题去思索吧。

1、头图有个点，下面计划才好接

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

不能只抱着做个头图就完事的设法去做单页面，要让头图视觉和下面的内容有接洽。

冲破首屏(就是俗称的头图)与次屏在计划上有明明的颜色条脱离、情势脱离、线脱离等。

如下图，红圈所示的位置就是头图的高度地址，一样平常头图的高度值提议在450600之间，太高了就会挥霍空间。

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

所谓的承上启下，就是说页面中要有一个贯串整体的首要元素，去组成整张页面的视觉核心。

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

举个例子：

(1)图中红圈所示

专题中呈现的首要元素如：头和尾部的元素要在视觉上做到呼应和同等性;

(2)图中黑圈所示

专题中贯串整体的这个元素，必然要在整体页面中一笔挺下，趁热打铁，不然就会呈现断点的感受。

假如在现实需求应用中无法做到整体计划的示意，那么也应该只管在局部可能某些元素的运用上做到这点。

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

只管不要用色块举办页面内容的分区，整体的单页计划大多用的是单一颜色的配景。

对付一些平台型的勾当单页来讲，我们常看到一些用差异色块分区的计划。虽然，这样的处理赏罚方法是为了更好的分出差异的勾当内容，也是做为计划的示意情势。

对付品类专题、店肆首页来说多色块的脱离显然整体性会差一些。

如下图：

左图是整块的暗蓝色的配景，没有任何分区，整体页面看着较量同一;右图是分块的淡色系的配景，操作颜色举办分区，使得整体页面较量生动和俏皮。

(注：并不是说不能用多色块对页面内容举办分区，而是要看详细的需求和主题，选择用差异的情势去示意)

4、由点到面整体感，牢记东拼和西凑

上面讲到元素的一再呈现是为了更好的毗连由点到面的整体感;

可是呈此刻整体中的元素或东拼西凑、或气魄威风凛凛千奇百变的话，那么单页的整体性照旧会大大折扣。

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

如图所示：

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

单页因其把全部信息和元素都齐集示意在一整张页面中，以是单页计划也注定是能高出3屏以上的页面计划。

既然是长版的整体页面，信息量又都很大，那就应该对每屏间的高度恰当节制，既要保持屏与屏之间的可呼吸性和留白，给人们放松和喘气的空间。

举个例子：

留白并不是特指白色哦~

在行使留白时，要留意不要由于页面有留白和大旷地的呈现，使得整体视觉的毗连上，呈现视觉断点的环境。要只管做到屏内可紧、屏外可松，让整体页面布满节拍感。

6、整体想了，整体做，整体看

整张页面计划夸大的是整体从点、到线、再到面的构想和示意，它不仅只是产出一个首屏视觉(头图)和一个内容区各自独立的浮现。

而更多的要求我们在计划顶用放大局部来看细节，缩小页面来看整体页面的要领去完成一张超高的，具有创意和适用均衡的页面计划。

举个例子：

如图所示的几个放大结果，在细节的处理赏罚和能力上都是很棒的哦。

7、整体专题怎么做，注重情势就能破

单页计划的最大特点就是夸大对整体情势感的表达;

正是由于过度夸大情势感的对象，以是整张页面的结果就要具有十足的特色和优良的创意性，才气必免流于平凡单页计划队列中。

从而吸引用户眼球，让用户跟从整体的计划去体验完备的页面信息，形成对整张页面较完备的用户体验和视觉熟悉。

举个例子：

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!