首页 项目目录 关于我们
Sign In
python
/
AI-Copyright-Application-Generator
1
0
Fork 0
Files Pull Requests 0 Wiki
Branch: master
Branches Tags
AI-Copyright...
/
specs_docs
/
ui_design_specs
/
10-UI设计规范_艺术装饰风格_ArtDeco.md

10-UI设计规范_艺术装饰风格_ArtDeco.md 34 KB
Permalink History Raw

UI设计规范 - 艺术装饰风格

💎 使用说明：本文档为艺术装饰风格的UI设计规范示例文档。

✨ 目的：定义基于1920-1930年代Art Deco装饰艺术运动的设计美学，运用几何图案、金属质感和对称布局，营造奢华精致且充满时代魅力的视觉体验。

项目设计定位

设计理念

装饰艺术 · 几何奢华 · 对称美学

深度重现1920-1930年代装饰艺术运动的精髓，通过精致的几何图案、奢华的金属质感和严格的对称布局，创造如同纽约克莱斯勒大厦般的经典装饰美学。设计强调精工细作与奢华品质，每个元素都体现出那个黄金时代的优雅与繁荣，如同《了不起的盖茨比》电影中的视觉盛宴。

目标用户群体

  • 奢侈品爱好者：追求高端品质和经典美学的消费群体
  • 艺术收藏家：对装饰艺术有深度理解和欣赏的鉴赏家
  • 历史文化爱好者：对20世纪初期文化和艺术感兴趣的用户
  • 高端服务业从业者：酒店、餐饮、时尚等奢华行业专业人士
  • 设计专业人士：室内设计师、建筑师、装饰设计师

设计创新点

  1. 几何装饰系统：精致的对称几何图案和装饰线条
  2. 金属质感效果：金、银、铜等贵金属的视觉表现
  3. 装饰性排版：华丽的装饰字体和精美的文字排列
  4. 对称式构图：严格的对称平衡和放射状布局
  5. 奢华色彩系统：金色、黑色、深红等经典装饰色彩

适用场景

🏛️ 艺术装饰风格 - 黄金时代的奢华再现

本设计风格专为追求经典奢华和艺术品味的高端应用场景设计，适合对品质和美学有极高要求的用户群体：

最适合的项目类型

  • 奢侈品电商：珠宝首饰、高端腕表、奢侈品牌官网
  • 高端酒店餐饮：五星级酒店预订、精品餐厅、高端会所
  • 艺术文化机构：艺术博物馆、画廊展示、文化遗产平台
  • 金融投资平台：私人银行、投资理财、财富管理系统
  • 房地产豪宅：豪宅销售、高端物业、建筑设计展示
  • 时尚奢华品牌：高定时装、奢侈品配饰、品牌形象展示
  • 婚庆庆典服务：高端婚礼策划、庆典活动、仪式服务

目标用户群体

  • 高净值人群：有较强消费能力的成功人士
  • 艺术品味人士：对美学和品质有极高要求的鉴赏家
  • 文化精英：文化艺术领域的专业人士和爱好者
  • 奢华服务从业者：高端服务行业的专业人员
  • 历史文化研究者：对装饰艺术运动有研究兴趣的学者

设计优势

  • 极强的奢华感和品质感
  • 独特的历史文化内涵
  • 永恒的经典美学价值
  • 强烈的品牌高端形象

色彩系统

装饰艺术色彩

奢华典雅的经典配色

主色调

  • 香槟金：#F7E7CE (Champagne Gold - 温润的香槟金色)
  • 古典黑：#1C1C1C (Classic Black - 深邃的经典黑色)
  • 象牙白：#FFF8DC (Ivory White - 优雅的象牙白色)
  • 珍珠白：#F8F6F0 (Pearl White - 珍珠般的温润白色)

贵金属色系

  • 玫瑰金：#E8B4B8 (Rose Gold - 温柔的玫瑰金色)
  • 白金色：#E5E4E2 (Platinum - 高贵的白金色)
  • 古铜色：#CD7F32 (Bronze - 古典的青铜色)
  • 纯金色：#FFD700 (Pure Gold - 华丽的纯金色)

