呢個係 Flow Studio HK 嘅互動教學示範 — 下面個「Lumo」只係用嚟拆解嘅虛構例子,唔係真產品。 了解 Flow Studio HK →

Lumo 2 分鐘 quick tour

呢個係一個假 video 預覽,示範緊 native <dialog> element 嘅 modal pattern — 自動 focus trap、Esc 關閉、backdrop click 關閉。

🎬 Modal demo · 純 HTML <dialog>
⚡️ 新功能 · Lumo 3.0 已上線 — AI 助你排日程 睇下有咩新嘢 →
新一代專注 App

專注一啲,做多啲,活好啲

Lumo 用 AI 幫你規劃每一日,將大目標拆成可以即刻動手嘅 25 分鐘專注時段。

★★★★★ 4.9 · 超過 24,000 人喺度專注緊
今日 · 5 月 26
寫今季 OKR 大綱
已完成
準備星期三 design review
寫部落格新 post — 第 1 稿
深度
同 Sarah catch-up
25 min
🎯
連續 12 日每日達標
2 小時 40 分今日專注時間

深受 800+ 公司同團隊愛用

NORDIC
Pixel & Co.
Mango
FORMA
Linewise
Solar•
功能

三樣嘢,搞掂你成日嘅生產力問題

唔需要學一堆方法論。Lumo 將最 work 嘅三件事,做到簡單到唔可以再簡單。

🧠

AI 自動排日程

講低你今日想做嘅嘢,Lumo 識自動排入時間表,將「做唔晒」變「邊樣最緊要」。

25 分鐘專注 Timer

用番經典 Pomodoro,再加 ambient sound、自動 block 手機 notification。

📊

每週反思報告

逢星期日自動 generate:邊段時間最 productive、邊類工作偷你最多時間。

專注 Timer

一個按鈕,世界靜哂落嚟

撳一下開始 25 分鐘 deep work。Lumo 會幫你 mute notification、開白噪音、最後送你一個小儀式 — 唞 5 分鐘。

  • 14 款 ambient sound(咖啡店、海浪、雨聲⋯)
  • 自動同 Mac/iOS 嘅 Focus mode 連線
  • 結束後自動記低做咗咩
17:32
Deep Focus
反思報告

數據話你知,你嘅一週去咗邊

唔係單純記時間 — Lumo 會分析你嘅 pattern,講你聽邊類工作做得最有效率、邊類偷時間最多。

  • 逢星期日朝早送到你 inbox
  • 可以 export 做 PDF / Notion
  • 連續記錄會解鎖 badge
本週專注時間 5 月 19 – 25
用 Lumo 之後

啲嘢開始唔同

12.4hrs
每週節省嘅時間
由用家自己 report,係用 Lumo 4 週嘅平均數
本週連續達標
5
🎯
84%
日程完成率
⚡️
3.2x
深度專注時間
最 productive 時段
9am – 11am · 你嘅 deep work zone
點用

3 步開始,由今日做起

1

講低想做嘅嘢

用一句說話,講低今日要搞掂咩。例如:「寫好 design proposal」。

2

Lumo 幫你拆

AI 自動拆成 3-5 個 25 分鐘嘅小任務,排入你日程。

3

撳開始

一段段做,到夜晚自動 review。明日繼續。

「以前每日開咗 20 個 tab,乜都做緊但乜都做唔晒。用咗 Lumo 兩個月,第一次覺得做完一日,係真係做完。」
陳家俊 Ken Product Designer · Mango
收費

由免費開始,隨時升級

所有 plan 都有 14 日全功能試用。隨時 cancel,唔問點解。

Starter
$0/月

啱啱試水、淨係要個 timer。

  • 基本 Pomodoro timer
  • 3 個 ambient sound
  • 每日最多 5 個任務
Team
$148/月 / 5 人

細 team 一齊專注。

  • Pro 全部功能
  • Team focus session
  • Admin dashboard
  • 專屬 onboarding
常見問題

不如先問清楚先

