UI设计规范 - 斯堪的纳维亚风格

🌲 使用说明：本文档为斯堪的纳维亚风格的UI设计规范示例文档。

❄️ 目的：定义基于北欧设计理念的简约与功能美学，体现清爽、实用且温暖的斯堪的纳维亚特质，平衡美学与功能性的完美融合。

项目设计定位

设计理念

功能简约 · 温暖质感 · 自然和谐

深度体现北欧设计的核心哲学——在极简中融入温暖，在功能中体现美学。通过纯净的白色背景、温暖的北欧色调和精心选择的几何元素，创造既清爽又舒适的用户体验。设计强调"Lagom"（适度）的生活哲学，追求恰到好处的平衡，如Kinfolk杂志般的自然简约和HAY品牌般的功能美学。

目标用户群体

生活美学追求者：注重生活品质和美学体验的现代人
简约生活践行者：推崇北欧生活方式的都市白领
设计专业人士：室内设计师、产品设计师等创意工作者
年轻家庭用户：注重功能性和美观性平衡的家庭用户
可持续发展倡导者：关注环保和可持续设计的用户群体

设计创新点

温暖极简主义：在简约中融入温暖质感，避免冷漠感
功能美学融合：每个元素既美观又实用
自然色彩系统：北欧特有的淡蓝、原木、浅灰色调
有机几何元素：柔和的几何图形，避免过于锐利
呼吸感布局：大量留白但不失温暖亲近感

适用场景

🏔️ 斯堪的纳维亚风格 - 北欧生活美学的数字化

本设计风格专为追求简约生活美学和功能性平衡的应用场景设计，适合注重品质生活的现代用户群体：

最适合的项目类型

生活方式应用：家居设计工具、生活记录平台、品质生活指南
健康养生平台：健康管理、运动记录、心理健康应用
教育学习工具：在线课程平台、知识管理、技能学习应用
家庭管理系统：家务管理、财务规划、家庭日程安排
创意设计工具：设计协作平台、创意灵感收集、作品展示
可持续生活应用：环保指南、可持续消费、绿色生活助手
工作效率工具：项目管理、团队协作、时间管理应用

目标用户群体

生活美学爱好者：追求高品质生活体验的都市人群
北欧文化推崇者：喜爱北欧设计和生活方式的用户
功能性重视者：既要美观又要实用的理性消费者
年轻专业人士：25-40岁的职场精英和创意工作者
环保意识用户：关注可持续发展的现代消费者

设计优势

温暖亲和的用户体验
永不过时的经典美学
高度的功能性和实用性
强烈的品质感和信任感

色彩系统

北欧色彩哲学

自然纯净的色彩语言

主色调

雪花白：#FEFEFE (Snow White - 北欧雪景的纯净白)
天空蓝：#E3F2FD (Sky Blue - 北欧天空的淡雅蓝)
海洋蓝：#64B5F6 (Ocean Blue - 北欧海洋的清澈蓝)
薄雾灰：#F5F5F5 (Mist Gray - 晨雾般的轻柔灰)

温暖色调

原木色：#F3E5AB (Natural Wood - 白桦木的温暖色)
淡粉色：#FCE4EC (Soft Pink - 北欧日落的温柔粉)
米色：#FFF8E1 (Cream - 羊毛般的温暖米色)
浅橄榄：#F1F8E9 (Light Olive - 北欧植物的淡绿)

中性色系

石墨灰：#424242 (Graphite - 深沉的石墨色)
云朵灰：#E0E0E0 (Cloud Gray - 云朵的柔和灰)
羊毛白：#FAFAFA (Wool White - 羊毛织物的温暖白)

色彩使用原则

70-20-10法则：70%中性色，20%主色调，10%强调色
温暖平衡：即使在冷色调中也要保持温暖感
自然过渡：使用柔和的色彩过渡，避免强烈对比
功能性着色：色彩应服务于信息层级和用户引导

排版系统

北欧排版美学

