Maximalism

Controlled Maximalism

"密集而丰富，但深度有意为之。如同一座精挑细选的文物博物馆。"

使用时机

当用户的请求匹配上述美学风格时使用此子风格。这是 design-it 技能的子参考，不应被直接触发。

核心原则

1. 高密度：屏幕堆满信息、图像和可交互元素。
2. 装饰细节：使用装饰性边框、复杂纹理和经典设计花饰。
3. 结构化混乱：与 Vibrant Maximalism 不同，此处的布局基于严格的底层网格，将海量内容约束在一起。

视觉 DNA

• 颜色：Monochromatic Brown、Yacht Club，或丰富的宝石色调（祖母绿、红宝石、蓝宝石、金色）。
• 排版：华丽的衬线字体（如 Cinzel 或 Playfair Display）搭配密集、高度可读的无衬线正文。
• 边框与分隔线：广泛使用细而优雅的线条分隔每个内容片段。

Web 实现

• 使用密集的 CSS Grid 布局。
• CSS 示例：

body {
  background-color: #0F172A; /* 深板岩蓝 */
  color: #E2E8F0;
  background-image: url('subtle-damask-pattern.png');
}

.max-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  padding: 16px;
}

.max-item {
  background-color: rgba(30, 41, 59, 0.9); /* 图案上的半透明 */
  border: 1px solid #475569;
  padding: 24px;
}

/* 装饰性华丽边框 */
.max-feature {
  grid-column: span 3;
  border: 2px solid #D4AF37; /* 金色 */
  position: relative;
}

.max-feature::before {
  content: '';
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  border: 1px dashed #D4AF37;
}

.max-title {
  font-family: 'Cinzel', serif;
  color: #D4AF37;
  font-size: 2.5rem;
  text-align: center;
  border-bottom: 1px solid #475569;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

App 实现

SwiftUI

struct MaximalismView: View {
    let columns = [
        GridItem(.flexible(), spacing: 4),
        GridItem(.flexible(), spacing: 4),
        GridItem(.flexible(), spacing: 4)
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 4) {
                // 特色跨格
                MaxItem(title: "MUSEUM", isFeature: true)
                // 密集数据块
                MaxItem(title: "1892")
                MaxItem(title: "Vol. II")
                MaxItem(title: "Arch")
                MaxItem(title: "Index")
            }
            .padding(16)
        }
        .background(Color(hex: "0F172A")) // 深板岩
    }
}

struct MaxItem: View {
    let title: String
    var isFeature: Bool = false
    
    var body: some View {
        VStack {
            Text(title)
                .font(.custom("Cinzel", size: isFeature ? 28 : 14))
                .foregroundColor(Color(hex: "D4AF37")) // 金色
                .padding()
        }
        .frame(maxWidth: .infinity, minHeight: isFeature ? 150 : 80)
        .background(Color(hex: "1E293B").opacity(0.9))
        .border(Color(hex: "475569"), width: 1)
        .overlay(
            // 特色项的华丽内虚线边框
            Group {
                if isFeature {
                    Rectangle()
                        .stroke(style: StrokeStyle(lineWidth: 1, dash: [4]))
                        .foregroundColor(Color(hex: "D4AF37"))
                        .padding(4)
                }
            }
        )
    }
}

• 使用 LazyVGrid 配合非常紧密的 spacing（如 4）来创建必要的密度。
• 广泛使用 .border 和 .overlay(Rectangle().stroke(...)) 来框定每条数据，模仿华丽装裱。

Flutter

class MaximalismScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF0F172A),
      body: GridView.count(
        crossAxisCount: 3,
        padding: const EdgeInsets.all(16),
        mainAxisSpacing: 4,
        crossAxisSpacing: 4,
        children: [
          // Flutter 的标准 GridView 不容易跨列。
          // 在真实应用中，使用 `flutter_staggered_grid_view` 包。
          _buildItem('1892'),
          _buildItem('Vol. II'),
          _buildItem('Arch'),
          _buildItem('Index', isOrnate: true),
          _buildItem('04'),
          _buildItem('XII'),
        ],
      ),
    );
  }

  Widget _buildItem(String title, {bool isOrnate = false}) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFF1E293B).withOpacity(0.9),
        border: Border.all(color: const Color(0xFF475569), width: 1),
      ),
      child: Stack(
        children: [
          if (isOrnate)
            Positioned.fill(
              child: Padding(
                padding: const EdgeInsets.all(4.0),
                // 原生需要 path_drawing 或自定义 painter 实现虚线边框
                child: Container(
                  decoration: BoxDecoration(border: Border.all(color: const Color(0xFFD4AF37), width: 1)),
                ),
              ),
            ),
          Center(
            child: Text(
              title,
              style: const TextStyle(fontFamily: 'Cinzel', color: Color(0xFFD4AF37), fontSize: 16),
            ),
          ),
        ],
      ),
    );
  }
}