識。Lumo 完全支援繁體中文、英文。AI 接受你打中文輸入任務,內部直接理解,唔需要 translate。
最大分別係 AI 自動排日程 — 免費版要你自己手動排,Pro 版講一句就搞掂。另外無限任務、反思報告呢啲都係 Pro only。
取消之後 data 會保留 90 日,期間你可以隨時 export 做 CSV / Notion / Markdown。90 日後正式刪除,唔留底。
Mac、Windows、iOS、Android 都有 native app。亦有 web app,瀏覽器都用得。所有平台 data 即時同步。

每一日,認真做番一啲嘢

由今日嘅 25 分鐘開始。

🙌 唔係 Lumo 整 — 係我整

鍾意呢個拆解?等我幫你個網生意

我用 AI 幫你由零砌、或者執靚你 AI 出嘅版本 — 做到一個睇得明、收得到 lead 嘅 landing page。識指、識睇、識改,先做得出令客戶撳得落手嘅嘢。

Flow Studio HK 設計同製作

全部 24 個 web design pattern · 文字速查

上面互動教學嘅文字版 — 每個 pattern 嘅白話解釋、4 點檢查清單、同抄畀 AI 嘅 prompt。方便 Ctrl / ⌘ + F 搜尋,亦等搜尋引擎同 AI 助手讀得到呢啲內容。

Announcement Bar · 公告條 · 又叫 Promo Bar / Top Bar

網頁最頂嗰條細條,用嚟推新嘢嘅 banner。

對住 screenshot 點 check

  • 訊息夠唔夠短?一行內講完?
  • 有冇 emoji 同 strong 突出 keyword?
  • 結尾有冇 inline link 引人撳?
  • 背景深色 / 中性色,唔搶 hero?

想叫 AI 改?抄呢句

Banner 太搶眼,蓋過 hero
將 announce bar 改用深色 gradient 背景 + 13px 細字 + 白色文字,唔好用品牌色實底。
想加 emoji 同 highlight keyword
Emoji 放最前,用 <strong> 標出最重要嗰個 keyword,再加 inline 連結 →。
想用戶可以關閉
右邊加 ✕ 細掣,撳咗用 localStorage 記低 dismissed 之後唔再 show。

差版 vs 好版

差版
  • 用品牌色實底蓋過 hero
  • 一段長文 / 冇 highlight
  • 冇 inline link 引人撳
好版
  • 深色 gradient + 13px 細白字
  • 1 emoji + 1 strong keyword
  • 結尾 inline →

Navigation Bar · 導覽列 · Nav / Header

永遠黐喺最頂嗰條導覽列,幫人跳去任何地方。

對住 screenshot 點 check

  • 左 logo / 中 nav links / 右 CTA — 3 段式 layout?
  • Scroll 落去 nav 仲跟住喺度(sticky)?
  • 有冇玻璃模糊感(透明 + backdrop-filter)?
  • CTA 同 nav links 視覺對比夠大?

想叫 AI 改?抄呢句

Nav scroll 唔到時消失
Nav 加 position: sticky; top: 0; z-index: 50。
Nav 同 page 顏色撞
Nav 加 backdrop-filter: blur(14px) saturate(180%) + rgba 半透明背景,scroll 之後再加細邊框。
Nav 入面太擠
中間 links gap 28px,logo 同 CTA 兩邊各 32px gap,padding 16px 24px。

差版 vs 好版

差版
  • Scroll 之後消失
  • Logo 同 links 攝晒一齊
  • CTA 太細混入 links
好版
  • Sticky + backdrop blur + 半透明
  • 左 logo / 中 nav / 右 CTA
  • CTA 用實底突圍

Dropdown / Mega Menu · 下拉選單 · 又叫 Flyout / Mega Menu

Hover / Click trigger 出嚟嘅 panel。Nav 想 expand 多嘢就用呢個。

對住 screenshot 點 check

  • Hover + Click 兩個都 trigger 到?
  • Esc 鍵可以關 + focus 還原到 trigger?
  • Caret ▾ 隨開合自動旋轉提示狀態?
  • Panel 入面每個 item 有 icon + 標題 + 副文?

想叫 AI 改?抄呢句

