清楚的第一屏
让第一次来的人立即看到两条路径：想轻松打球，或想接受指导。
01
更鲜明的俱乐部识别
02
更清楚的参与入口
03
更顺畅的手机浏览
01 / THE OPPORTUNITY 球馆的精彩，
球馆的精彩，
旧网站还没讲清。
Pymble Table Tennis Club 在 Ku-ring-gai Town Hall 运营，欢迎从休闲运动、初次学球到准备参赛的不同年龄球友。俱乐部拥有教练指导、青少年活动、假期训练营与社区赛事，但旧网站由大幅图片和新闻主导，新访客需要自行寻找参与方式、费用与时间。“不是“把页面做漂亮”，而是让人看懂自己能怎么参与。”
01
我可以来打球吗？
休闲打球和首次到访的入口在首屏更清楚。
02
我能跟谁学？
教练、课程与青少年活动各有独立路径。
03
第一次来怎么安排？
费用、场次、位置和联系办法更容易找到。
02 / BEFORE & AFTER 同一个俱乐部。
同一个俱乐部。
不一样的第一眼。
我们保留了俱乐部已有的活动与信息，把浏览顺序从“先看公告”调整为“先找到自己的参与方式”。切换下方视图，了解首页、费用和手机端的设计决策。
改版前 PTTC / ORIGINAL
信息存在，但需要访客自行整理。
- 宽幅图片占据首屏
- 公告／最新消息靠前
- 打球、学球入口藏在后面
改版后 PTTC / REDESIGN
问题先回答，下一步更清楚。
- 俱乐部识别与运动主题明确
- 首屏分别进入休闲打球和教练指导
- 训练营、比赛、费用与到访导航分工明确
改版前 PTTC / ORIGINAL
信息存在，但需要访客自行整理。
- 费用和会员说明埋在长段文字中
- 不同课程时长需要来回对照
- 联系前仍要花时间核实
改版后 PTTC / REDESIGN
问题先回答，下一步更清楚。
- 入场、会籍、课程分区展示
- 每项价格与计费单位并列
- 快捷入口帮助访客比较和计划
改版前 PTTC / ORIGINAL
信息存在，但需要访客自行整理。
- 桌面型大图挤占手机第一屏
- 菜单后才逐步找到入口
- 重要行动按钮出现较晚
改版后 PTTC / REDESIGN
问题先回答，下一步更清楚。
- 先呈现标题和清楚的行动入口
- 先选打球或学球，再看视频
- 手机上更容易触达路线与费用
03 / EXPERIENCE DESIGN 有运动感，
有运动感，
更要有方向感。
设计不是为了装饰。每一个变化，都服务于参与和到访。
透明的费用组织
不改动收费内容，而是把入场、会员、课程放到便于理解与比较的位置。
让年轻人想继续看
运动影像、青少年活动和比赛故事传达活力，TikTok 与小红书等渠道也能连接回网站。
更可访问的交互
按钮与标题更好辨认，并为不喜欢持续动态的人提供控制空间。
04 / EVIDENCE & MEASUREMENT 视觉更丰富。
视觉更丰富。
访问不必更沉重。
以下是两版首页在模拟较慢的手机网络下，各完成三次冷加载测试所得到的中位数；包含第三方脚本。不代表真实用户现场数据。
~89% JavaScript 传输量减少（模拟测试）
LCP · 最大内容绘制
主要可见内容更早出现
9.59 秒
2.06 秒
FCP · 首次内容绘制
页面更早开始呈现
6.13 秒
1.16 秒
JavaScript 传输量
约减少 89%
1.63 MB
0.18 MB
CLS · 布局偏移
加载时内容移动更少
0.040
0.003
三次匹配手机测试的中位数 · 2026-10-11 · 模拟较慢网络. 这些指标不代表真实用户数据，不应据此推算转化率。
05 / INCLUSIVE BY DESIGN 让更多人，
让更多人，
都能用得顺。
同条件的自动化首页可访问性检查，旧版检测到 2 类问题，新版没有检测到违规项。自动检查并不等于完整的 WCAG 合规审计，仍需人工复核。
AUDIT NOTE
同一套自动化检查
仅针对相同工具、相同测试范围的首页自动检查结果，不代表整个网站无可访问性问题。
2 类问题 改版前自动检查
0 项违规 新版自动检查
James Wong
俱乐部主理人兼主教练 · Pymble Table Tennis Club
06 / THE CLUB’S PERSPECTIVE 让新一代球友，
让新一代球友，
看见这个社区。
“Kai 给我们设计的新网站，拉近了我们和年轻人的距离，完美体现了我们的诉求。”
俱乐部主理人 James Wong 在原项目访谈中强调，乒乓球属于不同年龄的人，而网站应该帮助年轻球友及家庭认识这个社区。
THE LONGER VIEW 项目交付的不是“新版网页”，
项目交付的不是“新版网页”，
而是一条更清楚的参与路径。
对社区组织而言，网站不需要像大型电商那样复杂。它需要让真实活动更有吸引力，把费用和到访信息讲清，并且让手机端和辅助技术用户也能顺利使用。
Coco / BUSINESS-FIRST DESIGN
你的网站，也该让下一步更容易。
如果访客还得自己找服务、猜怎么开始，可以从一次简单的网站体验评估开始。