案例研究 · 婚礼与活动花艺 · Sydney

Flowers by Drosia

一家拥有 30 年经验的悉尼婚礼与活动花艺工作室，作品本身就是最好的宣传。整个网站是一座精心编排的长廊式画廊，取材于花艺师的 Instagram 摄影作品，拨打电话或发送短信始终触手可及。

行业: 婚礼与活动花艺、场景布置
地区: 悉尼
上线时间: 2026年10月
素材来源: 花艺师的 Instagram 摄影作品

项目需求

一份只存在于 Instagram 上的作品集

白玫瑰拱门、兰花瀑布、烛光点点的长桌：所有作品都在 Instagram 上。它作为动态信息流很好，作为店面橱窗却不尽如人意。人们搜索“wedding florist Sydney”（悉尼婚礼花艺）时找不到它，最好的作品被埋在最新帖子之下，而且还要求访客登录。

网站必须在每种屏幕尺寸上，以精心编排的顺序大幅展示最出色的照片。它要用一句话说清花艺师是谁、做什么，然后把舞台让给照片；尽管页面几乎全是照片，在手机上仍要快速加载。

目标

在每种屏幕上，以精心编排的顺序大幅展示最出色的照片
让下一步一目了然：来电或发短信告知日期、场地和想要的风格
尽管页面几乎全是照片，在手机上仍能快速加载
即使只有一个页面，也要向搜索引擎和 AI 助手清楚描述这家企业

设计选择

花园绿、奶油白与烛光金

配色衬托花朵而不与之争艳：枝叶般的绿色、花店卡片般的奶油白，以及与照片中丝带、黄铜和烛光相呼应的金色。

配色

#1f3d2e 花园绿滚动后的页眉、页脚、手机浮动栏、语录横幅
#2c5541 浅绿悬停状态及辅助绿色
#f6f1e9 奶油白页面底色，如柔和的纸张
#1b1c18 墨色文字
#e4cd9c 浅金标题中的斜体文字
#b8955a 金色文字标志中的“by”及点缀
#e9cfc5 腮红粉取自玫瑰：键盘焦点框
#d4b57a 香槟色主“致电”按钮上的渐变

唯一关键的操作“致电”采用香槟色渐变，看起来像镀金一般，而不是一个普通的彩色按钮。

字体排印

展示标题

Cormorant

一款精致的高对比度衬线字体，斜体优美，契合婚礼氛围，又不至于变成难以阅读的手写体。自托管，包含常规体和斜体。

标签和按钮

系统无衬线字体

小号、宽字距的大写字母：与衬线字体搭配的经典文具风格组合。

以首屏文案测量过字体度量的 Times New Roman 后备字体，确保 Cormorant 加载完成时标题不会重新排版。

页面、照片与移动端

八张照片组成的全屏首屏

每张幻灯片都有自己的眉标和说明文字，在宽屏上放置于左侧、右侧或中央，总是避开新人或花艺作品，并且只在文字所在一侧加阴影。

每张幻灯片都有手机裁切版

竖握手机时，每张照片都使用手工设定的 3:5 纵向裁切，说明文字放在照片有空间的顶部或底部。每台设备只下载它要显示的那一版裁切。

如印样般的拼贴画廊

3:4 的图块排成两到四列，间隙细如发丝，间或穿插大幅特色图块，并经过编排，使每种列数下每一行都能排满。

让眼睛休息的语录

拼贴画廊之间穿插四句大号斜体语录，绿底奶油字与奶油底绿字交替出现：“Flowers say what words never could.”（花能道出言语无法表达的心意。）

由花艺师口吻撰写的替代文字

“Cascading pink orchids with red hydrangea and dark kale”（粉色垂坠兰花配红色绣球与深色羽衣甘蓝）。点击任意图块即可打开全屏查看器，支持键盘和滑动操作，关闭后页面会回到原来的位置。

拇指可及的浮动栏

首屏滚出视野后，手机屏幕底部会出现一个带“致电”和 Instagram 的绿色悬浮胶囊按钮，并避开 iPhone 的主屏幕指示条。

构建方式

一个页面、一个内容文件、一套真正的图片处理流程

纯 PHP 8.2，单个服务器端渲染页面，不用框架也不用数据库。照片顺序、说明文字、裁切、语录以及备用照片池都存放在一个内容文件中，因此调整展示顺序只需编辑文件，无需重新设计。

从 Instagram 到 AVIF

