Skip to content

Latest commit

 

History

History
42 lines (36 loc) · 1.78 KB

File metadata and controls

42 lines (36 loc) · 1.78 KB

DESIGN.md — Tiltmeter

气质与意象

  • 关键词:精密仪器感、信任可视化、工程美学
  • 意象:深夜的校准实验室——深蓝色调中,精密仪表发出柔和的蓝紫色辉光,每一道光线都代表一次验证通过
  • 整体氛围:克制、精确、值得信赖;像 Apple 的芯片发布页——技术之美与极简共存

视觉策略

  • 图形语言:几何线条 + 微光粒子;状态指示用环形进度/脉冲点
  • 卡片:Bento Grid 布局,24px 大圆角,毛玻璃质感
  • 数据可视化:树状图用渐变连线,时间轴用发光节点

配色方案

  • 画布底色:#F5F5F7(Apple 灰白)
  • 暗色模式底色:#1D1D1F
  • 主色:#0071E3(Apple Blue)— 核心行动、信任标识
  • 辅助色:
    • 成功/验证通过:#34C759
    • 警告/待审批:#FF9500
    • 错误/验证失败:#FF3B30
    • 信息/中性:#5856D6
  • 极光光球:淡蓝 rgba(162, 210, 255, 0.4) + 淡紫 rgba(200, 180, 255, 0.3)
  • 文字:主文字 #1D1D1F,副文字 #86868B

字体排版

  • 字体族:-apple-system, 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', sans-serif
  • 标题:700 weight, letter-spacing -0.02em
  • 正文:400 weight, 15-17px
  • 注释:400 weight, 13px, color #86868B

动效与交互

  • 缓动曲线:cubic-bezier(0.25, 1, 0.5, 1)(弹簧感)
  • 按钮 Hover:scale(1.02) + brightness(1.05)
  • 卡片入场:fade-in-up,序列延迟 80ms
  • 状态切换:0.3s 平滑过渡

设计禁忌

  • 不要使用纯黑 #000,用 #1D1D1F
  • 不要使用直角卡片,最小圆角 16px
  • 不要使用描边按钮作为主按钮
  • 不要使用超过 3 种饱和色
  • 不要使用阴影过重(保持轻盈感)