电商设计有哪些基本规范?

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

电商页面设计大小应该注意什么 电商页面尺寸规范

电商页面设计大小应该注意什么 电商页面尺寸规范

电商设计

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

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

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

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

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

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

电商设计电商设计

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

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

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

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

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

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

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

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

请问电商网站的设计需要注意什么？

电商网站的设计需要注意以下几项：

1.界面清晰整洁。一个网站设计的精美与否很大程度上决定了是否愿意在这一页面停留更长时间做深入浏览。所以说设计精美的网店，更容易吸引顾客的眼球，经常光顾与此，久而久之便形成了一批忠实的顾客。

2.调动色彩对情绪的影响力。色彩心理学早已被人们运用到营销战略中。商品不同颜色的包装，在很大程度上确实能影响到人们情绪和对商品购买与否的决断力。网站设计就是的证明。太过的颜色不宜作为页面备选颜色，而淡蓝色和绿色都不具有威胁性，是不错的选择。例如，绿色就适合是用来表示打折或降价。

3.导航栏的设置导航栏，顾名思义也就是起导航，作用。通过导航栏的，用户可以一目了然的知道自己要找的东西在哪个栏目。这样方便了用户，不用到处漫无目的的找寻，而是很方便的就知道自己要的东西在什么地方，极大的方便了购物。

4.简化注册过程注册成会员，无需填写过多的相关信息，只需保证能与客户取得联系，通过手机或电子邮件就可以了。

5.以具有力的口号吸引顾客设置一些振奋人心的口号来吸引顾客，使其通过口号连接跳转到你的窗口，这比在网页上添加简单的按钮有效得多。不过要注意的是这样的活动口号不要太多。否则会多而至乱，适得其反，过多的活动信息扰乱了顾客的选择，导致顾客无法决定到底该购买哪些商品，以至于离开你的网站。

移动端页面尺寸设计考虑的因素有哪些

移动端页面尺寸设计考虑的因素有哪些？现在我们经常看到的电商网站的手机页面大都是直接按照移动端页面尺寸设计的，那么你知道移动端页面尺寸设计考虑的因素有哪些吗？小编就来与大家聊一聊这个问题。 可以通过这个测试页面greenzorro

以iPhone5s为例，屏幕的分辨率是640x1136，倍率是2。浏览器会认为屏幕的分辨率是320x568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，才能保证清晰。

实际应用

大家关心的还是实际运用，画布该怎么设置。我们就iOS、Android、Web三个平台来分别梳理一下。不过在这之前，我要为使用PS进行设计的朋友介绍一个小技巧。

之前我说过，我们要以逻辑像素尺寸来思考界面。体现到设计过程中，就是要把单位设置成逻辑像素。打开PS的项——单位与标尺界面，把尺寸和文字单位都改成点(Point)。这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它。当然，各平台单位名称还是要记住的。这里我们用的只是它的原理，不用在意名称。

要调节倍率，则通过图像大小里的DPI来控制。这个DPI，其实就是PPI，像素密度。有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300。

移动端页面尺寸设计考虑的因素有哪些？以上文章就是小编为大家带来的关于移动端页面尺寸设计考虑的因素有哪些的全部文字介绍了，希望对你有所帮助。

移动端

淘宝主页面设计需要注意哪些事项

1.简洁、有序

店铺的主页设计一定要是简洁、有序的，因为消费者一看到就感觉到非常的舒服，简洁有序的主页能够让消费者轻而易举的了解店铺的信用等级，销售的商品，从而快速的确定是否符合购买需求，节省购物时间，有一个愉快的购物体验。

2.页面尺寸和分辨率符合要求

平台对于店铺的主页面尺寸和分辨率是有严格要求的，如果说设计的主页尺寸不符合要求，分辨率不达标，店铺就无法在平台上面显示，店铺就没有办法经营。

3.辨识度

店铺内的以及文字等众多信息都应该有较高的辨识度，让店家一目了然上面的商品是什么，文字讲述的是什么，很多店主为了追求时尚特别，设置的字太小，字体模糊，文字信息颜色和背景冲图，这样消费者无法清晰的了解店铺，自然也没有购买欲望。

4.颜色与风格

主页的颜色一定要确定的合适，不要使用太多的颜色，一两种颜色搭配即可，因为繁多的颜色会让主页显得杂乱。风格方面一定要注意与商品风格搭配，不能够是销售的商品，却搭配一个中式风格，会显得太违和，效果一定是的。

5.主页的的主次顺序