• 使用 flutter_staggered_grid_view 创建典型的 Maximalism 风格复杂、跨格的"瀑布流"或建筑网格布局。
• 使用 Stack 配合 Positioned.fill 和 Padding 创建双层边框效果。

React Native

const MaximalismScreen = () => {
  return (
    <ScrollView style={{ flex: 1, backgroundColor: '#0F172A' }}>
      <View style={{ padding: 16, flexDirection: 'row', flexWrap: 'wrap', gap: 4 }}>
        
        {/* 特色项横跨整宽 */}
        <View style={[styles.item, styles.featureItem]}>
          <View style={styles.ornateInnerBorder}>
            <Text style={[styles.text, { fontSize: 32 }]}>MUSEUM</Text>
          </View>
        </View>

        {/* 小型密集项 */}
        <View style={[styles.item, { width: '32%' }]}><Text style={styles.text}>1892</Text></View>
        <View style={[styles.item, { width: '32%' }]}><Text style={styles.text}>Vol. II</Text></View>
        <View style={[styles.item, { width: '32%' }]}><Text style={styles.text}>Arch</Text></View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  item: {
    backgroundColor: 'rgba(30, 41, 59, 0.9)',
    borderColor: '#475569', borderWidth: 1,
    height: 100, justifyContent: 'center', alignItems: 'center'
  },
  featureItem: {
    width: '100%', height: 200, padding: 4,
  },
  ornateInnerBorder: {
    flex: 1, width: '100%',
    borderColor: '#D4AF37', borderWidth: 1, borderStyle: 'dashed',
    justifyContent: 'center', alignItems: 'center'
  },
  text: {
    fontFamily: 'Cinzel-Regular', color: '#D4AF37', fontSize: 16
  }
});

• 在 React Native 中，flexWrap: 'wrap' 容器配合百分比宽度（例如 3 列时 32%）是构建复杂、密集网格的最简单方法。
• 使用 borderStyle: 'dashed' 配合实色外边框来创建华丽装裱。

Jetpack Compose

@Composable
fun MaximalismScreen() {
    LazyVerticalGrid(
        columns = GridCells.Fixed(3),
        modifier = Modifier.fillMaxSize().background(Color(0xFF0F172A)).padding(16.dp),
        horizontalArrangement = Arrangement.spacedBy(4.dp),
        verticalArrangement = Arrangement.spacedBy(4.dp)
    ) {
        // 特色横跨 3 列
        item(span = { GridItemSpan(3) }) {
            MaxItem("MUSEUM", isFeature = true)
        }
        // 密集项
        items(6) { index ->
            MaxItem("Item $index")
        }
    }
}

@Composable
fun MaxItem(title: String, isFeature: Boolean = false) {
    Box(
        modifier = Modifier
            .height(if (isFeature) 200.dp else 100.dp)
            .background(Color(0xFF1E293B).copy(alpha = 0.9f))
            .border(1.dp, Color(0xFF475569))
            .padding(4.dp),
        contentAlignment = Alignment.Center
    ) {
        if (isFeature) {
            // 华丽内边框
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .border(1.dp, Color(0xFFD4AF37), shape = RoundedCornerShape(0.dp))
                    // 注意：虚线边框在 Compose 中需要自定义 drawBehind modifier
            )
        }
        Text(
            text = title,
            color = Color(0xFFD4AF37),
            fontFamily = FontFamily.Serif, // 替换为自定义 Cinzel 字体
            fontSize = if (isFeature) 32.sp else 16.sp
        )
    }
}

• LazyVerticalGrid 配合 GridCells.Fixed(3) 是完美的。
• 使用 GridItemSpan(3) 让英雄元素横跨整宽，模仿编辑或博物馆布局。

推荐与避免

• 推荐：把每个像素都视为宝贵的资产。给所有内容加上边框。
• 避免：变得难以阅读。尽管密度高，文字与背景的对比度必须保持。

限制

• 这是一个样式参考，不能替代特定环境的验证、可访问性测试或专家评审。
• 适当的对比度和响应式行为需要单独验证。