克制有序的文字设计

字体系统

.nordic-typography {
    font-family: 'Circular', 'Futura', 'Avenir Next', 'Helvetica Neue', sans-serif;
    font-weight: 300; /* 轻盈字重 */
    line-height: 1.6; /* 舒适的行间距 */
    letter-spacing: 0.02em; /* 轻微字间距 */
}

.title-nordic {
    font-size: 48px;
    font-weight: 200;
    line-height: 1.2;
    color: #424242;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.subtitle-nordic {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.4;
    color: #64B5F6;
    margin-bottom: 24px;
}

.body-nordic {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    color: #424242;
    max-width: 600px;
}

.caption-nordic {
    font-size: 14px;
    font-weight: 200;
    color: #757575;
    line-height: 1.5;
}

大量留白系统

.spacing-nordic {
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 32px;
    --space-lg: 48px;
    --space-xl: 64px;
    --space-xxl: 96px;
}

.section-spacing {
    margin-bottom: var(--space-xxl);
    padding: var(--space-lg) 0;
}

.content-spacing {
    margin-bottom: var(--space-lg);
}

.element-spacing {
    margin-bottom: var(--space-md);
}

组件设计规范

温暖质感组件

功能与美学的完美平衡

按钮组件

.btn-nordic-primary {
    background: #64B5F6;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 16px 32px;
    font-family: 'Circular', sans-serif;
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(100, 181, 246, 0.3);
}

.btn-nordic-primary:hover {
    background: #42A5F5;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(100, 181, 246, 0.4);
}

