KOSPET 网站走查与功能模块框架全案:从 Shopify 迁移到全站优化

ZBANX 页面走查案例

KOSPET 网站 走查与模块框架 全案

从功能模块框架到全站走查验收,ZBANX 逐模块定义开发方案、逐页面审计问题并闭环。以下内容完整还原两个核心工作表——《Zbanx-网站功能模块框架(12.28定稿)》《Zbanx-网站走查》—— 每一行文字、每一列信息、每一张截图无一遗漏。

🌐 网站全局 · 5 模块
🏠 首页 · 12 模块
📂 类目页 · 3 模块
📦 商详页 · 5 模块
🔖 6 种标签规则
🔍 22 项走查问题

🔍 01 · Zbanx-网站走查 · 全站功能审计(共 22 项)

走查覆盖 网站整体(7项)、首页分析(4项)、类目页分析(2项)、商详页分析(3项)、购物车页(1项)、活动页面(2项)共六大维度。每一项包含:调整项(C列)、问题描述(D列)、优化建议(E列)、品牌方反馈(G列)、对应区块/链接(H列)及现场截图。发现问题后,再通过功能模块框架逐一解决。

【网站整体】
1、核心价值:保持网站整体性、各端口协调性、保证重点国家市场用户阅读体验良好、政策描述各页面统一
2、重点:网站有统一VI指导规范(字体、配色、按钮、风格、间距)
3、运营指向性:建立初步信任,激发购物兴趣
🔧 调整项(C列)
不同端口适配问题
⚠️ 问题描述(D列)
1.导航栏内容过多,图标多样,高度不统一,非常混杂
2.移动端左右侧安全距离不够,容易被裁切
💡 优化建议(E列)
1.统一导航栏图标及文字高度,使其和谐统一
2.移动端左右预留15-20px的安全距离
📋 品牌方反馈(G列)
kospet image60kospet image61
🔧 调整项(C列)
整站文案/图片/按钮
⚠️ 问题描述(D列)
1.没有实现图文分离,无法适配翻译插件
2.图片设计没有留出足够安全距离,导致主产品被裁切、CTA按钮被遮挡
3.移动端没有适配合适的图片,导致文字等比缩小,阅读困难
4.按钮样式多样繁杂,整站没有统一性
💡 优化建议(E列)
1.尽量图文分离,以便翻译插件识别翻译
2.图片设计上下左右预留安全距离
3.不同端口适配不同尺寸的图片
4.按钮分类、同类按钮统一样式
📋 品牌方反馈(G列)
kospet image62kospet image63
🔧 调整项(C列)
语言及货币切换
⚠️ 问题描述(D列)
1.语言、货币切换分离
2.语言、货币选项过多(几十个选项),且重要市场不在前列
💡 优化建议(E列)
1.语言货币切换功能合并,统一为按国家切换对应的语言及货币
2.精简国家选项,重要市场放前列
📋 品牌方反馈(G列)
kospet image64kospet image65
🔧 调整项(C列)
弹窗
⚠️ 问题描述(D列)
1.没有订阅弹窗,订阅区块仅在页面最底部,触达率低
2.提示有订阅折扣但不明显,且订阅后未有折扣码展示
💡 优化建议(E列)
1.使用插件,开启有折扣提示的订阅弹窗
📋 品牌方反馈(G列)
kospet image62
🔧 调整项(C列)
Support
⚠️ 问题描述(D列)
1.缺乏最基本的Help Center
💡 优化建议(E列)
导航栏增加Support板块,包含FAQ、Manual Download、Order Track、Support Videos
📋 品牌方反馈(G列)
kospet image66kospet image67kospet image68
🔧 调整项(C列)
政策
⚠️ 问题描述(D列)
1.政策不全,缺乏支付政策
2.政策展示无法自洽:Warranty Policy实际上是退换货政策,但首页表示2年保修
3.发货配送时间3-30天不等,部分时间过长
💡 优化建议(E列)
1.补充支付政策
2.修改首页保修权益
3.建议优化发货配送逻辑
📋 品牌方反馈(G列)
品牌方将会统一调整,需另立专题文件沟通
kospet image69kospet image66
🔧 调整项(C列)
导航栏&Footer
⚠️ 问题描述(D列)
1.产品分类标准不清晰,分为坚固耐用系列及安卓系列
2.Footer缺乏产品类目、缺乏社媒列表
💡 优化建议(E列)
1.建议按使用场景、使用人群分
2.Footer部分增加产品类目
📋 品牌方反馈(G列)
kospet image70kospet image71
【首页分析】
1、流量结构来源:自然搜索、直接流量、广告搜索为主
2、页面核心价值:分流,指引,导购,建立初步信任
3、页面重点:网站背书、结构清晰、文案准确、按钮指向准确且引导性强