Dropdown 太硬 pop 出 / 消失
Panel 用 opacity + transform translateY 漸入,唔好用 display: none / block — 加 transition: 0.2s cubic-bezier。
Hover 容易誤觸
Trigger 同 panel 之間留 12px gap + 大個 hover region。Mouse enter dropdown container 而唔係 trigger 本身。
冇 a11y
Trigger 加 aria-expanded + aria-controls 指住 panel;Esc 關、撳完還原 focus。啲連結唔使加 role=menu / role=menuitem(除非你真係寫齊上下鍵導航)。

差版 vs 好版

差版
  • 得文字 link 冇 icon
  • Hover 立即消失冇 buffer
  • 冇 aria 屬性
好版
  • Icon + title + sub 三層資訊
  • opacity + translate 漸入
  • aria-expanded + Esc + focus 還原

Hero Section · Hero 區 · 又叫 Above the Fold

網頁最頂、最大、最搶眼嗰幅。一打開第一眼睇到嘅嘢。

對住 screenshot 點 check

  • Headline 短唔短?一句、講 benefit(唔係 feature)?
  • 有冇主 CTA + 次 CTA 兩粒掣?
  • CTA 下面有冇 social proof(評分 / 用戶數 / 頭像)?
  • 右邊有冇 visual / mockup 撐住個畫面?

想叫 AI 改?抄呢句

Headline 太長太硬
Headline 改成一句講 benefit,例如「做多啲、做好啲」,次要訊息放副標題。
CTA 唔夠突出
主 CTA 用品牌色實底 + 大陰影,次 CTA 改 outline / ghost — 一定要視覺有主次。
個 hero 平平無起伏
右邊加 product mockup,加 perspective + rotateY(-8deg) + 大陰影,再喺旁邊加 2 個浮動 stats card。
冇 social proof
CTA 下面加:4 個重疊頭像 + ★★★★★ 4.9 + 用戶數(24,000 唔好寫 24k)。

差版 vs 好版

差版
  • Headline 一大段講 feature
  • 3 粒 CTA 並排令人 paralyze
  • 冇 social proof / 冇 visual
好版
  • Headline 一句講 benefit
  • 1 主 (實底) + 1 次 (outline)
  • CTA 下加 4.9 + 24,000 + 右邊 mockup

Eyebrow · 眉標 · 又叫 Kicker / Pre-headline

Headline 上面嗰粒細嘅 label。畀 context 用嘅。

對住 screenshot 點 check

  • 字夠細(13px 左右)?
  • 字距夠開(letter-spacing 大)?
  • 有冇用 uppercase?
  • 配品牌色 pill bg?有冇 dot indicator?

想叫 AI 改?抄呢句

Eyebrow 太搶眼蓋過 headline
Eyebrow font-size 13px,letter-spacing 0.12em,淺色 rgba 背景 + 品牌色文字 — 一定要細過 H1。
想加生氣
Eyebrow 前面加一粒 6px 圓點,加 @keyframes pulse 2s ease-in-out infinite。
想做 pill 樣
border-radius: 999px; padding: 6px 14px; background: rgba(brand, 0.08)。

差版 vs 好版

差版
  • 字大過 H1 搶風頭
  • 冇 letter-spacing 似普通字
  • 冇 pill / 冇 dot
好版
  • 13px UPPERCASE + 0.12em
  • Pill 圓邊 + 品牌色淡背景
  • 前面 6px pulse dot

Primary CTA · Call to Action · 主要轉換按鈕

叫人撳嘅主掣。網頁最重要嗰粒按鈕。

對住 screenshot 點 check

  • Copy 寫 benefit 唔寫動作?(「免費試 14 日」唔好寫「Sign Up」)
  • Hover 有冇浮起 + 加陰影?
  • 主 CTA + 次 CTA 兩粒(最忌 3 粒並排)?
  • CTA 同周圍對比夠強(背景中性 / CTA 品牌色)?

想叫 AI 改?抄呢句