装饰色彩

  • 深红宝石：#722F37 (Deep Ruby - 深邃的红宝石色)
  • 翡翠绿：#50C878 (Emerald Green - 华贵的翡翠绿色)
  • 蓝宝石蓝：#0F52BA (Sapphire Blue - 高贵的蓝宝石色)
  • 紫水晶：#9966CC (Amethyst - 神秘的紫水晶色)

中性色系

  • 烟灰色：#848884 (Smoke Gray - 优雅的烟灰色)
  • 奶油色：#FFFDD0 (Cream - 温暖的奶油色)
  • 石墨色：#41424C (Charcoal - 深沉的石墨色)
  • 银灰色：#C4C3D0 (Silver Gray - 高贵的银灰色)

色彩使用原则

  1. 对比强烈：金色与黑色的经典对比组合
  2. 层次丰富：通过金属质感创造丰富的视觉层次
  3. 奢华感：大量使用金属色彩营造奢华氛围
  4. 经典永恒：选择具有时代感的经典配色

排版系统

装饰艺术字体

华丽精致的排版美学

字体层级

.artdeco-typography {
    font-family: 'Optima', 'Trajan Pro', 'Copperplate', 'Futura', sans-serif;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.1em;
}

.title-artdeco {
    font-size: 48px;
    font-weight: 300;
    line-height: 1.2;
    color: #FFD700;
    margin-bottom: 32px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    position: relative;
}

.title-artdeco::before,
.title-artdeco::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
}

.title-artdeco::before { left: -100px; }
.title-artdeco::after { right: -100px; }

