风格陈列馆

现行网站采用的设计

设计语言

浅紫色调轻玻璃卡片、圆角构件、渐层 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 / 天然护肤 / 有机品牌