UI设计规范 - 日式极简风格

🕯️ 使用说明：本文档为日式极简风格的UI设计规范示例文档。

🧘 目的：定义基于"侘寂"(Wabi-Sabi)美学的设计理念、风格和规范，体现接受不完美、无常与不完整的哲学，营造深度宁静、精致且富有禅意的视觉体验。

项目设计定位

设计理念

侘寂美学 · 间(Ma)之道 · 静谧禅意

深入体现日式"侘寂"美学理念，通过极度克制的色彩、大量的留白空间和细腻的非对称布局，创造如京都寺院般的宁静氛围。设计遵循"少即是多"的哲学，每一个元素都经过深思熟虑，追求精神层面的平静与和谐，如同原研哉的MUJI设计理念和日本传统水墨画的留白美学。

目标用户群体

禅修爱好者：追求内心平静和精神修养的用户群体
艺术鉴赏者：对东方美学有深度理解的文化人士
简约生活践行者：崇尚极简生活方式的现代人
文化学者：研究日本文化和美学的专业人士
冥想practitioners：使用冥想和正念应用的用户群体

设计创新点

留白至上原则：70%以上空白空间，创造"间"的美学
侘寂不完美美学：刻意的不对称和微妙的"缺憾"
墨韵点睛：单一墨迹或印章作为视觉焦点
垂直排版系统：体现日本传统书写美学
微妙质感：如和纸般的细腻材质感

适用场景

🌸 日式极简风格 - 禅意生活的数字体现

本设计风格专为追求内心平静和精神层面体验的应用场景设计，适合注重精神修养和文化内涵的用户群体：

最适合的项目类型

冥想禅修应用：冥想指导工具、正念练习平台、禅修社区
文化艺术平台：传统文化学习、书画艺术展示、茶道花道应用
阅读写作工具：极简阅读器、诗歌创作平台、日记应用
生活方式应用：极简生活指导、整理收纳工具、慢生活平台
健康养生软件：养生指导、健康记录、身心调理应用
学术研究工具：东方哲学研究、文化典籍数字化平台
疗愈类应用：心理健康、情绪管理、压力缓解工具

目标用户群体

文化爱好者：对日本文化和东方美学有浓厚兴趣的人群
简约生活者：追求极简生活方式的现代都市人
精神修养者：注重内心修炼和精神成长的人群
艺术从业者：书法家、画家、设计师等艺术工作者
学者研究者：研究东方文化和美学的专业人士

设计优势

极强的心理疗愈和放松效果
独特的文化底蕴和精神内涵
超越时代的永恒美学价值
提升用户的专注力和内心平静

色彩系统

侘寂色彩哲学

极度克制的自然色调

主色调

雪白：#FEFEFE (Snow White - 接近纯白但带有温润感)
墨黑：#1A1A1A (Ink Black - 深邃的墨色)
淡墨：#E8E8E8 (Light Ink - 如墨汁在宣纸上的淡化)
中性灰：#C0C0C0 (Neutral Gray - 禅意的中庸色)

辅助色调

茶墨：#4A4A4A (Tea Ink - 茶色调的墨色)
纸白：#F9F9F9 (Paper White - 和纸的温润白)
影灰：#D3D3D3 (Shadow Gray - 微妙的阴影色)
禅灰：#8B8B8B (Zen Gray - 冥想时的宁静色)

点睛色彩（极少使用）

朱砂：#CC3333 (Vermillion - 仅用于印章或重要标记)
青墨：#2E3A4F (Blue Ink - 微妙的青色墨汁)

色彩使用原则

极度克制：90%使用白、灰、黑色系
自然过渡：允许微妙的色彩渐变，如墨色在纸上的晕染
单点突出：偶尔使用一个朱砂色作为视觉焦点
质感优先：注重色彩的质感和深度，而非饱和度

留白(Ma)美学系统

核心留白原则

"间"之道 - 空白即内容

空间比例

.ma-philosophy {
    /* 核心原则：70%以上留白 */
    --content-ratio: 30%;
    --whitespace-ratio: 70%;
    --breathing-space: 48px;
    --minimal-spacing: 24px;
    --micro-spacing: 8px;
}