CTA 唔夠搶眼
主 CTA 用品牌色實底 + box-shadow: 0 8px 20px rgba(brand, 0.35),hover translateY(-2px) 加深 shadow。
CTA 文字太硬太 generic
Copy 改 benefit-focused:「免費開始 — 永遠免費」、「14 日免費試 — 唔使俾卡」。
一定要兩粒 CTA
主 CTA 品牌色實底,次 CTA outline / ghost(例如「▶ 睇 2 分鐘 demo」)— 兩粒對比要強。
CTA 太硬太 sharp
border-radius: 999px 做完全圓 pill — 現代 SaaS 標配,感覺更 friendly。

差版 vs 好版

差版
  • 寫「Sign Up」純動作
  • 3 粒 CTA 視覺平均
  • Outline / solid 唔分
好版
  • 「免費試 14 日 — 唔使俾卡」
  • 1 主 (實底+陰影) + 1 次 (outline)
  • Hover translateY(-2px) 強化點擊感

Social Proof · 社會證明 · Trust Signal

頭像 + 評分 + 用戶數。轉化率最高 ROI 嘅元素之一。

對住 screenshot 點 check

  • 放係 CTA 下面?(撳之前最後一刻打底)
  • 評分同數字用真實值(唔好作大、唔好砌假)?
  • 頭像重疊但有間隙感?
  • Stat 數字夠具體(24,000 唔好寫 24k)?

想叫 AI 改?抄呢句

頭像太靠太實
頭像 28px,margin-left: -8px 重疊,加 2px solid border 同 background 同色(製造視覺間隙)。
冇真實感
用真實評分同具體用戶數(例如寫 24,000 唔好寫 25k)。⚠️ 唔好作大,亦唔好為咗「睇落真啲」而改細真實評分 — 嗰個係作假。
冇真人相片用
用 linear-gradient 漸變色做圓形頭像 — 唔需要真人,但有人物 placeholder 感。⚠️ 淨係 demo / 未有真客戶嘅 wireframe 先用 placeholder;真網站一定要用真客戶、真評價、真數字 — 作假 social proof 喺好多地方屬違法廣告。

差版 vs 好版

差版
  • 「最好嘅 productivity app」純口號
  • 作大或砌假評分/數字
  • 「many users」唔具體
好版
  • 4.9 星 + 24,000 真實用戶
  • 4 個重疊 gradient avatar
  • 放係 CTA 下面打底

Hero Visual / Product Mockup · 主視覺 · 產品截圖

右邊嗰個 product mockup。一眼睇明個 app 做咩。

對住 screenshot 點 check

  • Mockup 有冇 3D 角度(rotateY 細少少)?
  • 有冇深陰影將 mockup 由背景抽出嚟?
  • 旁邊有冇浮動 stat card?
  • Hover 有冇 micro-interaction?

想叫 AI 改?抄呢句

Mockup 太平太靜
父 element 加 perspective: 1200px,mockup transform: rotateY(-8deg) rotateX(4deg)。
Mockup 同背景太融
加 box-shadow: 0 24px 60px rgba(0,0,0,0.14) — 大而 soft 嘅陰影。
想加生氣感
兩邊絕對位置加 2 個浮動 stat card(連續達標、今日專注時間),@keyframes float 4s ease-in-out infinite。
冇真 app 用
用 div + card layout 砌個假 app UI — header dots、task list、stat — 已經夠表達。

差版 vs 好版

差版
  • 用 stock photo 唔關事
  • 正面 mockup 平平無 depth
  • 右邊空白冇嘢撐
好版
  • 用 div 砌真 app UI
  • perspective + rotateY 3D 角度
  • 加 2 個浮動 stat card

Info Tooltip · 懸停提示 · 又叫 Popover

Hover ⓘ icon 出嘅小提示。畀額外 detail 而唔擠 layout。

對住 screenshot 點 check

  • Trigger 用 ⓘ icon(universal「more info」signal)?
  • Hover + keyboard focus 都 trigger 到?
  • 有箭嘴 indicator 指返 trigger?
  • 4-5 句句子內,唔好寫成段?

想叫 AI 改?抄呢句