构建脚本将选定照片转换为 AVIF 和 WebP：图块提供四种宽度，首屏幻灯片和横幅最高 2400px，并为手机单独生成竖向裁切。

预留空间，毫无偏移

每张图片的真实尺寸都有记录，因此页面会预留相应空间，照片加载时绝不会跳动。

恰当的开场照片

第一张照片以高优先级预加载，竖握手机和其他设备分别使用不同的文件。

动态拼贴画廊

每隔几秒，视野中的一张照片会淡入替换为备用作品中的另一张，让回访者看到更多作品。查看器打开或标签页隐藏时会暂停，在“减少动态效果”设置下则完全停止。

按部就班的动效

首屏缓慢交叉淡入淡出，会等每张照片加载完毕再切换，而不是显示空白画面；支持滑动和方向键控制，手动切换后计时器重新开始。

没有嵌入，没有表单

所有 CSS 内联，只有一个延迟加载的脚本，采用严格的内容安全策略（CSP），不嵌入 Instagram，也不使用字体服务：网站链接到 Instagram，而不是加载它。

PHP 8.2
单页网站
Instagram 作品集转 AVIF
图片站点地图
CSP

搜索与 AI 答案

一个页面，在网页搜索和图片搜索中都能被找到

单个页面同样可以清楚地描述一家企业；而对于视觉型业务，图片搜索与网页结果同样重要。

描述为 Florist

结构化数据将这家企业标注为服务悉尼的 Florist（花店），关联其 Instagram 主页，并列出其专长：婚礼花艺、花艺装置、活动布置、桌花和新娘捧花。

每张照片都在图片站点地图中

列出 78 张图片，最后修改日期取自页面或其照片的最近一次更改，使新作品能被图片搜索收录，并允许显示大尺寸图片预览。

标题点明服务和城市

“Wedding & Event Florist, Sydney”（悉尼婚礼与活动花艺），并在描述中写入电话号码，让人在手机上可以直接从搜索结果拨打。

写给 AI 助手的简介

llms.txt 说明花艺师做什么、在哪里、如何咨询；robots.txt 则按名称欢迎各搜索引擎和 AI 爬虫。

{
  "@context": "https://schema.org",
  "@graph": [
    { "@type": "Florist" },
    { "@type": "WebSite" }
  ]
}

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

成果

页面几乎全是照片，依然快速

98Lighthouse 性能（移动端）
100无障碍、最佳实践和 SEO
0布局偏移
78图片站点地图中的照片
8首屏幻灯片，每张都有手机裁切版
0除分析外的第三方请求

Lighthouse 数据：移动端，线上首页，于 2026年10月19日测得（单次运行；各次运行分数略有差异）。

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

项目常见问题

关于 Flowers by Drosia 网站的问题

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

为什么 Flowers by Drosia 采用单页网站，而不是多页网站？

花艺客户凭照片做决定，所以网站是一座长廊式画廊，只有一个清晰的行动号召，而不是一堆内容单薄的页面菜单。单个页面加载和更新也更快，而图片站点地图依然能让每张照片在 Google 图片中被找到。

Flowers by Drosia 的照片如何在手机和笔记本电脑上都显示得恰到好处？

每张首屏照片都有两种裁切：宽屏使用完整的 16:9 画面，竖握手机则使用手工定位的 3:5 纵向裁切，说明文字移到照片有空间的顶部或底部。浏览器只下载它将要显示的那一版裁切，格式为 AVIF 或 WebP。

Flowers by Drosia 网站会加载其 Instagram 动态吗？

不会。嵌入动态会拖慢每一次访问，还会引入 Instagram 的脚本。NGN 从账号中挑选出最出色的照片，按精心安排的顺序转换为快速的网页图片，网站则链接到 Instagram 供访客查看最新帖子。

Flowers by Drosia 网站上的“动态拼贴画廊”是什么？

每隔几秒，屏幕上的一张照片会淡入替换为备用作品中的另一张，被替换的照片则回到备用池中，这样回访者无需页面变长就能看到更多作品。它只更换视野内的照片，对于在设备上开启了“减少动态效果”的访客则完全停止。

为什么 Flowers by Drosia 网站上没有咨询表单？

婚礼和活动咨询需要就日期、场地和风格进行沟通，所以网站请访客来电或发短信。在手机上滚动过开场照片后，会出现一个悬浮的“致电”和 Instagram 浮动栏，让下一步始终在拇指之下。

更多作品

我们打造的更多网站

上门汽车美容 · Northern Rivers

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 隐私政策和服务条款。