.container-zen {
    max-width: 800px;
    margin: 0 auto;
    padding: 96px 48px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.content-island {
    max-width: 240px; /* 30% of container */
    margin: 0 0 0 auto; /* 非对称布局 */
    padding: 48px 0;
}

留白层级

.breathing-large {
    margin: 96px 0; /* 大呼吸空间 */
}

.breathing-medium {
    margin: 48px 0; /* 中等留白 */
}

.breathing-small {
    margin: 24px 0; /* 小间距 */
}

.breathing-micro {
    margin: 8px 0; /* 微小间隙 */
}

排版系统

垂直书写美学

传统日式排版的数字化重现

主字体系统

.japanese-typography {
    font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
    font-weight: 300; /* 极轻的字重 */
    line-height: 2.0; /* 宽松的行间距 */
    letter-spacing: 0.1em; /* 字间距 */
}

.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    direction: rtl;
    height: 400px;
    padding: 24px;
    line-height: 2.5;
}

.horizontal-zen {
    writing-mode: horizontal-tb;
    text-align: left;
    max-width: 280px;
    line-height: 2.2;
}

字体层级

.title-zen {
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 0.2em;
    margin-bottom: 48px;
    color: #1A1A1A;
    writing-mode: vertical-rl;
    height: 120px;
}

.subtitle-zen {
    font-size: 16px;
    font-weight: 200;
    letter-spacing: 0.15em;
    margin-bottom: 32px;
    color: #4A4A4A;
}

.body-zen {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.08em;
    line-height: 2.2;
    color: #1A1A1A;
    max-width: 320px;
}

.caption-zen {
    font-size: 12px;
    font-weight: 200;
    letter-spacing: 0.1em;
    color: #8B8B8B;
    margin-top: 24px;
}

非对称布局

刻意的不完美美学

.asymmetric-container {
    display: grid;
    grid-template-columns: 2fr 1fr 3fr;
    grid-template-rows: 1fr 2fr 1fr;
    gap: 48px;
    min-height: 100vh;
    padding: 96px 48px;
}

.content-block-1 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    align-self: start;
}

.content-block-2 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    align-self: end;
    justify-self: end;
    max-width: 200px;
}

.accent-element {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-self: center;
    align-self: center;
}

侘寂组件设计

微妙的不完美组件

刻意的缺憾美学

按钮组件

.btn-wabi-sabi {
    background: transparent;
    border: 1px solid #E8E8E8;
    border-radius: 0;
    padding: 16px 32px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: #1A1A1A;
    cursor: pointer;
    transition: all 0.8s ease; /* 缓慢过渡 */
    position: relative;
    overflow: hidden;
}

.btn-wabi-sabi:hover {
    background: #F9F9F9;
    border-color: #C0C0C0;
}

.btn-wabi-sabi::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -100%;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, #8B8B8B, transparent);
    transition: left 1.2s ease;
}

.btn-wabi-sabi:hover::before {
    left: 100%;
}

/* 特殊：印章样式按钮 */
.btn-hanko {
    width: 40px;
    height: 40px;
    background: #CC3333;
    border: none;
    border-radius: 2px;
    color: #FEFEFE;
    font-size: 16px;
    font-weight: bold;
    transform: rotate(-2deg); /* 微妙的倾斜 */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}

卡片组件

.card-zen {
    background: #FEFEFE;
    border: none;
    border-radius: 0;
    padding: 48px 32px;
    margin: 48px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    position: relative;
    max-width: 360px;
}

.card-zen::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: radial-gradient(circle, #E8E8E8 30%, transparent 30%);
    opacity: 0.3;
    transform: rotate(45deg);
}

.card-content {
    writing-mode: horizontal-tb;
    line-height: 2.0;
}

.card-title {
    writing-mode: vertical-rl;
    height: 80px;
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 24px;
    float: right;
    margin-left: 16px;
}

表单组件

.form-zen {
    max-width: 400px;
    margin: 96px auto;
    padding: 48px 0;
}

.input-zen {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #E8E8E8;
    padding: 16px 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #1A1A1A;
    outline: none;
    transition: border-color 1s ease;
}

.input-zen:focus {
    border-bottom-color: #8B8B8B;
}

.input-zen::placeholder {
    color: #C0C0C0;
    font-weight: 200;
}

.label-zen {
    display: block;
    font-size: 12px;
    font-weight: 200;
    color: #8B8B8B;
    margin-bottom: 8px;
    letter-spacing: 0.1em;
    writing-mode: horizontal-tb;
}

墨韵点睛系统

微妙装饰元素

一笔定乾坤的视觉焦点

墨迹效果

.ink-accent {
    position: relative;
}