现状:引导性、文案准确性、板块架构完整性、易读性均存在一些问题

🔧 调整项(C列)
区块结构
⚠️ 问题描述(D列)
1.缺乏背书内容:品牌背书区块、顾客评论区块
2.各区块之间(特别是移动端)间距混乱,导致阅读割裂
💡 优化建议(E列)
1.增加品牌背书相关内容
2.调整各区块间,同一区块内各内容块间距
📋 品牌方反馈(G列)
kospet image60kospet image61
🔧 调整项(C列)
首页banner图
⚠️ 问题描述(D列)
1.上下左右安全距离不够,Banner文字与导航栏文字互相遮挡
2.活动重点权益不突出
3.移动端首Banner未单独配置图片,导致文案等比缩小,出现大片空白
💡 优化建议(E列)
1.Banner设计应留足安全距离、突出主权益、CTA按钮突出
2.M端单独设计配置图片
📋 品牌方反馈(G列)
kospet image72kospet image73
🔧 调整项(C列)
热卖产品瀑布流
⚠️ 问题描述(D列)
1.价格、折扣力度不突出
2.首图图片尺寸不统一,导致产品无法对齐
3.颜色区分不明显,排列不整齐
💡 优化建议(E列)
1.现价字体调大标红
2.统一各产品首图尺寸
3.去掉规格展示或者改为颜色图标展示
📋 品牌方反馈(G列)
kospet image74kospet image75
🔧 调整项(C列)
App介绍板块
⚠️ 问题描述(D列)
1.内容复杂不适合单独放在首页作为区块
2.几大功能在移动端没有引导切换按钮
3.下载按钮引导性不强,且点击后跳出,影响购物流畅性
💡 优化建议(E列)
1.APP区块单独建一个页面,入口合并进导航栏Support板块
2.需切换部分需要有切换引导按钮
3.APP下载入口放入产品手册
📋 品牌方反馈(G列)
新规划已将其合并至support页面
kospet image76
【类目页分析】
1、流量结构来源:首页、导航栏、商详页返回、广告指定落地页、活动页view more跳转
2、页面核心价值:尽可能呈现对应类的单品,易于顾客按需选择
3、页面重点:分类清晰,商品呈现完整,商品差异点突出,容易查询筛选
🔧 调整项(C列)
功能
⚠️ 问题描述(D列)
1.只能按价格及有无库存筛选,无法按标签及功能筛选
2.缺少优惠信息展示
💡 优化建议(E列)
1.增加按标签筛选功能
2.增加优惠信息展示
📋 品牌方反馈(G列)
kospet image77
🔧 调整项(C列)
单品展示
⚠️ 问题描述(D列)
1.价格、折扣力度不突出
2.首图图片尺寸不统一,导致产品无法对齐
3.颜色区分不明显,排列不整齐
4.手机端评论与价格间间距过宽
💡 优化建议(E列)
1.现价字体调大标红
2.统一各产品首图尺寸
3.去掉规格展示或者改为颜色图标展示
4.调整产品间间距
📋 品牌方反馈(G列)
kospet image78kospet image79
【商详页分析】
1、流量结构来源:广告、红人投放、首页、类目页、活动页
2、页面核心价值:完成销售闭环,促进下单转化
3、页面重点:商品卖点、价格清晰、购买保障清晰(支付方式、发货方式、保修承诺、退换货承诺)、优惠信息呈现、连带销售
🔧 调整项(C列)
购买区
⚠️ 问题描述(D列)
1.橱窗图只有单品展示,缺乏卖点图
2.描述冗长,不便于阅读
3.Shipping展示送货时间与Shipping政策不符,且提示跳转但无法跳转
4.缺乏支付方式展示
5.规格表意不明
💡 优化建议(E列)
1.增加卖点展示图
2.简化卖点,分点分行列出
3.Shipping政策整理成表格呈现
4.增加支付方式Icon展示
5.优化规格展示
📋 品牌方反馈(G列)
🔧 调整项(C列)
详情区
⚠️ 问题描述(D列)
问题不明显,可简化卖点描述
💡 优化建议(E列)
📋 品牌方反馈(G列)
🔧 调整项(C列)
连带销售
⚠️ 问题描述(D列)
缺乏组合购买推荐
💡 优化建议(E列)
增加组合购买推荐,每个单品绑定相关配件,促进连带提升,提高客单价
📋 品牌方反馈(G列)
kospet image80
【购物车页】
1、流量来源:加购、结账动作
2、页面核心价值:展示最终价格及购买保障,促进转化,完成销售闭环
3、页面重点:数量规格更改、优惠信息展示、结账按钮
4、运营指向性:促完成支付
🔧 调整项(C列)
购物车页
⚠️ 问题描述(D列)
1.无优惠信息截至时间展示
2.缺乏支付信息展示
3.手机端结账按钮非常靠后
💡 优化建议(E列)
1.增加优惠截止时间及支付方式和相关购买保障信息展示
2.简化信息使手机端结账按钮提前
📋 品牌方反馈(G列)
【活动页面】
1、流量来源:广告、红人、首页
2、页面核心价值:展示活动权益及活动时间,促进加购或分流
3、页面重点:优惠透传到位、优惠时间明确、主推品突出、重点CTA按钮突出,分流顺畅、活动氛围浓厚
🔧 调整项(C列)
日常活动页
⚠️ 问题描述(D列)
缺乏日常活动页
💡 优化建议(E列)
规划Weekly Deals、清仓促销等日常活动页,用以衔接大促之间的空档期
📋 品牌方反馈(G列)
建议在二级页面设置一个合集页
🔧 调整项(C列)
大促活动页
⚠️ 问题描述(D列)
1.促销方式单一
2.优惠持续时间不明显
3.活动氛围感不强
💡 优化建议(E列)
1.优化促销方案设计
2.优化产品展示(按适用人群展示、按应用场景展示)
3.增强活动氛围及倒计时促进加购
📋 品牌方反馈(G列)
🔗 链接(H列): https://kospet.com/pages/promotion

