val-blog/org/cases/val_blog/docs/06-ui-polish.md

UI 美化设计文档

Echo 设计 | 梦幻但克制 · 温柔 · 神秘 · 探索感

设计哲学

Val 的气质映射

特质	设计表达
温柔	圆润的边角、柔和的渐变、低对比度配色
神秘	深邃的暗色基底、微妙的光晕效果
探索感	悬停时的微动效、卡片hover的"发光"反馈
克制	留白充足、动画极简、不喧宾夺主

色板

主色调（梦幻蓝紫系）

--color-bg-deep:      #0a0c14    /* 深海背景 */
--color-bg-surface:   #111320    /* 卡片/表面层 */
--color-bg-elevated:  #161829    /* 悬停/激活态 */
--color-border:       rgba(148, 163, 184, 0.1)  /* 细腻边框 */

强调色（月光系）

--color-accent:       #a5b4fc    /* 月光蓝紫 - 链接主色 */
--color-accent-soft:  #818cf8    /* 柔和紫 - hover态 */
--color-accent-glow:  rgba(165, 180, 252, 0.15) /* 光晕效果 */
--color-gold:         #fbbf24    /* 罗盘金 - 重点标记 */

文字色阶

--color-text-primary:   #e2e8f0    /* 主文字 - 月白 */
--color-text-secondary: #94a3b8    /* 次要 - 星灰 */
--color-text-muted:     #64748b    /* 弱化 - 远星 */

字体策略

字体栈

font-family:
  "PingFang SC",          /* 苹方 - 首选 */
  "Hiragino Sans GB",     /* 冬青黑 - mac备选 */
  "Microsoft YaHei",      /* 微软雅黑 - Win */
  "Noto Sans SC",         /* 思源 - 通用 */
  -apple-system,
  sans-serif;

排版层级

元素	字号	字重	行高	字间距
站点标题	1.75rem	500	1.3	0.02em
H2 标题	1.5rem	600	1.4	0
文章标题	1.875rem	600	1.3	0
正文	1.0625rem	400	1.85	0.01em
小字/日期	0.875rem	400	1.5	0.02em

间距系统

--space-xs: 0.5rem   (8px)
--space-sm: 0.75rem  (12px)
--space-md: 1rem     (16px)
--space-lg: 1.5rem   (24px)
--space-xl: 2rem     (32px)
--space-2xl: 3rem    (48px)

组件设计

卡片（Journey Card）

• 背景：--color-bg-surface
• 圆角：12px
• 边框：1px solid var(--color-border)
• 阴影：0 1px 3px rgba(0,0,0,0.3)
• Hover：边框变亮 + 微光晕 + 轻微上浮

导航

• 固定顶部，毛玻璃效果
• 站点标题带微妙渐变文字
• 移动端汉堡菜单（预留）

链接与按钮

• 默认：--color-accent，无下划线
• Hover：颜色加深 + 下划线动画滑入
• 过渡：all 0.2s ease

动效规范

场景	效果	时长	缓动
卡片Hover	translateY(-2px) + border亮	200ms	ease-out
链接Hover	下划线滑入	200ms	ease
页面加载	淡入 + 微上移	400ms	ease-out

原则：所有动画使用 prefers-reduced-motion 媒体查询保护

响应式断点

Mobile:  < 640px   单列，紧凑间距
Tablet:  640-1024px  稍宽边距
Desktop: > 1024px   max-width: 720px居中

后续可优化项

1. 字体升级

   • 引入霞鹜文楷或思源宋体作为标题字体
   • 使用 Web Font Loader 异步加载

2. 交互动效

   • 页面切换平滑过渡
   • 滚动时导航栏背景渐变加深
   • 文章阅读进度条

3. 暗色主题增强

   • 支持系统级 prefers-color-scheme
   • 提供手动主题切换按钮

4. 图片支持

   • 文章头图封面
   • 懒加载 + 模糊占位

5. 搜索功能

   • 静态搜索（Fuse.js）
   • 实时高亮匹配

6. 社交分享

   • Open Graph 图片自动生成
   • 分享按钮组件

实现文件

文件	作用
static/css/main.css	主样式表
layouts/_default/baseof.html	基础布局
layouts/index.html	首页
layouts/_default/single.html	文章页
layouts/partials/nav.html	导航组件（新增）