只係 mouse hover work
用 :focus-within 而唔係 :focus — etrigger 同 bubble 都 visible 喺 focus-within 範圍內。加 aria-describedby 等 screen reader 讀到。
Tooltip 跑出 viewport
CSS Anchor Positioning(新)或者 JS Floating UI library。簡單版用 transform translateX(-50%) 居中 + 加箭嘴 ::after。
Bubble 太細睇唔清
min-width 220px,font-size 12.5px,line-height 1.5,padding 10px 12px。深色背景 + 白字對比清楚。

差版 vs 好版

差版
  • Hover 即時硬 pop 出
  • 冇 keyboard / focus 支援
  • 冇箭嘴指返 trigger
好版
  • opacity + translateY 漸入
  • :focus-within 鍵盤支援
  • ::after 三角箭嘴 indicator

Modal / Dialog · 彈出視窗 · 又叫 Lightbox

蓋住成個畫面嘅 popup。video preview、sign-up、確認 dialog 都係呢個 pattern。

對住 screenshot 點 check

  • 有冇 backdrop(黑色半透蓋住底)?
  • 可唔可以 Esc 關 / backdrop click 關?
  • Focus 自動入去 modal 入面(focus trap)?
  • 關咗之後 focus 還原到觸發嘅 button?

想叫 AI 改?抄呢句

自己用 div 砌 modal 唔啱 a11y
用 native <dialog> element + dialog.showModal()。Browser 自動 focus trap、Esc 關閉、backdrop、role=dialog aria-modal — 唔使自己寫。
Backdrop 唔識點整
用 ::backdrop pseudo-element:dialog::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); }
想加入動畫 entrance
加 @keyframes pop animation 喺 dialog[open],scale(0.92) translateY(20px) → scale(1) translateY(0) cubic-bezier 彈出。

差版 vs 好版

差版
  • 用 div + position:fixed 自己砌
  • 冇 backdrop(背景仲撳到)
  • 冇 focus trap / Esc 關
好版
  • Native <dialog> + showModal()
  • ::backdrop pseudo + blur
  • 自動 focus trap + Esc + aria-modal

Trust Bar / Logo Wall · 信任列 · 客戶 Logo 牆

一行客戶 logo。「呢啲大公司都用緊」借勢借得最直接。

對住 screenshot 點 check

  • Logo 全部灰階 / 半透明(避免色彩衝突)?
  • 至少 5–6 個 logo?
  • Label 用「深受 X 公司愛用」呢類 small caps 標題?
  • 位置喺 hero 之後第一個(剛 hook 完即刻打底)?

想叫 AI 改?抄呢句

Logo 太花搶眼
所有 logo 改用同一灰色 var(--ink-soft),opacity: 0.65,hover 變 1。唔好用真實品牌色。
Logo 太少冇說服力
至少 5 個,最理想 6–8 個。如果真係少,配文字證據:「800+ 公司用緊」。
冇真實 logo 用
用 fictional 公司名(NORDIC、Pixel & Co.、Mango),display font 寫法,當佢哋係 wordmark。⚠️ 淨係 demo / wireframe 先咁做;真網站要用真客戶 logo(攞咗授權),作假客戶 logo 喺好多地方屬違法廣告。

差版 vs 好版

差版
  • Logo 用真實品牌色花花
  • 只有 2-3 個 logo
  • 冇 label 解釋
好版
  • 全部統一灰色 opacity 0.65
  • 6+ logos 或加「800+ 公司」
  • 上面 small caps「深受 X 公司愛用」

Feature Grid (3-col) · 功能 3 欄格仔

3 欄 grid 講 3 個 key feature。「3」係 magic number。

對住 screenshot 點 check

  • 剛剛好 3 個 card(多過 4 太散)?
  • Card 之間 gap 24px 左右?
  • 每張 card 結構一致(icon → title → desc)?
  • Hover 有冇 micro-interaction?

想叫 AI 改?抄呢句

Feature 太多想擠晒
揀最重要 3 個,其他擺後面 zigzag deep-dive section。Hero 嘅 feature grid 一定唔好超過 3。
Card 太悶
Hover translateY(-6px) + 上方出現一條 3px coral 細線(::before scaleX 0 → 1,transform-origin: left)。
手機 layout 散晒
@media 880px 改 grid-template-columns: 1fr,gap 改細少少。