.subtitle-artdeco {
    font-size: 28px;
    font-weight: 400;
    line-height: 1.3;
    color: #E8B4B8;
    margin-bottom: 24px;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.heading-artdeco {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: #CD7F32;
    margin-bottom: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.body-artdeco {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
    color: #1C1C1C;
    letter-spacing: 0.02em;
    text-align: justify;
    max-width: 600px;
}

.caption-artdeco {
    font-size: 14px;
    font-weight: 300;
    color: #848884;
    line-height: 1.6;
    letter-spacing: 0.05em;
    font-style: italic;
    text-align: center;
}

装饰性字体

.decorative-initial {
    float: left;
    font-size: 72px;
    line-height: 60px;
    padding-right: 12px;
    padding-top: 8px;
    color: #FFD700;
    font-family: 'Trajan Pro', serif;
    font-weight: 400;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.ornamental-number {
    font-size: 64px;
    font-weight: 100;
    color: #E8B4B8;
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Optima', sans-serif;
    letter-spacing: 0.2em;
    position: relative;
}

.ornamental-number::before,
.ornamental-number::after {
    content: '◆';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #CD7F32;
}

.ornamental-number::before { left: -40px; }
.ornamental-number::after { right: -40px; }

.elegant-quote {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.6;
    color: #722F37;
    font-style: italic;
    text-align: center;
    padding: 32px 40px;
    position: relative;
    background: linear-gradient(135deg, #FFF8DC 0%, #F8F6F0 100%);
    border: 1px solid #E8B4B8;
    margin: 32px 0;
}

.elegant-quote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 20px;
    font-size: 48px;
    color: #FFD700;
    font-family: 'Trajan Pro', serif;
}

.elegant-quote::after {
    content: '"';
    position: absolute;
    bottom: -20px;
    right: 20px;
    font-size: 48px;
    color: #FFD700;
    font-family: 'Trajan Pro', serif;
}

几何装饰排版

对称美学的文字布局

.centered-composition {
    text-align: center;
    padding: 48px 0;
    position: relative;
}

.symmetrical-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 40px;
    background: radial-gradient(ellipse, #FFF8DC 0%, #F8F6F0 100%);
    border: 2px solid #E8B4B8;
    position: relative;
}

.symmetrical-layout::before,
.symmetrical-layout::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid #FFD700;
    background: linear-gradient(45deg, #FFD700, #E8B4B8);
}

.symmetrical-layout::before {
    top: -2px;
    left: -2px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.symmetrical-layout::after {
    bottom: -2px;
    right: -2px;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

组件设计规范

装饰艺术组件

奢华精致的界面元素

按钮组件

.btn-artdeco-primary {
    background: linear-gradient(135deg, #FFD700 0%, #E8B4B8 100%);
    color: #1C1C1C;
    border: 2px solid #CD7F32;
    border-radius: 0;
    padding: 16px 32px;
    font-family: 'Optima', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 4px 15px rgba(255, 215, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-artdeco-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.1) 2px,
        rgba(255, 255, 255, 0.1) 4px
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-artdeco-primary:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(255, 215, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-artdeco-primary:hover::before {
    opacity: 1;
}

.btn-artdeco-secondary {
    background: transparent;
    color: #FFD700;
    border: 2px solid #FFD700;
    border-radius: 0;
    padding: 14px 30px;
    font-family: 'Optima', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 8px,
        rgba(255, 215, 0, 0.1) 8px,
        rgba(255, 215, 0, 0.1) 16px
    );
}

.btn-artdeco-secondary:hover {
    background: #FFD700;
    color: #1C1C1C;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.btn-luxury {
    background: linear-gradient(135deg, #1C1C1C 0%, #41424C 100%);
    color: #FFD700;
    border: 1px solid #FFD700;
    border-radius: 0;
    padding: 18px 36px;
    font-family: 'Copperplate', sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-luxury::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    transition: all 0.5s ease;
    transform: translate(-50%, -50%);
}

.btn-luxury:hover::after {
    width: 300px;
    height: 300px;
}

卡片组件

.card-artdeco {
    background: linear-gradient(135deg, #FFF8DC 0%, #F8F6F0 100%);
    border: 2px solid #E8B4B8;
    border-radius: 0;
    padding: 40px;
    margin-bottom: 32px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
}

.card-artdeco::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(232, 180, 184, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.card-artdeco::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    pointer-events: none;
}

.card-artdeco-luxury {
    background: linear-gradient(135deg, #1C1C1C 0%, #41424C 100%);
    border: 2px solid #FFD700;
    color: #FFF8DC;
    position: relative;
}

.card-artdeco-luxury::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid rgba(255, 215, 0, 0.5);
    pointer-events: none;
}

.card-header-artdeco {
    border-bottom: 2px solid #E8B4B8;
    padding-bottom: 20px;
    margin-bottom: 24px;
    text-align: center;
    position: relative;
}

.card-header-artdeco::after {
    content: '◆';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFF8DC;
    color: #FFD700;
    font-size: 20px;
    padding: 0 12px;
}

.card-title-artdeco {
    font-size: 24px;
    font-weight: 400;
    color: #FFD700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'Optima', sans-serif;
}

表单组件

.form-artdeco {
    max-width: 500px;
    margin: 0 auto;
    background: linear-gradient(135deg, #FFF8DC 0%, #F8F6F0 100%);
    padding: 48px;
    border: 3px solid #E8B4B8;
    position: relative;
}

.form-artdeco::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border: 1px solid rgba(255, 215, 0, 0.4);
    pointer-events: none;
}

.input-artdeco {
    width: 100%;
    background: #FFFFFF;
    border: 2px solid #E8B4B8;
    border-radius: 0;
    padding: 16px 20px;
    font-family: 'Optima', sans-serif;
    font-size: 16px;
    color: #1C1C1C;
    outline: none;
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
}

.input-artdeco:focus {
    border-color: #FFD700;
    box-shadow: 
        0 0 0 3px rgba(255, 215, 0, 0.2),
        inset 0 1px 3px rgba(0, 0, 0, 0.1);
    background: #FFF8DC;
}

.input-artdeco::placeholder {
    color: #848884;
    font-style: italic;
    font-weight: 300;
}

.label-artdeco {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #722F37;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'Copperplate', sans-serif;
}

.select-artdeco {
    width: 100%;
    background: #FFFFFF;
    border: 2px solid #E8B4B8;
    border-radius: 0;
    padding: 16px 20px;
    font-family: 'Optima', sans-serif;
    font-size: 16px;
    color: #1C1C1C;
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFD700' viewBox='0 0 16 16'%3e%3cpath d='M8 13.1l4.7-4.7-1.4-1.4L8 10.3 4.7 7l-1.4 1.4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
}

.checkbox-artdeco {
    width: 20px;
    height: 20px;
    border: 2px solid #CD7F32;
    border-radius: 0;
    background: #FFFFFF;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-artdeco:checked {
    background: linear-gradient(135deg, #FFD700, #E8B4B8);
    border-color: #FFD700;
}

.checkbox-artdeco:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #1C1C1C;
    font-size: 14px;
    font-weight: bold;
}

几何装饰系统

装饰艺术图案

对称几何的装饰美学

基础装饰元素

.artdeco-diamond {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #FFD700, #E8B4B8);
    transform: rotate(45deg);
    position: relative;
    margin: 20px auto;
}

.artdeco-diamond::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 1px solid rgba(28, 28, 28, 0.3);
}

.artdeco-sunburst {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #FFD700 30%, transparent 30%);
    position: relative;
    margin: 20px auto;
}

.artdeco-sunburst::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: conic-gradient(
        from 0deg,
        #FFD700 0deg 10deg,
        transparent 10deg 20deg,
        #E8B4B8 20deg 30deg,
        transparent 30deg 40deg,
        #CD7F32 40deg 50deg,
        transparent 50deg 60deg
    );
    background-repeat: repeat;
}

.artdeco-chevron {
    width: 80px;
    height: 40px;
    background: linear-gradient(
        135deg,
        #FFD700 25%,
        transparent 25%,
        transparent 50%,
        #E8B4B8 50%,
        #E8B4B8 75%,
        transparent 75%
    );
    background-size: 20px 20px;
    margin: 16px auto;
}

.artdeco-zigzag {
    width: 200px;
    height: 20px;
    background: repeating-linear-gradient(
        45deg,
        #FFD700,
        #FFD700 10px,
        #1C1C1C 10px,
        #1C1C1C 20px
    );
    margin: 20px auto;
}

复杂装饰图案

.artdeco-fan {
    width: 120px;
    height: 60px;
    background: linear-gradient(
        90deg,
        transparent 20%,
        #FFD700 20% 22%,
        transparent 22% 28%,
        #E8B4B8 28% 30%,
        transparent 30% 36%,
        #CD7F32 36% 38%,
        transparent 38% 44%,
        #722F37 44% 46%,
        transparent 46% 52%,
        #50C878 52% 54%,
        transparent 54% 60%,
        #0F52BA 60% 62%,
        transparent 62% 68%,
        #9966CC 68% 70%,
        transparent 70% 80%
    );
    border-radius: 60px 60px 0 0;
    margin: 20px auto;
    position: relative;
}

.artdeco-medallion {
    width: 100px;
    height: 100px;
    background: radial-gradient(
        circle,
        #FFD700 0% 10%,
        #1C1C1C 10% 15%,
        #E8B4B8 15% 25%,
        #1C1C1C 25% 30%,
        #CD7F32 30% 40%,
        #1C1C1C 40% 45%,
        transparent 45%
    );
    border-radius: 50%;
    margin: 20px auto;
    position: relative;
}

.artdeco-medallion::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #FFD700 0%, transparent 100%);
    border-radius: 50%;
}

.geometric-border {
    border: 4px solid transparent;
    border-image: repeating-linear-gradient(
        45deg,
        #FFD700,
        #FFD700 8px,
        #E8B4B8 8px,
        #E8B4B8 16px,
        #CD7F32 16px,
        #CD7F32 24px
    ) 4;
    padding: 24px;
    margin: 20px 0;
}

.stepped-pattern {
    width: 150px;
    height: 80px;
    background: 
        linear-gradient(to right, #FFD700 0% 20%, transparent 20% 25%, #E8B4B8 25% 45%, transparent 45% 50%, #CD7F32 50% 70%, transparent 70% 75%, #722F37 75% 95%, transparent 95%),
        linear-gradient(to bottom, transparent 0% 20%, #FFD700 20% 40%, transparent 40% 60%, #E8B4B8 60% 80%, transparent 80%);
    margin: 20px auto;
}

布局模式

对称奢华布局

经典装饰艺术的空间美学

主页面布局

.page-artdeco {
    min-height: 100vh;
    background: linear-gradient(135deg, #FFF8DC 0%, #F8F6F0 50%, #FFF8DC 100%);
    display: grid;
    grid-template-columns: 1fr minmax(320px, 1000px) 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        ". header ."
        ". main ."
        ". footer .";
    gap: 0;
    position: relative;
}

.page-artdeco::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(232, 180, 184, 0.05) 0%, transparent 50%),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 100px,
            rgba(255, 215, 0, 0.02) 100px,
            rgba(255, 215, 0, 0.02) 200px
        );
    pointer-events: none;
    z-index: -1;
}

.header-artdeco {
    grid-area: header;
    padding: 40px 0;
    border-bottom: 3px solid #E8B4B8;
    text-align: center;
    position: relative;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.1) 50%, transparent 100%);
}

.header-artdeco::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 6px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
}

.main-artdeco {
    grid-area: main;
    padding: 80px 40px;
    display: flex;
    flex-direction: column;
    gap: 64px;
    position: relative;
}

.footer-artdeco {
    grid-area: footer;
    padding: 40px 0;
    border-top: 3px solid #E8B4B8;
    text-align: center;
    background: linear-gradient(135deg, #F8F6F0 0%, #FFF8DC 100%);
    position: relative;
}

.footer-artdeco::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 6px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
}

对称网格布局

.symmetrical-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 40px;
    margin: 64px 0;
    position: relative;
}

.symmetrical-grid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #E8B4B8, transparent);
    transform: translateY(-50%);
}

.symmetrical-grid::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(180deg, transparent, #E8B4B8, transparent);
    transform: translateX(-50%);
}

.grid-center {
    grid-column: 2;
    grid-row: 2;
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, #FFF8DC 0%, #F8F6F0 100%);
    border: 2px solid #E8B4B8;
    position: relative;
}

.grid-corner {
    padding: 24px;
    background: linear-gradient(45deg, #FFD700, #E8B4B8);
    color: #1C1C1C;
    text-align: center;
    position: relative;
}

.grid-corner:nth-child(1) { grid-column: 1; grid-row: 1; }
.grid-corner:nth-child(2) { grid-column: 3; grid-row: 1; }
.grid-corner:nth-child(3) { grid-column: 1; grid-row: 3; }
.grid-corner:nth-child(4) { grid-column: 3; grid-row: 3; }

.grid-side {
    padding: 32px;
    background: linear-gradient(135deg, #F8F6F0, #FFF8DC);
    border: 1px solid #E8B4B8;
    text-align: center;
}

.grid-side:nth-child(5) { grid-column: 2; grid-row: 1; }
.grid-side:nth-child(6) { grid-column: 1; grid-row: 2; }
.grid-side:nth-child(7) { grid-column: 3; grid-row: 2; }
.grid-side:nth-child(8) { grid-column: 2; grid-row: 3; }

放射状布局

.radial-layout {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 80px auto;
    background: radial-gradient(circle, #FFF8DC 0%, #F8F6F0 100%);
    border: 3px solid #E8B4B8;
    border-radius: 50%;
}

.radial-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    background: linear-gradient(45deg, #FFD700, #E8B4B8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #1C1C1C;
    z-index: 10;
}

.radial-item {
    position: absolute;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #CD7F32, #722F37);
    border: 2px solid #FFD700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF8DC;
    font-weight: 500;
    text-align: center;
    font-size: 12px;
}

.radial-item:nth-child(2) { top: 20px; left: 50%; transform: translateX(-50%); }
.radial-item:nth-child(3) { top: 20%; right: 20px; }
.radial-item:nth-child(4) { top: 50%; right: 20px; transform: translateY(-50%); }
.radial-item:nth-child(5) { bottom: 20%; right: 20px; }
.radial-item:nth-child(6) { bottom: 20px; left: 50%; transform: translateX(-50%); }
.radial-item:nth-child(7) { bottom: 20%; left: 20px; }
.radial-item:nth-child(8) { top: 50%; left: 20px; transform: translateY(-50%); }
.radial-item:nth-child(9) { top: 20%; left: 20px; }

导航系统

奢华装饰导航

典雅的导航美学

.nav-artdeco {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 40px;
    height: 100%;
    position: relative;
}

.nav-artdeco::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
}

.nav-artdeco::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
}

.nav-item-artdeco {
    color: #1C1C1C;
    text-decoration: none;
    font-family: 'Optima', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 20px 24px;
    margin: 0 8px;
    position: relative;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid transparent;
}

.nav-item-artdeco::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 45%, #FFD700 45% 55%, transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-item-artdeco::after {
    content: '◆';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    color: #FFD700;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-item-artdeco:hover {
    color: #722F37;
    border-color: #E8B4B8;
    background: rgba(255, 215, 0, 0.1);
}

.nav-item-artdeco:hover::before {
    opacity: 1;
}

.nav-item-artdeco:hover::after {
    opacity: 1;
}

.nav-item-artdeco.active {
    color: #722F37;
    background: linear-gradient(135deg, #FFF8DC, #F8F6F0);
    border-color: #FFD700;
}

.nav-item-artdeco.active::after {
    opacity: 1;
}

.logo-artdeco {
    font-size: 32px;
    font-weight: 300;
    color: #FFD700;
    text-decoration: none;
    margin-right: auto;
    font-family: 'Trajan Pro', serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: relative;
}

.logo-artdeco::before {
    content: '◆';
    margin-right: 8px;
    color: #E8B4B8;
}

.logo-artdeco::after {
    content: '◆';
    margin-left: 8px;
    color: #E8B4B8;
}

.breadcrumb-artdeco {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
    font-size: 14px;
    color: #848884;
    font-family: 'Copperplate', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.breadcrumb-item-artdeco {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
    position: relative;
}

.breadcrumb-item-artdeco:hover {
    color: #FFD700;
}

.breadcrumb-separator-artdeco {
    color: #E8B4B8;
    font-weight: 500;
}

.breadcrumb-separator-artdeco::before {
    content: '◆';
    font-size: 10px;
}

动效规范

优雅过渡动效

装饰艺术的动态美学

.artdeco-transition {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.luxury-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.luxury-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(255, 215, 0, 0.3);
    filter: brightness(1.1);
}

.fade-in-artdeco {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInArtdeco 1s ease-out forwards;
}

@keyframes fadeInArtdeco {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.golden-shimmer {
    position: relative;
    overflow: hidden;
}

.golden-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.4), transparent);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    50% { left: 0%; }
    100% { left: 100%; }
}

.elegant-scale {
    animation: elegantScale 2s ease-in-out infinite alternate;
}

@keyframes elegantScale {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    100% {
        transform: scale(1.02);
        filter: brightness(1.1);
    }
}

.radial-expand {
    animation: radialExpand 1.5s ease-out;
}

@keyframes radialExpand {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

.ornamental-entrance {
    animation: ornamentalEntrance 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes ornamentalEntrance {
    0% {
        opacity: 0;
        transform: scale(0.3) rotateY(90deg);
        filter: blur(5px);
    }
    60% {
        opacity: 1;
        transform: scale(1.1) rotateY(-10deg);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
        filter: blur(0px);
    }
}

响应式设计

奢华的适配策略

保持装饰美学的响应式原则

/* 移动端优化 */
@media (max-width: 767px) {
    .page-artdeco {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
    
    .title-artdeco {
        font-size: 32px;
        margin-bottom: 24px;
    }
    
    .title-artdeco::before,
    .title-artdeco::after {
        width: 60px;
    }
    
    .title-artdeco::before { left: -80px; }
    .title-artdeco::after { right: -80px; }
    
    .subtitle-artdeco {
        font-size: 20px;
        margin-bottom: 16px;
    }
    
    .card-artdeco {
        padding: 24px;
        margin-bottom: 24px;
    }
    
    .symmetrical-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(9, auto);
        gap: 20px;
    }
    
    .symmetrical-grid > * {
        grid-column: 1;
        grid-row: auto;
    }
    
    .radial-layout {
        width: 300px;
        height: 300px;
    }
    
    .radial-center {
        width: 80px;
        height: 80px;
    }
    
    .radial-item {
        width: 60px;
        height: 60px;
        font-size: 10px;
    }
    
    .main-artdeco {
        padding: 40px 20px;
        gap: 40px;
    }
}

/* 平板端适配 */
@media (min-width: 768px) and (max-width: 1024px) {
    .page-artdeco {
        grid-template-columns: 1fr minmax(320px, 700px) 1fr;
    }
    
    .symmetrical-grid {
        grid-template-columns: 1fr 1.5fr 1fr;
        gap: 30px;
    }
    
    .title-artdeco {
        font-size: 40px;
    }
    
    .subtitle-artdeco {
        font-size: 24px;
    }
    
    .radial-layout {
        width: 350px;
        height: 350px;
    }
}

/* 大屏优化 */
@media (min-width: 1200px) {
    .page-artdeco {
        grid-template-columns: 1fr minmax(320px, 1200px) 1fr;
    }
    
    .title-artdeco {
        font-size: 56px;
    }
    
    .subtitle-artdeco {
        font-size: 32px;
    }
    
    .main-artdeco {
        padding: 100px 60px;
        gap: 80px;
    }
    
    .card-artdeco {
        padding: 48px;
    }
    
    .radial-layout {
        width: 500px;
        height: 500px;
    }
    
    .radial-center {
        width: 140px;
        height: 140px;
    }
    
    .radial-item {
        width: 90px;
        height: 90px;
        font-size: 14px;
    }
}

可访问性规范

包容性奢华设计

优雅的无障碍体验

.accessible-artdeco {
    /* 确保充足的颜色对比度 */
    color: #1C1C1C;
    background: #FFF8DC;
}

.focus-artdeco:focus {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
    border-radius: 0;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.skip-link-artdeco {
    position: absolute;
    top: -50px;
    left: 30px;
    background: #1C1C1C;
    color: #FFD700;
    padding: 12px 24px;
    text-decoration: none;
    border: 2px solid #FFD700;
    font-family: 'Optima', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: top 0.3s;
    z-index: 1001;
}

.skip-link-artdeco:focus {
    top: 30px;
}

.sr-only-artdeco {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .card-artdeco {
        border: 4px solid #1C1C1C;
        background: #FFFFFF;
    }
    
    .btn-artdeco-primary {
        border: 3px solid #1C1C1C;
        background: #FFD700;
        color: #1C1C1C;
    }
    
    .nav-item-artdeco {
        color: #1C1C1C;
        border: 2px solid #1C1C1C;
    }
    
    .title-artdeco {
        color: #1C1C1C;
        text-shadow: none;
    }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .golden-shimmer::before {
        display: none;
    }
}

设计原则总结

装饰艺术核心原则

  1. 几何对称：严格的对称布局和几何图案装饰
  2. 奢华材质：金属质感和贵重材料的视觉表现
  3. 精工细作：注重细节和工艺品质的完美呈现
  4. 时代经典：体现1920-1930年代的黄金时代美学
  5. 装饰丰富：华丽的装饰元素和精致的视觉细节

设计禁忌

  • ❌ 简陋粗糙的设计元素
  • ❌ 不对称的随意布局
  • ❌ 缺乏装饰的极简设计
  • ❌ 低品质的视觉效果
  • ❌ 现代科技风的冷色调

设计检查清单

  • ✅ 是否使用了奢华的金属色彩？
  • ✅ 布局是否体现对称美学？
  • ✅ 是否包含精致的几何装饰？
  • ✅ 字体是否典雅华丽？
  • ✅ 整体是否传达奢华品质感？
  • ✅ 用户体验是否优雅精致？

装饰艺术运动引用：

"Ornament is not a crime."

— 对现代主义"装饰即罪恶"观念的反驳

"Beauty will be convulsive or will not be at all."

— André Breton，超现实主义诗人

设计哲学：

奢华不在于昂贵，而在于无可替代

真正的装饰艺术，是将功能与美学完美融合的艺术