主页设计必定会添加一些装饰元素，但是装饰元素不宜过多，且应该紧紧地围绕主题，要彰显主题，如此才能够正确的消费者找到想要的商品。

6.突出卖点

每一款商品都有自己的卖点，要想商品的销量好，就应该充分的展示商品的卖点，要有针对性的进行推营，也可以放几款商品引流，这样能够吸引到更多的消费者驻足。

7.导航栏要全面

导航栏是消费者了解店铺的关键，在设计方面要注意，可以按照用户的潜在分类，比如说商品品类、功能用处、消费力以及行为倾向等。

设计自适应网站页面时应注意哪些事项

一、什么叫自适应网站设计

顾名思义是指网页自适应显示在不同大小终端设备上，一次设计，普遍适用，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局。自适应网站设计也通常被大家称作做响应式网站设计。

二、自适应网站设计的优点

自适应网站设计可以在网页地址不变的情况下满足用户在不同设备上浏览访问的需求，同时方便网站内容的管理与更新、针对搜索引擎友好等特点，这也是自适应网站设计的优点。

三、自适应网站设计的缺点

通过众多的网站设计公司和网页设计师我们了解到自适应网站设计的主要有设计难、实现难、成本大三个缺点，也被大家称作通往自适应网站设计的三座大山。下面唯艺互动-高端网站设计就以我们网站设计的经验详细说说自适应网站设计中的一些缺点。

1、设计难

在自适应网站建设过程中，需要考虑的内容更为广泛，而且还有考虑其他方面的一些问题。比如可读性、区域面积及不同设备下运行的状态等。这对于设计师的要求甚高，这样导致要做一个完美自适应网站变得很难。

2、实现难

响应式网站主要是一HTML5、CSS3为基础，需要精通这两种技术的高手。现在能够将这两种技术运用到恰到好处的网站设计师并不多见，如果设计师对这两种技术不够精通，会导致就算设计师做出很棒的页面，但是实现以后，不会完全一模一样。

3、成本大

因为自适应设计需要对多个界面兼容、功能调试，导致整个制作过程需要UI设计师和前端工程师要不断磨合制作。而测试人员也要在不同的设备下对网站进行测试。自适应的网站需要有很多功能，比如界面的融合、功能的调试等，这些都是需要不断磨合才能实现，而这样的网站成本也就自然的比较高了。

以上就是自适应网站设计的优缺点分析，当然通过努力都是能够克服的，毕竟需求性高的网站成本都不低。

四、自适应网站设计的注意事项

1、将网页修改为百分比布局

当某个浏览窗口处于媒体查询固定的范围之外，网页就需要水平滚动才能完整浏览，而通过百分比布局可以页面元素根据窗口大小在一个又一个媒体查询之间灵活修正样式，具体来讲，就是css代码不会指定具体像素宽度：width:xxxpx;而是会指定一个百分比宽度：width:xx%;或者直接就是width:auto;这里大家可以根据一个简易的公式将固定像素宽度转换成对应的百分比宽度：目标元素宽度÷?上下文元素宽度?=?百分比宽度

2、要阻止移动浏览器自动调整页面大小

iOS和Android浏览器都基于webkit核心，这两种浏览器以及其他的很多浏览器都支持viewportmeta元素覆盖默认的画布缩放设置，只需在HTML的标签中插入一个标签，标签中可以设置具体的宽度(如像素值)或者缩放比例2.0(设备实际尺寸的两倍)，下面是将一个页面放大到设备实际尺寸两倍显示的meta标签示例:

3、用CSS如何控制网页中自适应大小

在设计自适应网站页面时自动适应大小是一个非常常用的功能，在进行制作的时候为了防止撑开容器而对的尺寸进行必要的控制，我们可不可以用CSS控制使它自适应大小呢？

4、用em替换px

目标元素宽度?÷?上下文元素宽度?=?百分比宽度这个公式也适用于将文字的像素单位转换为相对单位，值得注意的是，现代浏览器的默认文字都是16像素，因此一开始给body标签应用下列任何一条规则所产生的效果都一样:

5、要主要流动布局（fluidgrid）的使用

“流动布局”指的是各个区块的位置都浮动，不是固定不变的。

.main{float:right;width:70%;}

.leftBar{float:left;width:25%;}

这么做的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向溢出，避免了水平滚动条的出现，大大提升了用户的阅读体验。另外，定位（ition:absolute）的使用，也要非常小心。

以上就是唯艺互动高端网站设计在自适应网站设计过程中总结整理出来的一些资料，希望能够对您有所帮助。