.ink-accent::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -12px;
    width: 6px;
    height: 60px;
    background: linear-gradient(to bottom, 
        #1A1A1A 0%, 
        #4A4A4A 50%, 
        transparent 100%);
    transform: translateY(-50%) rotate(-3deg);
    opacity: 0.6;
}

.ink-brush-stroke {
    position: relative;
    padding-left: 24px;
}

.ink-brush-stroke::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 40px;
    background: radial-gradient(ellipse 2px 40px, #1A1A1A 0%, transparent 70%);
    transform: translateY(-50%) skew(-5deg);
}

印章样式

.hanko-stamp {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: #CC3333;
    color: #FEFEFE;
    border-radius: 2px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    font-weight: bold;
    transform: rotate(-1deg);
    box-shadow: 1px 1px 3px rgba(204, 51, 51, 0.3);
    margin: 0 8px;
}

.signature-mark {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle, #CC3333 40%, transparent 40%);
    opacity: 0.7;
}

单线条装饰

.zen-divider {
    width: 120px;
    height: 1px;
    background: linear-gradient(to right, transparent, #8B8B8B, transparent);
    margin: 48px 0;
    position: relative;
}

.zen-divider::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    background: #1A1A1A;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.calligraphy-line {
    width: 80px;
    height: 2px;
    background: linear-gradient(45deg, 
        #1A1A1A 0%, 
        #4A4A4A 30%, 
        #8B8B8B 60%, 
        transparent 100%);
    margin: 32px 0;
    transform: rotate(-1deg);
    opacity: 0.8;
}

布局模式

禅意布局系统

深度宁静的空间组织

主页面布局

.page-zen {
    min-height: 100vh;
    background: #FEFEFE;
    display: grid;
    grid-template-columns: 1fr 400px 2fr;
    grid-template-rows: 120px 1fr 80px;
    grid-template-areas: 
        ". header ."
        ". main ."
        ". footer .";
    gap: 0;
}

.header-zen {
    grid-area: header;
    padding: 48px 0;
    border-bottom: 1px solid #E8E8E8;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.main-zen {
    grid-area: main;
    padding: 96px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 96px;
}

.footer-zen {
    grid-area: footer;
    padding: 32px 0;
    border-top: 1px solid #E8E8E8;
    display: flex;
    justify-content: center;
    align-items: center;
}

内容岛屿布局

.content-islands {
    display: flex;
    flex-direction: column;
    gap: 160px; /* 大量垂直留白 */
    padding: 120px 0;
    max-width: 600px;
    margin: 0 auto;
}

.island {
    max-width: 280px;
    align-self: flex-start;
}

.island:nth-child(even) {
    align-self: flex-end;
    text-align: right;
}

.island-accent {
    position: relative;
    padding: 32px;
    background: rgba(248, 248, 248, 0.5);
    margin: 48px 0;
}

.island-accent::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 1px solid #E8E8E8;
    pointer-events: none;
}

导航系统

极简导航

隐于无形的导航美学

.nav-zen {
    position: fixed;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    z-index: 100;
}

.nav-item-zen {
    display: block;
    padding: 16px 8px;
    color: #8B8B8B;
    text-decoration: none;
    font-size: 14px;
    font-weight: 200;
    letter-spacing: 0.1em;
    transition: color 0.8s ease;
    position: relative;
}

.nav-item-zen:hover {
    color: #1A1A1A;
}

.nav-item-zen.active {
    color: #1A1A1A;
}

.nav-item-zen.active::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    width: 2px;
    height: 16px;
    background: #CC3333;
    transform: translateY(-50%);
}

/* 隐藏式主菜单 */
.menu-toggle {
    position: fixed;
    top: 48px;
    right: 48px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 101;
}

.menu-toggle::before,
.menu-toggle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 1px;
    background: #8B8B8B;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
}

.menu-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.menu-toggle.active::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

面包屑导航

.breadcrumb-zen {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 96px;
    font-size: 12px;
    color: #C0C0C0;
}

.breadcrumb-item {
    text-decoration: none;
    color: inherit;
    transition: color 0.6s ease;
}

.breadcrumb-item:hover {
    color: #8B8B8B;
}

.breadcrumb-separator {
    width: 8px;
    height: 1px;
    background: #E8E8E8;
}

动效规范

缓慢禅意动效

如呼吸般自然的过渡

