M+ 博物館網站：文化機構點做沉浸式數碼體驗

講到香港近年最矚目嘅文化地標，一定唔少得位於西九文化區嘅 **M+ 博物館**。作為亞洲全球性當代藝術博物館，M+ 不單止建築本身出自赫爾佐格和德梅隆（Herzog & de Meuron）之手，佢哋嘅官方網站 mplus.org.hk 同樣展現出極高嘅設計水準。今日就同大家拆解 M+ 網站點樣用數碼設計，將博物館嘅藝術氛圍帶到觀眾面前。

M+ 博物館介紹：西九文化區嘅視覺文化地標

M+ 係一間專注於 **20 及 21 世紀視覺文化**嘅博物館，收藏涵蓋設計、建築、流動影像、視覺藝術同香港視覺文化。博物館坐落於西九文化區，建築物本身就係一件巨型藝術品——偌大嘅 LED 幕牆、工業風嘅外觀，同維港天際線形成強烈對比。

呢種「 bold、當代、具視覺衝擊力」嘅特質，喺佢哋嘅網站設計中一樣睇得到。

📸 **【截圖位置：M+ 網站 Hero 區域，展示全屏視頻背景同「Asia’s global museum of contemporary art」大標題】**

全屏視頻背景 + 漸變遮罩效果

一入 M+ 網站，最先震撼到你嘅一定係個 **全屏視頻背景**。唔係一般 loop video 咁簡單，而係經過精心處理嘅視覺：

設計細節

近似 CSS 實現

/* Hero 區域全屏視頻背景 */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
}

/* 漸變遮罩層 */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
  z-index: 2;
}