差版 vs 好版

差版
  • 5-6 個 feature 擠一行
  • Card 之間冇 gap
  • Static 冇 hover 反饋
好版
  • 正好 3 個(magic number)
  • Gap 24px + 統一 padding
  • Hover translateY + shadow + 出現頂部 coral 線

Feature Card · 功能卡

單一張功能卡。Card 係而家 web design 嘅基本單位。

對住 screenshot 點 check

  • Border-radius 大啲(20–24px)?
  • Padding 夠(30–36px)?
  • Icon 有冇 soft gradient background?
  • Hover 浮起 + shadow + 邊框消失?

想叫 AI 改?抄呢句

Card 太硬太 sharp
border-radius: 24px; padding: 32px; 用 cubic-bezier(0.22, 1, 0.36, 1) 嘅 transition,比 ease 更「彈」。
Icon 太細太單調
Icon 用 52×52px 圓角方塊,soft linear-gradient 漸變背景,emoji 24px 居中。
Card 太靜
Hover: transform translateY(-6px) + shadow 變 lg + border-color: transparent — 視覺反饋強。

差版 vs 好版

差版
  • border-radius 8px 工程感
  • Padding 細擠
  • Icon 純文字 emoji
好版
  • border-radius 24px + padding 32px
  • Soft gradient icon 52px
  • Cubic-bezier transition 有彈性

Zigzag / Alternating Layout · 交錯排版

深入講 feature 用嘅交錯 layout — 一行圖+文,下一行文+圖。

對住 screenshot 點 check

  • 每行只講一個 feature(避免擠)?
  • 左右交替(視線會 zigzag 落底)?
  • 50/50 分配(視覺平衡)?
  • 背景同上面 section 唔同色(分區)?

想叫 AI 改?抄呢句

Layout 太靜止
zigzag-row 用 grid-template-columns: 1fr 1fr,每行 .reverse 用 order: 2 將文字反到對面。
太多 row 太悶
2–3 個 zigzag 已經足夠。多過建議拆做 tabbed feature comparison 或 bento grid。
同上面 feature grid 太似
Zigzag section 整個轉淺色背景(var(--soft)),同上面 section 視覺分開。

差版 vs 好版

差版
  • 每行塞 2-3 個 feature
  • 全部圖同一邊
  • 同上面同色冇分區
好版
  • 每行只一個 feature
  • 左右交替(順視線)
  • 背景轉 var(--soft) 分隔

SVG Progress Ring · SVG 環狀進度條

SVG 整圓形進度。比 PNG 細、retina 清,可以即時改色。

對住 screenshot 點 check

  • 兩層 circle(背景灰 + 前景品牌色)?
  • Stroke 夠厚(10–12px)?
  • stroke-linecap: round(端點圓滑)?
  • SVG 旋轉 -90deg(由 12 點開始)?

想叫 AI 改?抄呢句

進度條太細嘢
同 AI 講:「個進度環太幼,整粗啲、由 12 點開始順時針填」。技術版:stroke-width 12px,r=90,stroke-dasharray = 2πr ≈ 565。
想 animate 進度
加 transition: stroke-dashoffset 1s cubic-bezier(0.22, 1, 0.36, 1),updating dashoffset 即係改進度。
想加中間數字
svg 外層 position: relative,中間放 .timer-num position: absolute inset: 0 + flex column 居中。

差版 vs 好版

差版
  • 用 PNG image(rasterize 唔清)
  • Stroke 4px 太幼
  • 冇 animation 死寂
好版
  • SVG 兩層 circle stroke 12px
  • -90deg rotate 由 12 點開始
  • stroke-dashoffset 1s transition

Bento Grid · 便當格 · 大小拼接 layout

Apple keynote 嘅大小 cell 拼接 layout。一塊大配兩塊細,視覺有節奏。

對住 screenshot 點 check

  • 至少一個 cell 大過其他(focal point)?
  • 大小有 rhythm(唔好全部一樣 size)?
  • 每個 cell 一個 idea,唔好擠?
  • 至少一個 cell 反色(深底 / 漸變)做對比?

