← 返回作品集
Landing Page · 设计拆解

Wok & Flame 餐厅:把「今晚吃哪」变成一次 WhatsApp 订位

这是一个餐饮单页着陆页的拆解。它是概念 demo,不是真实客户项目——专门用来示范「餐饮该怎么设计」:食欲优先,决定要快。下面我把每个设计决定背后的「为什么」摊开讲。

⚡ 一眼看懂

一个任务:让一个正在滑手机找「Bangsar 晚餐」的饿客,在一次滑动里 WhatsApp 订位。它长这样:

行业餐饮 / 餐厅
适合档位单页 Starter · RM 590 起
核心任务勾起食欲 → WhatsApp 订位
主 CTA一键 WhatsApp(预填讯息)
配色暗黑 #1A1A1A + 火焰橙 #E85D2C + 金
wokandflame.com.my
Wok & Flame 餐厅单页 landing 桌面端截图:暗色背景配火焰橙与金色,全屏氛围 hero 把招牌菜照片放大,底部一句标题加订位按钮

Wok & Flame 概念 demo:暗色全屏 hero,在你读到任何一道菜之前,先卖食欲和氛围

想象这一刻:傍晚六点,有人的拇指正在滑「Bangsar 好吃的晚餐」,开着三个 tab。他在几秒内就决定——不是靠读字,而是靠「看着就饿」加「订位很方便」。这个页面,就是为这个又快又饿的决定设计的。

01一页就够,因为饿着的决定很快

一个饿着的客户只想知道五件事:你卖什么、在哪里、几点开、看起来好不好吃、怎么订位或叫外卖?这些一页往下滑就讲完了。不要多页迷宫,不要没人看的「关于我们」——就一条直线,从嘴馋到订位

餐饮里,卖东西的是照片。你要做的,就是把最让人流口水的那张放在最前面,然后绝不让一个饿着的人去「找」订位按钮。

02Hero 卖食欲,不卖菜单

第一屏是一张满屏的氛围大图——不是价目表。暗色背景、暖暖的火焰橙和金色,一句简短勾人的标题,加一颗订位按钮。第一屏的目标只有一种感觉:我今晚想去那儿吃。长菜单和故事,等这个钩子勾住了再说。

03菜单是橱窗,不是 PDF

它不是把 40 道菜一股脑列出来,而是挑几道招牌菜,每道配一张照片和一句话——Nasi Lemak Wagyu、Rendang Lamb Shank、炭烧沙爹拼盘、班兰焦糖布丁。它像一个橱窗:用几道主打勾起食欲、顺便定下价位预期,而不是一份让你滑到天荒地老的完整目录。

04在哪、几点、怎么订——全在拇指够得到的地方

嘴馋一旦上来,就不该有任何东西挡在它和订位之间。所以这一页把「实际信息」做得毫不费力:

  • 动画地图 pin 定位到 Bangsar —— 半秒看懂在哪,而不是藏在小字里
  • 营业时间放在明处 —— 还没问「现在开吗」就先看到答案
  • 一键 WhatsApp 订位/叫外卖 —— 预填好讯息,订位就是发一句话,不是填表单

05为什么整页是暗色的

暗色背景读起来是夜晚、私密、高级——一顿正经晚餐该有的氛围。它还让食物照片更跳:一碗 rendang 在近黑底色上会发光。配上火焰橙和金色点缀,整套配色在说「炭火、烟火气、一个值得打扮去吃的夜晚」。字体用 Bricolage Grotesque(有个性的标题)+ Manrope(干净的正文)。注意:暗色不是人人都适合——早午餐咖啡馆或甜品店通常要的是明亮清新。配色要配得上你卖的东西。

你做的是咖啡馆、餐厅、甜品店或档口?这套「单页 Starter」打法可以直接套到你身上。先看 live demo,再把你的菜单 WhatsApp 给我,我告诉你哪三道菜该放在第一屏。

把整件事变成一句话

餐厅 landing = 食欲优先的 hero × 招牌菜当橱窗 × 地点与营业时间伸手可及 × 一键 WhatsApp。卖的不是菜单,是「今晚、这家、看着就好吃」。

想知道不同生意各该做哪一档网站?我在这篇按行业拆解里都摊开讲了。

Hui Huang Ong, Founder of H2ODreamer Studio
Hui Huang Ong
创始人

H2ODreamer Studio 创始人,专帮马来西亚的小生意主和创业者,从零打造真正能接住客户的网站。

小红书关注我 →
免费 30 分钟咨询

想要一个能把桌子坐满的餐厅页?

把你的招牌菜和地点发给我。我把这套打法——食欲 hero、招牌菜橱窗、地点与营业时间、一键 WhatsApp——套到你的餐厅上,还会老实告诉你哪些可以先省。

  • 免费 30 分钟 WhatsApp 咨询
  • 单页 Starter RM 590 起,3–7 天交付
  • 标配 WhatsApp 订位、Google 地图和追踪
💬 WhatsApp 我们 →