.btn-nordic-secondary {
    background: transparent;
    color: #64B5F6;
    border: 2px solid #64B5F6;
    border-radius: 8px;
    padding: 14px 30px;
    font-family: 'Circular', sans-serif;
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-nordic-secondary:hover {
    background: #64B5F6;
    color: #FFFFFF;
}

.btn-nordic-soft {
    background: #F3E5AB;
    color: #424242;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-family: 'Circular', sans-serif;
    font-size: 14px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-nordic-soft:hover {
    background: #F0D878;
    transform: scale(1.02);
}

卡片组件

.card-nordic {
    background: #FEFEFE;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #F5F5F5;
    transition: all 0.3s ease;
}

.card-nordic:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.card-nordic-warm {
    background: linear-gradient(135deg, #FFF8E1 0%, #FCE4EC 100%);
    border: none;
    box-shadow: 0 4px 20px rgba(243, 229, 171, 0.3);
}

.card-header-nordic {
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.card-title-nordic {
    font-size: 20px;
    font-weight: 300;
    color: #424242;
    margin: 0;
}

表单组件

.form-nordic {
    max-width: 480px;
    margin: 0 auto;
}

.input-nordic {
    width: 100%;
    background: #FAFAFA;
    border: 2px solid #E0E0E0;
    border-radius: 12px;
    padding: 16px 20px;
    font-family: 'Circular', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #424242;
    outline: none;
    transition: all 0.3s ease;
}

.input-nordic:focus {
    border-color: #64B5F6;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(100, 181, 246, 0.1);
}

.input-nordic::placeholder {
    color: #BDBDBD;
    font-weight: 200;
}

.label-nordic {
    display: block;
    font-size: 14px;
    font-weight: 300;
    color: #424242;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.checkbox-nordic {
    width: 20px;
    height: 20px;
    border: 2px solid #E0E0E0;
    border-radius: 4px;
    background: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkbox-nordic:checked {
    background: #64B5F6;
    border-color: #64B5F6;
}

几何装饰系统

温暖几何元素

马勒维奇构成主义的北欧诠释

基础几何图形

.geo-triangle-nordic {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 34px solid #F3E5AB;
    opacity: 0.7;
    margin: 16px 0;
}

.geo-circle-nordic {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #FCE4EC 0%, #E3F2FD 100%);
    border-radius: 50%;
    opacity: 0.8;
    margin: 16px auto;
}

.geo-line-nordic {
    width: 80px;
    height: 2px;
    background: linear-gradient(to right, #64B5F6, #F3E5AB);
    margin: 24px 0;
    opacity: 0.6;
}

.geo-rectangle-nordic {
    width: 120px;
    height: 40px;
    background: #F1F8E9;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
    opacity: 0.5;
}

装饰性分隔元素

.divider-nordic {
    display: flex;
    align-items: center;
    margin: 48px 0;
    gap: 16px;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #E0E0E0, transparent);
}

.divider-dot {
    width: 8px;
    height: 8px;
    background: #64B5F6;
    border-radius: 50%;
    opacity: 0.6;
}

.accent-shape {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #F3E5AB 0%, #FCE4EC 100%);
    border-radius: 50% 20% 50% 20%;
    opacity: 0.3;
    z-index: -1;
}

布局模式

功能美学布局

Lagom哲学的空间应用

主页面布局

.page-nordic {
    min-height: 100vh;
    background: #FEFEFE;
    display: grid;
    grid-template-columns: 1fr minmax(320px, 1200px) 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        ". header ."
        ". main ."
        ". footer .";
    gap: 32px;
}

.header-nordic {
    grid-area: header;
    padding: 32px 0;
    border-bottom: 1px solid #F5F5F5;
}

.main-nordic {
    grid-area: main;
    padding: 48px 0;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.footer-nordic {
    grid-area: footer;
    padding: 32px 0;
    border-top: 1px solid #F5F5F5;
    background: #FAFAFA;
}

网格系统

.grid-nordic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    margin: 48px 0;
}

.grid-item-nordic {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #F5F5F5;
    position: relative;
    overflow: hidden;
}

.grid-item-nordic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, #64B5F6, #F3E5AB);
}

.content-section {
    max-width: 800px;
    margin: 0 auto 96px;
    padding: 0 32px;
}

.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    margin: 64px 0;
}

导航系统

简约实用导航

直观的用户引导

.nav-nordic {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 0 32px;
}

.nav-item-nordic {
    color: #424242;
    text-decoration: none;
    font-family: 'Circular', sans-serif;
    font-size: 16px;
    font-weight: 300;
    padding: 12px 0;
    position: relative;
    transition: color 0.3s ease;
}

.nav-item-nordic:hover {
    color: #64B5F6;
}

.nav-item-nordic.active {
    color: #64B5F6;
}

.nav-item-nordic.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #64B5F6;
    border-radius: 1px;
}

.logo-nordic {
    font-size: 24px;
    font-weight: 200;
    color: #424242;
    text-decoration: none;
    margin-right: auto;
    letter-spacing: 0.05em;
}

.nav-cta {
    background: #F3E5AB;
    color: #424242;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 300;
    transition: all 0.3s ease;
}

.nav-cta:hover {
    background: #F0D878;
    transform: translateY(-2px);
}

移动端导航

.mobile-nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    padding: 8px;
}

.mobile-nav-line {
    width: 24px;
    height: 2px;
    background: #424242;
    border-radius: 1px;
    transition: all 0.3s ease;
}

.mobile-nav-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    background: #FEFEFE;
    padding: 32px;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
    transition: left 0.3s ease;
    z-index: 1000;
}

.mobile-nav-menu.active {
    left: 0;
}

@media (max-width: 768px) {
    .nav-nordic {
        display: none;
    }
    
    .mobile-nav-toggle {
        display: flex;
    }
}

动效规范

自然流畅动效

温和有机的交互反馈

.nordic-transition {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

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

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.fade-in-nordic {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInNordic 0.6s ease-out forwards;
}

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

.gentle-pulse {
    animation: gentlePulse 3s ease-in-out infinite;
}

@keyframes gentlePulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

.warm-glow {
    position: relative;
    overflow: hidden;
}

.warm-glow::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(243, 229, 171, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.warm-glow:hover::before {
    opacity: 1;
}

响应式设计

自适应北欧美学

所有设备上的一致体验

/* 移动端优化 */
@media (max-width: 767px) {
    .page-nordic {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }
    
    .title-nordic {
        font-size: 32px;
        margin-bottom: 24px;
    }
    
    .subtitle-nordic {
        font-size: 20px;
        margin-bottom: 16px;
    }
    
    .card-nordic {
        padding: 24px;
        margin-bottom: 24px;
        border-radius: 12px;
    }
    
    .two-column {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .section-spacing {
        margin-bottom: 48px;
        padding: 32px 0;
    }
}

/* 平板端适配 */
@media (min-width: 768px) and (max-width: 1024px) {
    .page-nordic {
        grid-template-columns: 1fr minmax(320px, 800px) 1fr;
    }
    
    .grid-nordic {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 24px;
    }
}

/* 大屏优化 */
@media (min-width: 1400px) {
    .page-nordic {
        grid-template-columns: 1fr minmax(320px, 1400px) 1fr;
    }
    
    .title-nordic {
        font-size: 56px;
    }
    
    .content-section {
        max-width: 1000px;
    }
}

可访问性规范

包容性北欧设计

温暖的无障碍体验

.accessible-nordic {
    /* 确保充足的颜色对比度 */
    color: #424242;
    background: #FEFEFE;
}

.focus-nordic:focus {
    outline: 3px solid #64B5F6;
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-to-main {
    position: absolute;
    top: -40px;
    left: 24px;
    background: #424242;
    color: #FFFFFF;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    transition: top 0.3s;
}

.skip-to-main:focus {
    top: 24px;
}

.sr-only {
    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-nordic {
        border: 2px solid #424242;
    }
    
    .btn-nordic-primary {
        border: 2px solid #424242;
    }
}

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

设计原则总结

斯堪的纳维亚核心原则

Lagom哲学：恰到好处的平衡，既不过度也不不足
功能美学：美观必须服务于功能，功能必须体现美观
温暖简约：在极简中保持人性化的温暖感
自然和谐：使用自然色彩和有机形状
可持续性：设计应该是持久的、环保的

设计禁忌

❌ 过度装饰和复杂图案
❌ 强烈对比和刺激色彩
❌ 紧密拥挤的布局
❌ 冷漠无情的纯极简
❌ 过于复杂的交互逻辑

设计检查清单

✅ 是否体现了温暖的极简美学？
✅ 功能性是否得到充分体现？
✅ 色彩是否温和且和谐？
✅ 留白是否充足且舒适？
✅ 整体是否传达了北欧的生活哲学？
✅ 用户体验是否简单直观？

北欧设计哲学引用：

"Design is not just what it looks like and feels like. Design is how it works."

— 深受北欧设计影响的设计理念

"Lagom - 不多不少，恰到好处的生活哲学"

— 瑞典生活智慧

Hygge精神：

创造温暖、舒适、满足的氛围和感受

06-UI设计规范_斯堪的纳维亚风格_Scandinavian.md 18 KB History Raw

UI设计规范 - 斯堪的纳维亚风格

项目设计定位

设计理念

目标用户群体

设计创新点

适用场景

最适合的项目类型

目标用户群体

设计优势

色彩系统

北欧色彩哲学

主色调

温暖色调

中性色系

色彩使用原则

排版系统

北欧排版美学

字体系统

大量留白系统

组件设计规范

温暖质感组件

按钮组件

卡片组件

表单组件

几何装饰系统

温暖几何元素

基础几何图形

装饰性分隔元素

布局模式

功能美学布局

主页面布局

网格系统

导航系统

简约实用导航

移动端导航

动效规范

自然流畅动效

响应式设计

自适应北欧美学

可访问性规范

包容性北欧设计

设计原则总结

斯堪的纳维亚核心原则

设计禁忌

设计检查清单

06-UI设计规范_斯堪的纳维亚风格_Scandinavian.md 18 KB

History Raw