走查总结

全站 22 项问题中,品牌方已确认(✔)16 项,其余需专题沟通或已在后续规划中解决。每项问题均配现场截图,确保走查可追溯、可验证。以下功能模块框架即基于走查发现的问题输出解决方案。


📐 02 · Zbanx-网站功能模块框架(12.28 定稿)—— 针对走查问题输出解决方案

针对走查发现的导航栏混乱、图文未分离、语言货币切换繁琐、缺乏 Support 体系、Banner 安全距离不足、折扣展示不突出等问题,按 Shopify 最佳实践重新设计全站功能模块。覆盖 网站全局首页类目页商详页Footer特殊标签体系。每模块标注品牌方反馈(E列)、ZBANX 开发备注(F列)、对标网站参考(G列)及设计参考图。

🌐 网站全局

区块/内容(C列)开发重点(D列)品牌方反馈(E列)Zbanx备注(F列)参考图
Top Bar简短网站权益几条,一般常见写:新用户权益、包邮、保修之类的开发
Announcement Bar开发image339.png
导航栏(运营规划)品牌Icon、产品品类(下拉菜单 可放Image+文字、List、产品系列、单品)、Support(下拉菜单:FAQ/Track Orders/联系方式/产品使用说明书/政策之类的)、About Us(下拉菜单:品牌故事/News/Blogs/AFF)、Icon(搜索、购物车、账户、国旗Icon语言、货币切换)开发(语言货币分开转换 聚焦主流市场)image340.png,image341.png,image342.png,image343.png
Footer产品类目、Company、Support、Get in touch、Newsletter Signup、社媒Icon、支付方式图标、版权归属说明开发image364.png
侧边栏购物车/购物车页面产品(可加减数量 更改规格)、关联推荐产品、优惠信息提示、继续购物按钮、结账按钮开发image344.png,image345.png,image346.png,image332.png,image338.png

🏠 首页 (重点做网站分流,所有板块均可点击跳转)

区块/内容(C列)开发重点(D列)品牌方反馈(E列)Zbanx备注(F列)参考图
首页大banner主推重点单品、大促活动入口。首屏大banner需要有2个以上的样式:① 一行一个,图文结合;② 一行2个,图文结合。移动端可配置单独的素材和文案开发kospet image347kospet image348kospet image349kospet image350
类目及活动入口做为类目、常规活动的导航入口,固定版位,需要有按钮和交互开发kospet image351
特色类目展示① banner+商品的样式 ② 文字说明+商品的样式开发kospet image352kospet image353
活动专区带氛围条、倒计时的专属活动产品露出,如Weekly Deal/Monthly Deal/Flash Sale开发kospet image354
常规产品展示板块New arrival、Best Seller等板块,固定一行,PC端极限呈现4个,超出左右滑动,需露出购物车、折扣比例、收藏开发kospet image355kospet image356
产品力产品核心能力、技术实力、核心单品品宣视频等,点击至军工认证页面开发kospet image357kospet image358kospet image334
Product Gallery产品场景化展示板块,需能放图片或视频,视频不能外跳开发image359.png
品牌介绍品牌介绍概览入口,包括图+正文,点击跳转至about us落地页开发kospet image360
Blog板块露出3组blog文章概览,包括:图片、标题、正文概览等部分YTB TT测评考虑从顶部导航下拉入口进入开发kospet image361
售后无忧kospet image335kospet image337kospet image330
订阅条+弹窗设计弹窗样式:恭喜您已成功订阅kospet,请使用您的专属折扣码(CODE:XXXX)kospet image333kospet image331kospet image336

