电商详情页设计规范-电商设计有哪些基本规范?

页面尺寸规范

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

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

文字规范

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

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

颜色规范

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

版式规范

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

广告语规范

广告语要注意极限用语的应用。根据广告法,极限用语不得出现在商品列表页、商品的标题、副标题、主图、详情页以及商品包装等位置。

什么是设计规范

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

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

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

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

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

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

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

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

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

如何搭建设计规范

1.搭建时间

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

2.搭建的要点

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

设计详情页时需要注意哪些问题?

什么是详情页?

详情页是产品内容的体现,是商家展示产品信息及卖点的页面,是体现产品内在美、容易使客户产生共鸣的页面。产品详情页要与产品主图、产品标题相对应,产品详情页必须真实介绍产品的属性。一个完整的产品详情页的作用就是告诉消费者产品是什么。产品的价格、外观、功能,以及产品与同类竞争者相比较的优势等。详情页一般由以下部分组成:首图 Banner、产品信息、产品外观展示、产品细节展示及产品功效介绍等。对于每个不同的产品,都有其自己定义的详情页。作为电商首先的一个工作就是要把商品详情页设计好,只有这样才可能吸引越来越多的用户去浏览。一张好的详情页可以大大的提高店铺转化率。

详情页设计对于公司和产品的重要性:

1、聚焦产品的卖点和亮点

同一种产品如何在众多商家中脱颖而出,详情页很重要。用户浏览产品时间短暂,详情页是否聚焦卖点和亮点,是否满足客户需求,是否解决客户顾虑点,影响着客户是否继续关注后续内容以及是否有购买行为。

另外详情页是用户完整使用产品时必经的页面,产生关键的产品数据,比如:内容型产品,会在该页面产生阅读量、播放量等;电商型产品,引导用户做购买决策等。详情页吸引力越高,用户停留的时间就会越长,所以产品详情页设计不光要有良好的视觉效应,还要有缜密的构思、精美的排版,对客户做积极引导,将直接影响产品交易的转化。

2、展现公司实力和强化信任

产品详情页是核心的展示区域。要让客户真心地放心地购买产品,产品详情必须展现企业的实力和产品的可信程度。

优质的产品详情页能够展现企业规模、产品细节处理、特色之处、设计过程、制造流程,并注明产品鉴定方法、使用方式、注意事项等,体现企业对顾客的真诚。另外产品详情页布局的每一个屏设计紧密结合材质、功能、尺寸等产品信息,不能过度修饰,若造成与产品本身相差甚大,不仅使得客户反感没有欲望,还会失去大量客户。

3、 产品详情页能够激发客户购买欲望

产品展示只能是客户间接感官,不能直接接触。因此,客户有无购买欲望与产品图片、产品描述等详情质量决定的。

产品详情页架起了客户与产品深度了解的桥梁,吸引买家深入了解产品,或者引导买家浏览店铺中的其他商品,已达到进店流量的利用做大化。对店铺的销量起着很重要的作用。优质的产品详情页能够对客户的购买行为产生正面积极影响,能够激发客户消费欲望,树立信任感,促使客户下单。即产品详情页承载了店铺的流量和公司的订单量。

设计详情页需要注意的内容:

在商品详情页是吸引客户购物的前提下,将各类关键要素最有效地进行合理的规划设计是落实核心设计策略的第一步。常见的商品详情页,设计时主要注意的内容包括视觉要素、品牌要素、商品要素、服务要素、营销要素和互动要素。

1、视觉要素

重视觉营销服务,通过视觉提升整体导购环境质量及感官体验。详情页设计所用图片、文案、字体、排版、配色等诸多因素的整体风格都需注意。通过高质量的详情页的视觉效应,第一时间抓住消费者的眼球。还有注重烘托符合产品特性的氛围,使产品在特定环境中的使用状态的表达更容易使消费者产生共鸣。

2、品牌要素

并非单指商品所属的某个品牌,而是指在商品详情页上,所展示出的品牌特征性,包括商家的信誉水平、商家认证资质、服务评价及评分状况、商品品质等。注重商品品牌与品质的塑造,这是构建消费者信任度的基础,无论是什么类型的商品详情页,构建信任度是消除用户购物顾虑的关键因素。

3、商品要素

包括商品的标题、商品图片、规格参数价格、库存、功效、工艺、品牌、品质、使用场景等。商品要素是详情页设计过程中的核心要素,通过商品要素的各类信息展示,能向消费者传递商品的价值性。

整个商品详情页,需要合理地排版布局商品要素的各类信息,让消费者对商品的了解由浅入深,由不信任到产生购买兴趣,从而逐渐影响消费者对商品的认知。

4、服务要素

与商品要素紧密相关,商品详情页必不可少的部分,服务至上是建立消费购物信任度的关键。无论是实物类商品还是虚拟商品,在电商平台的销售过程中,都必须附带上丰富的、高质量的销售服务,通过让消费者感知销售服务的质量水平和便捷性,进步提升消费者购买商品的决策信心。

5、营销要素

主要是指商品的促销活动与优惠政策,以及商品的各类关联推荐等营销元素,常见的营销要素包括促销信息、促销标签、优惠信息、返利、奖励、赠品等。注意营销技巧的合理运用,无论是促销工具还是价格工具,核心都是为了最大化吸引消费者的注意力,影响消费者的心理。

6、互动要素

主要是指在商品详情页的浏览过程中,提供给消费者进行人机互动操作的功能元素。无论是浏览、分享、下载、收藏、还是加入购物车或直接购买,都应让这些工具便捷地出现在消费者的视野中,让其随时随地能基于场景进行高频的互动操作。