案例研究 · 咖啡馆与精品咖啡 · Greenacre

Soft Sip

一家位于 Greenacre 的柔粉色咖啡馆，社交媒体粉丝众多，却没有网站。新网站给人走进店里的感觉：以照片为主，带点小奢侈，营业时间、菜单、外卖和咖啡车都只需轻点一下。

行业: 咖啡馆、精品咖啡与咖啡车
地点: Greenacre，悉尼西南区
上线时间: 2026 年 10 月
取代: 一个占位页面

项目需求

人人都能在 Instagram 上找到这家咖啡馆，别处却找不到

Soft Sip 在 Instagram 和 TikTok 上拥有大量粉丝，Google 评价也很多，却没有网站。搜索“soft sip menu”或“soft sip greenacre”只会进入营业时间互相矛盾的第三方信息页，而咖啡车 Soft Sip on Wheels 也没有地方接收活动咨询。

网站必须让人感觉置身店内：粉色、以照片为主、温馨。它还必须一键解答日常问题，并发布一套与 Google 一致的信息，让搜索引擎和 AI 助手不再靠猜。

目标

让人感觉像走进了咖啡馆
营业时间、地址、停车、菜单和外卖，一键即可找到
为咖啡车设立专属页面，并提供报价咨询渠道
发布一套与 Google 商家资料一致的信息

设计选择

粉色杯子、粉色店面和蓝色字体

配色直接取自咖啡馆自己的标志素材包，按原样使用并针对网页做了整理。网站明亮温暖，并以一抹浓烈的蓝色防止粉色变得过于甜腻。

配色

#edb2d1 柔粉色品牌粉色：主题色、照片方块、咖啡车板块
#fbeaf2 浅粉色交替区块背景与悬停状态
#d886b4 深粉色图标与点缀
#fff8fb 背景色略带粉调的白色，让普通区块也有店内的感觉
#0d499c 品牌蓝标题与主要按钮
#3d85c6 浅蓝色次要点缀色
#1a2238 墨色正文文字
#636b88 柔和灰备注与小字，已加深至各处对比度均达到 4.5:1

粉色搭配浓烈的蓝色是咖啡馆自己的组合，蓝色标题为页面带来结构感，而无需厚重的深色色块。

字体排印

标题

Outfit

700 字重，字距略紧：圆润友好的几何字母，与品牌的柔和气质相符。自行托管并预加载。

正文

System UI

在每部手机上都熟悉易读、显示迅速，无需下载任何字体。

Arial 后备字体按 Outfit 的实测宽度调校，因此每个首屏大标题在两种字体下换行位置完全相同，字体加载时不会发生任何偏移。

场景、菜单、咖啡车与移动端

全屏场景

每个首屏都是一张与可见屏幕等高的满版照片，文案位于左下方的柔和遮罩之上。首页读起来就像一组连续的画面，在画面之间轻柔吸附，从不强制跳转。

分区菜单

咖啡、招牌拿铁、抹茶、思慕雪与无酒精特调、早餐、午餐和甜点，每个分区都有自己的链接，点击后正好落在页眉下方。网上不标价格；带价格的菜单在店内和外卖应用上提供。

Soft Sip on Wheels

为婚礼、企业活动、市集和派对设立的专属页面：场合卡片、三步把咖啡带到您的活动现场、服务包含内容、相册以及咖啡车常见问题。

照片从不重复

基于咖啡馆提供的 30 张精选照片，按每处用途分别裁切，并由自动化测试检查一条规则：同一页面上不会出现两次相同的照片。

就地下单外卖

一个小巧的原生菜单列出 Uber Eats、DoorDash 和电话号码，无需离开当前页面。它在没有 JavaScript 的情况下也能使用，点击外部区域或按 Esc 键即可关闭。

在真实手机上测试

覆盖 360 到 430px 的视口，包括显示浏览器栏的矮屏幕；底部固定的拨号与下单栏预留了空间；刘海屏手机适配安全区域边距。

构建方式

信息只存一次，处处一致输出

手写 PHP 8.2，不使用 CMS、数据库或框架。站点信息、菜单、咖啡车、常见问题和重定向都存放在纯数据文件中，因此页脚、联系页面、结构化数据和 llms.txt 中的营业时间永远不会互相矛盾。

只排版屏幕上可见的内容

首屏以下的区块在访客接近之前跳过样式计算和排版。在一个含 900 个元素的页面上，这让主线程耗时减少了约三分之一，而跳转到菜单分区的链接依然能准确定位。

重量级内容按需加载

照片查看器在首次点击时才构建；联系页面上的 Google 地图在有人请求之前只是一张带“显示地图”按钮的图片。

照片从不放大

AVIF 和 WebP 尺寸从 480 到 1600px，绝不超过原图大小，并配有 JPEG 后备格式和准确的 sizes 属性。

有分寸的动效

照片在滚动经过时借助浏览器原生的滚动时间轴轻微漂移，仅在支持的浏览器中启用。悬停效果都有对应的键盘操作，开启“减少动态效果”后会关闭吸附和漂移。

一个表单，三类咨询

“预订咖啡车”会打开已预选咖啡车的联系表单，询问日期、地点、时间和宾客人数。以垃圾信息陷阱代替 CAPTCHA。

