license: Apache-2.0 name: maximalist-web-design description: 極繁主義作為網頁設計哲學——多即是多。密集的資訊佈局、多層次的視覺元素、混合字型、大膽的色彩碰撞、交錯的網格、圖案疊加，以及對極簡主義網頁慣例的刻意排斥。涵蓋彭博終端機美學、MySpace 懷舊風、日本網頁密度以及留白恐懼症。啟用關鍵詞：'極繁主義網頁'、'密集佈局'、'資訊密集'、'反極簡'、'多即是多'、'熱鬧設計'、'留白恐懼症'、'彭博美學'、'MySpace 美學'、'視覺過載'、'密集儀表板'。不可用於室內設計極繁主義（請改用 maximalist-wall-decorator）、新粗獷主義（請改用 neobrutalist-web-designer）、拼貼佈局（請改用 collage-web-design）。 allowed-tools: Read,Write,Edit,Glob,Grep,WebSearch,WebFetch metadata: category: 設計與使用者體驗 tags: - 極繁主義 - 密集佈局 - 資訊密度 - 反極簡 - 留白恐懼症 - 儀表板 - 網頁設計 - MySpace - 彭博 pairs-with: - skill: neobrutalist-web-designer reason: 共享反極簡哲學，可將粗框與密度結合 - skill: retrofuturism-web-design reason: 卡帶未來主義和異塵餘生介面本質上都是極繁主義 - skill: typography-expert reason: 極繁主義需要自信的多字型組合 - skill: hero-section-design reason: 極繁主義的英雄區塊需要精心編排以避免混亂 category: 設計與創意 tags:
- 極繁主義
- 網頁設計
- 大膽
- 折衷
- 視覺
極繁主義網頁設計 是做什麼的？
創造擁抱密度、豐富性和視覺豐沛感的網頁體驗。極繁主義是刻意且熟練地拒絕「少即是多」——它主張多即是多，空白空間是浪費的空間，而視覺複雜性能在妥善編排下被瀏覽。
決策點
資訊密度決策樹
如果 viewport 寬度 > 1200px：
└── 如果使用者以資料為中心（交易、分析、儀表板）：
├── 資訊密度 > 80% 畫面 → 使用微卡片（8px 內邊距，0.75rem 文字）
└── 資訊密度 60-80% → 使用密集網格（4px 間距，180px 最小寬度）
└── 如果使用者為內容瀏覽（作品集、編輯類）：
├── 視覺衝擊優先 → 使用 20-30% 重疊的分層卡片
└── 可讀性優先 → 使用 1.5rem 間距的欄位佈局
如果 viewport 寬度 768-1199px：
└── 密度降低 30%：
├── 將側邊欄折疊為圖示
└── 切換為最多 2 欄的網格
如果 viewport 寬度 < 768px：
└── 單欄，觸控目標增加至最小 44px
動畫閾值決策樹
如果 viewport 中同時動畫數 > 3：
└── 減少為最多 2 個元素同時移動
如果動畫持續時間 > 1.5 秒：
└── 加入懸停暫停以提供使用者控制
如果使用者有動作敏感：
└── 替換為 CSS 轉場（持續時間 < 0.3s）
└── 僅使用 transform/opacity（避免佈局抖動）
色彩衝突管理
如果背景-前景對比度 < 4.5:1：
└── 在文字後方加入半透明疊加層
└── 或從調色盤切換為高對比色對
如果在單一組件中使用超過 5 種顏色：
└── 指派語意角色（主要、次要、強調、中性、警告）
└── 使用色盲模擬器測試可及性
如果顏色感覺混亂（使用者回饋）：
└── 建立色彩區域——將相關內容歸入相同色系
└── 使用 70-25-5 規則：70% 主導色、25% 次要色、5% 強調色
失敗模式
易引發癲癇的動畫過載
症狀： 多個元素同時動畫、快速閃爍效果、無暫停控制
檢測： 如果同時移動元素 > 3 個，或任何閃爍頻率 > 3Hz，或未支援 prefers-reduced-motion
修復： 最多限制 2 個並行動畫，加入懸停暫停，實作動畫減少查詢
難以辨識的文字瘟疫
症狀： 使用者抱怨可讀性，文字融入雜亂背景，內容參與度低 檢測： 對比度 < 4.5:1，密集背景上文字小於 14px，顏色衝突 修復： 在文字後方加入半透明背景，增加字重，切換為高對比色對
資訊架構崩潰
症狀： 使用者找不到關鍵操作，所有元素看起來同等重要，高跳出率 檢測： 無清晰視覺層級（瞇眼測試失敗），所有元素大小/重量相同，無色彩區域 修復： 實作標題/內文 4:1 尺寸比例，建立色塊區域，加入不透明層級 (1.0/0.7/0.4)
行動觸控目標失敗
症狀： 行動使用者感到挫折，誤觸，在觸控裝置上無法使用 檢測： 行動裝置上互動元素 < 44px，依賴懸停的互動，僅限桌機的密度 修復： 行動觸控目標增加至最小 44px，加入行動專用間距，實作漸進式密度
實作範例
範例 1：彭博風格交易儀表板
情境： 金融交易平台需要最大資訊密度，同時維持瞬間可用性。
初始評估： 使用者需要同時監控 50 個以上資料點，主要裝置為具備大螢幕的桌機，使用者為熟悉密度的專業交易員。
設計決策：
- 資訊密度： 85% 畫面覆蓋率（因超過 80% 密度門檻而選擇微卡片）
- 字型： 所有數字使用等寬字型 (IBM Plex Mono)，標籤使用窄版無襯線字型 (Barlow Condensed)
- 色彩系統： 彭博調色盤——終端機黑色背景，主要資料使用琥珀色，方向變化使用綠色/紅色
- 動畫： 僅以 0.3 秒高亮淡入淡出動畫價格變動，無並行動畫
實作策略：
.trading-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 2px;
padding: 4px;
height: 100vh;
overflow-y: auto;
}
.price-card {
background: #1E1E1E;
border: 1px solid #2A2A2A;
padding: 6px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
}
.price-change {
transition: background-color 0.3s ease;
}
做出的取捨：
- 為資訊密度犧牲視覺吸引力（選擇功能重於形式）
- 接受新使用者的陡峭學習曲線（優先考量專家使用者）
- 為桌機最佳化而限制行動體驗
範例 2：MySpace 懷舊風作品集網站
情境： 創意專業人士想要一個能捕捉 2000 年代初期網路精神，同時展示現代作品的個人作品集。
初始評估： 內容混合（圖片、文字、影片），目標觀眾為欣賞大膽風格的同儕創作者，主要目標為留下令人印象深刻的記憶，而非易用性。
設計決策：
- 資訊密度： 65% 畫面覆蓋率（選擇具有視覺重疊的分層卡片）
- 字型： 混合系統——標題使用 Abril Fatface，內文使用 Space Grotesk，說明文字使用 IBM Plex Mono
- 色彩系統： 電光極繁主義調色盤——紫羅蘭主色，珊瑚色次要，酸黃色強調
- 動畫： 微妙的視差滾動、懸停變形、交錯入場動畫
混亂控制策略：
- 色彩區域： 每個專案區塊使用不同的背景色調以建立區隔
- 視覺層級： 專案標題與描述之間 4:1 的尺寸比例
- 控制性重疊： 元素精確重疊 20%，創造節奏而非隨機性
- 喘息空間： 每三個區塊就有一個密度降低 80%，提供視覺休息
解決的關鍵問題： 如何讓極繁主義感覺是刻意的，而非偶然 解決方案： 使用數學關係（20% 重疊、4:1 比例、70-25-5 色彩分配）在混亂中建立秩序
品質把關
- 瞇眼測試通過：半閉眼時可看見 3 個不同的層級
- 所有內文對比度 ≥ 4.5:1（以實際背景圖案測量）
- 行動裝置上所有互動元素的觸控目標 ≥ 44px
- 任何 viewport 中最多同時 2 個並行動畫
- 已實作並測試
prefers-reduced-motion查詢 - 色彩區塊清楚區分不同內容區域
- 字型使用 ≥ 3 個字型家族，並指定不同的語意角色
- 行動版佈局密度比桌機版至少降低 30%
- 符合效能預算：即使 DOM 密集，首次內容繪製 < 2 秒
- 至少提供一個「逃脫閥」（可折疊面板、專注模式或篩選器）
不適用邊界
請勿將 maximalist-web-design 用於：
- 需要無障礙合規的政府或醫療網站 → 請改用 accessibility-first-design
- 電子商務結帳流程 → 請改用 conversion-optimization-expert 以獲得簡化的流程
- 室內設計極繁主義 → 請改用 maximalist-wall-decorator 處理實體空間
- 新粗獷主義的扁平色粗框風格 → 請改用 neobrutalist-web-designer 獲得該美學
- 編輯拼貼重疊構圖 → 請改用 collage-web-design 處理雜誌版面
- 企業 SaaS 應用程式 → 請改用 web-design-expert 處理商業軟體介面
- 為轉換率最佳化的登陸頁面 → 極繁主義與轉換目標相悖
在以下情況委派給其他技能：
- 客戶提到「乾淨專業」 → web-design-expert
- 專案需要 WCAG AAA 合規 → accessibility-first-design
- 預算限制需要快速開發 → bootstrap-expert
- 需要定義內容策略 → content-strategist