/* 文字內容 */
.hero-content {
  position: relative;
  z-index: 3;
  color: #ffffff;
  padding: 4rem;
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

呢種做法嘅好處係：video 提供動態視覺吸引，漸變遮罩確保文字清晰可讀，兩者配合營造出「電影感」嘅第一印象。

展覽卡片設計：漸變色彩背景嘅藝術

M+ 網站嘅展覽區域（Exhibitions）係另一個設計亮點。三張展覽卡片並排，每張都有獨特嘅**漸變色彩背景**——由深紅到暗綠，由暗紫到深藍，色彩之間嘅過渡自然流暢。

色彩策略分析

📸 **【截圖位置：展覽卡片區域，展示三張並排卡片嘅漸變色彩效果】**

漸變背景 CSS 實現

/* 展覽卡片基礎樣式 */
.exhibition-card {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  transition: transform 0.4s ease, filter 0.4s ease;
}

/* Lee Bul - 深紅色調 */
.exhibition-card:nth-child(1) {
  background: linear-gradient(
    135deg,
    #2d0a0a 0%,
    #4a1515 30%,
    #1a0f0f 70%,
    #0d1f0d 100%
  );
}

/* Dial-A-Poem - 暗紫藍調 */
.exhibition-card:nth-child(2) {
  background: linear-gradient(
    135deg,
    #1a0a1a 0%,
    #2d1528 40%,
    #0f1a2d 80%,
    #0a1520 100%
  );
}

/* Ryuichi Sakamoto - 深藍綠調 */
.exhibition-card:nth-child(3) {
  background: linear-gradient(
    135deg,
    #0a0f1a 0%,
    #0f1a2d 50%,
    #0d1f14 80%,
    #0a150d 100%
  );
}

值得一提嘅係，M+ 嘅色彩運用並唔係純粹為咗「靚」，而係同每個展覽嘅主題、藝術家風格呼應。呢種「內容驅動設計」嘅做法，正正係文化機構網站應該有嘅態度。

Hover 效果：filter:brightness(1.1) 嘅微妙互動

M+ 網站嘅互動設計偏向克制，但細節位處理得恰到好處。展覽卡片嘅 hover 效果就係一個好例子。

實現方式

.exhibition-card {
  filter: brightness(1);
  transition: filter 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.exhibition-card:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}

/* 圖片層嘅輕微放大 */
.exhibition-card img {
  transition: transform 0.5s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exhibition-card:hover img {
  transform: scale(1.05);
}

點解用 `brightness(1.1)` 而唔係更大嘅數值？因為 M+ 嘅設計風格係**低調優雅**。文化機構唔需要太搶眼嘅動效，輕微嘅亮度提升已經足以畀用戶知道「呢個係可點擊嘅」。再配合圖片輕微放大，營造出層次感同深度感。

📸 **【截圖位置：展覽卡片 hover 狀態，展示 brightness 提升同圖片放大效果】**

深色主題 + 高對比文字

成個 M+ 網站都採用 **深色主題（Dark Theme）**，呢個選擇絕對有意識：

點解文化機構適合深色主題？

1. **藝術館嘅物理體驗延伸**：去過畫廊或博物館都知道，展覽空間通常燈光較暗，令藝術品更突出。深色網站模擬呢種體驗。

2. **內容為王**：深色背景令圖片、視頻同展覽內容成為視覺焦點，網站本身唔會搶戲。

3. **高級感同距離感**：深色調帶出博物館嘅權威感同專業感。

文字對比度處理

/* M+ 色彩系統 */
:root {
  --mplus-black: #0a0a0a;
  --mplus-dark: #1a1a1a;
  --mplus-gray: #888888;
  --mplus-light-gray: #cccccc;
  --mplus-white: #ffffff;
}

body {
  background-color: var(--mplus-black);
  color: var(--mplus-white);
}

/* 主要標題 */
h1, h2 {
  color: var(--mplus-white);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* 次要文字 */
.date, .meta {
  color: var(--mplus-light-gray);
}

/* 輔助說明 */
p.description {
  color: var(--mplus-gray);
}

M+ 網站確保所有文字都符合 **WCAG AA 對比度標準**（至少 4.5:1），深色背景上嘅白色文字輕鬆達到 15:1 以上，可讀性極高。

活動卡片區域：色彩編織嘅內容網絡

除咗展覽，M+ 網站嘅「活動（Programmes）」區域同樣精彩。每張活動卡片都用咗唔同嘅深色背景——暗綠、深藍、暗紫，形成一個**色彩豐富但和諧統一**嘅視覺網絡。

設計特點

📸 **【截圖位置：活動卡片區域，展示暗綠、深藍、暗紫背景嘅活動卡片】**

對文化機構網站設計嘅啟發

M+ 網站畀我哋嘅設計啟示可以總結為幾點：

① 氛圍先行

文化機構嘅網站首要任務係**營造氛圍**，而唔係單純傳遞資訊。M+ 用全屏視頻、深色主題同漸變色彩，令用戶未入館就已經感受到博物館嘅氣場。

② 克制勝過誇張

相比起大量動效同彈出視窗，M+ 選擇咗**克制的互動設計**。hover 效果輕微，動畫流暢自然，令焦點永遠停留喺內容上。

③ 內容驅動色彩

每個展覽卡片嘅色彩都同展覽主題相關，而唔係隨機揀。呢種做法需要設計師同內容團隊緊密合作，但效果絕對值得。

④ 雙語設計嘅典範

香港網站必須處理中英雙語，M+ 嘅做法係將中文放喺次要位置（細啲、灰啲），但保持清晰可讀。呢種**層次化雙語處理**值得參考。

結語

M+ 博物館網站係一個**文化機構數碼體驗**嘅優秀範例。佢證明咗網站設計可以同實體建築一樣，成為文化表達嘅載體。全屏視頻背景、漸變色彩卡片、深色主題同克制嘅互動設計，每一個元素都服務於同一個目標——將 M+ 嘅當代藝術精神帶到觀眾面前。

如果你都想發掘更多優秀嘅文化機構網站設計，歡迎上 **TrendyOnly** 瀏覽我哋精選嘅網站集合，每日更新，幫你緊貼網頁設計嘅最新趨勢！

**參考資料：**