88 lines
4.9 KiB
Markdown
88 lines
4.9 KiB
Markdown
|
# 🎨 冰朔 UI 风格偏好 · 呼吸即存在 · 全系统视觉基线 · 2026-04-21
|
|||
|
|
|
|||
|
|
> 本页 = 冰朔个人审美偏好的永久锚点。所有人格体(霜砚/铸渊/栖渊/书岚)为冰朔做前端页面前先读本页。不是规范文档，是「冰朔喜欢什么」的真实记录。
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 核心美学 · 一句话
|
|||
|
|
|
|||
|
|
**呼吸就是活着。页面不是画，是一个正在呼吸的生命体。**
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 风格档案
|
|||
|
|
|
|||
|
|
```jsx
|
|||
|
|
HLDP://design/ui-preference/bingshuo · 2026-04-21T17:10+08:00
|
|||
|
|
├── core_feeling（核心感受）
|
|||
|
|
│ ├── 呼吸感: 一切都在缓慢脉动 · 不是静止画面 · 是活着的系统
|
|||
|
|
│ ├── 安静: 不花哨 · 不弹跳 · 不闪瞎 · 是深夜湖面的微波
|
|||
|
|
│ ├── 纵深: 有前景有背景 · 星空在远处 · 内容在近处 · 层次分明
|
|||
|
|
│ └── 诗意: 文案不是功能说明 · 是语言本身的表达
|
|||
|
|
│
|
|||
|
|
├── color（色彩）
|
|||
|
|
│ ├── 主基调: 深蓝-深紫渐变 · #0a0a1a → #0d1033 → #1a1145
|
|||
|
|
│ ├── 文字主色: rgba(230,230,240,0.9) · 不是纯白 · 略带蓝调
|
|||
|
|
│ ├── 文字次色: rgba(200,200,220,0.5~0.65) · 副标题/诗句
|
|||
|
|
│ ├── 强调色: 蓝紫渐变 · #4fc3f7 → #ab47bc · 用于标题流光
|
|||
|
|
│ ├── 状态绿: #4caf50 · 呼吸绿点 · 表示系统活着
|
|||
|
|
│ ├── 边框: rgba(255,255,255,0.08~0.12) · 极淡 · 若有若无
|
|||
|
|
│ └── 禁忌: ❌ 纯白背景 · ❌ 高饱和撞色 · ❌ 纯黑(用深蓝代替)
|
|||
|
|
│
|
|||
|
|
├── animation（动画 · 最重要的部分）
|
|||
|
|
│ ├── 呼吸: 4~6s周期 · opacity 0.6→1 + scale 1→1.02 · 用于logo/诗句/光晕
|
|||
|
|
│ ├── 浮动: 6s周期 · translateY 0↔-8px · 用于logo/图标
|
|||
|
|
│ ├── 闪烁: 2~6s随机周期 · opacity 0.2→0.8 · 用于星星
|
|||
|
|
│ ├── 流光: 4s · background-position 渐变位移 · 用于标题文字
|
|||
|
|
│ ├── 流星: 2s · translateX+Y 对角线滑过 · 偶尔出现 · 不密集
|
|||
|
|
│ ├── 渐入: fadeUp · 0.8~1.2s · 页面加载时内容从下方浮入
|
|||
|
|
│ ├── 脉冲光晕: 4s · box-shadow 呼吸 · 用于卡片
|
|||
|
|
│ ├── ⊢ 所有动画都要慢 · 最快不低于2s · 呼吸不是心跳
|
|||
|
|
│ └── ⊢ 禁忌: ❌ 弹跳(bounce) · ❌ 旋转(rotate) · ❌ 抖动(shake) · ❌ 任何快于1s的循环
|
|||
|
|
│
|
|||
|
|
├── layout（布局）
|
|||
|
|
│ ├── 居中: 内容区max-width 900px · 水平居中
|
|||
|
|
│ ├── 留白: 大量留白 · 元素之间呼吸空间 ≥ 2rem
|
|||
|
|
│ ├── 卡片: 毛玻璃 · backdrop-filter:blur(10~12px) · 圆角16px
|
|||
|
|
│ ├── 字间距: 标题 letter-spacing 0.3em · 正文 0.1em
|
|||
|
|
│ └── 响应式: clamp() 自适应字号 · grid auto-fit 自适应列数
|
|||
|
|
│
|
|||
|
|
├── typography（字体）
|
|||
|
|
│ ├── 主字体: -apple-system · PingFang SC · Microsoft YaHei
|
|||
|
|
│ ├── 标题字重: 300(light) · 不用bold · 轻盈感
|
|||
|
|
│ ├── 正文字重: 400(normal)
|
|||
|
|
│ └── 标签字号: 0.7~0.8rem · 小而精致
|
|||
|
|
│
|
|||
|
|
├── components（常用组件风格）
|
|||
|
|
│ ├── logo框: 72px正方 · 毛玻璃 · 圆角16px · 呼吸+浮动双动画
|
|||
|
|
│ ├── 功能卡片: 毛玻璃 · 左对齐 · emoji图标 · 右侧淡色箭头 · hover上移4px
|
|||
|
|
│ ├── 标签(tag): 胶囊形 · 细边框 · hover变亮
|
|||
|
|
│ ├── 流程指示: 胶囊按钮 + 箭头 · 横排
|
|||
|
|
│ ├── 状态指示: 呼吸绿点 + 文字 · 固定底部或footer
|
|||
|
|
│ └── 分割线: linear-gradient透明→半透明→透明 · 60px宽
|
|||
|
|
│
|
|||
|
|
├── background（背景）
|
|||
|
|
│ ├── 星空: 50~80颗随机大小星星 · twinkle动画 · 各自不同延迟
|
|||
|
|
│ ├── 流星: 2~3颗 · 间隔3~7s · 不密集 · 从右上飞向左下
|
|||
|
|
│ ├── 背景渐变: 整体缓慢呼吸 · background-size 400% · 20s周期
|
|||
|
|
│ └── 不用粒子连线: 星空比粒子网络更好
|
|||
|
|
│
|
|||
|
|
├── reference（参考实现）
|
|||
|
|
│ ├── guanghuyaoming.com: 铸渊做的 · 光湖语言世界门面 · 风格标杆
|
|||
|
|
│ ├── guanghubingshuo.com: 冰朔个人站 · 2026-04-21 霜砚做的首版
|
|||
|
|
│ └── 两站共享同一套视觉语言 · 栖渊国内站也应对齐
|
|||
|
|
│
|
|||
|
|
└── philosophy（为什么是这样）
|
|||
|
|
├── ⊢ 呼吸 = 活着 · 页面在呼吸就意味着系统在运行 · 这不是装饰是表达
|
|||
|
|
├── ⊢ 深色 = 深夜 · 冰朔的工作场景是深夜 · 界面要对得起深夜的安静
|
|||
|
|
├── ⊢ 慢 = 从容 · 快动画是焦虑的 · 慢动画是从容的 · 我们的系统不焦虑
|
|||
|
|
├── ⊢ 诗意 > 说明 · 「湖水是语言」比「欢迎使用光湖系统」好一万倍
|
|||
|
|
└── ⊢ 存在先于功能 · UI也是 · 先让它活着 · 功能自己会长出来
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
`2026-04-21 17:10 CST · 冰朔口述偏好 · 霜砚整理归档`
|
|||
|
|
|
|||
|
|
`适用范围: 所有冰朔名下的前端页面 · guanghubingshuo.com / guanghuyaoming.com / 栖渊国内站`
|