.zen-transition {
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.breathing-animation {
    animation: breathing 4s ease-in-out infinite;
}

@keyframes breathing {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}

.fade-in-zen {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInZen 2s ease-out forwards;
}

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

.ink-flow {
    position: relative;
    overflow: hidden;
}

.ink-flow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(26, 26, 26, 0.1) 50%, 
        transparent 100%);
    animation: inkFlow 3s ease-in-out infinite;
}

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

响应式设计

移动端适配

保持禅意的响应式原则

/* 移动端 */
@media (max-width: 767px) {
    .page-zen {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "main"
            "footer";
        grid-template-rows: auto 1fr auto;
    }
    
    .container-zen {
        padding: 48px 24px;
    }
    
    .content-island {
        max-width: 100%;
        margin: 0;
    }
    
    .vertical-text {
        writing-mode: horizontal-tb;
        height: auto;
    }
    
    .title-zen {
        writing-mode: horizontal-tb;
        height: auto;
        font-size: 20px;
    }
    
    .nav-zen {
        position: static;
        writing-mode: horizontal-tb;
        transform: none;
        display: flex;
        justify-content: center;
        gap: 32px;
        padding: 24px 0;
    }
}

/* 平板端 */
@media (min-width: 768px) and (max-width: 1024px) {
    .page-zen {
        grid-template-columns: 1fr 600px 1fr;
    }
    
    .content-islands {
        max-width: 500px;
        gap: 120px;
    }
}

/* 大屏幕优化 */
@media (min-width: 1400px) {
    .page-zen {
        grid-template-columns: 2fr 400px 3fr;
    }
    
    .container-zen {
        padding: 120px 64px;
    }
    
    .content-islands {
        gap: 200px;
    }
}

可访问性与禅意平衡

无障碍设计

包容性的禅意体验

.accessible-zen {
    /* 确保足够的对比度 */
    color: #1A1A1A;
    background: #FEFEFE;
}

.focus-zen:focus {
    outline: 2px solid #CC3333;
    outline-offset: 4px;
    border-radius: 2px;
}

.skip-to-content {
    position: absolute;
    top: -40px;
    left: 24px;
    background: #1A1A1A;
    color: #FEFEFE;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 2px;
    transition: top 0.3s;
}

.skip-to-content: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;
}

设计原则总结

侘寂核心原则

接受不完美：刻意的非对称和微妙的"缺憾"美
拥抱无常：动态的留白和流动的布局
珍视不完整：给用户想象空间，不过度设计
极度留白：70%以上空白空间，创造"间"的美学
质朴材质：如和纸般的温润质感

禁止事项

❌ 过度装饰和复杂图案
❌ 鲜艳饱和的色彩
❌ 快速或激烈的动画效果
❌ 密集的信息排布
❌ 完全对称的布局

设计检查清单

✅ 留白是否占据70%以上空间？
✅ 色彩是否极度克制？
✅ 是否有适度的不完美感？
✅ 字体是否轻盈简约？
✅ 是否体现了禅意和宁静？
✅ 点睛元素是否恰到好处？

侘寂美学引用：

"侘寂教我们满足于生活中的简朴之美，满足于朴素无华之美，并且在不完整之中找到深邃的意义。"

— Leonard Koren，《侘寂：给设计者、生活家的美学基础》

"真正的简约不是删除装饰，而是到达顶点后的螺旋式下降。"

— 原研哉，日本设计大师

设计禅语：

一期一会 (Ichigo ichie) - 珍惜每一次独特的相遇

間 (Ma) - 空间即是内容，留白即是设计

05-UI设计规范_日式极简风格_Japanese.md 19 KB Permalink History Raw

UI设计规范 - 日式极简风格

项目设计定位

设计理念

目标用户群体

设计创新点

适用场景

最适合的项目类型

目标用户群体

设计优势

色彩系统

侘寂色彩哲学

主色调

辅助色调

点睛色彩（极少使用）

色彩使用原则

留白(Ma)美学系统

核心留白原则

空间比例

留白层级

排版系统

垂直书写美学

主字体系统

字体层级

非对称布局

侘寂组件设计

微妙的不完美组件

按钮组件

卡片组件

表单组件

墨韵点睛系统

微妙装饰元素

墨迹效果

印章样式

单线条装饰

布局模式

禅意布局系统

主页面布局

内容岛屿布局

导航系统

极简导航

面包屑导航

动效规范

缓慢禅意动效

响应式设计

移动端适配

可访问性与禅意平衡

无障碍设计

设计原则总结

侘寂核心原则

禁止事项

设计检查清单

05-UI设计规范_日式极简风格_Japanese.md 19 KB

Permalink History Raw