一个完整的产品详情页的作用就是告诉消费者产品是什么?产品的价格、外观、功能,以及产品与同类竞争者相比较的优势。详情页一般由以下部分组成:首图 Banner、产品信息、产品外观展示、产品细节展示及产品功效介绍。此外还可附上名人推荐、行业证书、物流信息、买家秀及售后说明等相关信息。
产品详情页要与产品主图、产品标题相对应,产品详情页必须真实介绍产品的属性,设计师不能单纯追求画面效果与产品真实情况背道而驰。
详情页的板块内容
对于一般店铺或品牌来说,一个完整有效的详情页应该是这种思维结构:先用首图抓住消费者的眼球,紧接着通过各种功能讲解让消费者了解产品,美图展示让消费者深陷其中,从而让消费者意识到此次购买行为的必要性,再乘热打铁给出详细使用说明或专家建议,最后给出一些口碑推荐及品牌认证打消消费者最后的信任顾虑,结合店铺评价、产品价格,最终促成消费者下单购买。
设计详情页之前要充分进行市场调研,既要对同行业进行调查,找到自己在同一品类众多与众不同的亮点,又要对消费者进行调查,分析并掌握潜在消费者对消费水平、消费习惯与喜好,力争在最短时间与消费者达到共情,从而促成消费者的购买行为。
市场调查的目的就是完成产品的定位,弄清楚产品的卖点,这对接下来具体完成详情页的设计至关重要,决定了设计素材准备的方向,以及详情页所用文案、字体、排版、配色等诸多因素的整体风格。详情页的设计还有注重烘托符合产品特性的氛围,产品在特定环境中的使用状态的表达更容易使消费者产生共鸣。
详情页的文案类型
详情页的文案对于设计详情页来说尤为重要,因为文案与产品和详情页的设计风格息息相关。换句话说,文案相当于解说员根据产品气质的解说,产品气质不一样那么文案给人的气质也就不一样。具体地说,详情页的文案根据产品特性不同有以下一些表现类型:
拟人式。就是将产品拟人化,以产品的口吻来自我推销,适用于走亲和力路线的品类,类目不限。
自嗨式。直白地说就是用一堆拗口的形容词修饰产品,适用于走高端严谨路线的类目,类目不限,比如数码科技、服饰鞋包、护肤美妆等。
搞笑式。此类文案画风往往比较逗比或者无厘头,让人感觉很过瘾,适用于任何可以拿来搞笑或恶搞的类目,比如一些二次元周边产品、生活用品等等。
文艺式。这种文案给人一种深入骨髓的文艺气息,适用于任何走文艺路线的类目,比如茶叶、家居服饰、鞋包等。
耍酷式。这种文案给人一种你买了我的产品你就是天下第一酷,你最拽、你最与众不同的感觉,适用于定位叛逆期的青少年们的类目。
卖萌式。给人乖巧可爱的感觉,尤其是反差萌文案效果最好,让人忍不住想要多看几眼或分享给朋友,比如故宫淘宝,那些皇帝和娘娘们给人的感觉明明是很高冷的形象,画风却萌,一下子拉近了与消费者之间的距离。
平淡式。这种文案比较直白保守,给人中规中矩和呆板无趣的感觉,大部分反响平平的店铺详情页文案基本也都是这类的,大众化、没创意,无法与消费者产生任何情感共鸣,好处就是省事不啰嗦,很纯粹的一手交钱一手交货的买卖关系。
详情页的设计规范
详情页设计说简单也简单,说难也难,因为除了要设计得让消费者有购买欲望以外,还得注意用户体验,防范字体和素材是否侵权了,还得避免使用极限词违反广告法被投诉,为了避免以上情况的发生,详情页的设计要有一定的规范,也就是注意事项:
详情页的尺寸。详情页的尺寸分为宽度和高度两个方面,一般来说高度不限,而宽度的设定受到两方面因素的影响。不同的输出端详情页的宽度不同,如 PC 端和个人移动端;不同的电商平台详情页的宽度也有所不同。例如:在 PC 端,某猫的详情页宽度是 790px、某宝 750px、某东自营 750px、某东第三方 790px;在移动端,详情页的宽度设定在 750px 与 1242px 之间,也有人直接拿 PC 端 750px 或790px 宽度适配。
事实上,某猫、某宝、某东等平台每改版一次详情页的尺寸就会有相应变化,而随着大屏幕手机的占有率越来越高了,平台的每次改版其实也是在顺应时代的发展需要,以及增加商家和用户的使用体验,因此,现在 PC 端和个人移动端的详情页尺寸基本通用了。
详情页的版式发展趋势。从一线城市到六线城市,移动端订单占比平均已达 80% 以上,甚至有一些比较极端的案例移动端订单占比高达 90% 以上,所以 PC 端详情页设计他们基本已经直接放弃了,而是着重打理移动端详情页。而用户在移动端浏览详情页和在 PC 端浏览详情页体验是不一样的,比如手机屏幕基本都是竖屏的,而且尺寸偏小,一只手掌即可掌握,而PC屏幕现在普遍都是23 寸以上,屏幕越来越大,基本是横屏,这也就衍生了一个移动端详情页设计要遵循竖版思维的理念,也就是文案以及产品图可能更适合上下排版而不是左右排版。
而且随着智能手机占有率和使用频率的提升,带来的是移动端订单占比的提高和各大电商平台的改版升级,对于商家来说工作量其实减少了,因为移动端变成了主战场,PC 端的详情页尺寸跟移动端是一样的,可以优先设计移动端,然后PC 端直接进行套用。