项目概述
客户是一家专注于无人机、航拍设备、配件及行业解决方案的专业零售品牌,产品覆盖消费级无人机、专业级设备、零部件以及企业级应用,目标客户既包括无人机爱好者,也包括专业摄影师和企业采购用户。随着产品数量和业务规模不断扩大,原有网站在分类导航、产品信息层级和品牌专业感方面逐渐无法满足需求,因此客户找到我们,希望基于 Shopify 平台重新梳理整站视觉与购物体验。项目重点包括首页视觉设计、产品分类结构、产品详情页信息展示、品牌信任内容以及整体视觉规范,通过更清晰的页面层级和专业的科技感设计,降低用户浏览复杂产品时的理解成本,同时强化品牌可信度与转化能力。
| 服务项目 | 所属行业 | 所属平台 |
| 网站设计以及装修 | 数码3C | shopify |
| 项目需求 | 目标市场 | 设计风格 |
| 提升网站整体视觉品质与品牌辨识度 | 全球 | 专业科技|硬朗商务|产品导向 |
| 项目预算 | 交付内容 | 交付时间 |
| ¥16000 | 网站搭建以及全站页面设计 | 23个工作日 |
项目挑战
本项目最大的挑战在于无人机产品型号多、参数复杂、配件分类庞杂,如果页面结构不够清晰,很容易让用户产生信息负担,影响产品查找与购买决策。同时,专业无人机用户非常关注性能参数、兼容性和应用场景,网站既要体现科技感,也要保持较高的信息可读性。项目启动前,我们首先梳理了客户现有产品体系、核心销售品类和目标用户群体,并对同类无人机品牌及电商网站进行视觉与结构调研。随后,我们重新规划 Shopify 网站的信息架构、首页内容顺序、产品分类逻辑和重点转化路径,并提前整理图片素材、产品卖点及页面内容,为后续整站视觉设计建立统一的设计方向。
理解品牌定位与市场位置
在开始页面布局或视觉设计之前,我们首先将重点放在理解品牌的市场定位上。
Drone Nerds 所处的是一个具有以下特点的行业:
- 产品技术属性较强,且通常客单价较高
- 客户在购买前需要建立足够的信任感
- 产品教育与信息清晰度对转化至关重要
关键观察
- 产品目录较为庞大,涵盖无人机、配件、零部件及组合套装
- 用户群体跨度较大,从初学者到企业级采购用户都有
- 不同产品之间的差异,仅通过外观往往并不容易直观判断
设计上的启示
我们需要重点解决以下问题:
- 简化用户的购买决策过程
- 强化品牌的专业性、可信度与行业权威感
- 降低用户在浏览不同页面时的信息理解负担
首页设计:快速建立信任与清晰认知
首页通常决定用户对品牌的第一印象。因此,我们的设计重点是打造一个结构清晰、信息明确的页面,让访客在进入网站后能够立即感受到品牌的专业度。
首屏区域:用专业感取代信息堆叠

我们没有使用大量促销信息,而是将首屏设计得更加简洁,主要包括:
- 展示高质量的无人机产品视觉
- 使用简洁、自信的品牌文案
- 优先引导用户进入产品分类,而不是突出折扣促销
为什么这样设计
无人机行业的用户通常不会因为强烈的促销信息立即做出购买决定。
相比之下,他们更关注产品是否专业、信息是否清晰,以及品牌是否值得信赖。
分类导航:减少浏览阻力

我们围绕不同用户需求,对首页的产品入口进行了清晰划分,包括:
- 消费级无人机
- 专业级无人机
- 配件与零部件
- 企业级解决方案
每一个分类模块都采用:
- 统一的视觉框架
- 简洁明确的分类描述
- 避免一次性展示过多复杂信息
信任建立模块

我们在首页中加入了多个模块化的信任内容,用于进一步强化品牌可信度,例如:
- 品牌合作伙伴
- 产品认证与质保信息
- 客户服务与售后支持
这些模块在视觉上保持简洁,不抢占产品内容的注意力,但会被放置在关键浏览节点中,为用户持续建立信任。
产品详情页设计:将复杂信息转化为清晰体验
产品详情页是真正发生购买转化的地方,同时也是很多无人机网站最容易出现问题的页面。
由于产品参数较多,如果信息没有合理规划,很容易造成严重的信息过载。
建立清晰的信息层级
我们重新规划产品详情页的信息展示顺序,使用户能够按照自然的浏览逻辑逐步了解产品:
- 以产品视觉为核心的图片展示区
- 首屏可见的核心参数摘要
- 易于快速浏览的详细规格模块
- 与实际应用场景结合的产品内容
用视觉化表达代替技术信息堆积
相比将所有参数集中展示成长篇文字,我们采取了更加易读的方式:
- 将复杂信息拆分为多个独立模块
- 通过图标和留白引导用户阅读
- 突出产品在真实场景中的应用价值
这样可以让普通消费者更容易理解产品,同时也不会影响专业用户查看关键参数。
以转化为目标的页面元素
为了降低用户购买过程中的犹豫,我们进一步强化了关键转化元素,包括:
- 吸顶或固定式加入购物车区域
- 清晰展示价格与库存状态
- 简化产品型号与规格选择
核心目标是尽可能减少用户在每一个购买步骤中的迟疑。
产品集合页:从产品目录转变为引导式购物体验

对于产品数量较多的网站来说,集合页很容易变成单纯的商品堆积页面。
我们的设计重点是将集合页从传统产品目录,转变为更具有引导性的购物体验。
核心优化
主要优化内容包括:
- 使用整洁统一的产品网格布局
- 保持产品卡片之间一致的间距和视觉规范
- 减少不必要的标签、徽章和辅助信息
筛选与浏览体验
在筛选功能方面,我们没有加入过多复杂选项,而是优先保证:
- 产品分类清晰
- 商品分组逻辑合理
- 页面内容便于快速浏览
这样可以让用户更快找到符合需求的产品,减少浏览过程中的阻力。
设计系统:保持整个商城的一致性
本项目中一个重要的工作,是建立一套完整且统一的网站设计系统。
通过统一视觉规范,我们可以确保首页、产品页、集合页及其他页面之间保持一致的品牌体验。
字体系统
字体方面主要遵循以下原则:
- 使用简洁、现代的无衬线字体
- 建立清晰的标题与正文层级
- 保持统一的文字间距和阅读节奏
色彩策略
整体色彩以中性色为基础:
- 白色
- 灰色
- 黑色
强调色只在关键位置少量使用,将视觉重点更多留给产品本身,而不是使用过多装饰性颜色。
组件统一
我们进一步统一了网站中的常用组件,包括:
- 按钮
- 产品卡片
- 模块间距
- 图标风格
通过统一这些基础元素,整个网站能够在不同页面之间形成更加流畅、专业且一致的用户体验。



