Back

独立站的购买页设计

概述

假在所有独立站中,受众特征决定了所有的设计逻辑。而受众,又是由品类决定的。
产品的特征会吸引对应的受众,我们的设计需要符合目标用户。

品类

假发 ,美妆类

目标受众

北美黑人

平台

Shopify

市场特征

假发对于黑人而言,是必须品。每个黑人都是发型专家,对假发的从小耳濡目染非常清晰。因此,该品类结合了日用品和美妆的特征。

生活与时尚用品

快速决策购买

外观导向的产品

场景化

常规DTC流程

对于高品质&技术含量的单品而言,往往标准的流程如下,通过一个极佳的产品详情页,来说服用户。

广告平台
AD Platform
详情页
Landingpage
购买页
Purchase Page
购物车
Shopping Cart
结算页
Checkout

假发DTC流程

而对于高频率购买,且用户很了解的品类而言。以上流程就非常的不合适。因此需要尽可能的缩短步骤。

广告平台
AD Platform
详情页
Landingpage
购买页
Purchase Page
购物车
Shopping Cart
结算页
Checkout
16+ Page

扩展阅读
假发品类报告

该报告介绍了用户的特征,决策逻辑等等

设计逻辑

通过热力图,以及品类目标用户的特征,设计了新的页面。解决了Shopify默认模板不合适的问题。有效的提升了页面转化。

默认模板无法满足需求

没有KSP标签
图片展示无分类
没有秒杀与倒计时组件
没有营销组件
没有价格的分期展示
没有套装或者赠品模块
Guide只有尺寸才有
物流信息很粗糙
没有悬浮按钮
….

热力图分析

前面3屏是用户停留时间最多的,特别是首屏,所以要把关键信息尽可能放在前面。

第一屏

  • 首图精选发质和高清图,吸引用户
  • 交互区吸引用户互动,产生更深印象
  • 自动轮播和视频,提升用户了解
  • 功能+细节+详情,让用户速览该产品

第二屏

  • 标题和标签方便用户快速识别产品核心信息
  • 突出优惠后价格,支持分期,购买消费门槛
  • 营销活动区,有多种优惠折扣,刺激消费欲望
  • 尺寸蕾丝都有Guide,让选型更加准确,减少退换货

第三屏

  • 配置活动营销专区,优惠力度大,吸引消费者
  • 配送时间更加精准,方便用户时间规划,提升购物体验
  • 提供丰富多样的支付选择,满足不同用户的支付习惯
  • 可通过产品信息和清单中,详细了解产品的具体参数、功能特点以及包装内物品等信息,帮助用户全面认识产品
  • 可通过品牌保障,了解为用户提供的相关售后服务,让用户购物更安心

购买页面的原型演示,可以点击操作

Tips: 以下内容为figma嵌入,请耐心等待加载,然后鼠标移入可滚动查看。

细节设计

根据每屏的问题,有一个前后的对比,更加直观地看出改版前后的区别

第一屏

热力图显示这是用户点击最高的区域,在橱窗图的设计与规范上,需要尽可能展示更多吸引力的内容来提升转化

橱窗图设计

用户是把橱窗图看成详情页的地方,了解商品详情

封面图演示,可以上下滚动查看内容

Tips: 以下内容为figma嵌入,请耐心等待加载,然后鼠标移入可滚动查看。

其他细节设计

根据每屏的问题,有一个前后的对比,更加直观地看出改版前后的区别

第二屏

热力图显示这是用户点击最高的区域,在橱窗图的设计与规范上,需要尽可能展示更多吸引力的内容来提升转化

第三屏

热力图显示这是用户点击最高的区域,在橱窗图的设计与规范上,需要尽可能展示更多吸引力的内容来提升转化

第四屏

热力图显示这是用户点击最高的区域,在橱窗图的设计与规范上,需要尽可能展示更多吸引力的内容来提升转化

UI Kits