風格陳列館

現行網站採用的設計

設計語言

淺紫色調輕玻璃卡片、圓角構件、漸層 CTA 橫帶。資訊密度適中，動效克制，是最穩妥的「公司標準」骨架：hero 大標題、編號宗旨卡、相片牆、查詢橫帶，讀者的瀏覽習慣早已建立。

適用場景

不知道選哪個，選它就對了：零學習成本、與現有物料最匹配、維護最簡單。追求「穩中求好」就是它。

適合類型

通用——尤其熟悉現有網站的客戶

最佳示範

HKBIU 本身 / Care Link Business / Modern Beauty HK

明體報頭、粗幼線、出版物節奏

設計語言

明體大字報頭、雙線分隔、引言拉頁、頭版清單式內容。版面具備「閱讀文章」的節奏感，內行距寬闊，長文也讀得舒適。

適用場景

品牌有故事要講、內容是主打——這款設計令文字成為主角。文化機構、學院、出版類別的首選。

適合類型

內容為本 / 文化 / 教育 / 出版

最佳示範

College HK / SSI / AI Training（內容頁較多）

柔和圓角、大相、呼吸感

設計語言

6rem 呼吸感留白、圓角柔和卡片、大幅人像照片。色彩低調，讓相片與文字自己發光，訪客一進場便放鬆下來。

適用場景

客人要感到賓至如歸，而非被推銷。美容、spa、健康護理類別的天然歸宿。

適合類型

美容 / spa / 健康 / 護理

最佳示範

MULAN Spa HK / 療程頁 / 護理品牌

深藍架構、資訊為本、企業級信任

設計語言

深色 banner hero、統計式公告卡、直角資訊卡、清晰的段落分區。一切以「組織可信度」為先：架構、名銜、數字全部有清晰位置。

適用場景

要令商會、銀行、政府部門覺得「正規、企理」的品牌。B2B 洽談、商會、企業集團。

適合類型

企業 / 商會 / B2B / 集團

最佳示範

BNI / Care Link Business / Veribel（企業面向）

明體大字、金色幼線、極致留白

設計語言

金色髮絲線框住大面積留白，明體大字慢節奏。每個元素如同博物館展品般被安放，貴氣源自「少」而非「多」。

適用場景

以「高價」作賣點的品牌：高價療程、訂製服務、精品零售。價位感即時提升一級。

適合類型

高端 / 訂製 / 精品

最佳示範

高價療程品牌 / Miss Modern Beauty 頁 / 訂製服務

網格系統、無襯線、紅色功能色

設計語言

國際主義排版風格：嚴格網格、黑色髮絲線結構、單一紅色只作功能性強調。零裝飾，資訊傳達效率極高。

適用場景

讓有設計素養的訪客一望便知「有品味」，同時資訊極為清晰。設計、顧問類別、年輕專業品牌。

適合類型

設計 / 顧問 / 專業服務

最佳示範

AI Training / 顧問類 / 年輕專業品牌

墨黑大字、展籤框、羅馬數字

設計語言

全站明體標題、展籤式框、羅馬數字章、墨黑放映室橫帶。內容被「策展」：每一段猶如展品，安靜而具份量。

適用場景

品牌有「作品」要展示：攝影、藝術、工藝、成就。讓訪客細看、記得住。

適合類型

藝術 / 攝影 / 作品展示

最佳示範

頒獎回顧 / 選美賽事 / 作品型內容

模組卡片格、大細不一、清晰掃描

設計語言

由 Apple 帶起的便當盒格設計：不對稱格陣，大小不一但秩序井然。每格一個重點，掃一眼便能取得全部資訊。

適用場景

資訊種類多元（服務＋收費＋活動＋影片），一次過盡收眼底。SaaS、產品線豐富的品牌。

適合類型

SaaS / 產品 / 多資訊主頁

最佳示範

AI 服務線 / 多服務品牌主頁

產品卡陣、價目牌、信任徽章

設計語言

零售轉化 DNA：價目卡、產品卡陣、分類導覽、橙色促銷 CTA。版面一切為「促使訪客落單」而設。

適用場景

有實價、以銷售為主的品牌。價錢直接標明，轉化率優先。

適合類型

零售 / 電商 / 有價目服務

最佳示範

Be shop / 花店 SG / 有定價療程表

聯絡卡先行、菜單式清單、親切友善

設計語言

大相 hero 加歡迎卡，聯絡資料直接置於首屏，服務以菜單式清單呈現。如同街坊店舖的咭片：親切、直接、毫不花巧。

適用場景

客人就是街坊，生意來自 walk-in 與來電。訪客一進場便知道「如何找到你、營業時間」。

適合類型

地區商戶 / 餐飲 / 店面服務

最佳示範

GIG cafe / 街舖 / 地區診所

信任藍、功能卡、報名 CTA

設計語言

信任藍 hero、功能卡陣、社會證明、報名 funnel。全球 SaaS 驗證數十年的銷售節奏，課程與服務同樣適用。

適用場景

有「課程／計劃」需要招生或銷售。訪客由認識到報名，全程路徑一氣呵成。

適合類型

教育 / 課程 / 服務銷售

最佳示範

College HK / SSI / AI Training（招生頁）

暗黑舞台、金色聚光、大相氣勢

設計語言

全站暗黑舞台底、金色聚光燈 CTA、全幅大相 hero。showcase 首個 dark 變體：一進場便有頒獎禮紅毯氣勢。

適用場景

講求「氣勢」的活動：頒獎禮、選美、盛事、年度大典。手機瀏覽同樣震撼。

適合類型

盛事 / 頒獎 / 演出

最佳示範

Miss Modern Beauty / Modern Voice / Top100 頒獎禮

金融級藍白、數據卡、透明收費

設計語言

金融級藍白結構：數據卡、透明收費表、安全感細節。V4 賣「組織形象」，V13 賣「精確可信」。

適用場景

醫療、金融、專業顧問：訪客必須先信任，才會將身體或金錢交託給你。

適合類型

醫療 / 專業顧問 / 認證

最佳示範

Veribel Medical / 認證查詢 / 專業顧問

粗邊框、巨型標題、作品格陣

設計語言

Neo-brutalist 作品集語彙：2px 粗框、巨型 uppercase 標題、作品格陣、單色 CTA。有個性、有態度。

適用場景

個人品牌、創作人、希望突圍而出的獨立工作室。要讓人記住你的名字。

適合類型

個人品牌 / 創作人 / 工作室

最佳示範

Care Lee（個人）/ 個人導師 / 獨立工作室

自然綠、花草粉、有機圓潤

設計語言

自然綠系統、花草粉點綴、2rem 大圓角、有機形狀。如同走進一間有花的店舖：溫暖、有生命力。

適用場景

花藝、天然產品、有機品牌——傳達「溫柔對待地球與身體」。

適合類型

花藝 / 天然 / 有機

最佳示範

Flower shop SG / 天然護膚 / 有機品牌