想叫 AI 改?抄呢句

Layout 太平太悶
用 grid-template-columns: repeat(4, 1fr) + grid-template-rows: auto auto,再俾一個 cell 用 grid-column: span 2 + grid-row: span 2 變大。
冇視覺 rhythm
其中一個 cell 反色(var(--ink) bg + 白字),另一個用 linear-gradient soft 漸變底 — 等視線喺幾個 cell 之間跳。
想加 chart / streak 內容
用純 div + flex 砌 mini chart(bento-bars / streak-day),CSS-only 唔 import library。

差版 vs 好版

差版
  • 4 個 cell 等size 似 grid-card
  • 全部白底冇對比
  • 每 cell 塞 3-4 個 stat
好版
  • 大細 mix(1×big + 2×wide + 2×small)
  • 一個反深色 + 一個漸變
  • 每 cell 一個 hero stat

How It Works (Steps) · 操作流程 · 3 步教學

1 → 2 → 3 流程教學。降低「我用唔嚟啩」嘅心理 barrier。

對住 screenshot 點 check

  • 剛剛好 3 步(多過就唔係「簡單」)?
  • 中間有冇虛線連起(順序感)?
  • 每步描述夠短(一兩句)?
  • 正中對齊?

想叫 AI 改?抄呢句

步驟太多
一定要壓縮到 3 步。超過嘅 detail 放 deep-dive section 或 documentation page。
步驟之間冇連接感
用 ::before pseudo 喺 grid container 上畫虛線(repeating-linear-gradient 90deg),由 step 1 連到 step 3。
手機虛線變死位
@media 880px 將 ::before display: none — 垂直排冇必要虛線。

差版 vs 好版

差版
  • 5+ 步太多(不如睇 docs)
  • 冇連接視覺(3 個獨立 card)
  • 每步講太長太多 detail
好版
  • 正好 3 步
  • 中間虛線連 1 → 2 → 3
  • 一步一兩句 + 大粒數字圓

Testimonial Section · 客戶評價

深色 section + 一句客戶引言。真人證言勝過萬字 marketing。

對住 screenshot 點 check

  • 深色背景同前後 section 反色?
  • 有冇巨大 quote mark 做背景裝飾?
  • 引言用 serif italic 字體?
  • 署名齊全(名 + 職位 + 公司)?

想叫 AI 改?抄呢句

Testimonial 太靜
::before 加巨大 watermark:content: '\"'; font-size: 360px; color: rgba(brand, 0.15); position: absolute。
冇個人感
加 avatar(linear-gradient 漸變色圓形)、名(粗)、職位 + 公司(細灰)— 越具體越可信。⚠️ 真網站要用真實客戶嘅引言同身份(攞咗同意);作假 testimonial 喺好多地方屬違法廣告。
引言太長悶
剪到一句最有力嗰句,原引言可以放 case study page。長 quote 等於冇 quote。

差版 vs 好版

差版
  • 引言 3 段長文
  • 冇 author(純 quote)
  • 冇大 quote mark 視覺 anchor
好版
  • 一句最有力嗰句
  • 名 + 職位 + 公司齊
  • ::before 360px 透明 quote mark

Pricing Table · 收費表

收費表。設計目標:引導人揀你最想佢揀嗰個 plan(通常中間)。

對住 screenshot 點 check

  • 中間 plan highlight 咗(深色 + scale 大少少)?
  • 中間有冇「最多人揀」badge?
  • Feature list 用 ✓ 唔用 ·?
  • 價錢字大、單位(/月)細?

想叫 AI 改?抄呢句

3 個 plan 一樣大冇焦點
中間 featured plan:transform: scale(1.04) + 反深色(var(--ink) bg + 白字)— 視覺即刻跳出嚟。
冇推薦提示
Featured plan position: relative + ::before absolute badge「最多人揀」coral 背景 + uppercase。
Button 高度唔齊
price-card 用 flex column + .price-features flex: 1,等 button 永遠 stick 喺 card 底。
價錢字太細
price-amount font-size: 48px + display font + bold。span 入面嘅「/月」改 16px regular。

