电商品牌版式与视觉设计(全彩)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

产品详情页

产品详情页离客户转换只差一步了。这里让用户集中注意力是非常关键的,必须保证购买行为简单直接,在结账前主动消除顾客的基本疑问,并保障安全的购物环境。眼球追踪研究提出的F型阅读模式在这里也起到作用。

1.面包屑导航

“面包屑”这个名词借用自童话故事《糖果屋历险记》(Hansel and Gretel),在这个故事里面包屑被用来标记路线。面包屑路线是电商网站的实用性原则的一部分,用户能轻松返回并了解网站的结构。

2.产品名称

产品名称最好是完整、精准的,以完善页面整体性及提高网站的搜索引擎优化。

3.产品图片

一张大的产品主图已经足够表达了。其他值得增加的元素还有放大功能,以及可单击的缩略图,这些图片可以展示产品的不同角度、细节以及使用中的状态,甚至可以是视频。有的网站会在下方放置社交媒体分享按钮,不过前提是不能比购物CTA按钮更抢眼。

4.价格

购买区中的价格当然是展现产品单价的位置,不过有的网站会在旁边增加一个对比价格,也就是原价或建议零售价,甚至以强调节省的金额来增加购买欲。

5.产品描述

一个简明的产品描述起到了补充作用,不过有时候为了避免信息拥挤,也可以选择隐藏起来,或移到产品图的另一边,又或者与标示产品的详情合并。

6.选项区

这部分应当只列举完成购物所必需的选项,例如尺寸、颜色和数量。

同时,对尺寸和颜色选项进行视觉化会起到很大的作用——缩略图或者格子就是比较流行的格式。如果选项比较多,可以考虑用下拉菜单方式。此外,主图根据颜色选择来变动也是很好的体验点。为了尽量减少选项,有的网站会把“数量”一栏设置默认为“1”,客户需要的话相应可以增加数量。

7.加入购物车

简而言之,这个按钮需要最多的关注,不管是对设计师还是用户。人们提出了许多的策略来创建高效的购买行为召唤,其中就有对比色(突出按钮)、大尺寸(横跨购买区)和圆角处理(看上去可单击)。

8.其他信息

其他可添加的有用信息包括客户评价等级、尺寸指南、库存数量、运费优惠、预计送达时间、折扣倒计时和加入收藏。这其中一部分内容可以提供链接让用户跳到页面下方的产品详情或者客户评论。

9.产品详情

这个版块提供产品全面而详细的信息,以便帮助用户做购买决定。这里的文字同样为搜索引擎优化起到很大的作用。最常用的呈现方式是选项卡面板,每一个选项卡分别表示“产品概述”“规格”“运费及退货处理”或者“使用说明”等。

10.客户评论

显示其他客户的购买体验作参考是一种有效的销售方法。这部分有时候可以与产品详情合并。

11.交叉销售或追加销售

无论是在实体店还是网店,产品推荐对卖家和买家都是有利无害的。在这个页面中(在购物车页面亦是),介绍最为相关的产品是充分利用用户购物心情和提高订单平均金额的关键。一般放“同类产品”“其他用户也浏览了”“相关搭配”“猜你喜欢”等。

设计案例赏析

部分案例需打开网页查看全部布局。也有网址已更新,布局不同,请参考下方框架图学习即可。