独立站DTC品牌出海如何做好网站UI设计

图片来源：图虫创意

Hello 大家好，我是Jack。

年后很多朋友来我公司聊天喝茶，谈到了独立站转化的问题。

其中聊到了通过热力图工具，查看客户访问网站的整个流程，最后发现好的UI设计可以大幅度提高网站转化率。

行业领先品牌网站设计分析

从根本上说，一个好的网站 UI 设计可以让用户轻松完成他们来到网站的目的，而不会感到迷惑。

例如，可以直观地将用户的注意力吸引到某个元素上的流畅、原始的动画交互，或者可以让用户感到平静的整洁的、干净的设计和巧妙地使用空白空间

Fossil

网站数据：

watch 关键词自然搜索排名第二，仅次于Apple。网站每月访问量910万（数据来源similarweb）

图片来源：similarweb截图

电子商务：

使用Salesforce Commerce Cloud

User Interface

pop-up window

进入网站一分钟左右的时间弹出弹窗，展示网站折扣信息：

25美金off 加粗加大，75美金的订单缩小；

Button 区别网站基础色，使用全黑色做强调

Button 文案直接明了，给用户明确的信息

图片来源：fossil 截图

网站首页banner

网站基础颜色使用黄色系，温暖明亮

highlight：

右上角订单状态查询，提高用户体验，增强信任度；

滚动banner和导航栏中间插入网站折扣信息，醒目直接

右侧shop hers, shop his通过产品使用性别来给用户指引，进行分流

banner图片温馨，且包含标题及button

图片来源：fossil 截图

导航设计有趣

highlights

横向导航和竖向导航交互包含，可以使用到PSV导航构建：

比如 Women ;Men ; Fashion；Business; Fitness; Sports

竖向的导航，同样包含以上内容

图片来源：fossil 截图

产品聚合页面

具体产品可以筛选

右侧featured可以从另一个维度筛选：best sellers, nwe arrivals

用户展示

每个产品落地页面下面有一个用户showcase版块，用户可以拍摄使用产品的场景照片

这种类型的照片分享，也可以自己拍摄并上传

图片来源：fossil 截图

Kospet

网站数据：

网站月访问量71.9K

图片来源：similarweb 截图

电子商务：

使用Shopify Focal 主题

图片来源：kospet 官网截图

User Interface

网站首页banner

常规滑动banner

banner图片上面做button设计，不是真实button

图片来源：kospet 官网截图

能动性高，反应快速

对于节日促销活动，能够快速反应并上架

图片来源：kospet 官网截图

视频展示展品特性

通过视频展示产品使用场景，生产测试流程，提高用户对产品质量的信任度

图片来源：kospet 官网截图

In-house affiliate平台

增强用户及网红合作

图片来源：kospet 官网截图

产品聚合页产品动图展示

给用户全面的展示手表的外观

图片来源：kospet 官网截图

详情页最后的相关产品推荐

为其他的产品引流，增加页面互动

图片来源：kospet 官网截图

作者简介：好学的Jack

所在地区 深圳龙华

公司/Title 深圳市逊杰科技有限公司CEO；好学的Jack 公众号博主

自我介绍：好学的Jack，深耕外贸和跨境电商7年，一线实战派，长期主义者和终生学习者，坚信复利的力量。

现在在深圳创业，是一家初创公司的CEO。

统筹策划过3000万+RMB海外众筹项目，运营过年销售额过5000万RMB独立站，带过20+外贸运营推广团队。

擅长从0到1搭建海外推广团队，统筹运营品牌外贸独立站，搭建部门体系，完善OKR，熟悉绝大部分海外营销推广玩法。

公众号：好学的Jack，等你来聊。

（来源：好学的Jack）

以上内容属作者个人观点，不代表雨果跨境立场！本文经原作者授权转载，转载需经原作者授权同意。​