差版 vs 好版

差版
  • 3 個 plan 一樣大冇焦點
  • 冇「最多人揀」badge
  • Button 高低不齊
好版
  • 中間 plan scale(1.04) + 反深色
  • Featured 加 coral badge
  • .price-features flex:1 等 button 對齊

FAQ Accordion · 常見問題 · 摺合式

摺合式常見問題。SEO 加分 + 解最後疑慮。

對住 screenshot 點 check

  • 一條 Q 一條細線分隔?
  • + icon 開咗變 ×(旋轉 45 度)?
  • 答案 2–3 句就夠,唔好長篇?
  • 問題用 user 嘅原話,唔係 marketing 語?

想叫 AI 改?抄呢句

Accordion animation 唔順 / 長答案 cut 親
同 AI 講:「FAQ 展開要順滑、長答案唔好 cut 親」。技術版:CSS max-height 由 0 開始,JS 開時設成 element.scrollHeight + 'px',transition: max-height 0.4s ease。
答案太長太悶
剪到 2–3 句最精華。Detail 寫去 documentation page,FAQ 只係解最常問。
+ icon 唔識變
.faq-q::after content: '+'; .open .faq-q::after transform: rotate(45deg) — 自動變 ×。

差版 vs 好版

差版
  • 每條 Q 答 5 段似 docs
  • Static 永遠開晒(冇 accordion)
  • Marketing 語言寫問題
好版
  • 每條答 2-3 句
  • + → × rotate + max-height scrollHeight
  • 用戶原話(「咁幾錢?」)

Final CTA Section · 結尾 CTA · 又叫 Closing Pitch

Footer 之前嗰大幅。最後一次叫人撳。

對住 screenshot 點 check

  • 極簡(一 headline + 一 CTA)?
  • CTA 消除最後 objection(「唔使俾卡」、「永遠免費」)?
  • 背景同 hero 呼應(形成 page 嘅 visual bracket)?
  • 正中對齊,焦點單一?

想叫 AI 改?抄呢句

太多嘢分散注意
Final CTA 一定要極簡 — 一個 H2,一句副文,一粒掣。其他嘢全部移走,包括 nav links。
Copy 同 hero 重複
寫總結式 + 召喚行動:「每一日,認真做番一啲嘢」配 CTA 加 micro-copy 消 objection。
同上面 section 太靜止
加 radial-gradient 從頂部落(rgba 品牌色 0.18 → transparent)— 視線自然落去 CTA。

差版 vs 好版

差版
  • 加埋 form / nav / 其他 link
  • Copy 重複 hero
  • 冇消除最後 objection
好版
  • 極簡:一 H2 + 一句 + 一掣
  • 寫總結 + 召喚行動
  • CTA 加「唔使俾卡」消 objection

Toast Notification · Toast 通知 · 又叫 Snackbar

上面 slide 入嚟、3-6 秒自動消失嘅 mini 通知。Save 成功、welcome back 都用。

對住 screenshot 點 check

  • 夠細,唔擋 main content?
  • Auto-dismiss(4-6 秒)+ 可以手動 ✕ 關?
  • aria-live="polite",screen reader 讀得到?
  • 一次只 show 一個(多個會排隊)?

想叫 AI 改?抄呢句

同 modal 搞錯
Toast = 通知性、唔阻斷、auto dismiss。Modal = 強制 focus、要 user 行動。完全唔同 pattern,唔好混用。
Toast 卡死冇消失
加 setTimeout 6000ms 自動 hide + clear timer on close。用 transform + opacity transition 入出,唔好 display: none。
Screen reader 唔讀
加 role="status" + aria-live="polite"。重要錯誤用 role="alert" + aria-live="assertive"。

差版 vs 好版

差版
  • 冇 auto-dismiss 卡死
  • 塞長段文字
  • 冇 ✕ 關 button
好版
  • 6 秒自動消失
  • 一句 + sub-text 兩行
  • icon + body + close 三段 grid
© 2026 Flow Studio HK · 呢個互動拆解由 Flow Studio HK 設計同製作 · 搵我整網頁 →