📂 类目页

区块/内容(C列)开发重点(D列)品牌方反馈(E列)Zbanx备注(F列)参考图
类目筛选功能类目筛选排序逻辑(运营出规范后再输出)开发kospet image362kospet image363
标签化聚合商品板块增加标签功能,可通过标签聚合出对应类目页
SEO内容区块增加类目的内容板块,以FAQ或Shopping Guide形式呈现,增加SEO内容

📦 商详页(移动端流量占比 74%,以移动端为优先)

区块/内容(C列)需求/开发重点(D列)品牌方反馈(E列)Zbanx备注(F列)对标网站(G列)
整体规划要求目前网站移动端流量占比74%,为了移动端交互体验,所有产品详情尽可能挪到商品头部区域右侧的内容模块下。由于内容较多,页面比较长,可做电梯直达功能;可做购买跟随条功能。

【购买信息区】0.橱窗图 1.标题:品牌名+型号+品类关键词 2.副标题 3.价格+评论星级和评论数 4.产品卖点 5.折扣信息展示 6.规格选择器 7.加购、购买按钮 8.运费+配送时间+配送地区(表格呈现)9.支付方式 10.产品参数 11.社媒链接 12.组合购买

【下方详情板块】1.Description 2.Parameters 3.Download 4.FAQ 5.包装清单 6.Reviews 7.Related products

1、图文分离 2、有视觉冲击感,增加3D动画素材或视频等 3、酷炫感和科技感 4、有大品牌调性开发+插件。电梯直达功能参考Anker。购买跟随条功能参考Anker。参数表部分可做成多产品对比的形式。https://www.glammane.fr / https://www.anker.com / https://us.eufy.com
移动端个性化要求移动端(PC板块购买区内容)模块可手动调整部分板块位置或折叠或隐藏部分模块
参数板块要求增加参数导入(富文本导入),需要适配所有类目,不要写太死
SEO内容区块增加单品内容板块,以FAQ形式呈现,增加SEO内容,呈现在商详页用户评论下方
商品标签化管理1.新增商品标签,可在商品后台配置,前台基于这类型商品标签在商品版位露出
2.商品上架时做tag标签配置,可通过标签聚合collection页面

📋 Footer 栏目明细(行 27-38)

品牌标

  • 品牌 Logo
产品类目

  • 1
  • 2
  • 3
  • 4
Company

  • About Us
  • Contact Us
  • News
  • Blogs
  • Affiliate Program
  • Reviews
Support

  • 产品使用手册
  • FAQ
  • 物流查询
  • Help Center
  • 隐私政策
  • 退换货政策
  • 物流政策
  • 保修和维修政策
  • 条款条件
Get in touch

  • 地址
  • 联系方式展示:邮箱/电话
  • 社媒图标
Newsletter Signup

  • 订阅区块
付款方式图标 · Copyright © 2023 品牌名 All Rights Reserved.

🔖 特殊标签体系 Badges(行 41-48)

标签(B列)类型(C列)打标规则(D列)展示规则(E列)示意(G列)
New自动化标签站内新品,上架时间为0-30天可自定义1.给每类标签设置开关
2.折扣标签加选项:仅展示折扣力度30%以前的标签
kospet image365
Sale自动化标签折扣标签,显示原价和划线价对比后的百分比折扣kospet image366
Sold Out自动化标签缺货标签,产品售罄时显示kospet image367
Limited手动标签限量产品标签kospet image368
Pre order手动标签站内存在预售商品时显示的标签
Custom Badge手动标签可在后台通过上传图片的方式自定义标签的样式、颜色等

备注(B48):1.不同类型的标签可分别自定义其颜色 2.可勾选每个标签是否显示 3.形状样式根据设计样式来


ZBANX 这伴科技 · Shopify 建站全案服务 · 数据来源《KOSPET网站改版框架》工作表「Zbanx-网站功能模块框架(12.28定稿)」&「Zbanx-网站走查」· 完整还原每一行、每一列、每一张图片