电商设计有哪些基本规范?--广告网

什么是设计规范

首先，我们要知道什么是设计规范。通俗的来说，设计规范就是对设计元素进行一些规范化的限制规定，诸如颜色，形状，大小等等，方便后续延展时，能够很好的保证视觉上的统一性。对于前端开发人员来说，提供了一份参考，实现时能更加准确，从而也减小了复核的工作量。

设计规范应当避免两个的坑

1.避免写得过于“精细”

规范应该是针对整个项目通用的，所以要善于提炼出重叠的部分。对于某个界面特有的元素，就不要列入了，写的过于“精细”，便成了单个页面的标注和需求，失去了意义，而且在使用的过程中，定的太死也会出现一些问题。我们来看一个例子：

在针对二级导航栏做规范设计的时候，这里并没有考虑到二级导航栏的选项数是不确定的，所以这里的给出的选中条宽度的限制是无意义的。在执行过程中如果严格遵循，也会出现问题。

2.避免将需求文档摘抄一遍

一般情况我们都会先拿到需求交互文档，然后再开始设计。程序也会先看需求交互文档。所以没有必要将需求交互的说明文字再添加到设计规范里面，这样会导致整个文档拖沓冗余。还是举个例子：

在上面的规范中，除了元素大小，颜色，边距，其他均为需求交互文档里的内容。重复交叉的描述大大增加了阅读时间，不利于快速方便地查看。

以上两点是很容易出现的问题，有时候可能为了显得“丰满”，不自觉地就写多了，其实效果并不好，还是简练方便的文档更好用。

如何搭建设计规范

1.搭建时间

新的项目开动后，初期页面审核完成时即可开始整理规范。在整理的过程中可能还会遇到一些小小的改动，需要不断调整。当设计基本稳定时，规范也相应的可以制定出了。

2.搭建的要点

设计规范很重要的一点，就是提炼要点，形成该项目独有的设计语言。也可在自由发挥的部分给出一些指导建议，使得整个项目更具有统一感。比如可以从字体，颜色，图标，控件等角度出发，进行阐述。语言尽量简单明了，使用表格、图片等更有利于查看。

很多做电商的老板会发现别人家的店铺装修总是比自己家的好看，这是为什么呢？很可能是你家电商设计师装修的时候是随意发挥，看心情设计，并没有遵从电商设计的基本规范，那么电商设计的基本规范有哪些呢？

电商设计

首先PC端页面的尺寸宽度1920px，高度尺寸按照页面所需信息来定即可，显示尺寸1920×1080px；手机端页面的尺寸宽度750px，高度尺寸按照页面所需信息来定即可。

在页面中使用的中英文字体不得多于5种，页面中出现3次以上为主要字体，其他文字作陪衬字体。在产品详情页设计中，一般主要字体为黑体。

在做横幅广告字体时要经过设计变形，没有字体设计能力的，应在原字体基础上适当做些特殊效果；字体字号大小与颜色要和背景颜色对比分明，使消费者便于预览阅读。经过设计后的文字，显得很有扩张力，很有力量感。在原来的文字基础上做了一些特效，做了一个渐变的效果，比之前的文字在活跃度上有了很明显的提升。

横幅广告字体设计风格要形成统一；字体要统一位置，达到有统一的秩序感，如果首页有5张横幅广告图，那必须要有3张达到统一风格。

PC端首页横幅广告尺寸为730×400px，手机端首页横幅广告尺寸为750×400px。专题活动页，主页页面宽度为1920px，高度为580—700px，最好不要超过700px，其中显示区域页面高度为1210px。产品详情页，宽度尺寸790px，高度尺寸充分展示所需信息即可。

规范分两类：设计风格规范、版式排版构图规范。页面颜色要求：页面中使用的颜色不得多于5种，黑白灰不算色；针对不同的主体使用合理的色系；主题颜色和辅助颜色要根据配色原理搭配。

电商设计电商设计

①单色、同色系：适合产品本身颜色比较统一，通过吸取产品较近的周边颜色，再通过添加合适的辅助元素，使画面变得统一而丰富，这种色系适合单品的一个横幅广告的设计。

②相似色、邻近色系：相似色相对于单色系可变化的范畴会大很多，但也是在主色调明确的情况下辅助添加类似色，这类配色方式在横幅广告应用中还比较常见。是一种比较好掌握的配色方式，同时配色运用得当会使画面看起来很时尚。

③补色系：这里把互补色、单边补色分割、补色分割3种情况一同来说，因为三者在大范畴内上下浮动，效果也颇为相似，并无特别明显的区分，主要因为整个画面调性要活泼，加之产品都属于色彩明快的品类，色彩上的愉悦感更容易激起点击欲望。补色系的运用应注意面积搭配及颜色灰度的调整，对于补色系的运用可在今后多尝试。

④多色搭配，可把对比色、矩形分割、广场分割多颜色的搭配归为一类来说，这三种跨度较大的配色方式，相对来说应用的比较少，不是很容易掌握，一般比较适合小面积的应用起到装饰平衡的作用。

页面设计色彩要清新，布局要大方；页面设计要有整体性、一致性等。一致性包括色彩的统一、版式的统一和字体的统一等；页面布局应主次简约分明，中心突出，大小搭配，互相呼应，图文并茂，适当的空白利于消费者阅读。版式排版快速法则：

①第一招，对齐。对齐分左对齐、右对齐和居中。最常见的电商海报，基本上都采用了左右对齐排版方式。对齐是最常见也是最基础的板式排列方式，给人以稳重、力量、统一、工整的感觉。左对齐的排版方式，版面不会显得很凌乱，而会显得很统一很有秩序感。

居中的排版会给人正式、大气、高端、有品质感觉。在电商海报中居中排版经常会见到文案直接打在产品上面，文案的遮挡汇合后面的产品营造出一前一后的层次感，加上一些光效会让整张画面空间感提升许多。

②对比。无对比不设计，人们在视觉上不喜欢平淡、千篇一律的东西，喜欢看有对比的画面。使用对比的排版技巧可以最有效的增加画面的视觉效果和冲击力。