每个页面都有分享卡片

每个页面的分享卡片都使用该页自己的照片，标志和标题放在 WhatsApp 和 iMessage 裁切保留的中央方形区域内。

PHP 8
完整菜单
外卖链接
咖啡车报价
AVIF / WebP
CSP

搜索与 AI 答案

咖啡馆、菜单和营业时间，机器都能读懂

搜索引擎或 AI 助手回答“Soft Sip 现在营业吗？”或“菜单上有什么？”所需的一切信息，都只发布一次，并且始终一致。

菜单写进结构化数据

咖啡馆实体包含按日列出的营业时间、户外座位和无障碍通道等设施、菜系，以及包含每个分区和菜品的 Menu。

按人们的搜索方式命名标题

上线第一周后，菜单页面按人们的实际搜索方式重新命名标题，首页描述也写明了人们搜索时所用的区名。

值得收录的联系页面

Google 一直没有收录这个只有表单的页面，于是新增了“到店指南”板块，包含地址、停车、按日营业时间、外卖、团体预订和咖啡车。

为 AI 助手撰写

llms.txt 中的信息与 Google 资料完全一致，并列出每个菜单分区及其菜品，旁边还提供整个网站的全文版本。

{
  "@context": "https://schema.org",
  "@graph": [
    { "@type": "CafeOrCoffeeShop" },
    { "@type": "Menu" },
    { "@type": "MenuSection" },
    { "@type": "Service" },
    { "@type": "Offer" },
    { "@type": "WebSite" },
    { "@type": "BreadcrumbList" }
  ]
}

softsip.com.au 发布的 schema.org 类型，每个页面一个 JSON-LD 图谱。

成果

从占位页面到完整的咖啡馆网站

95+Lighthouse 性能（移动端）
100无障碍、最佳实践与 SEO
0布局偏移
7可被索引的页面

Lighthouse 数据：移动端，线上首页，测量于 2026 年 10 月 19 日。

查看线上网站：softsip.com.au

项目常见问题

关于 Soft Sip 网站的问题

没有找到您的问题？咨询工程师 →

为什么 Soft Sip 网站采用全屏照片场景？

Soft Sip 是一家人们通过粉色店面和层次分明的冰拿铁照片认识的咖啡馆，因此网站以全屏照片开场，每屏只讲一件事。页面在场景之间轻柔吸附，从不强制跳转；对于开启了“减少动态效果”的访客则保持静止。

顾客如何通过网站向 Soft Sip 下单？

每个页面都有一个“外卖下单”按钮，点击后会打开一个列出 Uber Eats、DoorDash 和咖啡馆电话号码的小菜单，无需离开当前页面。网上菜单展示所有分区但不标价格；带价格的菜单在店内和外卖应用上提供。

如何预约 Soft Sip on Wheels 咖啡车？

“预订咖啡车”按钮会打开已预选咖啡车的咨询表单，询问日期、地点、时间和宾客人数。咖啡车按活动单独报价，服务悉尼各地的婚礼、企业活动、市集、学校活动和派对。

照片众多的咖啡馆网站如何在手机上依然快速加载？

照片以 AVIF 和 WebP 格式、按每种屏幕所需的尺寸提供，页面靠下的区块在访客滚动到附近之前不会排版。Google 地图和照片查看器只在有人点击时才加载，从而让首屏保持快速。

网站如何让 Soft Sip 的营业时间与 Google 保持一致？

营业时间只存储一次，并从这一单一来源输出到页脚、联系页面、结构化数据以及供 AI 助手读取的纯文本文件中，与 Google 商家资料保持一致。只需在一处修改，所有地方都会同步更新。

更多作品

我们打造的更多网站

定制刺绣、DTF 印花与街头服饰 · South West Sydney

Google Reviews

What our clients say.

5.0 from 19 Google reviews

We have used Next Generation Networks for several custom solution projects that went well beyond the standard scope listed on their website. Every time, the team has been exceptional—genuinely enthusiastic about tackling complex challenges and consistently delivering solutions that exceed…

James Johnson View on Google

Great internet and phone service, excellent customer service.

Fiori Mercuri View on Google

Impeccable support and service! Would highly recommend.

Samuel Tolentino View on Google

⭐⭐⭐⭐⭐

Great service from Next Generation! They really helped us get our internet running fast and smoothly. The process was easy, and their team was very helpful and responsive. We’re really happy with the improved internet speed and connection. Highly recommended!

Mariwel Largosa View on Google

We engaged Next Generation Networks to build the ecommerce site for South West Apparel, and we couldn't be happier with the result. The team's attention to detail was outstanding. Everything from the layout and product pages to the checkout experience was carefully thought through, and they took…

Houssam Homsi View on Google

Read all 19 reviews Leave us a review

联系我们

想要一个这样的网站吗？

告诉我们您的业务和现有网站。我们会在同一个工作日内给您一份坦诚的评估和方案。

地址

澳大利亚新南威尔士州悉尼

服务时间

每周 7 天，24 小时服务

给我们留言

我们会在同一个工作日内回复

姓名

电子邮件

咨询类型

留言

本网站受 reCAPTCHA 保护，并适用 Google 隐私政策和服务条款。